При наведении тень css: shadow — тень блока. Примеры, эффекты (:hover), анимация тени.

Потрясающие эффекты CSS3 при наведении

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    cursor: default;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
 
.ch-thumb {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5);
 
    -webkit-transform-origin: 95% 40%;
    -moz-transform-origin: 95% 40%;
    -o-transform-origin: 95% 40%;
    -ms-transform-origin: 95% 40%;
    transform-origin: 95% 40%;
 
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
 
. ch-thumb:after {
    content: '';
    width: 8px;
    height: 8px;
    position: absolute;
    border-radius: 50%;
    top: 40%;
    left: 95%;
    margin: -4px 0 0 -4px;
    background: rgb(14,14,14);
    background: -moz-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%, rgba(125,126,125,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(14,14,14,1)), color-stop(100%,rgba(125,126,125,1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
    background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
    box-shadow: 0 0 1px rgba(255,255,255,0.9);
}
 
.ch-info {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: #c9512e url(. ./images/noise.png);
    box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);
}
 
.ch-item:hover .ch-thumb {
    box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2);
    -webkit-transform: rotate(-110deg);
    -moz-transform: rotate(-110deg);
    -o-transform: rotate(-110deg);
    -ms-transform: rotate(-110deg);
    transform: rotate(-110deg);
}

Как добавить эффект свечения (тень) для SVG при наведении

Простой пример, как добавить эффект свечения для svg-элемента с помощью добавления тени.

Итак, у нас есть такой svg-файл с градиентом:

Первым делом, кидаем файл в SVGOMG для того, чтобы оптимизировать и убрать все лишнее из кода svg. По итогу получим такой вычищенный код svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 222.4 109">
<linearGradient gradientUnits="userSpaceOnUse" x1="0" y1="54.5" x2="222.392" y2="54.5">
  <stop offset="0" stop-color="#40b99d"/>
  <stop offset="1" stop-color="#2ed8de"/>
</linearGradient>
<path d="M208. 2 105c.6-.1 1.1-.6 1.1-1.2V51.3c0-.7-.5-1.2-1.2-1.2h-64.4V3.6c0-2-1.6-3.6-3.6-3.6h36.4c-2 0-3.6 1.6-3.6 3.6v70.6c0 2 1.6 3.6 3.6 3.6h54.7v.5c0 9.5-22.1 8.3-23 8.5H58c-.1 0-.1.1-.1.2v1c0 .1 0 .1.1.2h50.4c.1 0 .1-.1.1-.2v-1c0-.1 0-.1-.1-.2h-.1c-.9-.2-23 .7-23-8.5v-.5h224v26.1c0 .6.5 1.1 1.1 1.2h211v1.9s1.7 2.1 6.7 2.1h315.8c5 0 6.7-2.1 6.7-2.1v-2h-14.3zM83.3.8c.6 0 1 .5 1 1 0 .6-.5 1-1 1-.6 0-1-.5-1-1 0-.6.5-1 1-1zM124 51.3v8.6h40.9v-9h224v.4zm-95.1-2.4v13h224v1.9h36.5V3.6h213.6v46.5h-1.8v-1.2h38.9zm177 52.3h-78.5V53.1h78.5v48.1zm-58.5-34.7h-18v22.3h28V66.5zm-2 20.3h-14V68.5h24v18.3zM1.7 102.6h5.5V75.9h2.7v26.7zm2-24.7h.5v22.7h-.5V77.9zM7 82.7h20v-6.8H7v6.8zm2-4.8h6v2.8H9v-2.8zm-2 24.7h5V97H7v5.6zM9 99h2v1.7H9V99zm-2-2.9h5V83.5H7v12.6zm2-10.6h2v8.6H9v-8.6zm3.7 17.1h27V83.5h-4.3v19.1zm2-17.1h.3v15.1h-.3V85.5zm166.9 4.3h-52.2v9.7h52.2v-9.7zm-2 7.7h-48.2v-5.7h58.2v5.7zM28.9 47.1h40.6V5.5h38.9v41.6zm2-39.6h36.6v37.6h40.9V7.5zm31 39.6h41.2V35.7H61.9v11.4zm2-9.4h37.2v7.4H63.9v-7.4zm31.5 9.4h24.7V35.7H95.4v11.4zm2-9.4h20.7v7.4H97.4v-7.4zm41-18.6h-25.8v28h35.8v-28zm-2 26h-21.8v-24h31.8v24zm12 43.7h43.2v-12h-33.2v12zm2-10h39.2v8h-29.2v-8zm-2-3h43.2v-9.3h-33.2v9.3zm2-7.3h39.2v5.3h-29.2v-5.3zM16 69.3h3.7c-1.5 0-2.7 1.2-2.7 2.8v34.2c0 1.5 1.2 2.7 2.7 2.7h26c1.5 0 2.7-1.2 2.7-2.7V72.1c0-1.5-1.2-2.8-2.7-2.8zm1.6 34.2c0 .1-.1.2-.2.2h2.3c-.1 0-.2-.1-.2-.2V75c0-.1.1-.2.2-.2h26.2c.1 0 .2.1.2.2v28.5zm92.5-84.4H61.9v14.8h58.2V19.1zm-2 12.8H63.9V21.1h54.2v10.8zm95.8 23h-74.5v10.6h74.5V54.9zm-2 8.6h-70.5v-6.6h70.5v6.6zm-63.5-58H61.9v11.8h76.5V5.5zm-2 9.8H63.9V7.5h72.5v7.8zm46.2 84.2h31.3v-33h-21.3v33zm2-31h27.3v29h-17.3v-29z" fill="url(#a)"/></svg>

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

