От автора: сегодня я хотел бы рассказать вам о нескольких свойствах, секретах и значениях CSS, которые редко упоминаются в технической литературе, но, на мой взгляд, представляют особый интерес для повышения скорости и качества разработки веб-интерфейсов.
Многие из обсуждаемых свойств являются экспериментальными. Большинство из них поддерживаются всеми современными браузерами. Итак, вы готовы к небольшому путешествию в удивительный и почти безграничный мир CSS? Давайте начнем!
grid + place-items
Этот метод позволяет выравнивать элементы по горизонтали и вертикали всего двумя строками кода.
.parent { display: grid; place-items: center;
}
place-items является сокращенным свойством для justify-items и align-items. Это свойство можно применить сразу к одной или нескольким (дочерним) ячейкам.
.parent { display: grid; grid-template-columns: 1fr 1fr; place-items: center
}
flex + margin
Еще один современный способ выровнять элементы по горизонтали и вертикали — использовать комбинацию display:flex и margin:auto.
.parent { display: flex;
} .child { margin: auto;
}
Было бы справедливо сказать, что то же самое можно сделать с помощью следующего фрагмента:
.parent { display: flex; justify-content: center; align-items: center;
}
flex + gap
Раз уж мы говорим о Flexbox, стоит упомянуть, что у нас наконец-то появилась возможность устанавливать промежутки между элементами с помощью свойства gap (нам это действительно нужно):
.parent { display: flex; flex-wrap: wrap; gap: 1em;
}
inline-flex
Это свойство позволяет создавать встроенные элементы, у которых есть функции Flexbox. Пример стоит многих слов:
body { margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; gap: 0.5em; background: #fbfbfb;
}
span { width: 2.5em; height: 2.5em; /* --- */ display: inline-flex; justify-content: center; align-items: center; /* --- */ background: #1266f1; border-radius: 30%; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); font-size: 1.1rem;
}
columns
Этот метод позволяет разбивать текст на столбцы. Сolumn-count определяет количество столбцов, column-gap устанавливает размер зазора между колоннами, и column-rule задает стиль вертикальной линии между столбцами.
Columns является сокращенным свойством для column-count и column-width.
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis reprehenderit inventore ad libero officia, necessitatibus laudantium corporis veniam quae, fugiat dolores quaerat corrupti tempore ipsa consequuntur similique explicabo ducimus commodi expedita. Dolore commodi nesciunt harum? Consequuntur, voluptatibus odio! Maiores non alias autem tempore corrupti, animi accusamus repudiandae nam. Autem at explicabo molestias dignissimos repellendus, magnam laudantium ea quisquam, quam, tenetur adipisci facere quas. Accusantium architecto iste eius tempore consequatur quidem officiis delectus eaque sequi rem! Nesciunt voluptatum tempora voluptatem a sit, minima excepturi quaerat quasi soluta aspernatur quia explicabo incidunt, fugiat animi. Dolor provident corporis magni voluptate vel non earum? </p>
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
body { margin: 0; background: #262626; font-family: "Montserrat", sans-serif; color: #fbfbfb;
}
p { margin: 1em; /* --- */ column-count: 3; column-gap: 2em; column-rule: 1px dotted; /* --- */
} @media (max-width: 768px) { p { column-count: 2; }
} @media (max-width: 512px) { p { column-count: 1; }
}
background-repeat
Background-repeat устанавливает порядок, в котором фон заполняется с указанным изображением. Круглое значение равномерно распределяет изображения по всей ширине контейнера, а значение пробела добавляет небольшое количество отступов между изображениями:
<div class="repeat"></div> <div class="round"></div> <div class="space"></div>
body { margin: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fbfbfb;
}
div { width: 300px; height: 64px; background-image: url("https://pics.freeicons.io/uploads/icons/png/3733236321617275952-64.png");
}
.repeat { background-repeat: repeat;
}
.round { background-repeat: round;
}
.space { background-repeat: space;
}
background-blend-mode
Background-blend-mode устанавливает порядок, в котором фоновое изображение и цвет (или несколько фоновых изображений /цветов) следует смешивать друг с другом. Возможные значения:
color
color-burn
color-dodge
darken
difference
exclusion
hard-light
hue
lighten
luminosity
multiply
overlay
saturation
screen
soft-light
Вы когда-нибудь работали с фотошопом? Тогда я думаю, вы понимаете, о чем речь. Предположим, у нас есть черно-белое изображение, которое мы хотим использовать в качестве фона. Но в то же время мы хотим, чтобы оно было цветным. Как мы можем этого добиться?
<h1> look at <br /> the sky </h1>
@import url("https://fonts.googleapis.com/css2?family=Audiowide&display=swap");
@keyframes show { from { opacity: 0; transform: scale(0) rotate(-180deg); } to { opacity: 1; transform: scale(1) rotate(0); }
}
body { margin: 0; height: 100vh; /* --- */ background: url("https://images.pexels.com/photos/414659/pexels-photo-414659.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"), linear-gradient(135deg, skyblue, steelblue 90%); background-blend-mode: overlay; /* --- */ background-size: cover; display: grid; place-items: center;
}
h1 { font-family: "Audiowide", cursive; color: #00b74a; font-size: 4rem; text-transform: uppercase; text-align: center; text-shadow: 0 1px 2px #262626; animation: show 2s linear forwards;
}
background-clip
Свойство background-clip определяет, как далеко цвет фона или фоновое изображение должно выходить за рамки заполнения элемента. На мой взгляд, text самое интересное значение этого свойства:
<p>nature</p>
@import url("https://fonts.googleapis.com/css2?family=Bungee&display=swap");
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.2); }
}
body { margin: 0; height: 100vh; display: grid; place-items: center; background-color: #fbfbfb; overflow: hidden;
}
p { font-family: "Bungee", cursive; font-size: 8rem; color: transparent; /* --- */ background-image: url("https://images.pexels.com/photos/1179229/pexels-photo-1179229.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"); -webkit-background-clip: text; background-clip: text; /* --- */ background-size: cover; background-position: center; animation: pulse 2s linear infinite alternate;
}
filter
Свойство filter позволяет применить некоторые визуальные эффекты к элементам. Возможные значения функции:
url()
blur()
brightness()
contrast()
drop-shadow()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia()
Изменение цветовых тем (или схем) сайта:
<input type="checkbox" class="theme" /> <p class="text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam dolores quod debitis veritatis placeat nemo iste natus maxime. Adipisci quos quia veritatis nemo quaerat magnam dolorum tempora voluptatum deleniti consectetur enim ea facere nihil sed ut laborum hic, sapiente vel ratione harum, vero iusto laudantium. Porro accusantium a harum ipsam! </p>
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
body { margin: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.theme { cursor: pointer;
}
.theme:checked + .text { filter: invert();
}
.text { margin: 1em; padding: 1em; background: #262626; border-radius: 4px; font-family: "Montserrat", sans-serif; color: #fbfbfb; transition: 0.2s ease-in;
}
В CSSgram вы найдете пример использования filter для Instagram.
drop-shadow
Установленное значение drop-shadow() для свойства filter, в отличие от свойства box-shadow, позволяет добавлять тень к самому изображению (в формате PNG), а не к блоку, в котором оно находится.
<input type="checkbox" class="theme" /> <p class="text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam dolores quod debitis veritatis placeat nemo iste natus maxime. Adipisci quos quia veritatis nemo quaerat magnam dolorum tempora voluptatum deleniti consectetur enim ea facere nihil sed ut laborum hic, sapiente vel ratione harum, vero iusto laudantium. Porro accusantium a harum ipsam! </p>
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
body { margin: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.theme { cursor: pointer;
}
.theme:checked + .text { filter: invert();
}
.text { margin: 1em; padding: 1em; background: #262626; border-radius: 4px; font-family: "Montserrat", sans-serif; color: #fbfbfb; transition: 0.2s ease-in;
}
object-fit
Свойство object-fit управляет соотношением сторон замещаемых элементов, такими, как img и video, если они имеют ширину или высоту, а также к ним применяется масштабирование. Например, значение scale-down позволяет сохранить соотношение сторон изображения независимо от размера блока:
<img src="https://pics.freeicons.io/uploads/icons/png/21088442871540553614-64.png" alt="js" /> <img src="https://pics.freeicons.io/uploads/icons/png/20167174151551942641-64.png" alt="react" /> <img src="https://pics.freeicons.io/uploads/icons/png/191213921552037062-64.png" alt="vue" />
body { margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; gap: 1em; background-color: #fbfbfb;
}
img { width: 100px; height: 100px; /* --- */ object-fit: scale-down; /* --- */ border: 1px dashed #262626; border-radius: 4px;
}
Свойство object-position, позволяет сохранить пропорции изображения, независимо от размера контейнера.
cursor
Знаете ли вы, что в дополнение к значкам курсора, предоставляемым браузером (например, cursor:pointer), мы также можем определять наши собственные изображения и SVG?
<div class="image">image</div> <div class="svg">svg</div>
scroll-behavior
Установив значение scroll-behavior равным smooth, мы имеем возможность легко осуществить плавный скроллинг между разделами страницы:
<nav> <h3>Scroll to</h3> <a href="#a">A</a> <a href="#b">B</a> <a href="#c">C</a> </nav> <section id="a"> <h3>A</h3> </section> <section id="b"> <h3>B</h3> </section> <section id="c"> <h3>C</h3> </section>
html { scroll-behavior: smooth;
}
body { margin: 0; font-family: system-ui; color: #fbfbfb;
}
nav { position: fixed; top: 0; left: 50%; transform: translateX(-50%); text-align: center;
}
h3 { margin: 0; letter-spacing: 1px;
}
a { text-decoration: none; color: inherit; border-bottom: 1px dashed;
}
a + a { margin-left: 1em;
}
section { width: 100%; height: 100vh; display: inline-flex; justify-content: center; align-items: center;
}
#a { background-color: #1266f1;
}
#b { background-color: #00b74a;
}
#c { background-color: #f93154;
}
text-overflow
Cвойство text-overflow равное ellipsis позволяет добавлять «…» в конец текста, когда он выходит за пределы контейнера.
p { text-overflow: ellipsis;
}
caret-color
Свойство caret-color устанавливает цвет каретки видимого маркера(|), указывающий, где будет вставлен следующий введенный символ.
textarea { caret-color: #00b74a;
}
@supports
Правило @supports позволяет проверить, поддерживает ли браузер свойства (или комбинацию свойства /значения) перед их использованием.
/* check support for `grid` and `image-rendering` properties */
@supports (display: grid) { section { display: grid; }
} @supports (image-rendering) { img { image-rendering: pixelated; }
}
var()
Функция var() позволяет использовать значения пользовательских переменных в качестве значений свойств. Второй необязательный параметр этой функции – это резервное значение.
/* define a custom variable - the main background color */
:root { --primary-bg-color: #1266f1;
} /* and use it */
button { background-color: var(--primary-bg-color)
}
calc()
Функция calc() используется для определения расчетного значения свойств, размера использования, угла, времени или чисел в качестве значений. Это позволяет устанавливать значения на основе сложения или вычитания различных единиц.
Обычно позиционированный элемент выравнивается по горизонтали и вертикали следующим образом:
.modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
Если мы знаем размеры такого элемента, мы можем сделать следующее:
/* let's say an element has a height of 100px and a width of 200px */
.modal { position: absolute; top: calc(50% - 50px); left: calc(50% - 100px);
}
attr()
С помощью функции attr() вы можете получить значение атрибута выбранного элемента и использовать его в стилях. Создание всплывающих подсказок с помощью CSS:
<p>Some <span data-tooltip="tooltip">text</span> here</p>
p { margin: 2em; font-size: 1.25rem;
}
span { color: #1266f1; border-bottom: 1px dashed; position: relative; cursor: pointer;
}
span::after { /* --- */ content: attr(data-tooltip); /* --- */ position: absolute; top: -1.25em; left: 50%; transform: translateX(-50%); color: #00b74a; font-style: italic; opacity: 0; transition: 0.2s;
}
span:hover::after { opacity: 1;
}
:target
Псевдо-класс :target позволяет создавать модальности, которые работают без JavaScript:
<a href="#modal" class="link">Show modal</a> <div class="modal" id="modal"> <div class="overlay"> <div class="content"> <h3>Title</h3> <p>Description</p> <a href="#" class="close">X</a> </div> </div> </div>
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Montserrat", sans-serif;
}
a { text-decoration: none;
}
.link { display: block; text-align: center; margin-top: 1em;
}
/* --- */
.modal { opacity: 0; visibility: hidden; transition: 0.3s ease-in;
}
.modal:target { opacity: 1; visibility: visible;
}
/* --- */
.overlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0, 0, 0, 0.25); display: grid; place-items: center;
}
.content { width: 320px; padding: 1em 0; background-color: #fbfbfb; border-radius: 2px; text-align: center; color: #262626; position: relative;
}
.content > *:not(.close) { margin: 1em 0;
}
.close { position: absolute; top: 5px; right: 10px; color: #f93154;
}
::marker
Раньше мы удаляли маркеры списков с помощью list-style:none и добавляли свои собственные с помощью псевдоэлементов ::before или ::after. Теперь есть более простой способ сделать это — мы можем использовать псевдоэлемент ::marker.
<ul> <li>Prima</li> <li>Altera</li> <li>Triera</li> </ul>
::selection
Псевдо-элемент ::selection позволяет стилизовать выбор текста.
p::selection { background-color: #262626; color: #fbfbfb;
}
Спасибо за уделенное время и хорошего дня!
Автор: Alexey Shepelev
Источник: betterprogramming.pub
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен
