Как сделать тень css: box-shadow — CSS | MDN

Тень блока и тень текста в CSS, внутренняя тень

Главная > Учебник CSS >

Тени блока

Свойство box-shadow устанавливает тени блока. В значении указывают параметры, которые определяют отображение тени. Параметры перечисляются в следующем порядке:

1. горизонтальное смещение (обязательно)
2. вертикальное смещение (обязательно)
3. размытие
4. размер
5. цвет (обязательно)
6. расположение

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

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

Чтобы часть тени стала видна, ей задаются смещения. Они сдвигают тень вправо и вниз. Любое смещение может иметь и отрицательные значения. Тогда тень, соответственно, сдвигается влево и вверх. Для примера создадим такой блок:

Стиль:

+

div
  {
  width: 150px;
  height: 100px
  margin: 50px;
  box-shadow: 10px 10px #707070;
  background-color: Blue;
  }

HTML код:

<div></div>

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

Следующий параметр — это размытие. Оно делает плавный переход от цвета тени к цвету фона. Размытие занимает отдельное место, поэтому увеличивает размер тени. У него нет отрицательных значений. Добавим этот параметр в пример. Блок получится такой:

Установка такой тени выглядит так:

box-shadow: 10px 10px 5px #707070;

Далее следует изменение размера. Положительное значение увеличивает размер тени, а отрицательное уменьшает. Совместно со смещением этот параметр позволяет создавать различные эффекты. Пример:

box-shadow: 50px 30px 1px -23px #707070;

В CSS существует возможность создать внутреннюю тень. Если в значении свойства box-shadow указать слово inset, то тень располагается не снаружи блока, а внутри. Из-за этого блок становится как бы вогнутым. На мой взляд, внутренняя тень выглядит не очень красиво, поэтому используется не часто. Тень отображается на фоне блока, но находится под содержимым. Слово пишется после всех остальных параметров. При этом изменение размера устанавливается по-другому — положительное значение уменьшает размер тени. Оно позволяет отобразить тени со всех сторон блока.

box-shadow: 6px 6px 30px 10px #707070 inset;

Тени текста

Тексту также можно задать тень. Это делается с помощью свойства text-shadow.

1. горизонтальное смещение
2. вертикальное смещение
3. размытие
4. цвет

Указание смещений является обязательным. Для примера создадим такой текст:

Текст

Он создаётся так:

Стиль:

p
  {
  margin: 50px;
  font: bold 60px Verdana;
  text-shadow: 3px 3px #AAA;
  }

HTML код:

<p>Текст</p>

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

Текст

text-shadow: 4px 4px 10px #FF053A;

11. Скругления и тени · Неожиданный HTML

В 2008 году, чтобы сделать скругленный прямоугольник, приходилось рисовать в графическом редакторе четыре накладки на каждый угол прямоугольника и потом позиционированием накладывать их на каждый из углов. Не проходило и пол часа как Ваша кнопочка со скругленными краями была готова. Теперь нужно было отключить ложные клики по краям, и да: всё это можно было сделать только на однотонном фоне, иначе накладки были видны. А потом появилось свойство border-radius.

border-radius – задает радиус скругления

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

.block {
     width:100px;
     height:100px;
     background:purple;
}

Добавим к нему скругление в 10px по краям

border-radius:10px;

Получим фиолетовый квадрат со скруглениями по краям

.block {
     width:100px;
     height:100px;
     background:purple;
     border-radius:10px;
}

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

border-radius:5px 10px 15px 20px;

Если хотим получить круг ставим border-radius:50% у квадрата

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

border-radius: 10px/20px;

10px — горизонтальный радиус 20px — вертикальный радиус

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

.semi_circle {
     width:200px;
     height:100px;
     border-radius:50% 50% 50% 50% / 0% 0% 100% 100%;
}

Полезное чтиво:

1. CSS-tricks о border-radius https://css-tricks.com/almanac/properties/b/border-radius/

2. Очень подробно разобрано, что мы можем сделать, используя border-radius https://m.habr.com/company/ruvds/blog/426731/ оригинальная статья https://9elements.com/io/css-border-radius/

