Перевод первой части статьи «15 Advanced CSS Techniques To Master In 2021».
CSS используется для описания того, как HTML-элементы должны быть представлены на веб-странице. Но CSS — это не только цвета и позиционирование элементов, это также анимации и прочие вещи, делающие ваши веб-страницы более привлекательными.
Не удивительно, что разработчики и веб-дизайнеры интересуются продвинутыми приемами использования CSS и пытаются изобретать собственные. В этой статье вы найдете несколько таких приемов, которые наверняка пригодятся вам при создании современных сайтов.
1. Замощение фона
В CSS есть много интересных приемов использования background-свойств. К сожалению, разработчики редко ими пользуются. Например, замощение фона по-прежнему не слишком распространено.
Свойство background-repeat определяет, как должен повторяться рисунок фона. Это свойство используется в связке со свойством background-image. Мы можем повторять рисунок по горизонтали, по вертикали или по обеим осям одновременно. Ну, или вообще не повторять.
По умолчанию background-image повторяется и по горизонтали, и по вертикали.
Синтаксис:
background-repeat: value;
Значения свойства:
repeat. Изображение повторяется и по вертикали, и по горизонтали.repeat-x. Фоновое изображение повторяется только по горизонтали.repeat-y. Фоновое изображение повторяется только по вертикали.space. Изображение повторяется столько раз, чтобы полностью заполнить область, при этом изображение, которое не влезло целиком, не обрезается. Оставшееся незакрытое пространство равномерно распределяется между изображениями.round. Фоновое изображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области фона, не обрезая изображение. Если покрыть заданную область полностью не удается, каждое из изображений растягивается.no-repeat. Фоновый рисунок не повторяется.initial. Устанавливает значение по умолчанию для свойства.
Пример CSS:
body {
background-image: url("images.png");
background-repeat: repeat;
}
HTML-код:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>background-repeat property</title>
<link href="repeatCase.css" rel="stylesheet">
</head>
<body>
<h2>background-repeat: repeat; </h2>
<div id="repeat"></div>
<h2>background-repeat: repeat-x;</h2>
<div id="repeat-x"></div>
<h2>background-repeat: repeat-y;</h2>
<div id="repeat-y"></div>
<h2>background-repeat: space;</h2>
<div id="space"></div>
<h2>background-repeat: round;</h2>
<div id="round"></div>
<h2>background-repeat: no-repeat;</h2>
<div id="no-repeat"></div>
<h2>background-repeat: initial;</h2>
<div id=""></div>
</body>
</html>
Результат:
Поддержка свойства background-repeat браузерами:
2. Маски
Представьте, что вы хотите использовать изображение, но при этом показывать только его часть. Это можно сделать, используя свойство mask-image. При помощи этого свойства определяется форма маски, которая применяется к изображению. Все, что выходит на пределы маски, обрезается, а остальное выводится на экран. В CSS маски работают примерно так же, как в Photoshop.
Если на часть изображения накладывается 100% черный цвет маски, эта часть будет полностью видимой. Часть изображения под 100% прозрачной маской будет полностью скрытой. Все промежуточные цвета маски дают частичную видимость изображения.
Маски можно применять двумя способами: с использованием градиентов и с использованием изображений.
Пример CSS с линейным градиентом
#masked{
-webkit-mask-image: linear-gradient(to bottom, transparent 5%, black 75%);
mask-image: linear-gradient(to bottom, transparent 5%, black 75%);
}
Первое изображение — исходное, второе — с маской с линейным градиентом.
Пример CSS с радиальным градиентом
#masked{
-webkit-mask-image: radial-gradient(ellipse 20% 90% at 27% 50%, black 40%, transparent 50%);
mask-image: radial-gradient(ellipse 20% 90% at 27% 50%, black 40%, transparent 50%);
}
Первое изображение — исходное, второе — с маской с радиальным градиентом.
Пример CSS с маской-изображением
#masked{
-webkit-mask-image: url(https://images.png);
mask-image: url(https://images.png);
}
На иллюстрации фоновое изображение используется в качестве маски изображения в форме камеры.
Давайте посмотрим, как свойство mask-image поддерживается в разных десктопных и мобильных браузерах.
3. Увеличение при наведении
Когда части веб-страницы меняют масштаб при наведении мыши, это делает страницу более привлекательной. Этот эффект можно использовать для галерей, в частности, в интернет-магазинах — чтобы пользователь мог получше рассмотреть товар.
Для приближения изображений используется CSS-свойство transform.
Синтаксис:
transform: scale [transition-duration] [transition-timing-function] [transition-delay];
Пример CSS:
img:hover {
transform: scale(1.1);
}
В этом примере изображение увеличивается при наведении курсора.
4. Улучшение прокрутки
CSS-свойство scroll-snap-type используется для контролируемой прокрутки, например, в галереях.
Свойство задается для элемента-контейнера. Оно определяет, как строго прокрутка этого контейнера привязывается к точкам привязки.
Синтаксис:
scroll-snap-type: [none | x | y] [mandatory | proximity];
mandatory. Визуальный viewport контейнера привязывается к точке, когда прокручивание завершилось. При добавлении, перемещении, изменении размера контента прокрутка будет отрегулирована так, чтобы оставаться на этой же точке.proximity. Менее строгое значение. Визуальный viewport контейнера может оставаться на точке привязки, если он в данный момент не прокручивается, в зависимости от параметров пользовательского агента.xиyопределяют оси, по которым осуществляется привязка.
Пример CSS:
.y-scrolling {
scroll-snap-type: y mandatory;
}
В этом примере показано применение scroll-snap-type со значением mandatory по оси Y.
Код:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Scroll-snap-type</title>
<link href="snap.css" rel="stylesheet">
</head>
<style>
.y-scrolling {
scroll-snap-type: y mandatory;
}
</style>
<body>
<div class="box y-scrolling">
<div>Eat</div>
<div>Sleep</div>
<div>Code</div>
<div>Repeat</div>
</div>
</body>
</html>
Поддержка свойства scroll-snap-type в браузерах:
5. Обтекание
Свойство shape-outside позволяет задать форму, которая должна быть вписана в строчный контент и которую он будет обтекать вместо обычного прямоугольного блока.
Свойство shape-outside принимает базовые фигуры в качестве значений и применяет к ним функцию shape. Работает только для float-элементов.
Синтаксис:
shape-outside: values;
Пример CSS:
<section class="shape-outside">
<div class="shape-outside__circle">
</div>
<h2>Shape Outside CSS Property</h2>
<p>
Morbi tincidunt lectus non feugiat tristique. In blandit ornare odio sit amet cursus. In mollis dictum mollis. Suspendisse sed sagittis sem. Morbi euismod ligula id purus ornare, id gravida augue vestibulum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eu consectetur neque, a commodo arcu. Vivamus lorem ante, pulvinar eu cursus nec, congue ut tellus. Mauris sit amet risus auctor, dignissim ligula vel, commodo purus. Ut sapien nunc, dignissim eu diam quis, tempor scelerisque leo.
</p>
</section>
body {
display: flex;
}
.shape-outside {
padding-right: 10px;
width: 50%;
}
.shape-outside__circle {
height: 150px;
width: 150px;
border-radius: 50%;
background-color: #DC143C;
margin: 25px 25px 5px 0;
float: left;
shape-outside: circle();
}
Результат:
Поддержка в браузерах:
6. Вариативные шрифты
Это новинка. Вы можете задать один файл со всеми вариантами шрифтов, которые понадобятся пользователю, чтобы увидеть ваш дизайн. Хотя пока есть только несколько списков шрифтов, с которыми можно работать, но в будущем это наверняка изменится в лучшую сторону.
Для реализации вариативных шрифтов нужно выбрать шрифт, поддерживающий этот функционал, и браузер, где реализовано свойство font-variation-settings.
Пример:
@font-face {
font-family: 'Roboto Flex';
src: url('RobotoFlex-VF.woff2') format('woff2 supports variations'),
url('RobotoFlex-VF.woff2') format('woff2-variations');
font-weight: 100 1000;
font-stretch: 25% 151%;
}
Код:
h1>variable<span>fonts</span></h1>
$green: #ff0080;
$purple: #6e1f58;
$pink: #ff8c00;
body {
background: #23074d;
overflow: hidden;
}
@font-face {
font-family: "Gingham Variable";
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Gingham.woff2")
format("woff2"),
url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Gingham.woff")
format("woff");
font-weight: 300 700;
font-stretch: 1% 150%;
}
h1 {
position: absolute;
top: 50%;
transform: translate(0, -50%);
margin: 0;
width: 100%;
font-size: 18vw;
font-family: "Gingham Variable", BlinkMacSystemFont, sans-serif;
font-weight: 700;
font-stretch: 150%;
color: $pink;
white-space: nowrap;
text-align: center;
transition: font-weight 250ms ease-out, font-stretch 250ms ease-out;
text-shadow: -1px -1px 0 $purple, 1px -1px 0 $purple, -1px 1px 0 $purple,
1px 1px 0 $purple, 1px 0px 0px $green, 0px 1px 0px $green, 2px 1px 0px $green,
1px 2px 0px $green, 3px 2px 0px $green, 2px 3px 0px $green, 4px 3px 0px $green,
3px 4px 0px $green, 5px 4px 0px $green, 3px 5px 0px $purple,
6px 5px 0px $purple, -1px 2px 0 black, 0 3px 0 $purple, 1px 4px 0 $purple,
2px 5px 0px $purple, 2px -1px 0 $purple, 3px 0 0 $purple, 4px 1px 0 $purple,
5px 2px 0px $purple, 6px 3px 0 $purple, 7px 4px 0 $purple;
span {
font-weight: 300;
font-stretch: 1%;
transition: all 250ms ease-out;
}
&:hover {
font-weight: 300;
font-stretch: 1%;
span {
font-weight: 700;
font-stretch: 150%;
}
}
}
Поддержка в браузерах:
7. Буквица
Буквица — это первая буква абзаца, занимающая несколько строк. Обычно буквицы используются для привлечения внимания в печатных изданиях и на информационных сайтах: там первая буква абзаца намного крупнее и выше остальных.
Для создания буквиц в CSS есть свойство initial-letter. Оно может принимать следующие значения:
<number>— определяет размер буквицы в формате числа строк, которые она должна занимать (отрицательные значения невозможны).normal— используется для сброса унаследованных значений и само по себе не создает никаких визуальных эффектов.<integer>— указывает, на сколько строк буквица должна «утонуть», если задан ее размер. Это число должно быть больше 0. Если значение не указано, оно рассчитывается: берется двойной размер буквицы, доведенный до ближайшего положительного целого числа.
Синтаксис:
initial-letter: normal | <number> | <integer>;
$body-fontsize: calc(80% + 0.35vw);
$cap-fallback: calc(1100% + 0.35vw);
.intro::first-letter {
font-size: $cap-fallback;
float: left;
line-height: 1;
margin-top: .2rem;
margin-left: -.5rem;
@supports (initial-letter: 7) or (-webkit-initial-letter: 7) {
-webkit-initial-letter: 7;
initial-letter: 7;
color: hsl(41, 68%, 51%);
margin-left: unset;
}
}
main,
header {
margin: 0 auto;
max-width: 68vw;
}
main {
column-count: 2;
column-gap: 3vw;
}
.excerpt {
font-size: 1.3rem;
font-weight: 600;
line-height: 1.8;
margin: 0 0 1.5rem;
}
h1 {
font-size: 6.4rem;
font-weight: 200;
line-height: 1.1;
margin: 0 0 .4rem;
padding: 0;
}
p {
margin: 0 0 1.5rem;
padding: 0;
}
@import url('https://fonts.googleapis.com/css?family=Martel:200,600" rel="stylesheet');
body {
font-family: 'Martel', serif;
font-size: $body-fontsize;
font-weight: 200;
line-height: 2;
margin: 2rem auto;
padding: 2rem;
&:before {
background: linear-gradient(90deg, hsl(105, 0%, 100%) 0%, hsl(45, 100%, 70%) 35%, hsl(45, 100%, 70%) 65%, hsl(105, 0%, 100%) 100%);
text-transform: none;
}
}
Поддержка в браузерах:
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]
