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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Скрытая сила text-align CSS

От автора: я хотел бы рассмотреть некоторые примеры выравнивания текста с помощью text-align CSS, так как многие из нас, включая и меня, могут даже не подумать о подобных вещах. Прежде чем рассказать о приемах, которые я собираюсь использовать, я бы хотел сначала рассмотреть способы, с помощью которых мы можем выравнивать элемент. Вот те, которыми пользуюсь я: Flexbox Отступ auto Позиционирование ...

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

Уроки CSSbattle

В начале апреля появилась затягивающая и познавательная онлайн-игра для верстальщиков — CSSbattle.dev. Вашего покорного слугу угораздило «влипнуть» в нее практически с самого начала (и даже пару раз какое-то время побыть в самом топе:). Это был интересный и поучительный опыт, которым хочется поделиться. Придумали и реализовали эту игру два друга-тёзки из Индии, фронтендер Кушагра Гур и дизайнер Кушагра Агарвал. Жанр таких развлекательных состязаний называют «code golf»: как в гольфе надо закатить мяч в лунку ...

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

Убрать var CSS из :root может оказаться хорошей идеей

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

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

Крутое использование псевдоэлементов CSS ::before и ::after

От автора: я должен признаться: мне нравятся псевдо-элементы CSS ::before и ::after. Они похожи на пару приспешников в каком-то модном приключении. В 3 раза больше силы. В 3 раза больше стилей. В 3 раза больше удивительные визуальных эффектов, которые вы можете создать. Вы никогда не окажетесь в одиночестве — потому что везде, где был один, теперь будут трое Что такое ...

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