Изучите эти CSS, не давайте мне вырезать картинки! ! !

Название шутливое, на самом деле в CSS3 есть много интересных функций, таких как тени.shadow, анимацияanimation, деформацияtransform, градиентgradient, фильтрfilterИ т. д., а рациональное использование этих возможностей позволяет добиться многих высокоуровневых эффектов. Если вы считаете это полезным, ставьте лайк или подписывайтесь.

треугольник

использоватьborder-colorслужба поддержкиtransparentЭта функция скрывает три границы и реализует треугольник.

<style>
.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  box-sizing: border-box;
  border-width: 0 10px 10px;
  border-color: transparent transparent #c5c5c5 transparent;
}
</style>
<div class="triangle"></div>

Эффект следующий:

Онлайн-демонстрация кода

верхний левый треугольник

<style>
.left-top-triangle {
  width: 0;
  height: 0;
  border-style: solid;
  box-sizing: border-box;
  border-width: 10px;
  border-color: #c5c5c5 transparent transparent #c5c5c5;
}
</style>
<div class="left-top-triangle"></div>

Эффект следующий:

Онлайн-демонстрация кода

правильный пятиугольник

<style>
.pentagon {
  width: 54px;
  position: relative;
  border-width: 50px 18px 0;
  border-style: solid;
  border-color: #c5c5c5 transparent;
}

.pentagon::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  top: -85px;
  left: -18px;
  border-width: 0 45px 35px;
  border-style: solid;
  border-color: transparent transparent #c5c5c5;
}
</style>
<div class="pentagon"></div>

Эффект следующий:

Онлайн-демонстрация кода

пузырьковая коробка

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

<style>
.bubble-tip {
  width: 100px;
  height: 30px;
  line-height: 30px;
  margin-left: 10px;
  border: 1px solid #c5c5c5;
  border-radius: 4px;
  position: relative;
  background-color: #fff;
}
.bubble-tip::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 10px 0;
  border-color: transparent #ffffff transparent transparent;
  position: absolute;
  top: 5px;
  left: -10px;
  z-index: 2;
}
.bubble-tip::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 10px 0;
  border-color: transparent #c5c5c5 transparent transparent;
  position: absolute;
  top: 5px;
  left: -11px;
  z-index: 1;
}
</style>
<div class="bubble-tip"></div>

Эффект следующий:

Онлайн-демонстрация кода

эффект тени

реализация box-shadow

грамматика:

box-shadow: offest-x offest-y blur-radius spread-radius color inset;

ценность	Это обязательно	описывать
offest-x	да	Горизонтальное смещение тени. Положительные тени размещаются справа от элемента, а отрицательные — слева от элемента.
offest-y	да	Смещение тени по вертикали. Положительные тени размещаются под элементом, а отрицательные — над элементом.
blur-radius	нет	Радиус размытия тени. Чем больше значение, тем больше область размытия и тем крупнее и светлее тень. Не может быть отрицательным. По умолчанию 0, что приводит к резким краям теней.
spread-radius	нет	Радиус распространения тени. При положительном значении тень расширяется, при отрицательном — сжимается. По умолчанию 0, и в этом случае тень имеет тот же размер, что и элемент.
color	нет	цвет тени
inset	нет	Одно из ключевых слов для направления распространения тени, которое изменяет направление распространения тени внутрь. Ключевое слово по умолчанию — outset, то есть тень находится за границей и распространяется наружу.

Стоит отметить три вещи:

1. Если элемент установленborder-radiusattribute , то тень также будет иметь закругленные углы.
2. Для одного и того же элемента можно задать несколько эффектов тени, разделенных запятыми.
3. Несколько теней на одном и том же элементе вzНа оси в том порядке, чтобы первая тень была сверху.

<style>
.box-shadow {
  width: 500px;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 -1em 1em rgba(100, 150, 200, .5) inset,
              0 0 0 2px #ff3333,
              0.3em 0.3em 0.5em 10px rgb(198, 200, 100);
}
</style>

<div class="box-shadow">
  明月几时有，把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。
  转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。
</div>

Эффект следующий:

Онлайн-демонстрация кода

реализация фильтра фильтра

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

функция	описывать
url()	Принимает файл XML, который устанавливает фильтр SVG и может содержать привязку для указания определенного элемента фильтра. Например:filter: url(resources.svg#element-id)
blur(radius)	Значение «радиуса» устанавливает стандартное отклонение функции Гаусса или количество пикселей, смешанных вместе на экране, поэтому, чем больше значение, тем больше размытие, если нет заданного значения, по умолчанию 0; этот параметр может установить значение длины css, но процентные значения не принимаются.
brightness()	Примените к изображению линейное умножение, чтобы сделать его светлее или темнее. Если значение равно 0%, изображение будет полностью черным. Значение 100% оставляет изображение без изменений. Другие значения соответствуют эффектам линейного множителя. Значения более 100% подходят, и изображение будет ярче, чем раньше. Если значение не задано, значение по умолчанию равно 1.
contrast()	Отрегулируйте контрастность изображения. При значении 0% изображение будет полностью черным. Значение 100% оставляет изображение без изменений. Значения могут превышать 100%, что означает, что будет использоваться более низкая контрастность. Если значение не задано, значение по умолчанию равно 1.
drop-shadow()	Устанавливает эффект тени на изображении. Тени составляются под изображением и могут иметь размытую, смещенную версию маски, которую можно нарисовать определенным цветом. Подобно значению свойства box-shadow выше, но без ключевых слов inset/outset.
grayscal	Преобразуйте изображение в оттенки серого. Значение определяет масштаб преобразования. Значение 100% полностью преобразует изображение в оттенки серого, а значение 0% не изменит изображение. Значение от 0% до 100% является линейным множителем эффекта. Если не установлено, значение по умолчанию равно 0. См. следующееполноэкранный серыйпример.
hue-rotate()	Примените поворот оттенка к изображению. Значение «угол» задает значение угла цветового круга, по которому будет корректироваться изображение. Если значение равно 0 градусов, изображение не меняется. Если значение не установлено, значение по умолчанию равно 0 градусов. Хотя для этого значения не существует максимального значения, значение, превышающее 360 градусов, эквивалентно другому кругу.
invert()	Инвертируйте входное изображение. Значение определяет масштаб преобразования. 100% значения — это полный разворот. Значение 0% оставляет изображение без изменений. Значение от 0% до 100% является линейным множителем эффекта. Если значение не установлено, значение по умолчанию равно 0.
opacity()	Прозрачность преобразованного изображения. Значение определяет масштаб преобразования. Значение 0% полностью прозрачно, а значение 100% не изменяет изображение. Значение от 0% до 100% представляет собой линейный множитель эффекта, который также эквивалентен умножению количества образцов изображения на число. Если значение не установлено, значение по умолчанию равно 1. Эта функция очень похожа на существующее свойство opacity, разница в том, что через фильтр некоторые браузеры обеспечивают аппаратное ускорение для повышения производительности.
saturate()	Преобразование насыщенности изображения. Значение определяет масштаб преобразования. Значение 0% означает полное обесцвечивание, а значение 100% означает отсутствие изменений в изображении. Остальные значения являются линейными множителями эффекта. Допускаются значения более 100%, с более высокой насыщенностью. Если значение не установлено, значение по умолчанию равно 1.
sepia()	Преобразуйте изображение в сепию. Значение определяет масштаб преобразования. Значение 100 % соответствует полной сепии, а значение 0 % не влияет на изображение. Значение от 0% до 100% является линейным множителем эффекта. Если не установлено, значение по умолчанию равно 0.

<style>
.filter-shadow {
  width: 500px;
  padding: 20px;
  filter: drop-shadow(0.3em 0.3em 0.5em rgb(198, 200, 100));
}
</style>

<div class="filter-shadow">
  明月几时有，把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。
  转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。
</div>

Эффект следующий:

Онлайн-демонстрация кода

Разница между двумя

На самом деле код и эффект можно увидеть:

1. box-shadowэто добавить тень к элементу "коробка",drop-shadowЭто добавление тени к «самому» элементу.
2. box-shadowПоддержка наложения теней,dropshadowнет.
3. Значения параметров разные. некоторые браузерыdrop-shadowне поддерживаетсяspread-radius,иdrop-shadowнетinsetключевые слова.
4. Совместимость разная.box-shadowотIE9стали поддерживать иdrop-shadowотIE13только начал поддерживать. смотрите подробностиcss-boxshadow,css-filters

Полноэкранный серый (используйте в особые дни)

Использовать фильтрыfilterизgrayscaleфункция.

<style>
.filter {
  -webkit-filter: grayscale(100%); /* webkit */
  -moz-filter: grayscale(100%); /*firefox*/
  -ms-filter: grayscale(100%); /*ie9*/
  -o-filter: grayscale(100%); /*opera*/
  filter: grayscale(100%);
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); /*ie*/
  filter: gray; /*ie9- */
}
</style>
<html class="filter">
  <img src="https://cdn.pixabay.com/photo/2015/04/20/17/01/flower-731830_960_720.jpg" />
