Сможете ли вы ответить на эти 44 ответа CSS за 30 секунд?

CSS

написать впереди

Как-то в пятницу вечером мне было нечего делать в своем гитхабе (часто устраивая вечеринку по сбору), планирую сегодня все это пройти, и нашелstarОчень длинный проект с большим количеством фрагментов CSS и очень привлекательным заголовком, а затем мы потратили почти час, просматривая его от начала до конца, некоторые из которых являются одними из наших часто используемых знаний, а некоторые — относительно новыми. атрибутов имеет много очков знаний.Для того, чтобы сделать его более удобным для всех, потребовалось (очень долго) время, чтобы перевести его на китайский язык.

GitHub.com/30-seconds/…

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

Китайский складGitHub.com/big и Fe/30-…, которая уже завершила перевод избранной коллекции CSS.

Эта статья является вольным переводом, а не дословным переводом.Для удобства понимания добавлены некоторые ваши родные языки.Если есть какие-либо отклонения или ошибки, пожалуйста, оставьте сообщение для их исправления.

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

Эта коллекция, созданная с помощью CSS, разделена на 5 категорий: «Макет», «Визуальные эффекты», «Анимация», «Взаимодействие», «Другое».

Для более подробной информации, пожалуйста, обратитесь к оригинальному документу.GitHub.com/30-seconds/….

макет

1. Сброс модели коробки

盒模型重置，使盒子的宽度和高度不受其边框(border)或填充(padding)的影响。

HTML

<div class="box">border-box</div>
<div class="box content-box">content-box</div>

CSS

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
.box {
  display: inline-block;
  width: 150px;
  height: 150px;
  padding: 10px;
  background: tomato;
  color: white;
  border: 10px solid red;
}
.content-box {
  box-sizing: content-box;
}

DEMO

Просмотр реальных эффектов и редактирование кода на CodePen

иллюстрировать

  • Размеры коробки: когда элемент установлен на пограничную коробку, даже настроек прокладки или границы не изменит ширину и высоту элемента.
  • Box-Siting: Установите наследование, чтобы элемент наследовал родительское правило Box-Siting.

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

99.9% Посмотреть эту статью

2. Лучший способ очистить поплавки

Плавающая очистка без вспомогательных элементов.

Примечание: это полезно только при использовании макета с плавающей запятой. В реальных сценариях рассмотрите возможность использования макета 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{
  border:solid 1px red;
}
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
.floated {
  float: left;
  margin-left:20px;
}

DEMO

Просмотр реальных эффектов и редактирование кода на CodePen

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

100%

3. Постоянное соотношение сторон

Учитывая элемент переменной ширины, он гарантирует, что его высота останется пропорциональной (то есть его соотношение сторон останется прежним).

DEMO

Просмотр реальных эффектов и редактирование кода на CodePen

HTML

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

CSS

.constant-width-to-height-ratio {
  background: #333;
  width: 50%;
}
.constant-width-to-height-ratio::before {
  content: '';
  padding-top: 100%;
  float: left;
}
.constant-width-to-height-ratio::after {
  content: '';
  display: block;
  clear: both;
}

иллюстрировать

  • width:50%Установите только ширину родительского элемента
  • ::beforeОпределите псевдоэлемент для родительского элемента
  • padding-top: 100%;Устанавливает верхний отступ псевдоэлемента. Процентное значение здесь рассчитывается в соответствии с шириной, поэтому он будет отображаться как блок отзывчивого элемента.
  • Этот метод также позволяет обычно размещать контент внутри элемента.

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

100%

4. Используйте таблицу для центрирования

Используйте display:table (в качестве альтернативы flexbox), чтобы выровнять дочерние элементы по горизонтали и вертикали внутри их родителя.

HTML

<div class="container">
  <div class="center"><span>Centered content</span></div>
</div>

CSS

.container {
  border: 1px solid #333;
  height: 250px;
  width: 250px;
}
.center {
  display: table;
  height: 100%;
  width: 100%;
}
.center > span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

DEMO

Просмотр реальных эффектов и редактирование кода на CodePen

  • display:table заставляет элемент .center вести себя как<table>HTML-элементы;
  • Установите ширину и высоту .center на 100%, чтобы он заполнил родительский элемент;
  • display: table-cell, установка table-cell '.center > span' позволяет элементу вести себя как элемент HTML;
  • text-align: центрировать дочерний элемент по горизонтали;
  • вертикальное выравнивание: среднее центрирует дочерний элемент по вертикали;

Внешний родитель должен иметь фиксированную ширину и высоту.

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

100%

Посмотреть эту статью

5. Равномерное распределение подэлементов

