От автора: в этом фрагменте я хочу поделиться с вами тем, что я делаю при изменении размеров элементов в DevTools браузера. Предположим, вы реализуете дизайн в HTML и CSS и хотите поэкспериментировать с шириной и высотой иконки. Учтите следующее: .icon { --size: 32px; width: var(--size); height: var(--size); } В DevTools браузера вы можете изменить значение переменной —size, и это повлияет ...

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

От автора: итак, представьте себе эту сцену, мы на технической конференции в вашем родном городе, и к вам подходит странный разработчик (это я), я говорю вам. Эй, ваш CSS реактивный? Вы можете подумать примерно следующее: «Должен ли я ответить на этот вопрос? Будет ли долгая пауза неловкой. Что такое реактивный? Зачем нам делать CSS реактивным? И наконец … Эй, не ...

От автора: современный CSS предоставляет нам ряд свойств для создания пользовательских стилей элемента select, которые имеют почти идентичный начальный вид для одиночных, множественных и отключенных элементов select в популярных браузерах. Несколько свойств и методов, которые будет использовать наше решение: clip-path для создания настраиваемой стрелки раскрывающегося списка макет сетки 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. Я люблю называть это «ошибками на автопилоте». Ошибки такого рода, которые заставляют нас спрашивать себя: «Ой, почему я это сделал?», и их решение не займет много времени, только если вы их изначально нашли. Я спросил в ...

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

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

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