Главная » Архив меток: CSS 3

Архив меток: CSS 3

Tailwind CSS: это Bootstrap завтрашнего дня?

От автора: наверное, вам пока мало что известно о Tailwind CSS. Мы переживаем ренессанс удивительных веб-платформ и адаптивного дизайна. Адаптивные пользовательские интерфейсы в основном реализуются с помощью таких библиотек, как Bootstrap, Foundation, Bulma или старых добрых медиа-запросов. Мы с легкостью использовали эти наборы пользовательского интерфейса для реализации директив, чтобы добиться точного пользовательского интерфейса и надлежащего отклика при меньшем количестве кода. ...

Читать далее »

Относительные размеры с помощью единиц EM

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

Читать далее »

Вам просто нужно знать эти свойства, чтобы полюбить CSS

От автора: позиционирование CSS и HTML может быть настоящей головной болью, когда вы новичок в разработке веб-интерфейса. Но в этом посте я собираюсь научить вас тому, как решить большинство проблем позиционирования. Вам нужно знать только эти 3 свойства CSS. Я разработчик с более чем 3-летним опытом работы. Когда я учился, я думал то же, что думаете сейчас вы. Потом я ...

Читать далее »

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

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

Читать далее »

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

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

Читать далее »

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

От автора: небольшая хитрость написания стиля для наведения курсора CSS дает возможность выделять состояния, а также выбрать элементы одного уровня для элемента, на который наведен курсор. Эффект представляет собой смесь двух эффектов. Суть эффекта: Масштабирование элемента, на который наведен курсор Затенение его одноуровневых элементов See the Pen wbBzxr by matroskin8 (@matroskin8) on CodePen. Состояния наведения традиционно оказывают влияние на элемент, ...

Читать далее »

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

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

Читать далее »

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

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

Читать далее »

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

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

Читать далее »

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

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

Читать далее »