HTML

<div class="evenly-distributed-children">
  <p>Item1</p>
  <p>Item2</p>
  <p>Item3</p>
</div>

.evenly-distributed-children {
  display: flex;
  justify-content: space-between;
}

DEMO

Просмотр реальных эффектов и редактирование кода на CodePen

иллюстрировать

  • display: flex : включить гибкий макет

  • выравнивание содержимого: пробел между:

  • Равномерно распределяет дочерние элементы по горизонтали. Первый дочерний элемент находится на левом краю, а последний дочерний элемент — на правом краю. В качестве альтернативы используйте justify-content:space-around, чтобы выделить пространство вокруг дочерних узлов, а не между ними.

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

99.5%

  • Префикс необходим для полной поддержки.caniuse

6. Сделайте изображение более удобным в контейнере

Задает размер и положение изображения в его контейнере, сохраняя соотношение сторон. Раньше этого можно было добиться только с помощью фонового изображения и свойства background-size.

HTML

<img class="image image-contain" src="https://picsum.photos/600/200" />
<img class="image image-cover" src="https://picsum.photos/600/200" />

CSS

.image {
  background: #34495e;
  border: 1px solid #34495e;
  width: 200px;
  height: 200px;
}
.image-contain {
  object-fit: contain;
  object-position: center;
}
.image-cover {
  object-fit: cover;
  object-position: right top;
}

DEMO

Просмотр реальных эффектов и редактирование кода на CodePen

иллюстрировать

  • object-fit: containОтображать все изображение внутри контейнера, сохраняя соотношение сторон
  • object-fit: coverЗаполните контейнер изображением и сохраните соотношение сторон
  • object-position: [x] [y]Отрегулируйте отображаемую часть изображения

поддержка браузера

95.5% caniuse

7. Центрирование с помощью flexbox

Используйте flexbox для центрирования дочерних элементов по горизонтали и вертикали.

HTML

<div class="flexbox-centering"><div class="child">Centered content.</div></div>

CSS