На выходе получился такой код, который я буду использовать в HTML:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -15 252.4 139">

  <defs>
    <filter>
      <feDropShadow dx="0" dy="0" stdDeviation="6" flood-color="#00c6a0" />
    </filter>

    <linearGradient gradientUnits="userSpaceOnUse" x1="0" y1="54.5" x2="222.392" y2="54.5">
      <stop offset="0" stop-color="#40b99d" />
      <stop offset="1" stop-color="#2ed8de" />
    </linearGradient>
  </defs>

  <path d="M208.2 105c.6-.1 1.1-.6 1.1-1.2V51.3c0-.7-.5-1.2-1.2-1.2h-64.4V3.6c0-2-1.6-3.6-3.6-3.6h36.4c-2 0-3.6 1.6-3.6 3.6v70.6c0 2 1.6 3.6 3.6 3.6h54.7v.5c0 9.5-22.1 8.3-23 8.5H58c-.1 0-.1.1-.1.2v1c0 .1 0 .1.1.2h50.4c.1 0 .1-.1.1-.2v-1c0-.1 0-.1-.1-.2h-.1c-.9-.2-23 .7-23-8.5v-.5h224v26.1c0 .6.5 1.1 1.1 1.2h211v1.9s1.7 2.1 6.7 2.1h315.8c5 0 6.7-2.1 6.7-2.1v-2h-14.3zM83.3.8c.6 0 1 .5 1 1 0 .6-.5 1-1 1-.6 0-1-.5-1-1 0-.6.5-1 1-1zM124 51.3v8.6h40.9v-9h224v.4zm-95.1-2.4v13h224v1.9h36.5V3.6h213.6v46.5h-1.8v-1.2h38.9zm177 52.3h-78.5V53.1h78.5v48.1zm-58.5-34.7h-18v22.3h28V66.5zm-2 20.3h-14V68.5h24v18.3zM1.7 102.6h5.5V75.9h2.7v26.7zm2-24.7h.5v22.7h-.5V77.9zM7 82.7h20v-6.8H7v6.8zm2-4.8h6v2.8H9v-2.8zm-2 24.7h5V97H7v5.6zM9 99h2v1.7H9V99zm-2-2.9h5V83.5H7v12.6zm2-10.6h2v8.6H9v-8.6zm3.7 17.1h27V83.5h-4.3v19.1zm2-17.1h.3v15.1h-.3V85.5zm166.9 4.3h-52.2v9.7h52.2v-9.7zm-2 7.7h-48.2v-5.7h58.2v5.7zM28.9 47.1h40.6V5.5h38.9v41.6zm2-39.6h36.6v37.6h40.9V7.5zm31 39.6h41.2V35.7H61.9v11.4zm2-9.4h37.2v7.4H63.9v-7.4zm31.5 9.4h24.7V35.7H95.4v11.4zm2-9.4h20.7v7.4H97.4v-7.4zm41-18.6h-25.8v28h35.8v-28zm-2 26h-21.8v-24h31.8v24zm12 43.7h43.2v-12h-33.2v12zm2-10h39.2v8h-29.2v-8zm-2-3h43.2v-9.3h-33.2v9.3zm2-7.3h39.2v5.3h-29.2v-5.3zM16 69.3h3.7c-1.5 0-2.7 1.2-2.7 2.8v34.2c0 1.5 1.2 2.7 2.7 2.7h26c1.5 0 2.7-1.2 2.7-2.7V72.1c0-1.5-1.2-2.8-2.7-2.8zm1.6 34.2c0 .1-.1.2-.2.2h2.3c-.1 0-.2-.1-.2-.2V75c0-.1.1-.2.2-.2h26.2c.1 0 .2.1.2.2v28.5zm92.5-84.4H61.9v14.8h58.2V19.1zm-2 12.8H63.9V21.1h54.2v10.8zm95.8 23h-74.5v10.6h74.5V54.9zm-2 8.6h-70.5v-6.6h70.5v6.6zm-63.5-58H61.9v11.8h76.5V5.5zm-2 9.8H63.9V7.5h72.5v7.8zm46.2 84.2h31.3v-33h-21.3v33zm2-31h27.3v29h-17.3v-29z" fill="url(#a)" filter="url(#shadow)" />
</svg>

И такие правила в CSS для эффекта сияния при наведении:

svg defs stop{
  transition: .4s;
}
svg:hover defs stop{
  stop-color: #b6fff1;
}
svg defs feDropShadow {
  transition: .4s;
  flood-color: transparent;
}
svg:hover feDropShadow{
  flood-color: #06deb5;
}

Немного разберу важные моменты, а рабочий пример будет ниже.

Для эффекта тени добавили фильтр

<filter>
  <feDropShadow dx="0" dy="0" stdDeviation="6" flood-color="#00c6a0" />
</filter>

И вызвали этот фильтр в элементе path:

<path ... filter="url(#shadow)" />

Для плавного эффекта свечения задали фильтру прозрачный цвет, а при наведении нужный цвет #06deb5 – это цвет нашей тени:

svg defs feDropShadow {
  transition: .4s;
  flood-color: transparent;
}
svg:hover feDropShadow{
  flood-color: #06deb5;
}

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

