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

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

Макет CSS Flexbox против макета CSS Grid

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

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

Создайте свой загрузчик CSS только с одним div

От автора: да, еще один пост о загрузчиках CSS, но на этот раз вы создадите загрузчик! В этой статье я поделюсь с вами несколькими приемами, которые я использую при создании своих загрузчиков. Существует множество техник создания точек загрузки. Я остановлюсь на своем любимом — radial-gradient и фоновой анимации. Что ж, еще один скучный урок, в котором у нас будет куча ...

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

В добрый путь, Tailwind CSS

От автора: с годами CSS-фреймворки стали невероятно распространенными в веб-дизайне: эстетика Google Material Design постепенно проявляется в Сети, а библиотека плагинов и тем Bootstrap становится популярной по умолчанию. Хорошая новость в том, что времена, когда страницы выглядели так: … давно прошли, отчасти благодаря фреймворкам CSS. Но, как и многие другие люди, вы можете спросить, что я могу использовать, что еще ...

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

Меньше абсолютного позиционирования с современным CSS

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

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

Псевдоэлементы before и after в CSS

От автора: полагаю, многим из вас знакомы псевдоэлементы, которые можно получить и стилизовать с помощью before и after в CSS. Часто их используют для оформления списков, элементов меню на списках, цитат и т.д. В этом уроке будет показан еще один интересный вариант использования псевдоэлементов, который можно применить для «битых» изображений. Читайте нас в Telegram, VK, Яндекс.Дзен

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

Единицы измерения контейнерных запросов CSS

От автора: несколько дней назад я увидел твит Мириам Сюзанн о поддержке единиц измерения запросов CSS. Первоначально это было предложено Уной Кравец на Github. Я не мог не поэкспериментировать с ними и посмотреть, как мы можем получить еще больше преимуществ от контейнерных запросов CSS. Я постараюсь объяснить, как работает каждая из единиц, и где мы можем их использовать, чтобы улучшить ...

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

Функция CSS attr и tooltip без JS

От автора: в данном уроке вы познакомитесь с функцией CSS attr(), которая позволяет получить значение атрибута выбранного элемента и использовать это значение в таблице стилей. В качестве примера практического применения данной возможности будет показана реализация всплывающей подсказки tooltip без JS. Читайте нас в Telegram, VK, Яндекс.Дзен

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

Библиотека MoreToggles для Checkbox

От автора: одним из элементов форм, которые стилизовать достаточно проблематично, являются чекбоксы. В этом уроке вы познакомитесь с замечательной библиотекой MoreToggles.css, которая поможет решить данную проблему. Библиотека использует только CSS и сделает ваши чекбоксы стильными, предложив более десяти вариантов самых разных оформлений. Читайте нас в Telegram, VK, Яндекс.Дзен

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

7 полезных советов по CSS для улучшения ваших навыков

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

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

Несколько нюансов использования пользовательских свойств

От автора: в последнее время я заметил некую проблему при использовании пользовательских свойств, которая сбивает людей с толку, включая и меня, поэтому я постараюсь описать ее. Добавим в CSS пару пользовательских свойств: html { --color-1: red; --color-2: blue; } Давайте сразу воспользуемся ими, чтобы сделать фоновый градиент: html { --color-1: red; --color-2: blue; --bg: linear-gradient(to right, var(--color-1), var(--color-2)); } Теперь ...

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