.flexbox-centering {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

DEMO

Просмотр реальных эффектов и редактирование кода на CodePen

иллюстрировать

  • display: flexвключить частичные гибкие
  • justify-content: centerдочерний элемент горизонтально центрирован
  • align-items: centerвертикальное центрирование дочерних элементов

поддержка браузера

99,5% (требуется префикс)caniuse

8. Отцентрируйте элемент по вертикали относительно другого элемента.

HTML

<div class="ghost-trick">
  <div class="ghosting"><p>Vertically centered without changing the position property.</p></div>
</div>

CSS

.ghosting {
  height: 300px;
  background: #0ff;
}
.ghosting:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
p {
  display: inline-block;
  vertical-align: middle;
}

DEMO

Просмотр реальных эффектов и редактирование кода на CodePen

иллюстрироватьИспользуйте стиль псевдоэлемента :before, чтобы выровнять встроенный элемент по вертикали без изменения его свойства position.

поддержка браузера

99.9% caniuse

9. Используйте сетку для центрирования

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

HTML

<div class="grid-centering"><div class="child">Centered content.</div></div>

CSS

.grid-centering {
  display: grid;
  justify-content: center;
  align-items: center;
  height: 100px;
}

DEMO

Просмотр реальных эффектов и редактирование кода на CodePen

иллюстрировать

  • display: gridВключить макет сетки
  • justify-content: centerЦентрировать дочерние элементы по горизонтали
  • align-items: centerДочерний элемент с вертикальным центрированием

поддержка браузера

92.3% caniuse

10. Заставьте последний элемент заполнить оставшуюся высоту

Предоставляя последнему элементу оставшееся свободное пространство в текущем окне просмотра, доступное пространство окна просмотра можно использовать даже при изменении размера окна.

HTML

<div class="container">
  <div>Div 1</div>
  <div>Div 2</div>
  <div>Div 3</div>
</div>

CSS

html,
body {
  height: 100%;
  margin: 0;
}
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.container > div:last-child {
  background-color: tomato;
  flex: 1;
}

DEMO

Просмотр реальных эффектов и редактирование кода на CodePen

иллюстрировать

  • height: 100%Установите высоту контейнера на высоту области просмотра
  • display: flexвключить гибкость
  • flex-direction: columnПроект настроен на порядок сверху вниз
  • flex-grow: 1flexbox применит оставшееся свободное пространство контейнера к последнему дочернему элементу. Родитель должен иметь высоту окна просмотра. flex-grow: 1 можно применить к первому или второму элементу, и у него будет все доступное пространство.

поддержка браузера

99,5% нужно использовать префиксcaniuse

11. Скрытые элементы за пределами экрана

HTML

<a class="button" href="http://pantswebsite.com">
  Learn More <span class="offscreen"> about pants</span>
</a>

CSS

.offscreen {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

DEMO

Просмотр реальных эффектов и редактирование кода на CodePen

иллюстрировать

  • удалить все границы
  • использоватьclipскрытый элемент
  • Установите ширину и высоту на 1 пиксель
  • Используйте поле: -1px, чтобы отменить высоту и ширину элемента
  • переполнение скрытых элементов
  • удалить все отступы
  • Абсолютно позиционируйте элемент, чтобы он не занимал места в DOM.

поддержка браузера

100% нужно использовать префиксcaniuse(Хотя cilp устарел, новый clip-path в настоящее время имеет очень ограниченную поддержку браузеров.)

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

использоватьposition: absolute and transform: translate()Для центрирования вам не нужно знать ширину и высоту родительского и дочернего элементов, поэтому это очень подходит для адаптивных приложений.

HTML

<div class="parent"><div class="child">Centered content</div></div>

CSS

.parent {
  border: 1px solid #333;
  height: 250px;
  position: relative;
  width: 250px;
}
.child {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

DEMO

Просмотр реальных эффектов и редактирование кода на CodePen

поддержка браузера

97,7% необходимо использовать префиксcaniuse

визуальный

13. Отображение усечения многострочного текста

Если текст длиннее одной строки, n строк будут обрезаны, заканчиваясь градиентом.

HTML

<p class="truncate-text-multiline">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
  labore et.
</p>

CSS

.truncate-text-multiline {
  overflow: hidden;
  display: block;
  height: 109.2px;
  margin: 0 auto;
  font-size: 26px;
  line-height: 1.4;
  width: 400px;
  position: relative;
}
.truncate-text-multiline:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 150px;
  height: 36.4px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), #f5f6f9 50%);
}

DEMO

Просмотр реальных эффектов и редактирование кода на CodePen

иллюстрировать

  • overflow: hiddenПредотвращение переполнения контента
  • width: 400pxУбедитесь, что элементы имеют размеры
  • height: 109.2pxРасчетное значение высоты, которое равно размеру шрифта * высоте строки * номеру строк (в данном случае 26 * 1,4 * 3 = 109,2).
  • height: 36.4pxВычисленное значение контейнера градиента, равное font-size * line-height (в данном случае 26 * 1,4 = 36,4).
  • background: linear-gradient(to right, rgba(0, 0, 0, 0), #f5f6f9 50%Градиент от透明градиент от прозрачного к＃f5f6f9

поддержка браузера

97.5% caniuse

14. Нарисуйте круг

Создавайте круги с помощью чистого CSS.

HTML

<div class="circle"></div>

CSS

.circle {
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  background: #333;
}

DEMO

Просмотр реальных эффектов и редактирование кода на CodePen

поддержка браузера

97.7% caniuse

15. Счетчик списка

Счетчики — это, по сути, поддерживаемые CSS переменные, значения которых могут увеличиваться с помощью правил CSS, чтобы отслеживать, сколько раз они используются.

HTML

<ul>
  <li>List item</li>
  <li>List item</li>
  <li>
    List item
    <ul>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </li>
</ul>

CSS

ul {
  counter-reset: counter;
}
li::before {
  counter-increment: counter;
  content: counters(counter, '.') ' ';
}

DEMO

Просмотр реальных эффектов и редактирование кода на CodePen

иллюстрироватьТеперь вы можете создавать упорядоченные списки, используя HTML-теги любого типа.

  • counter-resetИнициализировать счетчик, значение - это имя счетчика. По умолчанию счетчик начинается в 0. Это свойство также может быть использовано для изменения его значения на любой конкретный номер.
  • counter-incrementМожно использовать количество элементов. После сброса счетчика для инициализации значение счетчика может быть увеличено или уменьшено.
  • counter(name, style)Отображает значение счетчика раздела. Обычно используется для атрибутов содержимого. Эта функция может принимать два параметра, первый — это имя счетчика, а второй — содержимое заполнителя, например3.1десятичная точка.
  • Счетчики CSS особенно полезны для создания структурированных списков, поскольку новые экземпляры счетчика автоматически создаются в дочерних элементах. С помощью функции counters() можно вставлять текст с разделителями между вложенными счетчиками на разных уровнях.

поддержка браузера

99.9% caniuse

16. Пользовательские полосы прокрутки

HTML

<div class="custom-scrollbar">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.<br />
    Iure id exercitationem nulla qui repellat laborum vitae, <br />
    molestias tempora velit natus. Quas, assumenda nisi. <br />
    Quisquam enim qui iure, consequatur velit sit?
  </p>
</div>

CSS

.custom-scrollbar {
  height: 70px;
  overflow-y: scroll;
}
/* To style the document scrollbar, remove `.custom-scrollbar` */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

DEMO

Просмотр реальных эффектов и редактирование кода на CodePen

поддержка браузера

90.7% caniuse

17. Настройте стиль выбора текста

HTML

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

CSS

::selection {
  background: aquamarine;
  color: black;
}
.custom-text-selection::selection {
  background: deeppink;
  color: white;
}

DEMO

Просмотр реальных эффектов и редактирование кода на CodePen

поддержка браузера

86.5% caniuse

18. Создайте динамические тени

Создает тень, похожую на box-shadow, но на основе цвета самого элемента.

HTMl

<div class="dynamic-shadow"></div>

CSS

.dynamic-shadow {
  position: relative;
  width: 10rem;
  height: 10rem;
  background: linear-gradient(75deg, #6d78ff, #00ffb8);
  z-index: 1;
}
.dynamic-shadow::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  top: 0.5rem;
  filter: blur(0.4rem);
  opacity: 0.7;
  z-index: -1;
}

DEMO

Просмотр реальных эффектов и редактирование кода на CodePen

иллюстрировать

  • ::afterопределить псевдоэлемент
  • position: absoluteСделать псевдоэлемент из потока документа и расположить его относительно родителя
  • width: 100% and height: 100%Изменяет размер псевдоэлемента, чтобы заполнить размер его родительского элемента, делая его равным по размеру.
  • background: inheritСделать так, чтобы псевдоэлемент наследовал линейный градиент от родителя
  • top: 0.5remНемного сместите псевдоэлемент относительно его родителя.
  • filter: blur(0.4rem)Настройте эффект размытия псевдоэлемента, чтобы создать тень внизу.
  • opacity: 0.7Установить прозрачность псевдоэлемента
  • z-index: -1Поместите псевдоэлемент позади родительского элемента, но перед фоном.

поддержка браузера

94,2% нужно использовать префиксcaniuse

19. Эффект гравированного текста

Создает эффект, при котором текст кажется «выгравированным» или вырезанным на фоне.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;
}

DEMO

Просмотр реальных эффектов и редактирование кода на CodePen

иллюстрировать

  • text-shadow: 0 2px whiteСоздает белую тень с горизонтальным смещением 0px и вертикальным смещением 2px от начала координат.
  • Фон должен быть темнее тени, чтобы эффект был более выраженным.

поддержка браузера

99,5% нужно использовать префиксcaniuse

20. Фокус внутри псевдокласса

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

<div class="focus-within">
  <form>
    <label for="given_name">Given Name:</label> <input id="given_name" type="text" /> <br />
    <label for="family_name">Family Name:</label> <input id="family_name" type="text" />
  </form>
</div>

CSS

form {
  border: 3px solid #2d98da;
  color: #000000;
  padding: 4px;
}
form:focus-within {
  background: #f7b731;
  color: #000000;
}

DEMO

Просмотр реальных эффектов и редактирование кода на CodePen

иллюстрировать

  • 伪类：：focus-withinПрименяет соответствующие стили к родительскому элементу (любые дочерние элементы находятся в фокусе). Например, элемент ввода внутри элемента формы.

поддержка браузера

82,9% не поддерживаются IE11 или текущей версией Edge.caniuse

21. Полный экран указанного элемента

:fullsrcreenПолноэкранный псевдокласс представляет элемент, который отображается, когда браузер находится в полноэкранном режиме.HTML

<div class="container">
  <p><em>Click the button below to enter the element into fullscreen mode. </em></p>
  <div class="element" id="element"><p>I change color in fullscreen mode!</p></div>
  <br />
  <button onclick="var el = document.getElementById('element'); el.requestFullscreen();">
    Go Full Screen!
  </button>
</div>

CSS

.container {
  margin: 40px auto;
  max-width: 700px;
}
.element {
  padding: 20px;
  height: 300px;
  width: 100%;
  background-color: skyblue;
}
.element p {
  text-align: center;
  color: white;
  font-size: 3em;
}
.element:-ms-fullscreen p {
  visibility: visible;
}
.element:fullscreen {
  background-color: #e4708a;
  width: 100vw;
  height: 100vh;
}

DEMO

Просмотр реальных эффектов и редактирование кода на CodePen

иллюстрировать

  • :fullscreenСелекторы псевдоклассов используются для выбора и установки элементов, которые будут отображаться в полноэкранном режиме.

поддержка браузера

85.6%

Детали атрибута

caniuse

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

Обеспечивает цвет градиента для текста.

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

DEMO

Просмотр реальных эффектов и редактирование кода на CodePen

поддержка браузера

94.1%

caniuse

23. Отслеживание градиента

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

HTML

<button class="button">
	<span>Hover me I'm awesome</span>
</button>

CSS

body {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: white;
}

.button {
	position: relative;
	appearance: none;
	background: #f72359;
	padding: 1em 2em;
	border: none;
	color: white;
	font-size: 1.2em;
	cursor: pointer;
	outline: none;
	overflow: hidden;
	border-radius: 100px;
	
	span {
		position: relative;
		pointer-events: none;
	}
	
	&::before {
		--size: 0;

		content: '';
		position: absolute;
		left: var(--x);
		top: var(--y);
		width: var(--size);
		height: var(--size);
		background: radial-gradient(circle closest-side, #4405f7, transparent);
		transform: translate(-50%, -50%);
		transition: width .2s ease, height .2s ease;
	}
	
	&:hover::before {
		--size: 400px;
	}
}

document.querySelector('.button').onmousemove = (e) => {

	const x = e.pageX - e.target.offsetLeft
	const y = e.pageY - e.target.offsetTop

	e.target.style.setProperty('--x', `${ x }px`)
	e.target.style.setProperty('--y', `${ y }px`)
	
}

DEMO

Просмотр реальных эффектов и редактирование кода на CodePen

поддержка браузера

91,6% должны использовать jscaniuse

24. :не селектор псевдокласса

:notПсевдоселекторы полезны для стилизации группы элементов при сохранении стиля последнего (указанного) элемента.

HTML

<ul class="css-not-selector-shortcut">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

CSS

.css-not-selector-shortcut {
  display: flex;
}
ul {
  padding-left: 0;
}
li {
  list-style-type: none;
  margin: 0;
  padding: 0 0.75rem;
}
li:not(:last-child) {
  border-right: 2px solid #d2d5e4;
}

DEMO

Просмотр реальных эффектов и редактирование кода на CodePen

иллюстрировать

  • li:not(:last-child)Стилизует все элементы li, кроме last:child, поэтому справа от последнего элемента нет границы.

поддержка браузера

99.9% caniuse

25. Градиент прокрутки переполнения

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

<div class="overflow-scroll-gradient">
  <div class="overflow-scroll-gradient__scroller">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. <br />
    Iure id exercitationem nulla qui repellat laborum vitae, <br />
    molestias tempora velit natus. Quas, assumenda nisi. <br />
    Quisquam enim qui iure, consequatur velit sit? <br />
    Lorem ipsum dolor sit amet consectetur adipisicing elit.<br />
    Iure id exercitationem nulla qui repellat laborum vitae, <br />
    molestias tempora velit natus. Quas, assumenda nisi. <br />
    Quisquam enim qui iure, consequatur velit sit?
  </div>
</div>

CSS

.overflow-scroll-gradient {
  position: relative;
}
.overflow-scroll-gradient::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 240px;
  height: 25px;
  background: linear-gradient(
    rgba(255, 255, 255, 0.001),
    white
  ); /* transparent keyword is broken in Safari */
  pointer-events: none;
}
.overflow-scroll-gradient__scroller {
  overflow-y: scroll;
  background: white;
  width: 240px;
  height: 200px;
  padding: 15px;
  line-height: 1.2;
}

DEMO

иллюстрировать

  • ::afterОпределите псевдоэлемент для отображения эффекта градиента
  • background-image: linear-gradient(...)Добавьте линейный градиент от прозрачного к белому (сверху вниз).
  • pointer-events: noneУказывает, что псевдоэлементы не могут быть целью событий мыши, а текст позади по-прежнему доступен для выбора/интерактивен.

поддержка браузера

97.5% caniuse

26. Добавьте красивое подчеркивание в текст

HTML

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

CSS

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

DEMO

Просмотр и редактирование кода на CodePen

поддержка браузера

97.5% caniuse1 caniuse2

27. Сбросить все стили

Используйте одно свойство, чтобы сбросить все стили по умолчанию. это не повлияетdirectionа такжеunicode-bidiАтрибуты.

HTML

<div class="reset-all-styles">
  <h5>Title</h5>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui
    repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui
    iure, consequatur velit sit?
  </p>
</div>

CSS

.reset-all-styles {
  all: initial;
}

DEMO

Просмотр и редактирование кода на CodePen

иллюстрировать

allСвойства позволяют сбросить все стили (унаследованные или нет) к значениям по умолчанию.

поддержка браузера

91.2% caniuse

28. Разделитель формы

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

HTML

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

CSS

.shape-separator {
  position: relative;
  height: 48px;
  background: #333;
}
.shape-separator::after {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='m12 0l12 12h-24z' fill='%23fff'/%3E%3C/svg%3E");
  position: absolute;
  width: 100%;
  height: 12px;
  bottom: 0;
}

DEMO

Просмотр и редактирование кода на CodePen

иллюстрировать

  • background-image: url(...)Добавьте фигуру SVG (треугольник 24x12) в качестве фонового изображения для псевдоэлемента, который повторяется по умолчанию. Он должен быть того же цвета, что и разделяемый блок. Для других форм мы можем использоватьКодировщик URL для SVG.

поддержка браузера

99.7% caniuse

29. Системные шрифты

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

DEMO

Просмотр и редактирование кода на CodePen

иллюстрироватьБраузер будет искать шрифты один за другим, если найдет, будет использовать текущий, если не сможет найти шрифт (определенный в системе или в CSS), продолжит поиск позже.

  • -apple-systemРаботает на iOS и macOS (но не на Chrome)
  • BlinkMacSystemFontдля macOS Chrome
  • Segoe UIдля Windows 10
  • RobotoИспользовать на Android
  • Oxygen-SansИспользование в Linux KDE
  • Ubuntuдля Ubuntu
  • CantarellИспользование в Linux с оболочкой GNOME
  • Helvetica Neue and HelveticaДля macOS 10.10 и более ранних версий
  • ArialШрифты, широко поддерживаемые операционной системой
  • sans-serifЕсли никакой другой шрифт не поддерживается, перейдите на использование универсального шрифта без засечек.

100% поддержка браузера

30. css-переключатели

Реализовано с использованием только css

HTMl

<input type="checkbox" id="toggle" class="offscreen" /> <label for="toggle" class="switch"></label>

CSS

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  transition: all 0.3s;
}
.switch::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 18px;
  background-color: white;
  top: 1px;
  left: 1px;
  transition: all 0.3s;
}
input[type='checkbox']:checked + .switch::after {
  transform: translateX(20px);
}
input[type='checkbox']:checked + .switch {
  background-color: #7983ff;
}
.offscreen {
  position: absolute;
  left: -9999px;
}