Так же в стилях добавили правило для смены цвета нашего svg-элемента. Если просто указать fill="b6fff1" вместо fill="url(#a)", то плавного изменения цвета не будет, поэтому в стилях зададим для градиента stop-color: #b6fff1; – на самом деле, я без понятия, насколько это правильно, но это работает:

svg defs stop{
  transition: .4s;
}
svg:hover defs stop{
  stop-color: #b6fff1;
}

Важные нюансы:

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

<filter ...
<linearGradient ...
...
... fill="url(#a)" filter="url(#shadow)" />

• или для аналогичных элементов с одинаковыми инструкциями внутри <defs> можно применять уже однажды объявленные инструкции. Элемент <defs> содержит идентифицируемые инструкции, которые могут быть использованы несколько раз по всему документу; он устанавливает определение, которое не будет отображаться, пока оно не будет вызвано. Еще раз. Можно один раз у первого элемента указать инструкции для градиента и теней внутри <defs>, а у остальных элементов просто вызвать нужные эффекты через идентификатор … fill="url(#a)" filter="url(#shadow)" />.
• простой совет – сначала добавить нужные эффекты, а затем уже привязать их к событию hover

Пример работы анимированной подсвечивающейся svg – просто наведите курсор на иконку:

See the Pen Glowing Gradient Button Animation Effects on Hover Using Html and CSS by Denis (@deniscreative) on CodePen.dark

Подробнее про svg градиенты здесь – https://www.sitepoint.com/getting-started-svg-gradients/

Закругленные углы и блоки с тенью

Закругленные углы и блоки с тенью

Закругленные углы и блоки с тенью

На создание этой страницы вдохновила работа Арве
Берсвендсена (Arve Bersvendsen). У него есть много других интересных демонстраций CSS.

В CSS3 есть свойства для создания закругленных границ, границ,
состоящих из изображений и блоков с тенями. Но немного
потрудившись, вы сможете их частично смоделировать, начиная уже с
версии CSS2 — причём без таблиц и дополнительной разметки.

Конечно, закругленные границы и тени гораздо легче сделать при
помощи CSS3, чем в CSS2. Например, чтобы задать абзацу тонкую
красную рамку с закругленными углами, в CSS3 вам достаточно всего
двух строк наподобие этих:

P { border: solid thick red;
    border-radius: 1em }

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

P { box-shadow: black 0.5em 0.5em 0.3em }

(Вы можете посмотреть здесь и здесь, чтобы убедиться как это работает.)
Однако если эти эффекты нужны в старых браузерах и вы не возражаете
против сложности и отсутствия гибкости, вы можете использовать
технику, описанную ниже. В крайнем случае, это будет хорошей
проверкой для дефектных браузеров.…

Результат

А вот как это выглядит:

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

Исходный код HTML не содержит ничего лишнего:

<blockquote>
<p>Видите бледный зеленый блок с
закругленными углами и тенью на белом фоне?
Если нет, значит, ваш браузер некорректно
справляется с генерированием контента (или не
справляется вовсе).
</blockquote>

Навигация по сайту

Как создать эффект наведения аккордеона с тенями блока. Автор Сара Л. Фоссхайм

В этом уроке мы будем использовать свойство box-shadow для создания многослойного компонента карты и анимировать его при наведении курсора.

Объяснение свойства box-shadow

Чтобы добавить тени к блоку, нам нужно указать несколько вещей в свойстве box-shadow :

• смещение по x : положение по оси x. Положительное значение перемещает тень вправо, отрицательное значение перемещает тень влево. (обязательно)
• Смещение по оси Y : Положение по оси Y. Положительное значение перемещает тень вниз, отрицательное значение перемещает тень вверх. (обязательно)
• blur : насколько должна быть размыта тень. Чем выше значение, тем мягче тень. По умолчанию установлено значение 0 пикселей, что означает отсутствие размытия. (опционально)
• spread : насколько больше должна быть тень по сравнению с компонентом.Положительное значение делает тень больше, чем прямоугольник, отрицательное значение делает тень меньше. (опционально)
• цвет : Какой цвет должна иметь тень. Значение по умолчанию — цвет текста. (необязательно, требуется для Safari)
• вставка : Положение тени. По умолчанию тень находится за рамками. Установочная вставка перемещает его внутрь. (опционально)

  box-shadow: [x-смещение] [y-смещение] [размытие] [распространение] [цвет] [вставка];
  

Например:

Вы можете узнать больше о тенях блоков на W3Schools или css-tricks.Моя поляроидная камера, поддерживающая только CSS, также построена с использованием теней.

Карточка составляющая

Нам не нужно писать дополнительный HTML-код, чтобы добавить сложенные карты в фоновый режим. Мы начнем наше руководство со следующего кода:

  

    
 Похожие сообщения 
    
 Как я воссоздал камеру Polaroid только с градиентами CSS 

  

Перевод карт в тени

Мы хотим разместить 4 карты позади нашего компонента, каждая с одинаковой шириной границы (3 пикселя) и одинаковым фоном (белым), но с другим положением и цветом границы.

Это означает, что нам нужно нарисовать 8 теней: по одной для каждого цвета / границы и по одной для каждой белой заливки.

Добавление первой фоновой карты

Начнем с добавления первой зеленой крышки позади компонента. Давайте посмотрим на его требования:

• Сдвинуть на 10 пикселей вправо
• Переместить на 10 пикселей вверх
• Без размытия
• Размер как у контейнера (без разворота)
• Зеленый цвет (# 5CBD3F)

Это переводится в CSS так:

  тень блока: 10 пикселей -10 пикселей 0 0 # 5CBD3F;  

Объединение теней для создания заливок и границ

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

Граница должна быть 3 пикселя толщиной, поэтому белая тень должна быть на 3 пикселя меньше цветной с каждой стороны. Мы можем сделать это, установив отрицательный спред:

  box-shadow: 10px -10px 0 -3px белый;  

При добавлении нескольких теней наверху будет отображаться та, которая указана первой. Итак, наш код теперь будет выглядеть так:

  box-shadow: 10px -10px 0 -3px белый,
  10px -10px 0 0 # 1FC11B;  

Повторите тот же процесс еще три раза для других цветов, продолжая перемещать тени на 10 пикселей вверх и вправо.

  box-shadow: 10px -10px 0 -3px белый, 10px -10px 0 0 # 1FC11B, / * зеленый * /
    20px -20px 0 -3px белый, 20px -20px 0 0 # FFD913, / * желтый * /
    30px -30px 0 -3px белый, 30px -30px 0 0 # FF9C55, / * Оранжевый * /
    40px -40px 0 -3px белый, 40px -40px 0 0 # FF5555; /* Красный */
  

Добавление анимации наведения

Теперь, когда дизайн готов, осталось только добавить анимацию наведения.

Все карты должны переместиться из исходного положения в положение красной карты на оборотной стороне.Первый шаг — изменить положение нашего компонента.

  .card {
  положение: относительное;
  верх: 0;
  слева: 0;
  переход: левая 1, верхняя единица;
}

.card: hover {
  верх: -40 пикселей;
  слева: 40 пикселей;
}
  

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

  .card {
  положение: относительное;
  верх: 0;
  слева: 0;
  переход: box-shadow 1, левая единица, верхняя единица;
}
.card: hover {
  box-shadow: 0 0 0 -3px белый, 0 0 0 0px # 1FC11B,
    0 0 0 -3px белый, 0 0 0 0px # FFD913,
    0 0 0 -3px белый, 0 0 0 0px # FF9C55,
    0 0 0 -3px белый, 0 0 0 0px # FF5555;
  верх: -40 пикселей;
  слева: 40 пикселей;
}
  

Это дает нам желаемый конечный результат:

Дополнительные эффекты границ с использованием теней

Как использовать тени коробки в качестве фона при наведении курсора

Каждую неделю мы предоставляем вам новые бесплатные пакеты макетов Divi, которые вы можете использовать в своем следующем проекте.Для одного из пакетов макетов мы также предлагаем пример использования, который поможет вам вывести свой веб-сайт на новый уровень.

На этой неделе, в рамках нашей текущей инициативы по дизайну Divi, мы покажем вам, как использовать тени прямоугольников в качестве фона при наведении курсора. Мы рассмотрим три разных примера, которые потрясающе выглядят на домашней странице Personal Stylist Layout Pack, но ваши возможности поистине безграничны. Мы шаг за шагом воссоздадим каждый фон смахивания, используя только встроенные функции Divi.

Давайте приступим!

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

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

Пример # 1

Пример # 2

, пример # 3

Загрузите домашнюю страницу пакета макетов личного стилиста на новую страницу

Начните с добавления новой страницы на свой веб-сайт и загрузите макет домашней страницы Personal Stylist. Хотя мы будем использовать этот макет для выполнения всех трех примеров, показанных выше, вы можете использовать этот подход для любого макета или веб-сайта, над которым вы работаете.

Восстановить пример # 1

Button Box Shadow Color

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

Настройки раздела

Цвет фона по умолчанию

Далее откройте раздел настроек.Убедитесь, что цвет фона по умолчанию остается прежним.

• Цвет фона: # 2a2a2a

Цвет фона при наведении

Изменить фон наведения.

• Цвет фона: #ffffff

Тень коробки по умолчанию

Продолжите, добавив в раздел тень по умолчанию.

• Положение тени бокса по горизонтали: 0px
• Положение тени коробки по вертикали: 0px
• Цвет тени: rgba (255,137,159,0.82)
• Положение тени коробки: внутренняя тень

Hover Box Shadow

Измените горизонтальное положение тени блока. Добавьте любое значение выбора.

• Box Shadow Горизонтальное положение: 800px

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

• Box Shadow Вертикальное положение: 650px

Переходы

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

• Продолжительность перехода: 200 мс
• Кривая переходной скорости: легкость

Восстановить пример # 2

Модуль изменения первого текста

Настройки текста при наведении

Переходим к следующему примеру! Откройте текстовый модуль, который вы можете найти в первом столбце, и измените цвет текста при наведении курсора.

Граница наведения

Продолжите, изменив цвет границы при наведении курсора на вкладку дизайна.

• Цвет границы: rgba (255,137,159,0.82)

Тень коробки по умолчанию

Затем перейдите к настройкам тени блока и добавьте тень блока по умолчанию.

• Положение тени бокса по горизонтали: 0px
• Положение тени коробки по вертикали: 0px
• Цвет тени: rgba (255,137,159,0,82)
• Положение тени коробки: внутренняя тень

Hover Box Shadow

Изменение горизонтального положения при наведении.

• Box Shadow Горизонтальное положение: 520px

Переходы

И последнее, но не менее важное: увеличьте продолжительность перехода на вкладке «Дополнительно», чтобы создать плавный переход.

• Продолжительность перехода: 700 мс
• Кривая переходной скорости: легкость

Копирование и вставка стилей модуля в третий текстовый модуль

Мы используем те же стили для третьего текстового модуля. Чтобы сэкономить время, мы просто скопируем стили первого текстового модуля и вставим их в третий текстовый модуль.

Модуль изменения второго текста

Параметры текста

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

Граница наведения

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

• Цвет границы: rgba (255,137,159,0,82)

Тень коробки по умолчанию

Пора добавить фон смахивания! Начните с добавления тени блока по умолчанию, используя следующие параметры:

• Положение тени бокса по горизонтали: 0px
• Положение тени коробки по вертикали: 0px
• Цвет тени: rgba (255,137,159,0.82)
• Положение тени коробки: внутренняя тень

Hover Box Shadow

Измените вертикальное положение тени блока при наведении курсора.

• Box Shadow Вертикальное положение: 500px

Переходы

И последнее, но не менее важное: также увеличьте продолжительность перехода этого текстового модуля.

• Продолжительность перехода: 700 мс
• Кривая переходной скорости: легкость

Восстановить пример # 3

Изменить настройки строки

Калибр

Переходим к следующему и последнему примеру! Начните с открытия настроек строки и внесите некоторые изменения в настройки размера.

• Сделать эту строку полной шириной: Да
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 2

Шаг

Продолжите, добавив также несколько пользовательских отступов к строке.

• Прокладка слева: 10vw
• Правая обивка: 10vw
• Колонка 2, отступ слева: 15vw (рабочий стол), 0vw (планшет и телефон)

Тень коробки по умолчанию

Затем добавьте к строке тень блока по умолчанию.

• Положение тени бокса по горизонтали: 0px
• Положение тени коробки по вертикали: 0px
• Цвет тени: # ff899f
• Положение тени коробки: внутренняя тень

Hover Box Shadow

Изменение горизонтального положения при наведении.

• Box Shadow Горизонтальное положение: 50px

Переходы

Мы также меняем длительность перехода и задержку перехода на вкладке «Дополнительно».

• Продолжительность перехода: 1000 мс
• Задержка перехода: 700 мс
• Кривая переходной скорости: легкость

Изменить настройки раздела

Удалить калибровку

После того, как вы закончите изменять настройки строки, откройте настройки раздела. Перейдите на вкладку «Дизайн» и сбросьте ширину, щелкнув правой кнопкой мыши и выбрав «Сброс».

Удалить границу

Проделайте то же самое с шириной границы.

Тень коробки по умолчанию

Продолжите, добавив тень окна по умолчанию.

• Положение тени бокса по горизонтали: 0px
• Положение тени коробки по вертикали: 0px
• Цвет тени: # 2a2a2a
• Положение тени коробки: внутренняя тень

Hover Box Shadow

Измените горизонтальное положение тени блока при наведении курсора.

• Box Shadow Горизонтальное положение: 60px

Переходы

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

• Продолжительность перехода: 1000 мс

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

Теперь, когда мы прошли все этапы, давайте в последний раз рассмотрим три различных примера, которые мы воссоздали, шаг за шагом.

Пример # 1

Пример # 2

, пример # 3

Последние мысли

В этом посте мы показали вам, как использовать тени блоков в качестве фона для смахивания только с помощью встроенных опций Divi.Это руководство является частью нашей текущей инициативы по дизайну Divi, в рамках которой мы каждую неделю стараемся добавлять что-то дополнительное в ваш набор инструментов. Мы надеемся, что этот урок вдохновит вас на уникальное и творческое использование теней блоков. Если у вас есть какие-либо вопросы или предложения, обязательно оставьте комментарий в разделе комментариев ниже!

Пользовательское подчеркивание ссылки с помощью CSS box-shadow

При создании веб-сайта вы можете настроить цвет текста с помощью свойства цвет . Это изменит цвет вашего текста, а также цвет подчеркивания ссылки.Но что, если вы хотите, чтобы цвет подчеркивания ссылки отличался от цвета текста? Это можно сделать разными способами. В этом руководстве я покажу вам, как использовать свойство box-shadow для настройки подчеркивания ссылки.

Для начала вы создаете элемент привязки.

  a (href = "/") Это ссылка
  

Войти в полноэкранный режимВыйти из полноэкранного режима

В CSS вы отключаете свойство text-decoration со значением none .Причина, по которой мы установили цвет текста , черный , заключается в том, что он не изменится после активации ссылки. Для подчеркивания используйте цвет помидор . Нам нужно создать пространство между текстом и подчеркиванием. Устанавливаем отступ ссылки 4px .

  a {
    текстовое оформление: нет;
    черный цвет;
    отступ: 4 пикселя;
    box-shadow: 0 3px помидор;
}
  

Войти в полноэкранный режимВыйти из полноэкранного режима

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

  a {
    текстовое оформление: нет;
    черный цвет;
    отступ: 4 пикселя;
    box-shadow: 0 3px помидор;

    &: hover {
        фон: помидор;
        цвет белый;
        box-shadow: 0px 10px 10px 0px серый;
    }
}
  

Войти в полноэкранный режимВыйти из полноэкранного режима

Ссылка будет белая с помидорами фоном.При наведении на ссылку под ним также была серая тень. Но это довольно запаздывает. Чтобы сделать его более плавным, мы будем использовать свойство transition .

  a {
  переход: фон 0,1 с, тень блока 0,3 с, цвет 0,1 с;
}
  

Войти в полноэкранный режимВыйти из полноэкранного режима

Цвет текста и фон изменится на 0,1 с , а тень блока — на 0,3 с . Теперь он стал более гладким. Вы можете изменить продолжительность перехода на любое желаемое значение.

Полный код

Directional Shadow Hover Effect с использованием CSS и jQuery

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

См. Стартовое перо Pen Sequential Letter Animation от Брэда Мартина (@BraadMartin) на CodePen.0

Он состоит из трех основных частей.Во-первых, мой скрипт span-letter.js оборачивает каждую букву строки в диапазон с классом, чтобы указать ее позицию в строке. Затем какой-нибудь jQuery для добавления класса в оболочку, указывающего, какая буква зависает. Наконец, набор CSS для обработки теней текста, используемых для создания направленной тени.

Я использовал силу вложенности Sass, чтобы все было СУХИМ. Вот CSS для центральной позиции:

# target.l5 {
  .sl1 {
    тень текста: -8px 4px 8px # 444444;
  }
  .sl2 {
    тень текста: -6px 4px 8px # 444444;
  }
  .sl3 {
    тень текста: -4px 4px 8px # 444444;
  }
  .sl4 {
    тень текста: -2px 4px 8px # 444444;
  }
  .sl5 {
    тень текста: 0px 4px 8px # 444444;
  }
  .sl6 {
    текстовая тень: 2px 4px 8px # 444444;
  }
  .sl7 {
    тень текста: 4px 4px 8px # 444444;
  }
  .sl8 {
    текстовая тень: 6px 4px 8px # 444444;
  }
  .sl9 {
    текстовая тень: 8px 4px 8px # 444444;
  }
}
 

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

