От автора: когда дело доходит до структурирования CSS, нет недостатка в различных соглашениях об именах, методологиях и архитектурах. Будь то BEM, OOCSS, SMACSS, ITCSS или CUBE CSS — за последние годы появилось множество различных подходов к управлению модульным CSS. Некоторые предлагают стратегии, как разбить CSS на более мелкие, более управляемые части, в то время как другие больше сосредотачиваются на соглашениях ...

От автора: давайте изучим четыре тонких текстовых эффекта CSS, которые могут добавить динамичности вашему сайту. Итак, без лишних слов, давайте начнем. 1. Вибрация текста при наведении Это тонкий эффект, с помощью которого мы можем задать вибрацию отдельных символов при наведении. .vibration span{ transition: all 500ms; color: rgba(255, 255, 255, 0.8); display: inline-block; margin-right: 10px; text-shadow: 1px 2px 3px #999; } ...

От автора: когда мы очень сосредоточены на работе над веб-проектом, мы часто забываем или делаем некоторые ошибки, которые могут привести к неправильному коду CSS. Я люблю называть это «ошибками на автопилоте». Ошибки такого рода, которые заставляют нас спрашивать себя: «Ой, почему я это сделал?», и их решение не займет много времени, только если вы их изначально нашли. Я спросил в ...

От автора: вы когда-нибудь боролись с вертикальным выравниванием содержимого интерактивных элементов? Вы не одиноки. Многие из сталкивались с этим. В этой статье мы рассмотрим, как центрировать содержимое кнопок и элементов ввода с помощью line-height, padding и flexbox. Итак, какова наша цель? Мы хотим построить систему, в которой: содержимое кнопок и элементов ввода идеально выровнено кнопки и элементы ввода имеют одинаковую ...

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

От автора: у вас не так много контроля над тем, насколько большими или длинными будут штрихи или пробелы у границ border. И вы, конечно же, не можете придать штрихам наклон, затухание или анимацию! Однако вы можете сделать это с помощью некоторых уловок. Вы можете создать обычную CSS border пунктирной или точечной. Например: .box { border: 1px dashed black; border: 3px ...

От автора: если вы знакомы с CSS, вы, вероятно, знаете об свойстве box-shadow все. Но знаете ли вы, что существует фильтр CSS drop-shadow, который делает нечто подобное? Например, box-shadow, мы можем передать значения для x-offset, y-offset, радиуса размытия и цвета. Пример кода: .my-element { filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2)); } В отличие от этого box-shadow, он не ...

От автора: благодаря спецификации Медиа-запросов уровня 5, теперь есть действительно простой способ сопоставить цветовую схему веб-сайта с тем, что пользователь выбрал в своей операционной системе в качестве предпочтительного внешнего вида. Благодаря новому медиа-запросу, который называется prefers-color-scheme, теперь вы можете адаптировать и учитывать, хочу ли я отображать контент в dark или light режимах. Это действительно просто работает в сочетании с пользовательскими ...

От автора: я встречал много статей и комментариев, в которых говорилось, что пришло время заменить сетку фреймворка на CSS Grid. Я не могу полностью согласиться с этим. Сетка фреймворка — это «пакет» служебных классов, который можно использовать в любом проекте для распределения элементов по (адаптивным) столбцам и строкам. Он может включать сотни строк кода или всего несколько правил. Это может ...

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