DEMO

Предварительный просмотр и редактирование кода на CodePen

поддержка браузера97.7%нужно использовать префикс

caniuse

31. Нарисуйте треугольник с помощью 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;
}

DEMO

Предварительный просмотр и редактирование кода на CodePen

100% поддержка браузера;

32. Список полос зебры

Создавайте списки с чередующимися цветами фона, которые полезны для различения содержимого между строками.

HTML

<ul>
  <li>Item 01</li>
  <li>Item 02</li>
  <li>Item 03</li>
  <li>Item 04</li>
  <li>Item 05</li>
</ul>

CSS

li:nth-child(odd) {
  background-color: #eee;
}

DEMO

Предварительный просмотр и редактирование кода на CodePen

Поддержка браузера 99,9%caniuse

анимация

33. Анимация загрузки с отскоком

HTML

<div class="bouncing-loader">
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

@keyframes bouncing-loader {
  to {
    opacity: 0.1;
    transform: translate3d(0, -1rem, 0);
  }
}
.bouncing-loader {
  display: flex;
  justify-content: center;
}
.bouncing-loader > div {
  width: 1rem;
  height: 1rem;
  margin: 3rem 0.2rem;
  background: #8385aa;
  border-radius: 50%;
  animation: bouncing-loader 0.6s infinite alternate;
}
.bouncing-loader > div:nth-child(2) {
  animation-delay: 0.2s;
}
.bouncing-loader > div:nth-child(3) {
  animation-delay: 0.4s;
}