3. О свойстве box-decoration-break https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break

4. Генератор border-radius’ов https://9elements.github.io/fancy-border-radius/#0.49.0.51—.

box-shadow — задает тень у объекта

Логика этого свойства следующая: представим, что у под каждым объектом находится тень. Она по размерам ровно соотвествует размерам блока, поэтому её не видно. Свойство box-shadow занимается тем, что может сместить тень относительно объекта(первые два свойства), размыть её(при этом тень увеличится, но края будут нерезкими), а также сделать тень больше(или меньше, если значения отрицательные), чем сам объект.

box-shadow: 1px 2px 3px 4px #ccc;

1px – смещение слева
2px – смещение сверху
3px – радиус размытия
4px – увеличение размеров тени (padding для тени)

Цвет тени лучше делать полупрозрачным через rgba

Множественные тени

Можем сделать несколько теней и сымитировать несколько границ у объекта.

box-shadow: 0px 0px 0px 10px #c00,
            0px 0px 0px 20px #00c;

Внутренняя тень

Добавление параметра inset создает внутреннюю тень. Позволяет сгенерировать эффект вдавленности.

box-shadow: inset 0 0 10px #000000;

Подробнее:
https://css-tricks.com/almanac/properties/b/box-shadow/

http://www.w3schools.com/css/css3_shadows.asp

text-shadow

Мы можем задать тень для текста

text-shadow: 0 0 3px #FF0000;

Полезное чтиво:

1. Эффекты для текста: http://enjoycss.com/gallery/text_effects/ec

2. Пример с вдавленным текстом https://wp-lessons. com/vnutrennyaya-ten-teksta-v-css

3. Пример с внутренней тенью для текста https://codepen.io/adambundy/pen/HtmaK

4. Дизайн-тренды, которые уже не в моде http://designshack.net/articles/graphics/5-former-design-trends-that-arent-cool-anymore-so-stop-using-them/

5. О применении свойства background-clip:text https://webplatform.news/issues/2018-11-02

Практика:

1. Выводим круглый аватар с двумя каемочками
2. Сделать ghost-button
3. Сделать «простроченный» элемент
4. Верстаем страницу «профиль пользователя» в стиле iOS (круглый аватар, ссылка в прозрачном блоке)
5. Делаем фотографию с внутренней тенью https://habrahabr.ru/post/154211/

6. Делаем retro-эффект для текста http://enjoycss.com/gallery/text_effects/ec

7. Делаем текст с эффектом вдавленности text-shadow (вариант с background-clip:text)

8. Верстаем шаблон
   
9. Верстаем шаблон формы залогинивания сервиса Zeplin. input’ы заменяем на div’ы

Как добавить тень к изображению с помощью CSS?

Как добавить тень к изображению с помощью CSS?

Как добавить тень к изображению с помощью CSS?

Обзор

Тень в CSS используется для добавления эффекта тени к входному изображению. Это создает приятный трехмерный эффект на изображении или других объектах. Он добавляет классный эффект объектам и улучшает эстетику веб-сайта .

В этой статье мы узнаем, как добавить тень к изображениям и другим объектам.

Синтаксис CSS Drop Shadow

Давайте разберемся с синтаксисом drop-shadow() в CSS. Drop-shadow() в CSS использует параметр типа shadow, имеющий такие значения, как 9. 0032 смещение-x, смещение-y, радиус размытия, цвет .

Синтаксис:

Параметры drop-shadow()

Давайте разберемся с параметрами drop-shadow() в CSS. drop-shadow() принимает следующие параметры.

• offset-x: Это горизонтальное расстояние, определяющее длину тени от объекта. Тень зависит от следующих значений:
  • Положительное значение: положительное значение размещает тень справа от объекта на заданную длину.
  • Отрицательное значение: отрицательное значение размещает тень слева от объекта на заданную длину.
  • 0: Тень размещается непосредственно за объектом.
