22 CSS-секрета, которые сделают вас макетным ниндзя

0 0

Многие из обсуждаемых свойств являются экспериментальными. Большинство из них поддерживаются всеми современными браузерами. Итак, вы готовы к небольшому путешествию в удивительный и почти безграничный мир CSS? Давайте начнем!

grid + place-items

Этот метод позволяет выравнивать элементы по горизонтали и вертикали всего двумя строками кода.

CSS .parent { display: grid; place-items: center; }

1234.parent {  display: grid;  place-items: center;}

22 CSS-секрета, которые сделают вас макетным ниндзя

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

place-items является сокращенным свойством для justify-items и align-items. Это свойство можно применить сразу к одной или нескольким (дочерним) ячейкам.

CSS .parent { display: grid; grid-template-columns: 1fr 1fr; place-items: center }

12345.parent {  display: grid;  grid-template-columns: 1fr 1fr;  place-items: center}

flex + margin

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

CSS .parent { display: flex; } .child { margin: auto; }

1234567.parent {  display: flex;} .child {  margin: auto;}

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

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

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

flex + gap

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

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

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

inline-flex

Это свойство позволяет создавать встроенные элементы, у которых есть функции Flexbox. Пример стоит многих слов:

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

12345678910111213141516171819202122body {  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>

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

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

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

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

1234567891011121314151617181920212223body {  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>

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

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

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

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

22 CSS-секрета, которые сделают вас макетным ниндзя

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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>

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

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

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

123456789101112131415161718192021222324@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” />

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

123456789101112131415161718body {  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>

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

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

12345678910111213141516171819202122232425262728293031323334353637383940414243html {  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 позволяет добавлять «…» в конец текста, когда он выходит за пределы контейнера.

CSS p { text-overflow: ellipsis; }

123p {  text-overflow: ellipsis;}

caret-color

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

CSS textarea { caret-color: #00b74a; }

123textarea {  caret-color: #00b74a;}

@supports

Правило @supports позволяет проверить, поддерживает ли браузер свойства (или комбинацию свойства /значения) перед их использованием.

CSS /* check support for `grid` and `image-rendering` properties */ @supports (display: grid) { section { display: grid; } } @supports (image-rendering) { img { image-rendering: pixelated; } }

123456789101112/* check support for `grid` and `image-rendering` properties */@supports (display: grid) {  section {    display: grid;  }} @supports (image-rendering) {  img {    image-rendering: pixelated;  }}

var()

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

CSS /* define a custom variable - the main background color */ :root { –primary-bg-color: #1266f1; } /* and use it */ button { background-color: var(–primary-bg-color) }

123456789/* 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() используется для определения расчетного значения свойств, размера использования, угла, времени или чисел в качестве значений. Это позволяет устанавливать значения на основе сложения или вычитания различных единиц.

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

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

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

Если мы знаем размеры такого элемента, мы можем сделать следующее:

CSS /* 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); }

123456/* 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>

1<p>Some <span data-tooltip=”tooltip”>text</span> here</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; }

1234567891011121314151617181920212223242526p {  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>

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

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

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

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

::selection

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

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

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

Спасибо за уделенное время и хорошего дня!

Автор: Alexey Shepelev

Источник: webformyself.com

Оставьте ответ