DEMO

Предварительный просмотр и редактирование кода на CodePen

Поддержка браузера 97,4%caniuse

34. Анимация границы кнопки

Создайте анимацию границы при наведении курсора

HTML

<div class="button-border"><button class="button">Submit</button></div>

CSS

.button {
  background-color: #c47135;
  border: none;
  color: #ffffff;
  outline: none;
  padding: 12px 40px 10px;
  position: relative;
}
.button:before,
.button:after {
  border: 0 solid transparent;
  transition: all 0.25s;
  content: '';
  height: 24px;
  position: absolute;
  width: 24px;
}
.button:before {
  border-top: 2px solid #c47135;
  left: 0px;
  top: -5px;
}
.button:after {
  border-bottom: 2px solid #c47135;
  bottom: -5px;
  right: 0px;
}
.button:hover {
  background-color: #c47135;
}
.button:hover:before,
.button:hover:after {
  height: 100%;
  width: 100%;
}

DEMO

Предварительный просмотр и редактирование кода на CodePen

иллюстрироватьИспользуйте псевдоэлементы :before и :after в качестве границ для анимации при наведении.

Поддержка браузера 100%.

35. Спиннер для пончиков

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

DEMO

HTML

<div class="donut"></div>

CSS

@keyframes donut-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.donut {
  display: inline-block;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #7983ff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: donut-spin 1.2s linear infinite;
}