Имея структуру, легко создавать вариации. Я всегда был фанатом трехмерных текстовых эффектов, поэтому мне пришлось попробовать вставить тень:

См. Стартовое перо Pen Sequential Letter Animation от Брэда Мартина (@BraadMartin) на CodePen.0

Тень была забавной, но я все еще не ощущал света, исходящего от курсора и освещающего верхнюю часть букв.Я решил попробовать добавить изменение цвета и, чтобы сделать его гибким и добиться дополнительной СУХОСТИ, я создал миксины Sass для каждой буквы в зависимости от того, насколько далеко она была от целевой буквы:

См. Стартовое перо Pen Sequential Letter Animation от Брэда Мартина (@BraadMartin) на CodePen.0

Неплохо. Я сделал изменение цвета заметно резким, чтобы проиллюстрировать эффект. Более тонкое изменение цвета определенно добавило бы немного реализма.

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

-Braad

Expanded Использование box-shadow и border-radius

Это выпуск №14 из серии, посвященной современным решениям CSS для проблем, которые я решал в течение последних 14 с лишним лет работы фронтенд-разработчиком .

В этом выпуске рассматривается расширенное использование box-shadow и border-radius и завершается демонстрация целевой страницы, использующей эти свойства для улучшения представления изображения.

Вы узнаете:

• расширенный синтаксис border-radius , и когда использовать какой тип единиц для установки значений
• как создать несколько слоев box-shadow
• о box-shadow значение вставка
• как «взломать» box-shadow со вставкой , чтобы применить популярные методы фильтрации изображений

Обзор

border-radius #

Детям в наши дни никогда не придется иметь дело с созданием gif для каждого угла div, который вы хотите, чтобы он выглядел закругленным 😂 Действительно, выпуск и возможная поддержка border-radius были одной из самых важных вех в CSS.

Напоминаем, как его часто используют:

  border-radius: 50%;  

Что для квадратного элемента приведет к появлению круга.

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

  радиус границы: 8 пикселей;  

Один из способов сделать это немного дальше — использовать два значения, где первое значение задает верхний левый и нижний правый, а второе значение устанавливает верхний правый и нижний левый:

  border-radius: 20% 50%;  

Whiiiich… вроде как лимон?

Теперь, учитывая те же значения, но другой размер div, эти результаты будут сильно различаться:

Мы также можем установить все четыре угла:

  
 border-radius: 3vw 4vw 8vw 2vw;  

Но подождите — это еще не все!

Существует супер-расширенный синтаксис, который позволяет вам определять как горизонтальный, так и вертикальный радиус, по которому будет закругляться каждый угол. В то время как по умолчанию закруглены очень круглые, добавление дополнительного радиуса изменяет «обрезку», которая возникает для создания угла, позволяя получить модные формы «капли»:

Оцените эту игровую площадку border-radius от Jhey с панелью конфигурации и предварительным просмотром в реальном времени для создания расширенных стилей синтаксиса border-radius .

Есть еще несколько способов определить синтаксис, вы можете проверить их в документации MDN.

Единицы для

border-radius #

Обратите внимание, что мы использовали несколько разных единиц измерения: % , пикселей и vw , который является единицей измерения «ширина области просмотра».

Процентное соотношение значений относительно размера элемента, что означает меньшую предсказуемость, если ожидается, что элемент будет разных размеров. В примере 50% , когда элемент больше не квадратный, он начинает казаться более эллиптическим.

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

Относительные единицы , такие как единицы просмотра или em , могут быть полезны, если вам нужна согласованность, но также и элемент масштаба:

Привет! Зарегистрируйтесь на мой семинар по CSS в октябре с Smashing Conferences: Level-Up With Modern CSS