</html>

Эффект следующий:

Онлайн-демонстрация кода

Градиент

CSS3Важной особенностью является градиентgradients, выход которого<image>Подтип типа, который можно использовать для<image>Места типа типов. В дополнение к линейному градиентуlinear-gradientиradial-gradientКроме того, он также поддерживает повторяющиеся линейные градиенты.repeating-linear-gradientи повторяющийся радиальный градиентrepeating-radial-gradient. Чтобы добиться пересечения зебры, нужно полагаться на повторяющиеся линейные градиенты. смотрите подробностиgradient-MDN.

зебра

Используйте повторяющиеся линейные градиентыrepeating-linear-gradient. Синтаксис следующий:

background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);

ценность	описывать
angle	Определяет угловое направление градиента. От 0 до 360 градусов, по умолчанию 180 градусов.
side-or-corner	Указывает начальную позицию линейного градиента. Состоит из двух ключевых слов: первое определяет положение по горизонтали (слева или справа), а второе — положение по вертикали (сверху или снизу). Порядок произвольный, и каждое ключевое слово является необязательным.
color-stop1, color-stop2,...	Определяет начальный и конечный цвета градиента, состоящие из значения цвета и конечной позиции (необязательно, задается в процентах).

<style>
.zebra-crossing {
  width: 500px;
  height: 300px;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 25px, #000 25px, #000 50px);
}
</style>
<div class="zebra-crossing"></div>

Эффект следующий:

Онлайн-демонстрация кода

купонные наклейки

существуетCSS3среди,backgroundДобавленbackground-sizeСвойства, управление размером фонового изображения, соответствиеbackground-positionАтрибут для отображения нескольких изображений на одном фоне. смотрите подробностиbackground-MDN.

В основе стикера с купоном лежит использование прозрачного белого радиального градиента.radial-gradient, пусть нижний левый угол, нижний правый угол, верхний правый угол и нижний левый угол 4 фоновых изображений отображаются по умолчанию, а затем используйтеdrop-shadowРеализуйте тени элементов для достижения эффекта.

radial-gradientСинтаксис следующий:

radial-gradient(shape size at position, start-color, ..., last-color)

ценность	описывать
shape	Определить тип окружности: эллипс (по умолчанию): задает радиальный градиент эллипса. круг : определяет радиальный градиент круга
size	Определяет размер градиента, возможные значения: дальний угол (по умолчанию): определяет длину радиального градиента от центра круга до самого дальнего угла от центра круга. ближайшая сторона : определяет длину радиального градиента от центра круга до стороны, ближайшей к центру круга. ближайший угол: определяет длину радиального градиента от центра круга до ближайшего угла к центру круга. дальняя сторона : определяет длину радиального градиента от центра круга до стороны, наиболее удаленной от центра круга.
position	Определяет положение градиента. Возможные значения: центр (по умолчанию): установите центр как значение ординаты центра радиального градиента. top: Установите верх как значение ординаты центра радиального градиента. нижняя часть: Установите нижнюю часть в качестве значения ординаты центра радиального градиента. Можно смешать, например, вверху справа
start-color, ..., last-color	Используется для указания начального и конечного цветов градиента.

<style>
.coupon{
  width: 200px;
  height: 80px;
  background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right / 50% 40px no-repeat,
    radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 40px no-repeat,
    radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 40px no-repeat,
    radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 40px no-repeat;
  filter: drop-shadow(3px 3px 3px #c5c5c5);
}
</style>

<div class="coupon"></div>

Эффект следующий:

Онлайн-демонстрация кода

Переполнение текста с автоматическим многоточием

ядроCSS3Атрибутыtext-overflow: ellipsis.

<style>
.ellipsis {
  width: 500px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
<div class="ellipsis">
  明月几时有，把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。
  转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。
</div>

Эффект следующий:

Онлайн-демонстрация кода

Суммировать

Перестань драться, перестань драться, я не могу его порезать! ! очень ароматный~~~