Предварительный просмотр и редактирование кода на CodePen

иллюстрироватьИспользуйте полупрозрачную рамку для всего элемента, затем установите цвет границы с одной стороны.border-left-color: #7983ff;и, наконец, используйте анимацию, чтобы повернуть весь элемент.

Поддержка браузера **97,4%** требует использования префикса.

caniuse1 https://caniuse.com/#feat=transforms2d

caniuse2 feat=transforms2d

36. Эффект смягчения

DEMO

HTML

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

CSS

:root {
  /* Place variables in here to use globally */
}
.easing-variables {
  --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);
  display: inline-block;
  width: 75px;
  height: 75px;
  padding: 10px;
  color: white;
  line-height: 50px;
  text-align: center;
  background: #333;
  transition: transform 1s var(--ease-out-quart);
}
.easing-variables:hover {
  transform: rotate(45deg);
}

Предварительный просмотр и редактирование кода на CodePen

Поддержка браузера** 91,6%**caniuse css-variables

37. Чрезмерный рост

Преобразует высоту элемента от 0 до auto, если высота элемента неизвестна.

DEMO

Предварительный просмотр и редактирование кода на CodePen

HTML

<div class="trigger">
  Hover me to see a height transition.
  <div class="el">content</div>
</div>

CSS

.el {
  transition: max-height 0.5s;
  overflow: hidden;
  max-height: 0;
}
.trigger:hover > .el {
  max-height: var(--max-height);
}

