Содержание

Детальный обзор CSS свойства box-shadow

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

 

Далее представлены три разных примера применения CSS свойства box-shadow к элементу div.

Пример 1: Простая внешняя тень

Вот так вы можете задать для элемента div легкую серую внешнюю тень:

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

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

box-shadow: 0 0 10px gray;

box-shadow: 0 0 10px gray;

Пример 2: Внутренняя тень

Внутренняя тень может быть задана с использованием значения inset.

box-shadow: inset 0 0 10px;

box-shadow: inset 0 0 10px;

Пример 3: Смешение внешней тени

В этом примере тень отбрасывается с наклоном от нижней правой части блока благодаря использованию горизонтального и вертикального смещения на 5px.

box-shadow: 5px 5px 10px;

box-shadow: 5px 5px 10px;

А что если вы хотите, чтобы тень отбрасывалась от верхней левой части блока? Это можно осуществить, используя отрицательные значения для горизонтального и вертикального смещения. В следующем примере горизонтальное и вертикальное смещение равно -5px.

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

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

Теперь, когда вы увидели несколько «живых» примеров использования CSS свойства box-shadow, давайте пойдем дальше.

Синтаксис

Общий синтаксис для свойства box-shadow выглядит так:

box-shadow: [inset] [horizontal offset] [vertical offset] [blur radius] [spread distance] [color];

box-shadow: [inset] [horizontal offset] [vertical offset] [blur radius] [spread distance] [color];

Значения CSS свойства box-shadow

CSS свойство box-shadow может иметь шесть возможных значений:

inset – отображение тени внутри элемента

horizontal offset – горизонтальное смещение

vertical offset – вертикальное смещение

blur radius – радиус размытия

spread distance – растяжение (толщина тени)

color – цвет

И только два значения являются обязательными: горизонтальное и вертикальное смещение.

Для четырех значений (горизонтальное смещение, вертикальное смещение, радиус размытия и растяжение) должны использоваться CSS единицы измерения (например, px, em, % и т.д.).

