Красивое оформление новостей html

7 интересных способов отображения анонсов статей сайта

От автора: анонсы статей сайта могут играть важную роль в UX. Анонсы дают пользователю понять, что будет внутри статьи, заманивая прочесть весь пост. Во многих CMS, например, WordPress есть возможность создавать пользовательские анонсы (или отображать Х число слов с начала статьи), которая встроена в ядро. Однако, когда речь заходит о стиле и функциональности, про анонсы часто забывают. Поэтому мы собрали коллекцию уникальных способов, которые помогут превратить анонсы из простого текста во что-то большее. Примеры ниже улучшают внешний вид анонсов, а некоторые даже добавляют функционал.

Табы анонсов

Пример с навигацией по вкладкам отлично подходит, когда пространство ограничено. Представьте, что вы показываете посты из определенных категорий. Сейчас на одной вкладке отображается один пост. Но если немного напрячь извилины и покодить, каждая вкладка может содержать ТОП-5 статей из каждой категории.

Скрол для отображения полной статьи

Сейчас наблюдается тренд вставлять анонс на страницу статьи. Ниже представлен пример, в котором анонс отображается после загрузки страницы. Вся статья раскрывается при прокрутке страницы вниз. В этом конкретном случае вьюпорт пользователя определяется через JS и используется для отображения статьи в определенной точке во время скрола. Это позволяет использовать некоторые необычные эффекты.

Онлайн курс «Веб-разработчик с нуля»

Изучите курс и разработайте онлайн-систему для администрирования кинозалов, сеансов и предварительного бронирования билетов

Вы научитесь верстать сайты на HTML и CSS, изучите JavaScript. Сможете разрабатывать на PHP серверную часть сайта — и сделаете первые проекты для портфолио.

Все в карточке

Контент карточки стали крайне популярны для отображения списка статей. Благодаря умному проектированию, они могут быть хорошо организованными и компактными. Этот пример интересен тем, что вместо ссылки на отдельную страницу с полной статьей карточка позволяет читать весь пост внутри того же контейнера. Полоса прокрутки делает это еще удобнее. Возможно, это лучший пример для краткого контента.

CSS раскрытие

Правильное изображение абсолютно точно может подсказать читателям тему статьи. Если ваш сайт сосредоточен на избранных изображениях, этот пример точно для вас. С помощью чистого CSS анонс выезжает при наведении курсора на изображение/заголовок карточки. Этот пример не подходит для всех сайтов, однако в сочетании с отличной графикой может придать сайту немного интерактивности.

Раскрытие перспективы

Этот пример – другой подход к раскрытию контента по наведению курсора. В отличие от многоколоночного макета карточек, здесь макет напоминает более традиционный блог. Его плюс в том, что можно писать длинные заголовки, а также использовать анонсы разной длины.

Полноэкранное интро

Этот пример нацелен на страницу статьи и дает полный экран для показа заголовка, анонса и изображения. Прокрутка вниз раскрывает всю статью. Это сделает длинный контент симпатичнее.

Быть в центре внимания

На первый взгляд анонсы ниже хорошо выглядят. Но магия начинается, если навести на статью курсор. Выбранный контейнер статьи расширяется, а темный фон приглушает другие блоки. Замечательная техника для выделения контента.

Больше чем слова

Примеры выше подтверждают, что анонсы не обязаны быть скучными. На деле, они могут стать ресурсом UX и общего дизайна. Немного креативного мышления может добавить пару дополнительных слоев интерактивности и побудить пользователей задержаться на сайте.

Автор: Eric Karkovack

Онлайн курс «Веб-разработчик с нуля»

Изучите курс и разработайте онлайн-систему для администрирования кинозалов, сеансов и предварительного бронирования билетов

Вы научитесь верстать сайты на HTML и CSS, изучите JavaScript. Сможете разрабатывать на PHP серверную часть сайта — и сделаете первые проекты для портфолио.

Редакция: Команда webformyself.

Источник

Адаптивная сетка для новостных блоков

Фотографии в блоках имеют одинаковый размер. По причине того, что обычно все добавляют разные по формату картинки — лишнее просто отрезается.

Кнопка «подробнее» всегда находится на одном уровне у всех блоков в строке

Решение основано на css-свойстве display: grid

Пример:

Название новости

Еще текст статьи или новости

И еще текст статьи или новости, который не умещается на одной строчке

Название новости

Название новости, которое не умещается в одну строку

Еще текст статьи или новости

Название новости

Название новости

Еще текст статьи или новости

И еще текст статьи или новости

Название новости

HTML:

Название

Название

CSS:

Стили кнопки «подробнее» взяты из темы: «Оформление кнопок на CSS». При желании можно выбрать другие или использовать свои.

Смотрите также:

Мозайка изображений или контента

jQuery плагин для выравнивая фотографий или другого контента по высоте при сохранении пропорций

Уголки и рамки на CSS

Варианты оформления уголков и рамок у информационных блоков на CSS

Анимированные рамки для блоков на CSS

Несколько вариантов оформления бордюров с анимационными эффектами

Добавить комментарий:

Комментарии:

Кстати говоря пример который приведен с css не совпадает. Изначально стоит 4fr который подразумевает 4 колонки.