JAVASCRIPT

var el = document.querySelector('.el')
var height = el.scrollHeight
el.style.setProperty('--max-height', height + 'px')

иллюстрировать

поддержка браузера91.6% caniuse css-variables

  • Примечание. Это приведет к перекомпоновке всех кадров анимации, и может возникнуть задержка, если под элементом находится много элементов.

caninuse - css-variables

caninuse - css-transitions

38. Анимация тени при наведении

Создает эффект анимации теневой рамки вокруг текста при наведении курсора на текст.

Эффекты анимации для предварительного просмотра и редактирования кода на CodePen

HTML

<p class="hover-shadow-box-animation">Box it!</p>

CSS

.hover-shadow-box-animation {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  margin: 10px;
  transition-duration: 0.3s;
  transition-property: box-shadow, transform;
}
.hover-shadow-box-animation:hover,
.hover-shadow-box-animation:focus,
.hover-shadow-box-animation:active {
  box-shadow: 1px 10px 10px -10px rgba(0, 0, 24, 0.5);
  transform: scale(1.2);
}

поддержка браузера97.3%

caniuse - feat-transforms3d

caniuse - css-transitions

39. Анимация скольжения при наведении

Создает эффект анимации подчеркивания текста при наведении курсора на текст.

DEMO

Эффекты анимации для предварительного просмотра и редактирования кода на CodePen

HTML

<p class="hover-underline-animation">Hover this text to see the effect!</p>

CSS

.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: #0087ca;
}
.hover-underline-animation::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0087ca;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

иллюстрировать

  • display: inline-blockСделайте p встроенным блоком, чтобы подчеркивание не занимало всю ширину строки, а не только текстовое содержимое.
  • position: relativeУстановить родительский элемент в относительное позиционирование
  • ::afterопределить псевдоэлемент
  • position: absoluteВыньте псевдоэлемент из документа шесть и расположите его относительно родительского элемента
  • width: 100%Убедитесь, что псевдоэлемент и родительский элемент имеют одинаковую ширину.
  • transform: scaleX(0)Псевдоэлемент изначально масштабирован до 0, поэтому он невидим.
  • bottom: 0 and left: 0Поместите псевдоэлемент в левый нижний угол родительского элемента.
  • transition: transform 0.25s ease-outУстановите эффект анимации наease-out, и завершено в течение 0,25 секунды.
  • transform-origin: bottom rightПреобразуйте центральную точку в правый нижний угол родительского элемента.
  • :hover::afterЗатем используйте scaleX (1), чтобы преобразовать ширину до 100%, затем измените центральную точку на нижний левый угол, позволяя ей трансформироваться в другом направлении при наведении.