Цвет должен быть представлен в виде допустимого в CSS значения для определения цвета, например, шестнадцатеричного значения (#000000).

Описание значений свойства box-shadow

Inset

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

box-shadow: inset 0 0 5px 5px olive;

box-shadow: inset 0 0 5px 5px olive;

Для сравнения приведем тот же пример без указания inset:

box-shadow: 0 0 5px 5px olive;

box-shadow: 0 0 5px 5px olive;

Горизонтальное смещение

Значение горизонтального смещения отвечает за позицию тени по оси X. Положительное значение будет смещать тень вправо, а отрицательное – влево.

В следующем примере горизонтальное смещение равно 20px, т.е. в два раза больше, чем вертикальное смещение, которое равно 10px, поэтому по горизонтали тень будет в два раза шире.

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

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Вертикальное смещение

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

В следующем примере вертикальное смещение равно -20px, т.е. в два раза больше, чем горизонтальное смещение, которое равно 10px, поэтому размер тени в два раза больше по вертикали. Также, поскольку указано отрицательное значение, то и тень смещается от верхней части блока.

Радиус размытия

Значение радиуса размытия влияет на размытость/резкость тени.

Радиус размытия является необязательным значением. Если вы не укажите его, то по умолчанию он будет равен 0. А также он не может быть отрицательным значением, в отличии от горизонтального и вертикального смещения.

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

В следующем примере радиус размытия равен 20px, поэтому эффект достаточно хорошо виден.

box-shadow: 5px 5px 20px;

box-shadow: 5px 5px 20px;

Растяжение (ширина)

Значение растяжения (ширины) увеличивает или уменьшает тень во всех направлениях. Если оно является положительным, тень будет увеличиваться со всех сторон. Если оно будет отрицательным, то наоборот тень будет уменьшаться.

Обратите внимание на то, что при положительном значении растяжения (10px), со всех сторон элемента появляется тень в 10px, при том, что горизонтальное и вертикальное смещение равно 0:

box-shadow: 0 0 10px 5px;

box-shadow: 0 0 10px 5px;

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

box-shadow: 0 10px 10px -5px;

box-shadow: 0 10px 10px -5px;

Цвет

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

По умолчанию — другими словами, если вы явно не указали значение цвета для вашей тени — цвет у тени будет таким же, как и цвет HTML элемента, к которому применяется свойство box-shadow. Например, если у вас есть элемент div, для которого задано значение цвета red, то значение цвета у тени тоже будет red:

color: red; box-shadow: 0 0 10px 5px;

color: red;

box-shadow: 0 0 10px 5px;

Если вы хотите, чтобы у тени был другой цвет, тогда вам нужно будет указать его при объявлении свойства box-shadow. В следующем примере видно, что несмотря на то, что значение цвета для элемента div по-прежнему равно red, цвет тени теперь равен blue.

color: red; box-shadow: 0 0 10px 5px blue;

color: red;

box-shadow: 0 0 10px 5px blue;

Несколько теней

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

box-shadow: [box shadow properties 1], [box shadow properties 2], [box shadow properties n];

box-shadow: [box shadow properties 1], [box shadow properties 2], [box shadow properties n];

Другими словами, вы можете назначать несколько теней, отделяя группу значений для каждой тени запятыми (,). В следующем примере созданы две тени: красная – в верхней левой части блока, а синяя – в нижней правой.

box-shadow: -5px -5px 30px 5px red, 5px 5px 30px 5px blue;

box-shadow: -5px -5px 30px 5px red,

             5px 5px 30px 5px blue;

Браузерная поддержка

CSS свойство box-shadow имеет хорошую браузерную поддержку. Считая браузер Internet Explorer наименьшим общим знаменателем, данное свойство поддерживается этим браузером с 9 версии (выпущенной в 2011 году).

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

Автор: Jacob Gube

Источник: //sixrevisions.com/

Редакция: Команда webformyself.

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

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Как сделать тень в CSS

Здравствуйте, уважаемые читатели. Сегодня поговорим о том, как сделать тень в CSS. На сегодняшний день тень в CSS поддерживаются практически всеми популярными браузерами. Исключение является Internet Explorer, что для него неудивительно. Он не понимает свойства text-shadow (тень текста). Свойства тени для объектов на странице прописываются как box-shadow. И давайте перейдем сразу к примерам. Я создал 4 блока и применил к ним разные эффекты тени.

1
 box-shadow: 0px 0px 5px 0; /* Тень с 4 сторон и размытием 5px */

box-shadow: 0px 0px 5px 0; /* Тень с 4 сторон и размытием 5px */

2
 box-shadow: 0px 0px 6px 1px inset; /* Внутренняя тень */

box-shadow: 0px 0px 6px 1px inset; /* Внутренняя тень */

3
 box-shadow: 2px 2px 5px 1px; /* Тень смещена вниз и вправо*/

box-shadow: 2px 2px 5px 1px; /* Тень смещена вниз и вправо*/

4
 box-shadow: 3px 3px 5px 0 inset; /* Внутренняя тень смещена вверх и влево*/

box-shadow: 3px 3px 5px 0 inset; /* Внутренняя тень смещена вверх и влево*/

Значение тени в CSS

  • Первое значение смещает тень по оси Х. Применяются как положительные, так и отрицательные числа
  • Второе значение — смещает тень по оси Y
  • Третье значение — радиус размытия тени
  • Четвертое значение — размер тени
  • #222 — Цвет тени
  • inset — внутренняя тень

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

box-shadow: 2px 2px 5px 1px; /* Все браузеры */
-webkit-box-shadow: 2px 2px 5px 1px; /* Хром, Сафари */
-mox-box-shadow: 2px 2px 5px 1px; /* FireFox */
-o-box-shadow: 2px 2px 5px 1px; /* Опера */

box-shadow: 2px 2px 5px 1px; /* Все браузеры */ -webkit-box-shadow: 2px 2px 5px 1px; /* Хром, Сафари */ -mox-box-shadow: 2px 2px 5px 1px; /* FireFox */ -o-box-shadow: 2px 2px 5px 1px; /* Опера */

Демо

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

СКАЧАТЬ

Детальный обзор CSS свойства box-shadow

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

Далее представлены три разных примера применения CSS свойства box-shadow к элементу div.

Пример 1: Простая внешняя тень

Вот так вы можете задать для элемента div легкую серую внешнюю тень:

box-shadow: 0 0 10px gray;

 

 

Пример 2: Внутренняя тень

Внутренняя тень может быть задана с использованием значения inset.

 

box-shadow: inset 0 0 10px;

 

 

 

Пример 3: Смешение внешней тени

В этом примере тень отбрасывается с наклоном от нижней правой части блока благодаря использованию горизонтального и вертикального смещения на 5px.

 

box-shadow: 5px 5px 10px;

 

 

 

А что если вы хотите, чтобы тень отбрасывалась от верхней левой части блока? Это можно осуществить, используя отрицательные значения для горизонтального и вертикального смещения. В следующем примере горизонтальное и вертикальное смещение равно -5px.

 

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

 

 

 

Теперь, когда вы увидели несколько «живых» примеров использования CSS свойства box-shadow, давайте пойдем дальше.

Синтаксис

Общий синтаксис для свойства box-shadow выглядит так:

 

box-shadow: [inset] [horizontal offset] [vertical offset] [blur radius] [spread distance] ;

 

Значения CSS свойства box-shadow

CSS свойство box-shadow может иметь шесть возможных значений:

inset – отображение тени внутри элемента

horizontal offset – горизонтальное смещение

vertical offset – вертикальное смещение

blur radius – радиус размытия

spread distance – растяжение (толщина тени)

color – цвет

И только два значения являются обязательными: горизонтальное и вертикальное смещение.

Для четырех значений (горизонтальное смещение, вертикальное смещение, радиус размытия и растяжение) должны использоваться CSS единицы измерения (например, px, em, % и т.д.).

Цвет должен быть представлен в виде допустимого в CSS значения для определения цвета, например, шестнадцатеричного значения (#000000).

Описание значений свойства box-shadow

 

 

Inset

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

 

box-shadow: inset 0 0 5px 5px olive;

 

Для сравнения приведем тот же пример без указания inset:

 

box-shadow: 0 0 5px 5px olive;

 

 

Горизонтальное смещение

Значение горизонтального смещения отвечает за позицию тени по оси X. Положительное значение будет смещать тень вправо, а отрицательное – влево.

В следующем примере горизонтальное смещение равно 20px, т.е. в два раза больше, чем вертикальное смещение, которое равно 10px, поэтому по горизонтали тень будет в два раза шире.

 

box-shadow: 20px 10px;

 

 

Вертикальное смещение

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

В следующем примере вертикальное смещение равно -20px, т.е. в два раза больше, чем горизонтальное смещение, которое равно 10px, поэтому размер тени в два раза больше по вертикали. Также, поскольку указано отрицательное значение, то и тень смещается от верхней части блока.

 

box-shadow: 10px -20px;

 

 

Радиус размытия

Значение радиуса размытия влияет на размытость/резкость тени.

Радиус размытия является необязательным значением. Если вы не укажите его, то по умолчанию он будет равен 0. А также он не может быть отрицательным значением, в отличии от горизонтального и вертикального смещения.

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

В следующем примере радиус размытия равен 20px, поэтому эффект достаточно хорошо виден.

 

box-shadow: 5px 5px 20px;

 

 

Растяжение (ширина)

Значение растяжения (ширины) увеличивает или уменьшает тень во всех направлениях. Если оно является положительным, тень будет увеличиваться со всех сторон. Если оно будет отрицательным, то наоборот тень будет уменьшаться.

Обратите внимание на то, что при положительном значении растяжения (10px), со всех сторон элемента появляется тень в 10px, при том, что горизонтальное и вертикальное смещение равно 0:

 

box-shadow: 0 0 10px 5px;

 

 

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

 

box-shadow: 0 10px 10px -5px;

 

 

Цвет

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

По умолчанию — другими словами, если вы явно не указали значение цвета для вашей тени — цвет у тени будет таким же, как и цвет HTML элемента, к которому применяется свойство box-shadow. Например, если у вас есть элемент div, для которого задано значение цвета red, то значение цвета у тени тоже будет red:

 

color: red;
box-shadow: 0 0 10px 5px;

 

 

Если вы хотите, чтобы у тени был другой цвет, тогда вам нужно будет указать его при объявлении свойства box-shadow. В следующем примере видно, что несмотря на то, что значение цвета для элемента div по-прежнему равно red, цвет тени теперь равен blue.

 

color: red;
box-shadow: 0 0 10px 5px blue;

 

 

Несколько теней

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

 

box-shadow: [box shadow properties 1], [box shadow properties 2], [box shadow properties n];

 

Другими словами, вы можете назначать несколько теней, отделяя группу значений для каждой тени запятыми (,). В следующем примере созданы две тени: красная – в верхней левой части блока, а синяя – в нижней правой.

 

box-shadow: -5px -5px 30px 5px red,
5px 5px 30px 5px blue;

 

Браузерная поддержка

CSS свойство box-shadow имеет хорошую браузерную поддержку. Считая браузер Internet Explorer наименьшим общим знаменателем, данное свойство поддерживается этим браузером с 9 версии (выпущенной в 2011 году).

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

 

See the Pen CSS Box Shadow Examples by vavik (@vavik96) on CodePen.


Автор: Jacob Gube
Источник

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

Чтобы установить box-shadow на одной стороне элемента, используйте свойство box-shadow. Это свойство имеет четыре параметра длины и цвет.

Используя свойство box-shadow, следуйте этому синтаксису:

  box-shadow: h-смещение v-смещение цвет размытия;  

h-offset устанавливает тень по горизонтали.Положительное значение задает правую тень, а отрицательное значение задает левую.

v-shadow устанавливает тень вертикально. Положительное значение устанавливает тень под полем, а отрицательное значение устанавливает тень над полем.

blur — необязательный атрибут, который размывает box-shadow.

распространение устанавливает размер тени.

цвет — необязательный атрибут, задающий цвет тени.

Начнем с создания тени с левой стороны элемента.Следуйте инструкциям ниже.

  

  <голова>
    Название документа
  
  <тело>
     

Документы W3

  h2 {
  выравнивание текста: по центру;
  фон: #c4c4c4;
  отступы сверху: 50px;
  цвет: #000000;
  ширина: 400 пикселей;
  высота: 120 пикселей;
  box-shadow: -8px 0px 8px #000000;
}  

Вот полный код.

Пример добавления тени блока слева от элемента:

  

  <голова>
    Название документа
    <стиль>
      ч2 {
        выравнивание текста: по центру;
        фон: #c4c4c4;
        отступы сверху: 50px;
        цвет: #000000;
        ширина: 400 пикселей;
        высота: 120 пикселей;
        box-shadow: -8px 0px 8px #000000;
      }
    
  
  <тело>
     

Документы W3

Результат

W3Docs

Пример добавления box-shadow внизу элемента:

  

  <голова>
    Название документа
    <стиль>
      ч2 {
        выравнивание текста: по центру;
        фон: #c4c4c4;
        отступы сверху: 50px;
        цвет: #000000;
        ширина: 400 пикселей;
        высота: 120 пикселей;
        box-shadow: 0 10px 10px #000000;
      }
    
  
  <тело>
     

Документы W3

При добавлении box-shadow только с одной стороны элемента фокус должен быть на последнем значении (радиус распространения).Это уменьшает общий размер box-shadow как по горизонтали, так и по вертикали.

Теперь мы покажем еще один пример, в котором мы используем значение «inset» для создания тени внутри блока, поскольку по умолчанию тень размещается за пределами блока.

Пример добавления box-shadow внутри элемента:

  

  <голова>
    Название документа
    <стиль>
      ч2 {
        выравнивание текста: по центру;
        фон: #c4c4c4;
        отступы сверху: 50px;
        цвет: #000000;
        ширина: 400 пикселей;
        высота: 120 пикселей;
        box-shadow: 0px 10px 20px #000000 вставка;
      }
    
  
  <тело>
     

Документы W3

В нашем последнем примере мы используем внешние и внутренние тени на одной стороне каждого представленного элемента.

Пример добавления внешних и внутренних теней:

  

  <голова>
    Название документа
    <стиль>
      тело {
        фон: #ccc;
        отступ: 20 пикселей;
      }
      .слева {
        плыть налево;
        поле слева: 20px;
      }
      .коробка {
        ширина: 110 пикселей;
        высота: 110 пикселей;
        фон: #fff;
        цвет: #9e9e9e;
        поле: 0 авто;
        нижняя граница: 20px;
        выравнивание текста: по центру;
        высота строки: 100 пикселей;
      }
      .теневое дно {
        box-shadow: 0 8px 10px -6px #000000;
      }
      .shadow-верх {
        box-shadow: 0-8px 10px-6px #000000;
      }
      .shadow-левый {
        box-shadow: -8px 0 10px -6px #000000;
      }
      .shadow-право {
        box-shadow: 8px 0 10px -6px #000000;
      }
      .inner-shadow-bottom {
        box-shadow: вставка 0 8px 10px -6px #000000;
      }
      .inner-shadow-top {
        box-shadow: вставка 0-8px 10px-6px #000000;
      }
      .внутренняя тень слева {
        box-shadow: вставка 8px 0 10px -6px #000000;
      }
      .inner-shadow-right {
        box-shadow: вставка -8px 0 10px -6px #000000;
      }
    
  
  <тело>
    <дел>
      
внизу
сверху
слева
справа
<дел>
вставка вверху
нижняя вставка
вставка слева
вставка справа

Свойство Box-Shadow CSS — 1Keydata CSS Tutorial

CSS Tutorial  >  Свойство Box-Shadow

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

Синтаксис для box-shadow следующий:

box-shadow: [inset] смещение-x смещение-y радиус размытия цвет радиуса распространения
  • [вставка]: Это необязательное поле. Если указана вставка, это означает, что тень появится внутри элемента коробки. В противном случае тень появляется за пределами элемента коробки.
  • смещение-x: Это обязательное поле.Значение указывает величину расстояния, на которое тень будет простираться справа от элемента коробки. Если число отрицательное, это означает, что тень будет простираться слева от элемента коробки.
  • offset-y: это обязательное поле. Значение указывает на расстояние, на которое тень будет простираться ниже элемента блока. Если число отрицательное, это означает, что тень будет простираться над элементом коробки.
  • радиус размытия: Это необязательное поле. Если не указано, значение по умолчанию равно 0.Большое значение радиуса размытия означает, что тень будет размытой, а маленькое значение радиуса размытия означает, что тень будет резкой. Допускаются только неотрицательные числа.
  • радиус распространения: Это необязательное поле. Если не указать, значение по умолчанию равно 0. Допускаются как положительные, так и отрицательные числа. Положительное значение расширяет тень, а отрицательное значение сжимает тень.
  • цвет: Это необязательное поле. Это код цвета. Его можно указать в шестнадцатеричном коде, RGB или имени цвета.Если цвет не указан, тень блока будет иметь тот же цвет, что и элемент блока.

Обратите внимание, что важен порядок значений. Например, offset-x всегда предшествует offset-y , а blur-radius всегда предшествует spread-radius .

Пример 1

Декларация CSS:

#ex1 {
стиль границы: сплошной; ширина границы: 1px;
box-shadow: 5px 5px #999;
}

Следующий HTML,


Пример свойства Box-shadow 1.

рендеры,

Пример свойства Box-shadow 1.

Обратите внимание, что тень блока простирается вправо от элемента блока на 5 пикселей и ниже элемента блока на 5 пикселей.

Пример 2: Отрицательные значения смещения

Декларация CSS:

#ex2 {
стиль границы: сплошной; ширина границы: 1px;
box-shadow: -10px -10px #999;
}

