500.45
Rating
Mail.ru Group
Building the Internet
28 February 2018

30 секунд CSS

Mail.ru Group corporate blogWebsite developmentCSSJavaScriptInterfaces
Translation
Tutorial
Original author: atomiks


Предлагаем вашему вниманию коллекцию полезных CSS-сниппетов, в которых вы можете разобраться за 30 секунд, а то и быстрее.


Clearfix


Позволяет элементу автоматически применять clear к своим дочерним элементам.


Примечание: полезно только в том случае, если вы всё ещё используете float при создании макетов. Рассмотрите возможность перейти на более современные подходы с применением flexbox или сетки.


HTML


<div class="clearfix">
  <div class="floated">float a</div>
  <div class="floated">float b</div>
  <div class="floated">float c</div>
</div>

CSS


.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.floated {
  float: left;
}

Пример



Объяснение


  1. .clearfix::after определяет псевдоэлемент.
  2. content: '' позволяет псевдоэлементу влиять на макет.
  3. clear: both означает, что в рамках одного блочного отформатированного контекста левая, или правая, или обе стороны элемента не могут примыкать к элементам, к которым ранее применено float.

Поддержка в браузерах


99+ %


Подводных камней нет.


Постоянное соотношение ширины к высоте


Если у элемента изменяется ширина, то и высота динамически меняется пропорционально, с заданным коэффициентом (то есть отношение ширины к высоте остаётся неизменным).


HTML


<div class="constant-width-to-height-ratio"></div>

CSS


.constant-width-to-height-ratio {
  background: #333;
  width: 50%;
  padding-top: 50%;
}

Объяснение


padding-top и padding-bottom могут использоваться в качестве альтернативы height, поскольку процентное значение высоты элемента становится процентным значением ширины. То есть 50% означает, что высота элемента будет составлять 50 % от ширины. В результате соотношение сторон не меняется.


Поддержка в браузерах


99+ %


padding-top смещает всё содержимое на дно элемента.


Кастомное выделение текста


Изменяет стиль выделения текста.


HTML


<p class="custom-text-selection">Select some of this text.</p>

CSS


.custom-text-selection::selection {
  background: red;
  color: white;
}

Пример



Объяснение


::selection определяет в элементе псевдоселектор, чтобы применять стиль к тексту, когда он выделен.


Поддержка в браузерах


84,6 %


Эта фича пока отсутствует в спецификациях, для её полной поддержки нужно использовать префиксы.



Переменные плавности анимации


Переменные, которые можно повторно использовать для свойств transition-timing-function, дают больше возможностей по сравнению со встроенными ease, ease-in, ease-out и ease-in-out.


HTML


<div class="easing-variables"></div>

CSS