• единицы просмотра будут вычислять , чтобы они были больше на «настольном компьютере» и меньше на «мобильных», но сохраняли округлый вид
• em будет варьироваться в зависимости от размера шрифта , что приведет к более закругленным углам у элементов с более крупным шрифтом и менее скругленным углам у элементов с меньшим шрифтом

Обзор

box-shadow #

Лично, когда он получил достойную поддержку, то, что сделало box-shadow самым захватывающим для меня, было то, что модели появлялись со страницы гораздо более естественным способом 🙏

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

Были ли вам эти новые термины? Вот хороший обзор, сравнивающий каждый с примерами от UX Collective.

Но то, что я обычно использую box-shadow в наши дни, — это просто тонкий намек на высоту для таких вещей, как кнопки или карты:

  
 box-shadow: 3px 4px 5px 0px rgba (0, 0, 0, 0,38);  

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

В приведенном выше примере мы по существу дали тени «источник света», который был немного выше и слева от элемента, который «отбрасывал» тень немного вправо и ниже.

Вместо этого вы можете установить смещение равным 0 для тени, которая равна вокруг элемента, хотя требуется как минимум blur-radius . Если также предоставляется spread-radius , это применит масштаб к тени, чтобы расширить ее за пределы размеров элемента:

  тень коробки: 0 0 0.25em 0,25em rgba (0, 0, 0, 0,25);  

Мне нравится использовать box-shadow для создания настраиваемого визуального состояния : focus на кнопках. В отличие от border , box-shadow не , а не изменяет вычисленные размеры элементов, то есть добавление или удаление этого элемента не приводит к смещению его или элементов вокруг него от перекомпоновки. Посмотрите эпизод о кнопках, чтобы увидеть этот метод.

Уникальной особенностью box-shadow является возможность применять кратное:

  box-shadow: 2px 4px 0 4px желто-зеленый, 4px 8px 0 8px розовый, 8px 10px 0 12px темно-синий;  

«Порядок наложения» таков, что первый набор находится «сверху» или визуально ближе всего к элементу, а затем вниз.Вот почему радиус распространения должен быть увеличен, иначе «нижние» слои не будут видны (кроме случаев, когда смещение не перекрывается).

Мы также можем перевернуть box-shadow на внутри элемента, добавив значение вставки :

  box-shadow: вставка 0 0 12px 4px rgba (0, 0, 0, 0.8);  

Эти значения будут применять очень буквальную «вставку» тени, когда элемент кажется «утопленным» в странице:

box-shadow Взломанные образы #

Два альтернативных способа использования вставки. тени предназначены для изображений.

Ключ находится в порядке наложения , и факт box-shadow помещен на выше изображений, примененных через background-image .

Виньетка

Первый — это «виньетка», представляющая собой технику фотографии, при которой края фотографии плавно переходят в фон. Это помогает выделить объект фотографии, особенно если объект расположен в центре.

Однако свойство inset нельзя напрямую использовать в , поскольку оно считается «пустым» элементом, а не элементом контейнера.

Вместо background-image к контейнеру применяется следующий CSS:

 . Контейнер виньетки {
 ширина: 30vmin; 
 высота: 30вмин; 
 box-shadow: вставка 0 0 4vmin 3vmin rgba (0, 0, 0, 0.5); 
}  

Вот сравнение, где к левому изображению применена виньетка, а к правому — нет.

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

Хотели бы вы, чтобы советы по CSS в вашем почтовом ящике? Присоединяйтесь к моему информационному бюллетеню, чтобы получать обновления статей, советы по CSS и внешние ресурсы!

Цветной экран изображения

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

Мое предыдущее решение, которое использовалось в течение многих лет, было дополнительным абсолютно позиционированным : до на содержащем элементе с примененным к нему цветом экрана как background-color .

Вот новое решение inset box-shadow :

  box-shadow: вставка 0 0 0 100vmax rgba (102, 76, 202, 0.65);  

И сравнение с экраном слева и без справа:

Взлом поймал? Я упомянул, что проценты недопустимы, но поскольку единицы просмотра, мы устанавливаем spread на 100vmax , что составляет , вероятно, для покрытия любого элемента, если ваш элемент не превышает удвоить max-width или max- высота области просмотра.

Задержитесь — почему двойной ? Поскольку разброс создается из всех сторон элемента, поэтому он как минимум вдвое превышает значение vmax .Вы можете проверить это, используя указанное выше значение и установив для вашего контейнера как минимум width: 100vw; height: 100vh и посмотрите, в какой точке середина контейнера не закрыта.

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

Если кому-то известно о снижении производительности из-за этого, дайте мне знать!

Демо №

Демонстрация идет немного дальше и показывает, как использовать object-fit на изображениях, чтобы заставить их вести себя как background-image , сохраняя при этом семантику изображения, что отлично при использовании alt свойство необходимо (спойлер: вы должны идти по этому маршруту большую часть времени для доступности).

Кроме того, к заголовку h2 применено text-shadow , которое анимировано на : hover заголовка . Основное различие между box-shadow и text-shadow заключается в том, что text-shadow не имеет свойства spread .

Он также сочетает в себе методы, показывая border-radius в сочетании с box-shadow для изображений содержимого. И изображения содержимого показывают, как box-shadow можно анимировать, отведя затухание виньетки на : наведите курсор на для эффекта выделения.

Дополнительный трюк в анимации box-shadow заключается в повторном предоставлении значений вставки , чтобы гарантировать, что при обратном переходе затухания используется наш полупрозрачный черный вместо белого. Это связано с тем, что box-shadow в большинстве браузеров (кроме Safari) по умолчанию имеет значение текущего цвета, если он не указан явно, а для элементов списка задан цвет : #fff .