Как ни странно с этого сайта много что юзаю, ставиться легко, а вот эту штуку не могу запилить. Не привязываются свойства. Сам блокнотик ругается, да и в браузере не привязывается. В частности начинается с grid-template-columns: 1fr 1fr 1fr 1fr; Пишет некорректное значение свойства.

Почему не корректное?

Хммм крутил вертел, не сразу полоски увидел которые копировались из кода css. Начал потихоньку оживлять. Раньше такого не было.

С grid был не очень знаком, довольно интересная вещь. Но в этом примере у меня почему-то дублируется все. Ставишь 1fr 1fr их в оконцовке 4 получается. Если брать пример разметки именно отсюда. Пробовал и чистые новые документы создавать, бесполезно уже как часа 3 репу чешу.

Как и полагалось я тут сам решил наворотить.На div поменять все это и т.д. Не знаю как это работает, проверяю вручную просто никак не получается. Копирую отсюда заново спустя какое то время, логику понимаю и т.д. Все развернулось на 3 столбца. Сайт огонь!

Источник

Adding Recent News Boxes to Your Website

One of the most common components to any website is a section that displays a number of your most recent news articles. This helps keep your users engaged and provides the necessary real estate to showcase featured content.

Of course, there are multiple ways to display this type of content, from a vertical list to minimal textual information. An additional way to display recent news is through the use of a box and grid based system. Using this method, you can create the needed space to include a news entry’s featured image, the article’s posting date, and it’s title.

In some designs, it’s important to keep the information displayed to a minimum. Showing a date and an entry’s title is often the only key information needed. Additionally, images tend to drive better click-through-rates and so it’s generally a good idea to showcase a featured image if possible. With this in mind, a simple box container system can accommodate these aspects to a recent news article.

Below is the HTML, CSS, and JavaScript required.

Step 1 — recent-news-boxes.html

Copy and paste the code below into recent-news-boxes.html

Step 2 — recent-news-boxes.css

Download the CSS below and include it in your web page

Step 3 — Add the includes below to your web page

In this tutorial we showed you how to create a section showcasing a number of featured news articles, each contained in it’s own box.

Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

RELATED POSTS

Источник

How To Add a News and Alerts Section to Your Website

OK, so it’s probably not a shocker. but we like flashy headlines as much as the next developer.

News is important. That’s why you probably have an entire page on your site dedicated to it, where visitors can see all your activity. But when someone hits your homepage, it’s helpful to feature a bite-sized set of entries. This can be done by creating a shorter, more compact section that features your news and alerts in one place.

It’s not that different from the front page of a newspaper, which gives you the latest-breaking stories with the option to flip to other pages to read more. Remember newspapers?

In this tutorial, we’ll show you how to build a news and alerts section in a neat grid system – perfect for living anywhere on your website. You can list them side by side using Bootstrap columns, so your visitors can peruse the latest headlines while getting updated on critical issues. You can also add images and icons to help your headlines jump off the page and hook your reader in the right manner. We’ve got an example below, but you can get creative with how you display it.

The difference between «news» and «alerts»

Generally speaking, your news can behave a lot like your blog (and in some cases, might even be your blog). The latest articles can be displayed in attractive, well-organized managers that provide a great user experience. The difference is in how you’re engaging with your audience around the nature of your news. Maybe you’re featuring things like press releases or updated product features, but in truth, «news» is whatever your organization feels is «newsworthy.»

Alerts are a little different, as they tend to connote a sense of urgency. With alerts, you might want your audience to take action due to an event or even a crisis – things like road closures or service interruptions. In our COVID-19 series, we showed you how to build a customizable alert bar for your website, so you can keep your customers informed during an emergency like a pandemic (hopefully that’s a rare occurrence).

Alerts are still news, but with a much stronger spotlight. To that end, you can also use tagging or categories to distinguish between the two versus having dedicated pages. That said, for some organizations, subscribing to alert feeds or services might require an independent page or manager, so it’s really driven by your needs.

With your website, you can own your news and alerts without relying solely on other channels. Sure, they provide the distribution – but if you’re feeding your SEO the right way, you can really optimize the performance of your news section and drive greater traffic and awareness. Better still, you can integrate with those outside channels to expand your reach.

Extra, extra – we’ve got the code to bring this life! Keep reading.

Getting Started

Since we’re using Bootstrap to build our section, go ahead and copy and paste the links below in the head section of your project’s HTML file:

HTML

In the HTML code below, we have a main section to house both the news and the alerts. We used the classname .section—news to make it more identifiable and easily select in the CSS file to style it. It is using the Bootstrap grid elements and columns which makes it easier to adjust their width. Both the news and the articles columns are half the width of the section. In smaller screens, the columns take up the full width. We do this by giving each column div a classname of .col-lg-6 .col-12 . In Bootstrap, all divs are divided into 12 columns so col-6 spans 6 of 12 columns making up half the width and col-12 spans 12 of 12 columns making up the full width.

The news and alerts rows are made up of div elements with a classname of .box-news . They’re structurally the same except the news rows have an additional img element to display images. Copy and paste the code below in your project:

CSS

Since most of the layout adjustment and spacing was done via Bootstrap’s built-in classes used in the HTML file, we set properties such as colors, font sizes, and link styling via CSS. Feel free to change the color and the styling of the fonts to match your website’s branding:

And there it is! Check out the JSFiddle below to see the demo before committing to its use:

Источник