Следующий HTML,


Пример свойства Box-shadow 2.

рендеры,

Пример свойства Box-shadow 2.

Обратите внимание, что тень блока простирается слева от элемента блока на 10 пикселей и выше элемента блока на 10 пикселей.

Пример 3: Внутренняя тень (вставка)

Декларация CSS:

#ex3 {
стиль границы: сплошной; ширина границы: 1px;
box-shadow: вставка 10px 10px красный;
}

Следующий HTML,


Пример свойства Box-shadow 3.

рендеры,

Пример свойства Box-shadow 3.

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

Пример 4: Радиус размытия

Декларация CSS:

#ex4 {
стиль границы: сплошной; ширина границы: 1px;
box-shadow: 5px 5px 10px #999;
}

Следующий HTML,


Пример свойства Box-shadow 4.

рендеры,

Пример свойства Box-shadow 4.

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

Пример 5: Радиус разброса

Декларация CSS:

#ex5 {
стиль границы: сплошной; ширина границы: 1px;
box-shadow: 5px 5px 10px 5px #999;
}

Следующий HTML,


Пример свойства Box-shadow 5.

рендеры,

Пример свойства Box-shadow 5.

Обратите внимание, что при установке радиуса распространения на 5 пикселей тень распространяется дальше, чем в примере 4.