• offset-y: Это вертикальное расстояние, которое определяет длину тени от объекта. Тень зависит от следующих значений:
  • Положительное значение: положительное значение размещает тень ниже объекта на заданную длину.
  • Отрицательное значение: отрицательное значение размещает тень над объектом на заданную длину.
  • 0: Тень размещается непосредственно за объектом.
• радиус размытия: Это необязательный параметр. Он указывает радиус размытия тени и определяет, как тень будет размыта:
  • Чем больше переданное значение, тем больше будет размыта тень.
  • Значение по умолчанию — 0, что приводит к неразмытым краям тени.
• цвет: Это необязательный параметр, определяющий цвет тени. Если не указано, используется значение свойства цвета по умолчанию.

Базовый пример

Давайте рассмотрим базовый пример того, как drop-shadow() работает в CSS.

В этом примере мы просто добавляем тень к div с помощью этой функции.

Вывод:

В этом примере мы просто добавили тень к элементу div HTML, используя эту функцию.

Как добавить тень к изображению с помощью CSS?

Мы можем просто использовать функцию drop-shadow(), чтобы добавить тень к изображению. Давайте посмотрим, как мы можем это сделать.

Пример: добавление тени к изображению

В этом примере мы просто добавляем тень к изображению с помощью этой функции.

Результат:

Здесь мы добавили тень к изображению с помощью функции drop-shadow().

Объяснение кода тени

В приведенном выше коде мы передали следующие значения функции drop-shadow():

• Первое значение -10px — это горизонтальное расстояние, определяющее длину тени от объекта. Это отрицательное значение, которое помещает тень слева от объекта на заданную длину.
• Второе значение -10 пикселей — это расстояние по вертикали, определяющее длину тени от объекта. Это отрицательное значение, которое размещает тень над объектом на заданную длину.
• Третье значение 10 пикселей определяет радиус размытия тени.
• Четвертый параметр устанавливает цвет тени.

Как удалить пробелы под изображениями

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

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

• Сделать класс для изображений отдельно
• Затем сделайте это изображение блочным элементом.

Пример:

Результат:

Мы получили красную тень на изображении.

Как добавить тень к текстовому полю

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

Пример: Добавление тени к текстовому полю

Вывод:

Здесь мы получили зеленую тень к текстовому полю.

Другие примеры:

Пример: Как добавить тень к тексту

Мы можем добавить тень к тексту, чтобы получить эффект прохладной тени на тексте. Для этого просто добавьте текст в div и присвойте этому div некоторый класс, а затем используйте функцию drop-shadow(), чтобы придать этому тексту эффект тени.

Пример: добавление тени к текстовому полю

Вывод:

Мы получили классный эффект тени для текста с помощью функции drop-shadow().

Ограничения и различия Drop Shadow

Ограничения:

• Drop-shadow() не совместим с параметром распространения; следовательно, он не увеличивает тень, как это делает box-shadow.
• С помощью этой функции нельзя создать эффект контура.
• Drop-shadow() не поддерживает встроенные тени
• drop-shadow() не работает с некоторыми веб-браузерами, поэтому он может быть ограничен некоторыми браузерами.

Различия между drop-shadow и box-shadow в CSS?

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

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

Заключение

• Drop Shadow в CSS используется для добавления эффекта тени к входному изображению.
• Создает приятный трехмерный эффект для изображения или других объектов, добавляет классный эффект объектам и улучшает эстетику веб-сайта.
• Синтаксис drop-shadow():
  • тень (смещение-x смещение-y цвет радиуса размытия)
• Параметры, принимаемые drop-shadow():
  • смещение-х
  • смещение-y
  • радиус размытия
  • цвет
• С помощью функции drop-shadow() мы можем выполнять следующие задачи:
  • Добавление тени к изображению
  • Удалить пустое пространство под изображениями
  • Добавление тени к текстовому полю
  • Добавить тень к тексту
• Существуют определенные ограничения функции drop-shadow(), как обсуждалось выше в статье.
• Существует много различий между drop-shadow и box-shadow, как обсуждалось выше; каждый может быть использован в соответствии с данными ситуациями.