поддержка браузера97.5%

caniuse - feat=transforms2d

caniuse - css-transitions

взаимодействовать

40. Отключить выбор

Используйте css, чтобы сделать контент недоступным для выбора.

DEMO

Предварительный просмотр эффектов и редактирование кода на CodePen

HTML

<p>You can select me.</p>
<p class="unselectable">You can't select me!</p>

CSS

.unselectable {
  user-select: none;
}

иллюстрировать

user-select: noneУказывает, что текст нельзя выделить

поддержка браузера93.2%(Префикс обязателен, это небезопасный способ предотвратить копирование контента пользователями.)

caniuse - feat=user-select-none

41. Всплывающее меню

Всплывающие интерактивные меню при наведении и фокусе.

Предварительный просмотр эффектов и редактирование кода на CodePen

HTML

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

CSS

.reference {
  position: relative;
  background: tomato;
  width: 100px;
  height: 100px;
}
.popout-menu {
  position: absolute;
  visibility: hidden;
  left: 100%;
  background: #333;
  color: white;
  padding: 15px;
}
.reference:hover > .popout-menu,
.reference:focus > .popout-menu,
.reference:focus-within > .popout-menu {
  visibility: visible;
}

иллюстрировать

  • left: 100%Всплывающее меню смещено слева на 100% ширины его родителя.
  • visibility: hidden
  • .reference:hover > .popout-menu.popout-menu отображается при наведении курсора
  • .reference:focus > .popout-menuПри фокусировке меню .popout показывает
  • .reference:focus-within > .popout-menuУбедитесь, что всплывающее окно отображается, когда фокус находится в пределах контрольного диапазона.

100% поддержка браузера;

42. Родственные элементы исчезают

Узлы-близнецы исчезают при наведении курсора.

DEMO

Предварительный просмотр эффектов и редактирование кода на CodePen

HTML

<div class="sibling-fade">
  <span>Item 1</span> <span>Item 2</span> <span>Item 3</span> <span>Item 4</span>
  <span>Item 5</span> <span>Item 6</span>
</div>

CSS

span {
  padding: 0 1rem;
  transition: opacity 0.2s;
}
.sibling-fade:hover span:not(:hover) {
  opacity: 0.5;
}

иллюстрировать

  • transition: opacity 0.2sУстановите анимацию затухания на 0,2 секунды.
  • .sibling-fade:hover span:not(:hover)Когда родитель наведен, выберите дочерний элемент span, который в данный момент не наведен, и измените его прозрачность на 0,5.

поддержка браузера на 97,5%;

caniuse-feat=css-sel3

caniuse-feat=css-transitions

разное

43. Расчетная функция Calc()

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

DEMO

Предварительный просмотр эффектов и редактирование кода на CodePen

Вы можете использовать только значения длины строки, если хотите выровнять фоновое изображение справа и снизу. Итак, теперь можно использовать функцию calc().

HTML

<div class="box-example"></div>

CSS

.box-example {
  height: 280px;
  background: #222 url('https://image.ibb.co/fUL9nS/wolf.png') no-repeat;
  background-position: calc(100% - 20px) calc(100% - 20px);
}

иллюстрировать

  • Допускаются сложение, вычитание, умножение и деление.
  • Вы можете использовать разные единицы измерения (например, пиксели и проценты) для каждого значения в выражении.
  • Допускаются вложенные функции calc().
  • Его можно использовать для любого разрешения,

Поддержка браузера 97,0%

caniuse - feat=calc

44. Пользовательские переменные css

Переменные CSS, которые содержат определенные значения для повторного использования.

HTML

<p class="custom-variables">CSS is awesome!</p>

CSS

:root {
  /* Place variables within here to use the variables globally. */
}
.custom-variables {
  --some-color: #da7800;
  --some-keyword: italic;
  --some-size: 1.25em;
  --some-complex-value: 1px 1px 2px whitesmoke, 0 0 1em slategray, 0 0 0.2em slategray;
  color: var(--some-color);
  font-size: var(--some-size);
  font-style: var(--some-keyword);
  text-shadow: var(--some-complex-value);
}

DEMO

Предварительный просмотр эффектов и редактирование кода на CodePen

иллюстрировать

  • --variable-name:Используйте этот формат для объявления переменных.
  • var(--variable-name)Используйте эту функцию для повторного использования переменных в документе.

Поддержка браузера 91,6%

caniuse - feat=css-variables

Для получения более захватывающего, веселого и полезного фронтенд-контента, пожалуйста, обратите внимание на публичный аккаунт «Front-end Technology Jianghu».

Категории