Пример 6: Множественные тени

Декларация CSS:

#ex6 {
стиль границы: сплошной; ширина границы: 1px;
box-shadow: 5px 5px #999, -3px -3px розовый;
}

Следующий HTML,


Пример свойства Box-shadow 6.

рендеры,

Пример свойства box-shadow 6.

Обратите внимание на наличие двух теней, одна слева вверху от элемента box, а другая справа внизу от элемента box.

Следующая страница: Свойство CSS Text-Shadow



Copyright © 2022   1keydata.com   Все права защищены   Политика конфиденциальности О контакте

Box Shadow — xstyled

Утилиты для управления тенью блока элемента.

React props Свойства CSS
boxShadow={shadow} ;shadow: {shadow}

Внешняя тень

Используйте утилиты boxShadow={shadow} для применения внешних теней к элементу разного размера.

 

<х.div boxShadow="xl" />

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

Используйте утилиту boxShadow="inner" , чтобы применить к элементу тонкую внутреннюю тень. Это может быть полезно для таких вещей, как элементы управления формой или колодцы.

 

Адаптивный

Для управления полем элемента в определенной точке останова используйте адаптивную нотацию объекта. Например, добавление свойства boxShadow={{ md: "xl" }} к элементу применит утилиту boxShadow="xl" при средних размерах экрана и выше.

 

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