Множественные тени в CSS

В этом уроке вы узнаете, как создать потрясающие эффекты теней в CSS! Синтаксис, пример кода и пояснения приведены ниже.

Если ваш браузер поддерживает Css Box Shadow Property, вы можете увидеть многоцветные тени ниже.

Пример 1

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

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

Для создания тени:

box-shadow:Inset X-Offset Y-Offset Blur Blur-Offset Color;

: Смещает тень вертикально по оси Y.

: Радиус размытия для эффекта радиального размытия тени.
(0 — минимальное значение без эффекта размытия.)
:(необязательно) Радиальное смещение размытия.

: Здесь название цвета или шестнадцатеричный код цвета или цвет RGBA
значения могут быть объявлены.

Для одной тени:
box-shadow: 0px 0px 20px 10px #000000;

Для нескольких теней:
box-shadow:0 0 10px 4px #0000FF , 0 0 20px 30px #008000, 30px 0 20px 30px #FF1493, -30px -30px 20px 30px #FF4500;

Важно Для множественной тени значения разделяются запятыми.

Код для тега

1
2
3
4
5
6
7
 

 <тело> 

 образец  >


  
  

Код для тега

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
23
24
25
26
27
28
2930
31
32
33
34
35
36
37
38
39
40
 

 <голова>

<тип стиля=  текст/css >

#sample{ 
 ширина:100px;
высота: 100 пикселей;
поля:авто;
граница: 4px сплошная #444;
box-shadow:вставка 10px 10px 20px 10px #CC0000,
вставка 10px -10px 20px 10px #00CC00,
вставка -10px -10px 20px 10px #FF4500,
вставка -10px 10px 20px 10px #0000CC,
50px 50px 50px 10px #CC0000 ,
50px -50px 50px 10px #00CC00,
-50px -50px 50px 10px #FF4500,
-50px 50px 50px 10px #0000CC ;
-moz-box-shadow:вставка 10px 10px 20px 10px #CC0000,
вставка 10px -10px 20px 10px #00CC00,
вставка -10px -10px 20px 10px #FF4500,
вставка -10px 10px 20px 10px #0000CC,
50px 50px 50px 10px #CC0000 ,
50px -50px 50px 10px #00CC00,
-50px -50px 50px 10px #FF4500,
-50px 50px 50px 10px #0000CC ;
-webkit-box-shadow:вставка 10px 10px 20px 10px #CC0000,
вставка 10px -10px 20px 10px #00CC00,
вставка -10px -10px 20px 10px #FF4500,
вставка -10px 10px 20px 10px #0000CC,
50px 50px 50px 10px #CC0000 ,
50px -50px 50px 10px #00CC00,
-50px -50px 50px 10px #FF4500,
-50px 50px 50px 10px #0000CC ;
}
 



 

Объяснение (пример 1)

Строка 6 › ширина:100 пикселей; Строка 7 › высота:100px;
→ Чтобы установить ширину и высоту для этого div.

Строка 8 › margin:auto;
→ Чтобы расположить div в центре экрана. ( Margin:auto работает только тогда, когда также объявлена ​​фиксированная ширина. )

