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

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

Пользовательские стили элементов select на CSS

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

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

Моя структура CSS

От автора: когда дело доходит до структурирования 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 на автопилоте

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

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

Вертикальное выравнивание текста в кнопках и элементах ввода

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

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

Оптимизация CSS для более быстрой загрузки страницы

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

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

Больше контроля над границами CSS с помощью background-image

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

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

Современные сеточные решения CSS для распространенных проблем макета

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

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

Drop-Shadow: недооцененный фильтр CSS

От автора: если вы знакомы с 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, он не ...

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

Подробное рассмотрение свойств Flex

От автора: вы когда-нибудь задумывались о том, как работает свойство CSS flex? Это сокращение от flex-grow, flex-shrink и flex-basis. Наиболее распространенный вариант использования, который я вижу в Интернете — flex: 1. Это возможность flex-элемента расширяться и заполнять все доступное пространство. В этой статье я подробно рассмотрю сокращенные и полные свойства и объясню, когда и для чего их использовать, с практическими ...

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