Главная » Архив меток: CSS (страница 13)

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

Поиск первопричины ошибки в CSS

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

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

3 вещи о переменных CSS, которые вы могли не знать

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

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

Центрирование в CSS

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

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

Min, max и clamp CSS

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

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

Безумие на чистом HTML + CSS

Играми на «чистом CSS» (т.е. без JS) нас уже давно трудно удивить. Но британскому дизайнеру Джейми Коултеру, пожалуй, удалось. Его недавняя работа в Codepen — полноценный квест с сюжетом, в котором игроку нужно выбраться из мрачного подвала то ли больницы, то ли лаборатории, где накануне произошло что-то ужасное. И заодно узнать шокирующую разгадку… в общем, то, что надо на Хэллоуин! ...

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

Введение в CSS-анимацию

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

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

Как использовать маски в CSS

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

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

Эффект свечения для текста на CSS

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

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

Как использовать обрезку в CSS

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

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

Фильтр Drop-Shadow для изображений

От автора: сегодня сложно представить себе современный сайт, на котором бы не использовались тени. Благодаря теням можно обратить внимание на тот или иной элемент, сделать его объемным и более привлекательным. Для работы с тенями используется свойство box-shadow. Но что если тень необходимо задать для изображения? При этом данное изображение является прозрачным, к примеру, это PNG. Полагаю, вы знаете, что box-shadow ...

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