Line 9 › border:4px solid #444;
→ Чтобы создать сплошную серую (#444) рамку шириной 4 пикселя.

Внутренние тени (пример 1)

sample > внутренними тенями.
Поскольку мы создаем внутренние тени , нам нужно добавить это ключевое слово «inset» перед каждым значением, которое мы определяем.
Нам просто нужно изменить значения X-Offset и Y-Offset, а цвет, значения Blur Radius и Blur Offset остаются прежними.
Нам нужно обратиться к этой оси Y-X для определения положения теней. Это не обычная ось X-Y.

Изображение 1

Вы можете видеть положительные и отрицательные значения в скобках, которые представляют положительные или отрицательные (X-Offset, Y-Offset) значения в квадрантах.

Строка 10 › вставка 10px 10px 20px 10px #CC0000 ,
→ Этот код создает красную ( #CC0000 ) тень в первом квадранте с положительными значениями смещения по осям X и Y.

Строка 11 › вставка 10px -10px 20px 10px #00CC00 ,
→ Этот код создает зеленую ( #CC0000 ) тень в четвертом квадранте с положительным значением смещения по оси X и отрицательным значением смещения по оси Y.

Строка 12 › вставка -10px -10px 20px 10px #FF4500 ,
→ Этот код создает тень оранжевого ( #FF4500 ) цвета в третьем квадранте с отрицательными значениями смещения X и Y.

Строка 13 › вставка -10px 10px 20px 10px #0000CC ,
→ Этот код создает тень синего ( #0000CC ) цвета во втором квадранте с отрицательным значением смещения по оси X и положительным значением смещения по оси Y.

Внешние тени (пример 1)

Теперь мы добавляем внешние тени к нашему

sample >. Теперь нам не нужно добавлять это ключевое слово «вставка».
Нам просто нужно изменить значения X-Offset и Y-Offset, а цвет, значения Blur Radius и Blur Offset остаются прежними.

Строка 14 › 50px 50px 50px 10px #CC0000 ,
→ Этот код создает красную ( #CC0000 ) тень в первом квадранте с положительными значениями смещения по осям X и Y.

Строка 15 › 50px -50px 50px 10px #00CC00 ,
→ Этот код создает зеленую ( #CC0000 ) тень в четвертом квадранте с положительным значением смещения по оси X и отрицательным значением смещения по оси Y.

Строка 16 › -50px -50px 50px 10px #FF4500 ,
→ Этот код создает тень оранжевого ( #FF4500 ) цвета в третьем квадранте с отрицательными значениями смещения X и Y.

Строка 17 › -50px 50px 50px 10px #0000CC;
→ Этот код создает тень синего ( #0000CC ) цвета во втором квадранте с отрицательным значением смещения по оси X и положительным значением смещения по оси Y.

Пояснение (пример 3)

Чтобы сделать эффекты тени, как в примере 3 выше.
Все то же, что описано выше для (Пример 1) . Просто добавьте еще одно свойство Border Radius к (примеру 1) выше, чтобы получить эффекты тени, как в примере 3.

Вот код таблицы стилей для примера 3.

1
2
3
4
5
 

 #example3{ 
 border-radius:50px;
-moz-граница-радиус: 50px;
-webkit-border-radius: 50px;
 
 }
 

Теперь давайте попробуем создать тени, как в примере 2

Код для тега

(пример 2) Здесь я использовал 11 теней для создания эффекта. Сначала мы рассмотрим код, а затем я объясню свойства теней.

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
3940
41
42
43
44
45
46
47
48
49
 

 <голова>

<тип стиля=  текст/css >

#example2{ 
 ширина:50px;
высота: 50 пикселей;
граница: 50 пикселей;
радиус границы: 5px сплошной #333;
-moz-граница-радиус: 50px;
-webkit-border-radius: 50px;
box-shadow: вставка 0 0 12px 4px #0000FF,
вставка 0 0 12px 10px #1E90FF,
вставка 0 0 12px 17px #9932CC,
0 0 4px 10px #333333,
0 0 6px 15px #АААААА,
0px -20px 50px 50px #CC0000,
0px -20px 12px 50px #333333,
-20px 30px 50px 50px #00CC00,
-20px 30px 12px 50px #333333,
20px 30px 50px 50px #FFD700,
20px 30px 12px 50px #333;
-moz-box-shadow: вставка 0 0 12px 4px #0000FF,
вставка 0 0 12px 10px #1E90FF,
вставка 0 0 12px 17px #9932CC,
0 0 4px 10px #333333,
0 0 6px 15px #АААААА,
0px -20px 50px 50px #CC0000,
0px -20px 12px 50px #333333,
-20px 30px 50px 50px #00CC00,
-20px 30px 12px 50px #333333,
20px 30px 50px 50px #FFD700,
20px 30px 12px 50px #333;
-webkit-box-shadow: вставка 0 0 12px 4px #0000FF,
вставка 0 0 12px 10px #1E90FF,
вставка 0 0 12px 17px #9932CC,
0 0 4px 10px #333333,
0 0 6px 15px #АААААА,
0px -20px 50px 50px #CC0000,
0px -20px 12px 50px #333333,
-20px 30px 50px 50px #00CC00,
-20px 30px 12px 50px #333333,
20px 30px 50px 50px #FFD700,
20px 30px 12px 50px #333;
}
 



 

Объяснение (пример 2)

Строка 5 › #sample {
→ Это идентификатор селектора для div с id= sample , любое свойство, которое мы определяем здесь, будет применяться к любому div с id= sample .

Строка 6 › ширина:100 пикселей; Строка 7 › высота:100px;
→ Чтобы установить ширину и высоту для этого div.

Строка 8 › margin:auto;
→ Чтобы расположить div в центре экрана. ( Margin:auto работает только тогда, когда также объявлена ​​фиксированная ширина. )

Line 9 › border:5px solid #333;
→ Чтобы создать сплошную серую (#333) рамку шириной 5 пикселей.

Важно Строка 12 ›
Строка 23 ›
Строка 34 › box-shadow:
-moz-box-shadow:
-webkit-box-shadow: несколько значений тени, разделенных запятой.
Несколько значений тени, разделенных запятой.
Несколько значений тени, разделенных запятой.

→ Здесь строка 12 определяет свойство Css Box Shadow для IE9 и Opera 7+.
→ Строка 23 определяет свойство Css Box Shadow для Mozilla Firefox.
→ И строка 34 определяет свойство Css Box Shadow для браузеров Webkit, таких как Safari и Google Chrome.
(Остальные значения множественных теней одинаковы для всех.)

Внутренние тени (пример 2)

Мы начнем добавлять внутренние тени в

с id= example2 т.е.

example2 >.

Строка 12 › вставка 0 0 12px 4px #0000FF ,
→ Здесь значения X-смещения и Y-смещения установлены равными нулю, поэтому тень находится в центральной позиции.
→ Синий (#0000ff) Радиус цветного размытия установлен на 12 пикселей и смещен на 4 пикселя.

Строка 13 › вставка 0 0 12px 10px #1E90FF ,
→ Голубой (#1E90FF) Радиус цветного размытия установлен на 12 пикселей и смещен на 10 пикселей.

Строка 14 › вставка 0 0 12px 17px #9932CC ,
→ Фиолетовый (#9932CC) Радиус цветного размытия установлен на 12 пикселей и смещен на 10 пикселей.

Внешние тени (пример 2)

Теперь мы заполним внешние тени.

Строка 15 › 0 0 4px 10px #333333 ,
→ Серый (#333333) Цветной Радиус размытия установлен на 4 пикселя и смещен на 10 пикселов.

Строка 16 › 0 0 6px 15px #AAAAAA ,
→ Светло-серый (#AAAAAA) Цветной Радиус размытия установлен на 6 пикселей и смещен на 15 пикселей.

Строка 17 › 0px -20px 50px 50px #CC0000 ,
→ Для этой тени установлено отрицательное смещение по оси Y -20 пикселей.
→ Красный (#CC0000) Радиус цветного размытия установлен на 50 пикселей и смещен на 50 пикселей.

Строка 18 › 0px -20px 12px 50px #333333 ,
→ Для этой тени установлено отрицательное смещение по оси Y -20 пикселей.
→ Серый (#333333) Радиус цветного размытия установлен на 12 пикселей и смещен на 50 пикселей.

Строка 19 › -20px 30px 50px 50px #00CC00 ,
→ Для этой тени установлено отрицательное смещение по оси X в -20 пикселей и положительное смещение по оси X в 30 пикселей.
→ Green (#00CC00) Радиус цветного размытия установлен на 50 пикселей и смещен на 50 пикселей.

Строка 20 › -20px 30px 12px 50px #333333 ,
→ Для этой тени установлено отрицательное смещение по оси X в -20 пикселей и положительное смещение по оси X в 30 пикселей.

No related posts.