Настройка

Тени

Если вы хотите настроить значения теней, используйте раздел theme.shadows вашей темы.

 

экспорт константной темы = { тени: { + '3xl': '0 100px 100px -12px rgba(0, 0, 0, 0,25)', }, }

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

Если вы не хотите его настраивать, набор из теней уже определен в теме по умолчанию:

 

const defaultTheme = { тени: { xs: '0 0 0 1px rgba(0, 0, 0, 0,05)', sm: '0 1px 2px 0 rgba(0, 0, 0, 0,05)', по умолчанию: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', LG: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)', XL: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)', '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0,25)', внутренний: 'вставка 0 2px 4px 0 rgba (0, 0, 0, 0,06)', }, }

Привязки стилей

Автоматически

Используя xstyled styled , все определенные тени автоматически привязываются к атрибуту box-shadow :

 

import styled from '@xstyled/...' const Button = стилизованная.кнопка` коробка-тень: lg; `

Чтобы узнать больше о синтаксисе стилей, прочтите документацию по синтаксису стилей.

Вручную

Можно вручную привязать теневое свойство с помощью утилиты th.shadow :

 

стиль импорта из '...' импортировать {th} из '@xstyled/...' const Button = стилизованная.кнопка` тень: ${th.shadow('lg')}; `

Хуки

Получить свойство тени в любом компоненте с помощью useShadow ловушка:

 

import { useShadow } from '@xstyled/...' функция Кнопка () { постоянная тень = useShadow('lg') }

Редактировать эту страницу на GitHub ← Ring WidthOpacity →

CSS Box Shadow.Свойство box-shadow CSS можно использовать… | by Suprabha Supi

CSS-свойство box-shadow можно использовать для придания блочным элементам тени или внутренней тени. Давайте внимательно посмотрим на это свойство CSS.

Будет несколько примеров, в которых мы обсуждаем свойство тени блока.

1. Добавление тени блока к div.

 
Один
// CSS.one { /* offset-x | offset-y */ box-shadow: 5px 5px;}

В приведенном выше фрагменте вы не указали цвет тени, поэтому по умолчанию это будет черный цвет.

2. Добавление цвета к тени:

 
Two
// CSS.two { /* offset-x | смещение-y | color */ box-shadow: 5px 5px red;}

3. Добавление радиуса размытия к тени:

 
Three
// CSS.three { /* offset-x | смещение-y | радиус размытия | color */ box-shadow: 5px 5px 20px red;}

4. Добавление радиуса распространения тени:

 
Four
// CSS.four { /* offset-x | смещение-y | радиус размытия | распространение-raidus | цвет */ box-shadow: 0 0 10px 5px #ff000066;}

5.Добавление вставки в div для тени:

 
Five
// CSS.five { /* inset || смещение-х | смещение-y | радиус размытия | распространение-raidus | color */ box-shadow: inset 0px 0px 13px 4px pink;}

Если вы явно не укажете значение цвета для тени блока — цвет тени будет равен значению цвета HTML-элемента box-shadow применяется свойство. Например, если у вас есть элемент div красного цвета, цвет тени блока также будет красным:

 
Six
// CSS.шесть {цвет: синий; box-shadow: 0px 0px 3px 2px;}

Если вам нужен другой цвет тени, вам нужно указать его в объявлении значения свойства box-shadow. Ниже вы можете видеть, что хотя цвет переднего плана div по-прежнему красный, цвет тени блока синий.

 
Семь
// CSS.seven { color: red; box-shadow: 0px 0px 3px 2px blue;}

MULTIPLE BOX SHADOWS

Вот где вы можете по-настоящему проявить творческий подход с этим свойством CSS: вы можете применить к элементу более одной тени блока.

box-shadow: [свойства тени блока 1], [свойства тени блока 2], [свойства тени блока n];

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

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

 
Eight
// CSS .eight { box-shadow: 5px -7px 2px 2px синий, -5px 5px 5px 5px розовый;}

Надеюсь, статья окажется вам полезной.

Давайте попробуем решить следующую задачу

СОЗДАЙТЕ КРУГ ВНУТРИ КРУГА, ИСПОЛЬЗУЯ ОДИН РАЗДЕЛ.

Вывод:

Вы можете найти решение здесь.

Вы можете найти все приведенные выше примеры здесь, добавлено еще несколько примеров

Спасибо за чтение этой статьи ♥️

Если у вас есть какие-либо вопросы, пожалуйста, свяжитесь со мной по телефону @suprabhasupi 😋

🌟 Twitter | 👩🏻‍💻 suprabha.me

Расшифровка синтаксиса тени блока CSS3

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

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

Полный синтаксис

Вот как выглядит объявление box-shadow со всеми возможными значениями и префиксами поставщиков:

.коробка {
  -webkit-box-shadow: #c4c4c4 3px 3px 10px 5px вставка;
  -moz-box-shadow: #c4c4c4 3px 3px 10px 5px вставка;
  box-shadow: #c4c4c4 3px 3px 10px 5px вставка;
}
 

Вы можете посмотреть приведенный выше код в действии здесь.

Так что же представляют эти значения?

Значение 1: Цвет

Первое значение — это цвет тени. Это любое допустимое значение цвета. Цвет тени не является естественно полупрозрачным, что является общей чертой графических теней. Но вместо этого автор должен определить цвет вместе с необязательным значением прозрачности, чтобы сделать тень прозрачной. Например, вы можете использовать значения цвета HSLA или RGBA, оба из которых допускают настройку альфа-канала. Или вы можете просто использовать полностью непрозрачный светло-серый цвет, как я.

Согласно спецификации, значение цвета можно не указывать, а определить цвет тени можно с помощью свойства color . Но по какой-то причине это не работает в WebKit. Другие браузеры справляются с этим нормально, что вы можете проверить с помощью этой демонстрации.

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

.коробка {
  box-shadow: 3px 3px #c4c4c4 10px 5px;
}
 

Браузер проигнорирует всю эту строку.Таким образом, значение цвета должно быть в начале или в конце (при условии, что у вас нет внутренней тени, обсуждаемой ниже).

Значение 2: Горизонтальное смещение

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

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

Значение 3: Вертикальное смещение

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

Опять же, вот та же самая тень с добавленным смещением по вертикали на 100 пикселей.

Значение 4: радиус размытия (необязательно)

Четвертое значение снова использует любое допустимое значение длины, за исключением того, что на этот раз отрицательное значение не действует и будет интерпретироваться как «0».Радиус размытия определяет резкость или размытость тени. Чем меньше значение, тем резче тень. Высокое значение создаст сильное размытие.

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

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

Значение 5: расстояние распространения (дополнительно)

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

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

Хотя значение размытия является необязательным, вы не можете исключить значение размытия, если включаете разброс, иначе значение разброса будет просто считано как значение размытия. Чтобы исправить это, вы просто используете значение «0» для размытия, а затем включаете значение распространения.Таким образом, значение спреда никогда не будет прочитано, если не включены три других значения длины.

Значение 6: вставка (необязательно)

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

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

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

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

.коробка {
  box-shadow: #c4c4c4 10px 10px 10px 5px, #c4c4c4 30px 20px 10px 10px;
}
 

Вот несколько странных смещенных теней.

Тени накладываются спереди назад, поэтому первая тень будет накладываться на вторую, вторая — на третью и так далее.Это противоположно тому, как элементы HTML укладываются с помощью z-index.

Несколько заключительных заметок о тенях коробки

Вот несколько вещей, на которые следует обратить внимание при реализации теней:

  • Браузерная поддержка очень хорошая, единственная большая проблема — IE6-8
  • Вы можете выполнить полифилл с помощью CSS3 PIE, этого скрипта или cssSandpaper, но вам, вероятно, лучше просто отказаться от тени
  • Браузеры, для которых требуются префиксы поставщиков: Safari 3.