Как сделать ленту в html
Обновлено: 14.05.2024
Сегодняшний ресурс - это легко настраиваемая, гибкая новостная лента. Мы использовали некоторые трюки CSS3 и немного jQuery для создания анимаций, которые влияют только на пользователей настольных компьютеров, тогда как на мобильных устройствах структура более минимальна.
Создание структуры
Мы намотали всю временную шкалу на элемент . Блок .cd-timeline-block представляет собой block содержимого. Мы, наконец, разделили изображение / значок и текстовое содержимое на 2 раздела divs .
Добавление стиля
Мы использовали селектор ::before селектором в абсолютном положении для создания вертикальной линии. Изображения / значки находятся в абсолютном положении, таким образом, было очень легко создать отзывчивую структуру, просто добавив маркер слева к текстовому контенту.
Были созданы 2 анимации вставки, как для изображения / значка, так и для текстового контента, которые видны только для пользователей настольных компьютеров. Чтобы анимация работала, нам пришлось создать 2 класса: .is-hidden , который используется для скрытия по умолчанию всех блоков контента, которые находятся вне области просмотра; При прокрутке пользователя мы добавляем класс .bounce-in к содержимому .cd-timeline-img и .cd-timeline , чтобы сделать элементы видимыми и запускать анимацию.
Обработка событий
Всем читателя блога, доброго времени суток. Сегодня давайте узнаем как с помощью CSS сделать красивые ленты на заголовках (ribbons). Теперь давайте разберёмся для чего нужны эти ленты? Ну как же для чего? :-) В первую очередь — очень удобно для пользователей, данные заголовки будут выделяться, и мимо их тяжело будет пройти, а во вторую очередь, естественно для красоты.
Ну а сейчас, непосредственно, давайте перейдём к лентам.
Для начала нам нужно создать саму оболочку для лент или где будет заголовок — это обычный прямоугольник с отступом по краям padding: 20px
Теперь в этот прямоугольник давайте вставим какой нибудь элемент, например h1:
Ну сейчас к элементу h1 добавим некоторые стили:
Вот, что у нас должно получиться:
Как видите, лента для заголовка уже начала появляться, но и это ещё не всё. Теперь нужно дать ей красивый вид, и делать мы это будем с помощью CSS.
Теперь давайте посмотрим, что получилось:
1. Начинаем с создания двух столбцов
Создание столбцов при помощи CSS всегда влекло за собой определенные трудности. На протяжении длительного времени для выполнения данной задачи широко использовались (и используются) float’ы и / или таблицы, но каждый из этих методов имел (и имеет) свои недостатки.
В свою очередь, Flexbox упрощает этот процесс, обладая рядом таких преимуществ, как:
Давайте начнем работу с создания двух столбцов, один из которых будет занимать 2/3 ширины нашего контейнера, а еще один — 1/3 его часть.
Здесь присутствуют два элемента:
— контейнер columns;
— два дочерних элемента column, один из которых имеет дополнительный класс main-column, который мы используем позже для того, чтобы сделать столбец шире.
Поскольку main-column имеет значение flex равное 2, то этот столбец займет в два раза больше места, чем второй.
Добавим немного визуального оформления и, в итоге, получим:
Кликните для просмотра в действии
2. Делаем каждый столбец flexbox-контейнером
Каждый из двух столбцов будет содержать несколько вертикально расположенных статей, поэтому из этих двух элементов мы, в свою очередь, также должны сделать flexbox-контейнеры.
Итак, нам необходимо, чтобы статьи:
— располагались вертикально внутри столбца-контейнера;
— занимали все доступное место.
Правило flex-direction: column, указанное для контейнера, вместе с правилом flex: 1, указанным для дочернего элемента, позволяет статье заполнить все свободное место по вертикали, при этом высота первых двух столбцов останется неизменной.
Кликните для просмотра в действии
3. Делаем контейнер из статьи
Теперь, чтобы еще больше расширить наши возможности, давайте представим каждую статью в виде flexbox-контейнера. Каждый такой контейнер будет содержать:
— заголовок;
— параграф;
— информационную панель с именем автора и количеством комментариев;
— какую-нибудь адаптивную картинку.
А вот и сам код:
Элементы внутри статьи расположены вертикально благодаря использованию правила flex-direction: column.
Также мы применили свойство flex: 1 к элементу article-content, тем самым растянув его на все свободное место и прижав article-info к низу. Высота столбцов в этом случае не имеет значения.
Кликните для просмотра в действии
4. Добавляем несколько вложенных столбцов
На самом деле, нам нужно, чтобы левый столбец включал в себя еще несколько столбцов. Поэтому нам необходимо заменить второй элемент, отвечающий за статью, контейнером columns, который мы использовали ранее.
Поскольку мы хотим, чтобы первый вложенный столбец был шире, добавим к элементу класс nested-column, а в CSS укажем:
Теперь этот столбец будет вдвое шире второго.
Кликните для просмотра в действии
5. Делаем первую статью с горизонтальным лейаутом
Первая статья у нас на самом деле большая. Дабы эффективно использовать место на экране монитора, давайте изменим ее ориентацию на горизонтальную.
Свойство order в данном случае играет большую роль, поскольку оно позволяет изменять очередность HTML-элементов без изменения HTML-разметки. В действительности, article-image в коде идет перед элементом article-body, но ведет себя так, будто стоит после него.
Кликните для просмотра в действии
6. Делаем адаптивный лейаут
Теперь все выглядит так, как мы хотели, хотя и немного сплющено. Давайте исправим это, добавив нашему лейауту гибкости.
Одной из замечательных вещей в Flexbox является то, что достаточно удалить правило display: flex в контейнере для того, чтобы полостью отключить его (Flexbox), в то время, как остальные его свойства (такие, как align-items или flex) останутся рабочими.
В результате, мы можем активировать адаптивный лейаут, задействовав Flexbox только тогда, когда в этом будет необходимость.
Вот и все! На экранах с маленьким разрешением все статьи будут располагаться друг над другом, а на экранах с разрешением свыше 800 пикселей — в два столбца.
7. Добавляем завершающие штрихи
Для того, чтобы лейаут выглядел более привлекательно на больших экранах, давайте добавим кое-какие CSS-твики:
Содержимое первой статьи выровнено по горизонтали: текст расположен по левой стороне, а картинка — по правой. Также, главный столбец теперь стал шире (75%). То же самое касается и вложенного столбца (66%).
А вот и финальный результат!
Кликните для просмотра в действии
Вывод
Теперь вы и сами видите, что использовать Flexbox в своих проектах можно даже не вникая во все его тонкости, и созданный лейаут — наглядный тому пример. По крайней мере, автор очень надеется на это.
Привет друзья! Сегодня хочу показать, как можно сделать угловую ленточку на своем сайте или отдельном блоке. Наша ленточка будет реализована без использования различных скриптов или картинок, а только средствами CSS и HTML. Мы с легкостью сможем менять надпись на ленте, цвет шрифта и цвет самой ленты.
Для начала нам понадобится html-разметка, которая будет выводить нашу ленту в окне браузера и размещается данный код после открывающего или перед закрывающим тегом
Читайте также: