Краткое содержание демистифицирующих практических навыков CSS

"Секреты CSS" рассказывает о 47 навыках работы с CSS, многие из которых не используются в ежедневном программировании. Помимо перечисления в книге некоторых практических навыков, эта статья также пытается помочь читателям понятьbackground,animationТочки знаний, которые обычно используются, но не усваиваются прочно. Так что чтение этой статьи может не только освоить некоторые практические навыки, но и закрепить базовые знания CSS.

Практические советы

СУХОЙ принцип

полное имяDon't Repeat Yourself, этот принцип применим ко всем языкам программирования и не ограничивается CSS.

Расширить кликабельную область

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

.expand-range {
  position: relative;
}
.expand-range:after {
  content: '';
  position: absolute;
  top: -10px; right: -10px; bottom: -10px; left: -10px;
}

scss рекомендуется:

@mixin expand-range($top: -10px, $right: $top, $bottom: $top, $left: $right, $position: relative) {
  position: $position;
  &:after {
    content: '';
    position: absolute;
    top: $top;
    right: $right;
    bottom: $bottom;
    left: $left;
  }
}
//使用：.test { @include expand-range($top: -5px, $position: absolute) }

Умело используйте каскадный контекст

• Ключевая реализация: контекст наложения псевдоэлементов
• Конкретный анализ: использование каскадного контекста иz-index: -1Эта функция позволяет псевдоэлементам закрывать фон, не закрывая текст (см. конкретный принцип реализации).здесь). Это очень распространенная и простая в использовании техника, и при правильном использовании можно добиться множества неожиданных эффектов.адрес

  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;

закругленные углы

• Ключевая реализация: контекст наложения псевдоэлементов
• Конкретный анализ: Используйте псевдоэлементы для реализации прямоугольников со скругленными углами и наложения их на фон родительского элемента и под текст:адрес

clip-path

• Ключевая реализация:clip-path
• Конкретный анализ: новые свойства css3clip-pathМожно добиться отсечения области.Теперь браузеры лучше поддерживают три функции:clip-path: circle(50px at 50px 50px)к50px 50pxОбрежьте круг радиусом 50 пикселей в качестве центра круга;clip-path: ellipse(30px 40px at 50px 50px)к50px 50pxОбрежьте эллипс с горизонтальным радиусом 30 пикселей и вертикальным радиусом 40 пикселей в качестве центра круга;clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%)Вырежьте многоугольник, в данном случае ромб, по нескольким координатам. имеютclip-path, вы можете легко реализовать произвольные полигоны:адрес

Адаптивный эллипс

• Ключевая реализация:border-radius
• подробный анализ:border-radiusМожно установить радиус 8 углов ~ Среди них четыре в горизонтальном направлении (где есть радианы на верхней и нижней сторонах диагонали) и четыре в вертикальном направлении (где радианы слева и справа стороны диагонали), вы можете использовать/сегментация. Если по горизонтали или вертикали указано менее четырех значений,margin、paddingТе же правила повторяются. Если указано только горизонтальное направление, то вертикальное направление совпадает с горизонтальным направлением.

    border-radius: 5em 1em; /*相当于border-radius: 5em 1em 5em 1em / 5em 1em 5em 1em;*/

адаптивная ширина

• Ключевая реализация:min-contentключевые слова
• Конкретный анализ: как понять, что ширина элемента является адаптивной в соответствии с максимальной фиксированной шириной элемента элементов-потомков? ломая голову, могут только использоватьdisplay: inline-blockОбернутая функция реализует неполную версию:адресНедостаток этого подхода заключается в том, что текст находится вне потока документа, а высота не учитывается в содержащем блоке. Но если вы используетеmin-contentключевое слово, которое можно реализовать одной строкой кода без побочных эффектов:адрес

  width: min-content;

Проекция имитирует несколько границ

• Ключевая реализация:box-shadowизinset
• Конкретный анализ: использованиеbox-shadowМожно смоделировать несколько границ, но поскольку тень не занимает места, событие щелчка не может быть вызвано, а маленькая рука не может появиться, когда мышь наводит курсор на границу, поэтому ее необходимо координировать.insetИспользование ключевого слова:адрес

  height: 200px;
  background: cyan;
  box-shadow: 0 0 0 5px #000 inset,
              0 0 0 10px #555 inset,
              0 0 0 15px #999 inset;

односторонняя проекция

• Ключевая реализация:box-shadow
• подробный анализ:box-shadowПервые два параметра определяют смещения тени по осям X и Y. Обратите внимание, что если это положительное число, общее смещение вправо/вниз, тогда соответствующая левая/верхняя часть будет освобождена (что можно использовать для скрытия размытия). радиус или расширение).Радиус), противное отрицательное число; третий параметр — радиус размытия тени, то есть лишний цвет, добавляемый размытием по Гауссу; четвертый параметр — радиус расширения тени, указывающий размер тени увеличение, которое может быть отрицательным числом, указывающим на размер укорочения тени:адрес

  box-shadow: 0 5px 4px -4px black;

Второй параметр заставляет тень двигаться вниз на 5 пикселей в целом, а третий параметр добавляет вокруг тени размытие по Гауссу на 4 пикселя. появляются с левой и правой стороны, таким образом достигается односторонняя проекция.

Вы также можете установить несколько цветов тени, разделенных запятыми, например, для следующего двустороннего эффекта тени:адрес

  box-shadow: 5px 0 5px -5px black,
             -5px 0 5px -5px black;

неправильная проекция

• Ключевая реализация:filter: drop-shadow()
• подробный анализ:box-shadowнельзя показывать через прозрачный фон, нельзя показывать поверх псевдоэлементов/подэлементов, и этиdrop-shadowможет сделать это. (но любая проекция будетclip-pathвырезать ～～)адрес

  filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));

Отфильтруйте эффекты оттенка и затухания

Большинство фронтенд-разработчиков понимают, что гауссовский зеркальный эффект пастовой фильтрацииfilter: blur()достигается, но с некоторыми другими тонирующими эффектами фильтра.filterЗначение имеетblur(),drop-shadow(),url(),brightness(),contrast(),grayscale(),hue-rotate(),invert(),opacity(),saturate(),sepia()～Вы можете использовать составные формы, такие как:filter: sepia(1) saturate(4)Ждать. Ниже приведен большой набор значений атрибутов фильтра:адрес

круговая диаграмма svg

CSS-реализация круговой диаграммы очень странная, поэтому я ее игнорирую. Рекомендуется использовать схему реализации svg, которая очень проста.Давайте начнем с базового обучения~

Сначала нарисуйте круг:

<svg width="100" height="100">
  <circle r="25" cx="50" cy="50" />
</svg>

здесьr="25"радиус 25,cx cyцентр кругаx yкоординировать.

circle {
  fill: yellowgreen;
  stroke: #666;
  stroke-width: 50;
}

Это определяет штрих шириной 40 для круга:

Затем установите штрихи в виде пунктирных линий с длиной сегмента 20 и интервалом 10:

circle {
    ...
    stroke-dasharray: 20 10;
}

Когда интервал пунктирной линии больше или равен длине окружности, длина сегмента пунктирной линии представляет собой площадь сектора (сектор достигает 100 %, когда длина сегмента линии равна длине окружности). длина окружности):

Установите закругленные углы и цвет фона на svg и поверните на -90 градусов, вы можете получить круговую диаграмму:адрес(использоватьcurrentColorключевые слова иcolor: inheritзаключается в реализации принципа DRY. )

Однако размер сектора такой круговой диаграммы рассчитать непросто.Для облегчения расчета длина отрезка пунктирной линии также может быть бесконечно близка к 100, так что процент сектора может быть настроить удобнее. Длина окружности равна 2πr, поэтому100 = 2πr, радиус r рассчитан примерно равным 16. Затем используйте свойство viewBox для svg, чтобы реализовать круговую диаграмму с адаптивным размером контейнера:адрес

Недостатком этого метода является то, что при установкеstroke-dasharray: 100 100Будет зазор, которого нельзя избежать, взяв приближение.

задний планbackground

backgroundЭто один из наших наиболее часто используемых атрибутов, но мне, как старому интерфейсу, стыдно сказать, что я не полностью понимаю этот атрибут в настоящее время.

backgroundявляется сокращенным свойством, которое может включать в себя несколько свойств:background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size、background-attachment. Далее, давайте рассмотрим роль этих свойств один за другим:

• background-colorНаиболее часто используемые свойства, не наследуемые по умолчанию (backgroundВсе свойства не наследуются по умолчанию), начальное значение равноtransparent; Иногда с помощью наследования по умолчанию можно добиться некоторых интересных эффектов, таких как отражение;
• backgroundo-imageФоновые изображения, вы можете установить несколько изображений, разделенных запятыми, которые могут быть URL-адресами изображений или градиентными цветами;
• background-clipОтсечение фона, вы можете установить несколько настроек, разделенных запятыми, значение может бытьbroder-box(Первоначальный значение),padding-box,content-box,text(новое, фон обрезается текстом);
• background-originУстановите относительную площадь начальной точки фона с помощьюbackground-positionИспользование, может быть разделено запятой на несколько, значение может бытьborder-box,padding-box(Первоначальный значение),content-box;
• background-positionУстановите начальную точку фона, вы можете установить несколько разделенных запятыми, значение может быть10px 20px,center center,left 10px bottom 20pxподождите, очень гибкий;
• background-sizeУстановите размер фона, вы можете установить несколько разделенных запятыми, значение может быть числовым значением, например30px 40px,auto auto(Первоначальный значение),conver,contain;background-repeat: repeatПовторяется в соответствии с этим размером.
• background-repeatУстановите повторяющийся метод фона, начальное значениеrepeat, обычно используемые значенияno-repeat;
• background-attachmentУстанавливает, будет ли позиция фонового изображения фиксированной в области просмотра или прокручивается вместе с содержащим его блоком. Несколько настроек можно разделить запятыми, а значенияscroll(Первоначальный значение),local,fixed. Посмотреть деталиMDN

когда сокращеноbackground-sizeтолько следующийbackground-positionПоявляется, разделенный символом /, например: «центр / 80%».

Полупрозрачная граница

• Ключевая реализация:background-clip
• Конкретный анализ: из-заbackgroundПо умолчанию свойство будет охватывать всю блочную модель, включая границу.border, поэтому установитеborder-color: rgba(0, 0, 0, .5)Когда фоновый цвет раскрыт, эффект полупрозрачной границы не может быть достигнут. добавлен css3background-clipСвойство, определяющее область отсечения для фоновой заливки. настраиватьpadding-boxПолупрозрачная граница может быть достигнута:адрес

  border: 10px solid rgba(255, 255, 255, .5);
  background: white;
  background-clip: padding-box;

Гибкое позиционирование фона

• Ключевая реализация:backgrond-position background-origin
• Конкретный анализ: мы все знаемbackground-positionПозиции, такие как фоновые изображения, можно позиционировать, но все они являются относительными.padding-boxи так далее. CSS3 позволяет писать:background-position: right 10px bottom 20px, пока CSS3 также поддерживаетbackground-origin, чье значение по умолчанию такое, как оно себя ведетborder-box, поддержка настроена наpadding-boxа такжеcontent-box:адрес

  height: 200px;
  padding: 10px;
  border: 5px solid cyan;
  background: lightblue;
  background: radial-gradient(#00a4fd, cyan) no-repeat right 100px bottom / 100px 100px;
  background-origin: content-box;

background-positionЗадать его в виде процентного значения сложнее. Процентное значение фактически выполняет следующую формулу расчета:

(container width - image width) * (position x%) = (x offset value)
(container height - image height) * (position y%) = (y offset value)

Это видно из формулы расчета: при значении 0% фактическое значение смещения равно 0px, а левая граница (или верхняя граница) изображения и левая граница (или верхняя граница) контейнера совпадают; при значение равно 50%, фактическое значение смещения равно 0 пикселям. Значение смещения равно половине контейнера минус оставшееся пространство изображения. Левая и правая границы (или верхняя и нижняя границы) изображения равны левой и правые границы (или верхняя и нижняя границы) контейнера, при этом средняя точка изображения совпадает с серединой контейнера. Когда значение равно 100%, фактическое значение смещения равно оставшемуся пространству контейнера за вычетом изображения, поэтому в это время правая граница (или нижняя граница) изображения и правая граница (или нижняя граница) контейнера совпадают. . Это также справедливо, когда разница между ними отрицательна.адрес

полосатый фон

• Ключевая реализация:background-image
• Анализ реализации: используйте линейный градиент, чтобы реализовать поэтапное повторение нескольких цветов для формирования полосатого фона.lienar-gradientПервый параметр — это угол градиента, который может быть ключевым словом направления.to top(начальное значение, можно игнорировать или не записывать) и т. д., также это может быть угол90degЖдать;#fb3 50%Относится к значениям остановки цвета и конечной позиции; здесьlinear-gradientВторое значение позиции, равное 0, будет проанализировано как значение позиции предыдущей цветовой шкалы, что составляет 50%, поэтому более последовательно писатьDRYв общем.

background: linear-gradient(#fb3 50%, #58a 0);
background-size: 100% 30px;

Также можно установить в качестве фона с вертикальной полосой:

background: linear-gradient(to right, #fb3 50%, #58a 0);
background-size: 100% 30px;

Также можно установить диагональные полосы:

background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
background-size: 30px 30px;

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

Лучше диагональные полосы :( здесь нужно установить начальное значение#fb3 0)

background: repeating-linear-gradient(60deg, #fb3 0, #fb3 15px, #58a 0, #58a 30px);

сетка

• Ключевая реализация:background-image,background-size
• Установите разные направления и размеры для нескольких градиентов, чтобы добиться эффекта сетки.адрес

background: #58a;
background-image: linear-gradient(white 1px, transparent 0),
                  linear-gradient(to right, white 1px, transparent 0);
background-size: 30px 30px;

Лучшая сетка:

background: #58a;
background-image: linear-gradient(white 2px, transparent 0),
                  linear-gradient(to right, white 2px, transparent 0),
                  linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 0),
                  linear-gradient(to right, rgba(255, 255, 255, .5) 1px, transparent 0);
background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;

шахматная доска

• Ключевая реализация:background-image,background-size,background-position
• Конкретный анализ: установка разных размеров и положений для нескольких градиентов может привести к эффекту сетки.адрес

  background: #eee;
  background-image:
    linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, .25) 0),
    linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, .25) 0);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;

Угловой

• Ключевая реализация: линейный градиент
• Конкретный анализ: 150 градусов образуют угол в 30 градусов, что удобно использовать теорему Пифагора для измерения различных длин, а остальное зависит от вас ~адрес

сюдаbackgroundАтрибуты в основном готовы, просто смотреть на них бесполезно, давайте еще потренируемся.

в горошек

• Ключевая реализация: радиальный градиент
• Конкретный анализ: используйте радиальный градиент для создания маленьких точек и размещайте их обычным образом для создания волнистых точек.адрес

  background:
    radial-gradient(tan 30%, transparent 0),
    radial-gradient(tan 30%, transparent 0);
  background-color: #666;
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;

фаска

• Ключевая реализация:clip-path, радиальный градиент
• Конкретный анализ: Вообще говоря, эффект фаски многоугольников (на самом деле, это все еще неправильные многоугольники) используется дляclip-pathИ то, и другое легко реализовать, но для закругленных фасок лучше всего подходят радиальные градиенты. Но что, если есть изогнутые фаски?radial-linearПервый параметр указывает начальную точку градиента (по умолчанию — центральная точка) и может указать, является ли тип градиента эллипсом или кругом;адрес

  background:
    radial-gradient(circle at top left, transparent 15px, blue 0) top left,
    radial-gradient(circle at top right, transparent 15px, cyan 0) top right,
    radial-gradient(circle at bottom right, transparent 15px, cyan 0) bottom right,
    radial-gradient(circle at bottom left, transparent 15px, cyan 0) bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;

Круговая диаграмма

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

  background: conic-gradient(lightblue 30%, yellowgreen 0, yellowgreen 50%, cyan 0);

Анимацияanimation

animationсобственностьanimation-name、animation-duration、 animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-stateСокращенная форма свойств для свойств.

• animation-nameУкажите название анимации, можно задать несколько через запятую (любое из следующих);
• animation-durationОпределяет время, в течение которого будет выполняться анимация;
• animation-delayОпределяет задержку перед выполнением анимации;
• animation-timing-functionУказывает функцию скорости для выполнения анимации, напримерlinear,ease(По умолчанию),ease-in-outд., можно использовать и функцию Бесселя.cubic-bezier();
• animation-iteration-countУказывает, сколько раз запускать анимацию, по умолчанию 1, можноInfiniteнеограниченное количество раз;
• animation-directionУказывает, воспроизводится ли анимация в обратном направлении,normalнормальный порядок,alternateбег попеременно,reverseбежать в обратном направлении,alternate-reverseобратная попеременная работа;
• animation-fill-modeстилизовать анимацию CSS до и после выполнения,noneне установлен,forwardsсохранить стиль последнего кадра анимации,backwardsНемедленно примените значение, определенное в первом ключевом кадре, и сохраните это значение во время задержки анимации.bothПрименить одновременноforwardsа такжеbackwardsправило;
• animation-play-stateОпределяет, запущена анимация или приостановлена, значение равноrunning,paused.

эффект отскока

Как добавить анимацию к эффекту отскока? Вот один из самых удобных способов:

• Ключевая реализация:cubic-bezier(x1, y1, x2, y2)
• Конкретный анализ: используйте характеристики второй контрольной опорной точки кривой Безье, чтобы они были больше 1, чтобы добиться отскока.

Горизонтальная ось на приведенном выше рисунке — это время, а вертикальная ось — ход анимации. Кривая Безье на рисунке имеет две ручки управления,x1, y1контроль первой точки привязки,x2, y2Управляет второй точкой привязки. вx1 、x2не может быть больше/меньше 1, ноy1, y2Могу. когдаy2Если больше 1, нужно будет достичь терминала заранее, а затем через конец, а затем вернуться к конечному эффекту, так же, как и отскок.адрес

  animation: bounce 3s both cubic-bezier(.7, .1, .3, 2);

transitionсобственностьtransition-property、transition-duration、transition-timing-function、transition-delayСокращенное свойство . использоватьtransitionТот же эффект отскока может быть достигнут:адрес

p {
  transform-origin: 1.4em -.4em;
  transition: transform .5s cubic-bezier(.25, .1, .3, 1.5);
}

input:not(:focus) + p {
  transform: scale(0);
  transition: transform 300ms; /*此处是为了缩小时重置transition-timing-function，不触发回弹*/
}

движущийся фон

• Ключевая реализация:animation,background-position
• Конкретный анализ: последний кадр анимации будетbackground-positionустановить как100% 0%, анимация изменит положение фона по сравнению с исходным0% 0%до конца100% 0%над:адрес

div {
  width: 150px; height: 150px;
  background: url('http://c3.staticflickr.com/3/2671/3904743709_74bc76d5ac_b.jpg');
  background-size: auto 100%;	
  animation: panoramic 10s linear infinite alternate;
}
div:hover {
  animation-play-state: paused;
}

@keyframes panoramic {
  to { background-position: 100% 0; }
}

Анимация движения по круговой траектории

• Ключевая реализация:animation transform-origin
• Конкретный анализ: установка вращающегося контейнераtransform-originЭто центральная точка контейнера большого круга, и принцип, согласно которому углы поворота двух элементов компенсируют друг друга, когда они вращаются в разных направлениях, используется для реализации вращения изображения по круговой траектории при сохранении собственного угла неизменным. . Обратите внимание, что расстояние между маленьким кругом и большим кругом определяетсяpaddingконтроль имущества, корректировкаpaddingКогда вам нужно настроить начало вращения маленького кругаtransform-originчтобы сохранить круговой путь правильным:адрес

@keyframes spin {
  to { transform: rotate(1turn); }
}
.avatar {
  animation: spin 3s linear 2s infinite;
  transform-origin: 110px 110px;
}
.avatar > img {
  animation: inherit;
  animation-direction: reverse;
}

Автор рекомендует css статьи

На самом деле, в сообществе уже есть много хороших статей по навыкам css, вот несколько статей, которые я считаю написаны отличными навыками css (конечно, вы могли их прочитать, но мне стыдно, что я их не читал все же):

• Больше, чем CSS
• Гибкое использование навыков разработки CSS
• CSS мир основ внешнего интерфейса(Его до сих пор стыдно добавлять, но я тоже сам его собираю. Я часто смотрю на него, и я действительно чувствую, что это очень ценно: для студентов, которые не изучали CSS систематически)
• 49 пунктов знаний CSS, о которых вы могли не знать
• Знания CSS, о которых вы могли не знать (2-й сезон)
• Практические советы, упомянутые в CSS World
• Мой обычный способ написания CSS
• 50 основных вопросов для собеседования по CSS (с ответами)
• Резюме вопросов интервью CSS

Суммировать

В целом, книга "Секреты CSS" не вызвала у меня особого удивления, и лично я считаю, что она не так полезна, как чтение "Мира CSS". Конечно, эта книга чисто техническая и не дает много принципиальных знаний, так что я не могу ее осуждать. Заинтересованные студенты могут следовать за мной, чтобы изучить волнуcss мир, я считаю, что определенно будет больше достижений ~