Верстка \ CSS 3

Создание компонента фильтра данных на чистом CSS

От автора: в этом руководстве мы узнаем о создании компонента фильтра данных на чистом CSS, для которого не требуется JavaScript. Мы будем использовать простую разметку, некоторые элементы управления формой и некоторые действительно интересные селекторы CSS, которые вы, возможно, раньше не использовали.

Продолжить чтение

Верстка \ CSS 3

CSS Grid - обязательный инструмент для современной верстки

От автора: привет, друзья! В данной статье поговорим про последнее глобальное новшество в верстке — CSS Grid Layout. Оно обладает действительно фантастическими возможностями и позволяет делать то, что раньше в таблице каскадных стилей сделать было просто невозможно. Давайте сегодня разберем, что такое CSS Grid, рассмотрим его основные преимущества и функционал.

Продолжить чтение

Верстка \ CSS 3

Затенение элементов при наведении курсора с CSS

От автора: небольшая хитрость написания стиля для наведения курсора CSS дает возможность выделять состояния, а также выбрать элементы одного уровня для элемента, на который наведен курсор. Эффект представляет собой смесь двух эффектов.

Продолжить чтение

Верстка \ CSS 3

Новости и демо-версии CSS Subgrid

От автора: пару недель назад я выступал на Frontend NE в Ньюкасле, большая часть моего выступления была посвящена тому, что будет содержать функция Subgrid CSS из Grid Level 2. Не имея готовой реализации для этого выступления, я смоделировал кучу демо-версий, используя DevTools.

Продолжить чтение

Верстка \ CSS 3

CSS эффекты для лендингов

От автора: в предлагаемом уроке вы найдете парочку симпатичных CSS-эффектов для лендингов. Данные эффекты не обязательно использовать исключительно для одностраничных сайтов, их можно использовать для любых других сайтов в случае, если вы хотите красиво оформить заголовок на странице.

Продолжить чтение

Верстка \ CSS 3

CSS masonry с помощью flexbox, :nth-child() и order

От автора: на первый взгляд создать макет masonry с помощью flexbox довольно просто; все, что вам нужно сделать, это установить для flex-flow — column wrap, и вуаля, у вас есть макет masonry. Что-то вроде того. Проблема этого подхода заключается в том, что он создает сетку с визуально перетасованным и непонятным порядком. Элементы будут (без ведома пользователя) отображаться сверху вниз, и кто-то, анализирующий сетку слева направо, будет читать поля в произвольном порядке, например, 1, 3, 6, 2, 4, 7, 8, 5 и так далее, и тому подобное.

Продолжить чтение

Верстка \ CSS 3

Эффект слайда для изображения на CSS

От автора: в этом видеоуроке показано, как можно реализовать эффект слайда для изображения, используя возможности CSS3, без сторонних библиотек и скриптов. По результатам урока вы узнаете, как создаются такие эффекты и сможете попробовать реализовать похожее поведение в собственных проектах.

Продолжить чтение

Верстка \ CSS 3

Реализация Loader при помощи CSS

От автора: в этом видеоуроке показан один из вариантов реализации загрузчика на сайт. Особенность loader-а данного урока в том, что для создания loader-а не используется изображения, а вся его работа заключается в добавлении анимаций и трансформаций для декоративных элементов.

Продолжить чтение

Верстка \ CSS 3

Анимированный фон для текста при помощи CSS

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

Продолжить чтение

Верстка \ CSS 3

Следуйте этим советам, чтобы стать суперзвездой CSS после его изучения

От автора: CSS (Cascading Style Sheets) — одна из основных технологий, используемых для создания веб-страниц. Поскольку это ЕДИНСТВЕННЫЙ язык таблиц стилей, который могут понять браузеры, очень важным является глубокое изучение CSS.

Продолжить чтение