Web-разработка

22 CSS-свойства для позиционирования

25.07.2021

В статье пойдет речь о нескольких редко упоминаемых в технической литературе свойствах CSS. Тем не менее их использование повлечет за собой повышение скорости и качества разработки веб-интерфейсов.

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

Итак, вы готовы к небольшому путешествию в удивительный и почти безграничный мир CSS?

Свойства display: grid и place-items

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;
}

Свойства display: flex и margin: auto

Еще один современный способ выравнивания элементов по горизонтали и вертикали — комбинирование свойства display: flex с margin: auto:

.parent {
  display: flex;
}

.child {
  margin: auto;
}

Было бы справедливо сказать, что тот же самый результат достигается с помощью следующей инструкции:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

Свойства display: flex и gap

Раз уж статья затрагивает использование Flexbox, то стоит упомянуть: наконец-то реализована возможность устанавливать промежутки между элементами flex с помощью свойства gap (очень полезный функционал):

.parent {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

Свойство display: inline-flex

Использование свойства display: inline-flex позволяет создавать строчные элементы (inline), которые ведут себя с окружающими их элементами похоже на свойство Flexbox. Вместо тысячи слов — один пример!

HTML-файл:

<span>👋</span>
<span>👌</span>
<span>👍</span>
<span>👐</span>

CSS-файл:

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;
}

Свойства column-count, column-gap и column-rule для создания колонок таблицы

Использование вышеперечисленных свойств позволяет разделить текст внутри элемента-блока на колонки.

column-count задает количество колонок;
column-gap указывает размер промежутка между колонками;
column-rule отвечает за стиль отображения вертикальной линии между колонками.

Существует также сокращенное свойство columns, заменяющее column-count и column-width.

HTML-файл:

<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!
</p>

CSS-файл:

@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 задает порядок заполнения фона указанным изображением. Значение round равномерно распределяет изображения по всей ширине контейнера, а значение space добавляет небольшие отступы между изображениями.

HTML-файл:

<div class="repeat"></div>
<div class="round"></div>
<div class="space"></div>

CSS-файл:

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

Вы когда-нибудь работали с Photoshop? Тогда, скорее всего, вы поймёте, о чем сейчас пойдёт речь.

Предположим, что в вашем распоряжении находится черно-белое изображение, подобранное вами для фона. Но в то же время вы хотите, чтобы изображение было цветным. Как же вам этого добиться?

HTML-файл:

<h1>
  look at
  <br />
  the sky
</h1>

CSS-файл:

@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);
  }
}

@keyframes show {
  from {
    opacity: 0;
    transform: scale(0) rotate(-180deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

с

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 определяет, насколько фоновый цвет или фоновое изображение может выйти за пределы padding элемента. Одним из самых интересных значений данного свойства можно назвать text, как в следующем примере.

HTML-файл:

<p>nature</p>

CSS-файл:

@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()

Теперь ознакомимся с примером реализации функционала изменения цветовых тем (или схем) на сайте для тех, кто ленится.

HTML-файл:

<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>

CSS-файл:

@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;
}

.text {
  margin: 1em;
  padding: 1em;
  background: #262626;
  border-radius: 4px;
  font-family: "Montserrat", sans-serif;
  color: #fbfbfb;
  transition: 0.2s ease-in;
}

На сайте CSSgram вы найдете пример использования CSS-свойства filter для создания фильтров, очень похожих на те, что есть в Instagram.

Свойство filter со значением drop-shadow

Свойство filter с установленным значением drop-shadow(), в отличие от box-shadow, которое аналогично по применяемому эффекту, позволяет добавить тень к самому изображению (в формате PNG), а не к блочному элементу, который её обрамляет.

HTML-файл:

<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>

CSS-файл:

@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 позволяет сохранить соотношение сторон изображения независимо от размера блока.

HTML-файл:

<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" />

CSS-файл:

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?

HTML-файл:

<div class="image">image</div>

<div class="svg">svg</div>

CSS-файл:

body {
  margin: 0;
  height: 100vh;
  background-color: #fbfbfb;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4em;
}

div {
  width: 100px;
  height: 100px;
  display: grid;
  place-items: center;
  background-image: linear-gradient(yellow, orange);
  font-family: system-ui;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.image {
  cursor: url("https://pics.freeicons.io/uploads/icons/png/20278001131579606320-32.png"), auto;
}

.svg {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='40' viewport='0 0 100 100' style='fill:black;font-size:22px;'><text y='50%'>🐧</text></svg>"), auto;
}

Свойство scroll-behavior

Свойство scroll-behavior с установленным для него значением smooth, позволяет легко реализовать плавную прокрутку между подразделами страницы.

HTML-файл:

<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>

CSS-файл:

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

Свойство text-overflow со значением, установленным как ellipsis, позволяет добавить символ троеточия в конец текста, но только в том случае, если текст начинает выходить за пределы контейнера.

CSS-файл:

p {
  text-overflow: ellipsis;
}

Свойство caret-color

Свойство caret-color задает цвет для каретки текста. Это такой видимый маркер (символ |), явно указывающий, куда прямо сейчас вставляется следующий набранный пользователем символ.

CSS-файл:

textarea {
  caret-color: #00b74a;
}

CSS-правило @supports

Правило @supports позволит вам выполнить проверку используемого свойства или комбинации свойства со значением на поддерживаемость конкретным браузером пользователя.

CSS-файл:

@supports (display: grid) {
  section {
    display: grid;
  }
}

@supports (image-rendering) {
  img {
    image-rendering: pixelated;
  }
}

Функция var()

Функция var() позволяет использовать значения пользовательских переменных в качестве значений для свойств CSS. Вторым необязательным параметром этой функции передается резервное значение.

:root {
  --primary-bg-color: #1266f1;
}

button {
  background-color: var(--primary-bg-color);
}

Функция calc()

Функция calc() используется для указания уже посчитанного значения тем свойствам, которые применяют в качестве значений показатель размера, угла, времени или числа. Это позволяет основывать эти значения на результате операций сложения или вычитания различных единиц измерения.

Обычно абсолютно позиционированный элемент выравнивается по горизонтали и вертикали следующим образом.

CSS-файл:

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Когда нам известны размеры элемента, можно сделать следующее.

CSS-файл:

.modal {
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 100px);
}

Функция attr()

С помощью функции attr() можно получить значение атрибута выбранного элемента и использовать его в стилях CSS.

Всплывающие подсказки реализуются с помощью CSS следующим образом.

HTML-файл:

<p>Здесь <span data-tooltip="tooltip">текста</span> текста</p>

CSS-файл:

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.

HTML-файл

<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">✖</a>
    </div>
  </div>
</div>

CSS-файл

@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.

HTML-файл:

<ul>
  <li>Prima</li>
  <li>Altera</li>
  <li>Triera</li>
</ul>

CSS-файл:

li::marker {
  content: "✔ ";
  color: green;
}

li:last-child::marker {
  content: "✖ ";
  color: red;
}

Псевдокласс ::selection

Псевдоэлемент ::selection позволяет настроить внешний вид для выделения текста.

CSS-файл:

p::selection {
  background-color: #262626;
  color: #fbfbfb;
}

Спасибо за чтение, хорошего дня!