:root {
  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.easing-variables {
  width: 50px;
  height: 50px;
  background: #333;
  transition: transform 1s var(--ease-out-quart);
}
.easing-variables:hover {
  transform: rotate(45deg);
}

Пример



Объяснение


Переменные, объявленные глобально вне псевдокласса :root CSS, которые совпадают с корневым элементом дерева документа. В HTML :root соответствует элементу и идентичен селектору html, кроме лишь того, что его специфика выше.

Поддержка в браузерах


87,2 %


Подводных камней нет.



Вдавленный текст


Создаёт эффект вдавленного, или выгравированного на фоне текста.


HTML


<p class="etched-text">I appear etched into the background.</p>

CSS


.etched-text {
  text-shadow: 0 2px white;
  font-size: 1.5rem;
  font-weight: bold;
  color: #b8bec5;
}

Пример



Объяснение


text-shadow: 0 2px white создаёт белую тень со смещением 0px по горизонтали и 2px по вертикали от исходной позиции. Фон должен быть темнее тени, а текст — слегка выцветшим, чтобы он выглядел вдавленным/выгравированным на фоне.


Поддержка в браузерах


97,9 %


Подводных камней нет.



Градиентный текст


Делает градиентную заливку текста.


HTML


<p class="gradient-text">Gradient text</p>

CSS


.gradient-text {
  background: -webkit-linear-gradient(pink, red);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

Пример



Объяснение


  1. background: -webkit-linear-gradient(...) делает у текстового элемента градиентный фон.
  2. webkit-text-fill-color: transparent заполняет текст прозрачным цветом.
  3. webkit-background-clip: text закрепляет фон с текстом, заливает текст градиентным фоном в качестве цвета.

Поддержка в браузерах


90,7 %
️ Использует нестандартные свойства.



Тонкая рамка


Делает вокруг элемента рамку, по толщине эквивалентную одному нативному пикселю устройства, очень резкую, не размытую.


HTML


<div class="hairline-border">text</div>

CSS


.hairline-border {
  box-shadow: 0 0 0 1px;
}
@media (min-resolution: 2dppx) {
  .hairline-border {
    box-shadow: 0 0 0 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  .hairline-border {
    box-shadow: 0 0 0 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  .hairline-border {
    box-shadow: 0 0 0 0.25px;
  }
}

Пример



Объяснение


  1. Box-shadow при использовании спреда (spread) добавляет псевдорамку, которая может использовать субпиксели*.
  2. Применяйте @media (min-resolution: ...) для проверки соотношения логических и физических пикселей на устройстве (device pixel ratio) (1ddpx эквивалентно 96 DPI), задайте спред box-shadow равным 1 / dppx.

Поддержка в браузерах


95 %


️Для полной поддержки нужен альтернативный синтаксис и проверка JavaScript юзер-агента.



Горизонтальное и вертикальное центрирование


Центрирует дочерний элемент по вертикали и горизонтали внутри родительского элемента.


HTML


<div class="horizontal-and-vertical-centering">
  <div class="child"></div>
</div>

CSS


.horizontal-and-vertical-centering {
  display: flex;
  justify-content: center;
  align-items: center;
}

Пример



Объяснение


  1. display: flex включает flexbox.
  2. justify-content: center центрирует дочерний элемент по горизонтали.
  3. align-items: center центрирует дочерний элемент по вертикали.

Поддержка в браузерах


97,8 %


️Для полной поддержки нужны префиксы.



Градиентное отслеживание курсора мыши (требуется JavaScript)


При наведении курсор сопровождается градиентным эффектом.


HTML


<button class="mouse-cursor-gradient-tracking">
  <span>Hover me</span>
</button>

CSS


.mouse-cursor-gradient-tracking {
  position: relative;
  background: #2379f7;
  padding: 0.5rem 1rem;
  font-size: 1.2rem;
  border: none;
  color: white;
  cursor: pointer;
  outline: none;
  overflow: hidden;
}
.mouse-cursor-gradient-tracking span {
  position: relative;
}
.mouse-cursor-gradient-tracking::before {
  --size: 0;
  content: '';
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(circle closest-side, pink, transparent);
  transform: translate(-50%, -50%);
  transition: width .2s ease, height .2s ease;
}
.mouse-cursor-gradient-tracking:hover::before {
  --size: 200px;
}
JavaScript
var btn = document.querySelector('.mouse-cursor-gradient-tracking')
btn.onmousemove = function (e) {
  var x = e.pageX - btn.offsetLeft
  var y = e.pageY - btn.offsetTop
  btn.style.setProperty('--x', x + 'px')
  btn.style.setProperty('--y', y + 'px')
}

Пример



Объяснение


  1. ::before определяет псевдоэлемент
  2. --size, --x, --y являются набором пользовательских CSS-свойств
  3. background: radial-gradient(circle closest-side, pink, transparent); определяет градиент
  4. --size: 200px; показывают градиент при наведении
  5. btn.style.setProperty('--x', x + 'px') и btn.style.setProperty('--y', y + 'px') определяют положение блока с градиентом относительно контейнера

Примечание. Если родительский элемент позиционирован относительно содержимого (position: relative), то придётся также вычитать и его смещение.


var x = e.pageX - btn.offsetLeft - btn.offsetParent.offsetLeft
var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop

Поддержка в браузерах


87,2 %


️Требуется JavaScript.



Градиент при избыточной прокрутке


Добавляет градиент к избыточному элементу, чтобы лучше отображать контент, который можно прокрутить.


HTML


<div class="overflow-scroll-gradient">
  <div class="overflow-scroll-gradient__scroller">
    Content to be scrolled
  </div>
</div>
CSS
.overflow-scroll-gradient {
  position: relative;
}
.overflow-scroll-gradient::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 300px;
  height: 25px;
  background: linear-gradient(rgba(255, 255, 255, 0.001), white); /* transparent keyword is broken in Safari */
}
.overflow-scroll-gradient__scroller {
  overflow-y: scroll;
  background: white;
  width: 300px;
  height: 250px;
  padding: 15px 0;
  line-height: 1.2;
  text-align: center;
}

Пример



Объяснение


  1. position: relative применительно к родительскому элементу задаёт декартово позиционирование псевдоэлементов.
  2. ::after определяет псевдоэлемент.
  3. background-image: linear-gradient(...) добавляет линейный градиент от прозрачного к белому (сверху вниз).
  4. position: absolute берёт псевдоэлемент из потока документа и позиционирует его относительно родительского элемента.
  5. width: 300px задаёт размер прокручиваемого элемента (дочернего по отношению к родительскому, содержащему псевдоэлемент).
  6. height: 25px — это высота градиентного псевдоэлемента, она должна быть относительно небольшой.
  7. bottom: 0 позиционирует псевдоэлемент по нижней границе родительского элемента.

Поддержка в браузерах


94,8 %


Подводных камней нет.



Выдвигающееся (popout) меню


При наведении курсора выдвигается интерактивное меню.


HTML


<div class="reference">
  <div class="popout-menu">
    Popout menu
  </div>
</div>

CSS


.reference {
  position: relative;
}
.popout-menu {
  position: absolute;
  visibility: hidden;
  left: 100%;
}
.reference:hover > .popout-menu {
  visibility: visible;
}

Пример



Объяснение


  1. position: relative для референсного родительского элемента устанавливает декартово позиционирование дочернего элемента.
  2. position: absolute берёт из потока документа выдвигающееся меню и позиционирует его относительно родительского элемента.
  3. left: 100% целиком выводит меню слева от родительского элемента.
  4. visibility: hidden изначально скрывает меню и разрешает переходы (в отличие от display: none).
  5. .reference:hover > .popout-menu означает, что, когда курсор мыши проходит над .reference, немедленно выбираются дочерние элементы с классом .popout-menu, а их видимость (visibility) меняется на visible, в результате мы видим меню.

Поддержка в браузерах


99+ %


Подводных камней нет.


Красивое подчёркивание текста


Более симпатичная альтернатива text-decoration: underline, когда линия не пересекает нижние выносные элементы букв. Нативно реализовано в качестве text-decoration-skip-ink: auto, но при этом у нас становится меньше возможностей управлять подчёркиванием.


HTML


<p class="pretty-text-underline">Pretty text underline without clipping descending letters.</p>

CSS


.pretty-text-underline {
  display: inline;
  font-size: 1.25rem;
  text-shadow: 1px 1px 0 #f5f6f9,
    -1px 1px 0 #f5f6f9,
    -1px -1px 0 #f5f6f9,
    1px -1px 0 #f5f6f9;
  background-image: linear-gradient(90deg, currentColor 100%, transparent 100%);
  background-position: 0 1.04em;
  background-repeat: repeat-x;
  background-size: 1px 1px;
}
.pretty-text-underline::selection {
  background-color: rgba(0, 150, 255, 0.3);
  text-shadow: none;
}

Пример



Объяснение


  1. text-shadow: ... имеет четыре значения со сдвигами, покрывающие зону 4 × 4 пикселя, чтобы у подчёркивания была «толстая» тень, накрывающая линию в местах пересечения выносных элементов букв. Используйте цвет фона. Для крупных шрифтов задавайте зону большего размера
  2. background-image: linear-gradient(...) создаёт 90-градусный градиент текущего цвета текста (currentColor).
  3. Свойства background-* задают внизу градиент размером 1 × 1 px и повторяют его по оси Х.
  4. Псевдоселектор ::selection отвечает за то, чтобы тень текста не накладывалась на текстовое выделение.

Поддержка в браузерах


94,8 %


Для работы ::selection в Firefox необходимы префиксы



Разделитель


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


HTML


<div class="shape-separator"></div>

CSS


.shape-separator {
  position: relative;
  height: 48px;
}
.shape-separator::after {
  content: '';
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxLjQxNCI+PHBhdGggZD0iTTEyIDEybDEyIDEySDBsMTItMTJ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
  position: absolute;
  width: 100%;
  height: 24px;
  bottom: 0;
}

Пример



Объяснение


  1. position: relative задаёт для элемента декартово позиционирование псевдоэлементов.
  2. ::after задаёт псевдоэлемент.
  3. background-image: url(...) добавляет в качестве фонового изображения псевдоэлемента SVG-форму (треугольник 24 × 24 в формате base64), которая по умолчанию многократно повторяется. Она должна быть того же цвета, что и отделяемый блок.
  4. position: absolute берёт псевдоэлемент из потока документа и позиционирует его относительно родительского элемента.
  5. width: 100% растягивает элемент по всей ширине его родительского элемента.
  6. height: 24px задаёт такую же высоту, как и у SVG-формы.
  7. bottom: 0 позиционирует псевдоэлемент внизу родительского элемента.

Поддержка в браузерах


98 %


Подводных камней нет.



Стек системных шрифтов


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


HTML


<p class="system-font-stack">This text uses the system font.</p>

CSS


.system-font-stack {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

Пример



Объяснение


Браузер ищет каждый из нижеперечисленных шрифтов. Если первый шрифт недоступен — ищет второй, если он тоже недоступен — ищет третий и т. д.


  1. -apple-system — шрифт San Francisco, используемый в iOS и macOS (но не в Chrome).
  2. BlinkMacSystemFont — шрифт San Francisco, используемый в macOS Chrome.
  3. Segoe UI используется в Windows 10.
  4. Roboto — в Android.
  5. Oxygen-Sans — в GNU + Linux.
  6. Ubuntu — в Linux.
  7. "Helvetica Neue" и Helvetica — в macOS 10.10 и ниже (взят в кавычки, потому что в названии есть пробел).
  8. Arial широко поддерживается всеми ОС.
  9. sans-serif — запасной шрифт без засечек, используется, если все вышеперечисленные недоступны.

Поддержка в браузерах


99+ %


Подводных камней нет.


Треугольник


С помощью чистого CSS создаёт треугольную форму.


HTML


<div class="triangle"></div>

CSS


.triangle {
  width: 0;
  height: 0;
  border-top: 20px solid #333;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

Пример



Объяснение


Подробное объяснение.


Цвет границы — это цвет самого треугольника. Сторона, в которую обращена вершина треугольника, противоположна свойству border-*. Например, border-top означает, что «стрелка» указывает вниз.


Поэкспериментируйте со значениями px, чтобы изменить пропорции треугольника.


Поддержка в браузерах


99+ %


Подводных камней нет.


Обрезание текста


Если текст длиннее одной строки, он обрежется, а в конце будет подставлено многоточие.


HTML


<p class="truncate-text">If I exceed one line's width, I will be truncated.</p>

CSS


.truncate-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Пример



Объяснение


  1. overflow: hidden не даёт тексту выйти за пределы размерностей (для блока это 100 % ширины и автоматическая высота).
  2. white-space: nowrap не даёт тексту занять по высоте одну строку.
  3. text-overflow: ellipsis делает так, что когда текст достигает заданных размеров, то в конце вставляется многоточие.

Поддержка в браузерах


98,1 %


Работает только с однострочными элементами


Tags:cssjavascriptsnippetsникто не читает теги
Hubs: Mail.ru Group corporate blog Website development CSS JavaScript Interfaces
+54
52.2k 605
Comments 52