От автора: многие разработчики используют несколько семейств шрифтов и размеров шрифта, чтобы лучше представить веб-страницу. Например, разработчик может использовать шрифт Bold Comic Sans для заголовков и шрифт Roboto для текста. Однако из-за этого ваш веб-сайт может выглядеть неаккуратным, поскольку многие браузеры не поддерживают все шрифты. Свойство CSS font-size-adjust поможет избежать такой ситуации, сделав размер шрифта автоматически настраиваемым. CSS font-size-adjust принимает ...

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

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

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

От автора: данная статья предлагает руководство ко всему, что вам нужно знать о центрировании в CSS. Горизонтальное центрирование 1. Встроенные элементы text-align Для центрирования встроенного элемента, такого как ссылка, span или изображение, все, что вам нужно, это text-align: center. <div class="desk"> <span class="plate"></span> </div> .desk { text-align: center; } Для нескольких встроенных элементов процесс аналогичен. Это возможно при использовании text-align: ...

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

От автора: этот пост предназначен для людей, которые никогда не играли с красным квадратом в CSS. Собственно говоря, вот красный квадрат: <div class="box"></div> .box { width: 100px; height: 100px; background-color: red; } Без лишних слов, приступим. CSS переходы Анимация в CSS выполняется с помощью transitions и animations. Переходы используются для менее сложных анимаций, в основном для перехода от одного этапа ...

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

От автора: когда вы обрезаете элемент, используя свойство clip-path, обрезанная область становится невидимой. Если вместо этого вы хотите сделать часть изображения непрозрачной или применить к ней какой-либо другой эффект, вам необходимо использовать маску. В этом посте объясняется, как применять свойство CSS mask-image, которое позволяет указать изображение для использования в качестве слоя маски. Это дает вам три варианта. Вы можете использовать ...

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