Bonus : Моя любимая «Позиция : абсолютный убийца » с использованием сетки CSS и назначением всех элементов одной и той же области сетки - возможно, это будет в следующем эпизоде ​​и / или видео с яйцеголовой, которые покроют 😉

Стефани Эклс (@ 5t3ph)

20+ CSS Box Shadow Примеры + Исходный код

CSS Box Shadow - Вы ищете CSS Box Shadow? Если да, то в этом посте я собираюсь поделиться для вас отобранным вручную CSS Box Shadow .Эффект тени при наведении делает ваш div или кнопку 3d круто. Вы можете использовать эти CSS Box Shadow в своих следующих веб-проектах.

CSS Box Shadow

Ниже приведен список CSS Box Shadow.

Эффекты наведения кнопки с тенями блока

- DEMO

Создание базовой анимации с тенями блока. Никаких дополнительных элементов или даже псевдоэлементов не требуется. Посмотрите мою коллекцию кнопок, чтобы узнать больше.

Material Design Box Shadows

- DEMO

На основе https: // medium.com / @ Florian / freebie-google-material-design-shadow-helper-2a0501295a2d

CSS3 Box Shadows Effects

- DEMO

http://www.paulund.co.uk/creating-different-css3-box -shadows-effects

Box-Shadow Demonstration

- DEMO

Базовое практическое руководство для box-shadow

Hover box shadow

- DEMO

Простой эффект box-shadow при наведении.

CSS Внутренняя тень блока - только верх и низ

- ДЕМО

Пример, демонстрирующий внутреннюю тень блока сверху и снизу элемента блока.

Импульсная анимация с теневой рамкой

- DEMO

Кнопки наведения курсора с использованием вставки прямоугольной тени

- DEMO

Это просто: наведите курсор на кнопки с помощью свойства CSS3 перехода и вставки тени прямоугольника.

Фотогалерея: с Box Shadow

- DEMO

Все еще возился с Box Shadow: Page Curl Effects Pen. Придумал Фотогалерею.

Тень блока только снизу

- DEMO

Если вы хотите добавить тень блока только для нижнего (верхнего, левого, правого) блока, она здесь

Анимация тени блока CSS

- ДЕМО

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

Генератор теней коробки

- DEMO

Генератор теней коробки, созданный с помощью vue

Генератор CSS3: box-shadow

- DEMO

Легко генерируйте код CSS с настраиваемыми тенями. Хорошие предустановки позволяют быстро проектировать коробку…

Свойство box-shadow в CSS обманчиво потрясающе. При использовании «традиционно» это простой способ добавить к элементу эффект тени.Я использую это для изображений в своем блоге. Мило. Но станьте более дерзкими, и вы сможете сделать действительно интересные вещи. Я уже говорил о хаке с пиксельной графикой. На этот раз я расскажу, как создавать красочные эффекты свечения.

Вот простой пример, иллюстрирующий, как работает box-shadow :

  div {
 width: 150px; 
 высота: 150 пикселей; 
 цвет фона: #fff; 
 box-shadow: 120 пикселей 80 пикселей 40 пикселей 20 пикселей # 0ff; 
} 
  

А вот диаграмма результата:

Достаточно просто.Это то, на чем мы будем строить.

Давайте ненадолго остановимся и поговорим о поддержке браузером box-shadow . К счастью, неплохо. IE9 + и все другие основные браузеры поддерживают его без префикса. Однако значение размытия, похоже, применяется в разных браузерах непоследовательно. В частности, Chrome отображает его примерно вдвое меньше, чем вы ожидаете. Не шоу-стоп, но кое-что, о чем нужно знать.

box-shadow принимает форму элемента, на котором находится.Если мы сделаем элемент круглым с border-radius: 50% , то box-shadow последует нашему примеру.

Мы можем наложить несколько эффектов свечения на элемент, задав box-shadow нескольких наборов значений, разделенных запятыми. Эффекты свечения будут складываться: первый вверху, последний внизу.

Хорошо, давайте попробуем эти 2 техники вместе:

  div {
 width: 40px; 
 высота: 40 пикселей; 
 радиус границы: 50%; 
 цвет фона: #fff; 
 box-shadow: 
 0 0 60px 30px #fff, 
 0 0 100px 60px # f0f, 
 0 0 140px 90px # 0ff; 
}  

Результат:

См. Круги пера и укладку Уилла Бойда (@lonekorean) на CodePen.

Неплохо! На данный момент вы уже знаете достаточно, чтобы создавать впечатляющие визуальные эффекты. В качестве примера вот что вы можете сделать, добавив немного анимации к уже описанным техникам box-shadow (вы также можете щелкнуть кружочки):

См. Pen Pretty Colors Уилла Бойда (@lonekorean) на CodePen.

А теперь поиграем со вставкой свечения. Добавив вставку к вашему объявлению box-shadow , вы можете изменить его с внешнего свечения на внутреннее свечение.Объедините это со значениями смещения x / y, чтобы создать эффект, когда цвет светится внутрь с одной стороны. Применение этого CSS:

  div {
 width: 400px; 
 высота: 200 пикселей; 
 цвет фона: #fff; 
 граница: сплошная 2px #fff; 
 box-shadow: 
 вставка 60px 0 120px # f0f, 
 вставка -60px 0 120px # 0ff; 
}  

Дает нам это:

См.