Text shadow css generator

Эффект тени 6

Здесь эффект изогнутых теней на дне блока.

CSS

.box h3{
    text-align:center;
    position:relative;
    top:80px;
}
.box {
    width:70%;
    height:200px;
    background:#FFF;
    margin:40px auto;
}

/*==================================================
 * Effect 6
 * ===============================================*/
.effect6
{
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect6:before, .effect6:after
{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.effect6:after
{
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}

Эффект тени 5

В данном случае тень с двух сторон сильнее сдвинулась вниз.

CSS

.box h3{
    text-align:center;
    position:relative;
    top:80px;
}
.box {
    width:70%;
    height:200px;
    background:#FFF;
    margin:40px auto;
}

/*==================================================
 * Effect 5
 * ===============================================*/
.effect5
{
  position: relative;
}
.effect5:before, .effect5:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 25px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 35px 20px #777;
  -moz-box-shadow: 0 35px 20px #777;
  box-shadow: 0 35px 20px #777;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
}
.effect5:after
{
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}

Как сделать тень блока с помощью свойства box-shadow

Поддержка браузерами

1. Синтаксис свойства box-shadow

Свойство box-shadow прикрепляет одну или несколько теней к блоку. Свойство принимает либо значение none, которое указывает на отсутствие теней, либо список теней через запятую, упорядоченный от начала к концу.

Каждая тень является отдельной тенью, представленной от 2 до 4-х значений длины, необязательным цветом и необязательным ключевым словом inset. Допустимые длины ; опущенные цвета по умолчанию равны значению свойства color.

Свойство не наследуется.

Рис. 1. Синтаксис свойства box-shadow

box-shadow
Значения:
x-offset Задает горизонтальное смещение тени. Положительное значение рисует тень, смещенную вправо от текста, отрицательная длина — влево.
y-offset Задает вертикальное смещение тени. Положительное значение смещает тень вниз, отрицательное — вверх.
blur Задает радиус размытия. Отрицательные значения не допускаются. Если значение размытия равно нулю, то край тени четкий. В противном случае, чем больше значение, тем больше размыт край тени.
растяжение Задает расстояние, на которое тень увеличивается. Положительные значения заставляют тень расширяться во всех направлениях на указанный радиус. Отрицательные значения заставляют тень сжиматься. Для внутренних теней расширение тени означает сжатие формы периметра тени.
цвет Задает цвет тени. Если цвет отсутствует, используемый цвет берется из свойства color. Для Safari цвет тени указывать обязательно.
inset Изменяет отбрасываемую тень блока с внешней тени на внутреннюю.
none Значение по умолчанию, означает отсутствие тени.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Эффекты тени применяются следующим образом: первая тень находится сверху, а остальные — сзади. Тени не влияют на компоновку и могут перекрывать другие элементы или их тени. С точки зрения контекстов укладки и порядка рисования внешние тени элемента рисуются непосредственно под фоном этого элемента, а внутренние тени элемента рисуются непосредственно над фоном этого элемента (ниже border и border-image, если таковые имеются).

Если элемент имеет несколько ящиков, все они получают тени, но тени рисуются только там, где также будут нарисованы границы; см. box-decoration-break.

Тени не вызывают прокрутку или не увеличивают размер прокручиваемой области.

CSS3-оформление текста
CSS3-переходы

Basic Usage

1. Include the stylesheet

Include the stylesheet on your document’s

head>
  link rel="stylesheet" href="/box-shadows.css">
  
  link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/box-shadows-css@1/box-shadows.min.css">
head>

Download

See box-shadows.css and box-shadows.min.css

You can use the to create minimal file on your own and reduce the load on the site.

Add the class to the block you want to use:

div class="bShadow">div>

3. Add the class number

Finally you need to add an additional class to the existing with the number or use one of the classes separately, without class . For example,

div class="bShadow bShadow-1">div>

div class="bShadow-1">div>

Now the collection consists of 53 variants of shadows with the number, as well as four independent classes: .bShadow, .bShadow-light, .bShadow-inset and .bSnone.

Использование

Иmeta http-equiv=»Content-Type» content=»text/html;charset=UTF-8″>ÂÿþûÃÂ÷ÃÂùÃÂõ ýð òðÃÂõü òõñ-ÃÂðùÃÂõ, ÿÃÂþÃÂÃÂþ ôþñðòøò ÃÂðñûøÃÂàÃÂÃÂøûõù ò ôþúÃÂüõýÃÂ, ÿþÃÂûõ þÃÂúÃÂÃÂòðÃÂÃÂõóþ ÃÂõóð . ÃÂþñðòÃÂÃÂõ úûðÃÂàú ÃÂûõüõýÃÂàòüõÃÂÃÂõ àûÃÂñÃÂü ø÷ àýþüõÃÂþü øûø ÿþ þÃÂôõûÃÂýþÃÂÃÂø. ÃÂþÃÂÿþûÃÂ÷ÃÂùÃÂõÃÂàôþÿþûýøÃÂõûÃÂýÃÂüø ÃÂÃÂýúÃÂøÃÂüø, ÃÂÃÂþñàÃÂþ÷ôðÃÂàÃÂÃÂÃÂõúàø javascript, ôûàôþñðòûõýøàòýÃÂÃÂÃÂõýýõù ÃÂõýø — (ÃÂþ öõûðýøÃÂ). ÃÂðóÃÂÃÂ÷øÃÂõ òÃÂàñøñûøþÃÂõúàøûø ÃÂþ÷ôðùÃÂõ ÃÂòþù ÃÂþñÃÂÃÂòõýýÃÂù ÃÂðùû min.css, øÃÂÿþûÃÂ÷ÃÂàóõýõÃÂðÃÂþàÃÂðùûþò. ÃÂÃÂûø àòðàýõôþÃÂÃÂðÃÂþÃÂýþ úûðÃÂÃÂþò, òàüþöõÃÂõ ÃÂþ÷ôðÃÂàøàÃÂðüþÃÂÃÂþÃÂÃÂõûÃÂýþ ò óõýõÃÂðÃÂþÃÂõ ø ôþñðòøÃÂàøàò ÷ðóÃÂÃÂöõýýÃÂù ÃÂðùû. íÃÂþ òÃÂõ! ã òðàõÃÂÃÂàñûþú CSS àÃÂõýÃÂÃÂ.

Эффект тени 4

Тень справа.

CSS

.box h3{
    text-align:center;
    position:relative;
    top:80px;
}
.box {
    width:70%;
    height:200px;
    background:#FFF;
    margin:40px auto;
}

/*==================================================
 * Effect 4
 * ===============================================*/
.effect4
{
  position: relative;
}
.effect4:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  right: 10px;
  left: auto;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
}

Пример использования


Тени элемента на CSS 
div {
display: inline-block;  /*  устанавливаем элементы  как блочно-строчные (выстраиваем в линейку)  */
margin: 30px;  /* устанавливаем внешний отступ для всех сторон */
} 
.test {
width: 250px; /* устанавливаем ширину блока */
height: 50px;  /* устанавливаем высоту блока */
box-shadow:  /* устанавливаем 4 внешних тени для элемента */
20px 15px 30px yellow,
-20px 15px 30px green,
-20px -15px 30px blue,
20px -15px 30px red;
} 
.test2 {
width: 250px; /* устанавливаем ширину блока */
height: 50px;  /* устанавливаем высоту блока */
box-shadow:  /* устанавливаем 4 внешних тени для элемента */
-15px -15px 2px -5px rgba(0,0,255,.5),
-15px 15px 2px -5px rgba(0,255,255,.5),
15px -15px 2px -5px rgba(255,0,0,.5),
15px 15px 2px -5px rgba(255,255,0,.5);
} 
.test3 {
width: 253px; /* устанавливаем ширину блока под размер изображения */
height: 199px;  /* устанавливаем высоту блока под размер изображения */
background-image: url(manul.jpg);  /* задаем фоновое изображение для элемента */
box-shadow: inset 0px 0px 50px 10px red;  /* устанавливаем внутреннюю тень для элемента(inset) без смещения с размытием 50px и размером 10px красного цвета */
} 
.test4 {
width: 253px; /* устанавливаем ширину блока под размер изображения */
height: 199px;  /* устанавливаем высоту блока под размер изображения */
background-image: url(manul.jpg);  /* задаем фоновое изображение для элемента */
box-shadow: 0px 0px 50px 10px forestgreen; /* устанавливаем внешнюю тень для элемента без смещения с размытием 50px и размером 10px зеленого(лесного) цвета */
} 


	
		 class = "test">

		 class = "test2">

 class = "test3">

		 class = "test4">

	




Пример добавления теней к элементу в CSS (свойство box-shadow).CSS свойства





  ×
  
  
    

Кажется, вы используете блокировщик рекламы 🙁

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

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.

Как отключить?
Поддержать

Class reference

Class Properties
.shadow-xs box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
.shadow-sm box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
.shadow box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
.shadow-md box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
.shadow-lg box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
.shadow-xl box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
.shadow-2xl box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
.shadow-inner box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
.shadow-outline box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
.shadow-none box-shadow: none;

Эффект тени 7

Такой же эффект только тень снизу и сверху блока.

CSS

.box h3{
    text-align:center;
    position:relative;
    top:80px;
}
.box {
    width:70%;
    height:200px;
    background:#FFF;
    margin:40px auto;
}

/*==================================================
 * Effect 7
 * ===============================================*/
.effect7
{
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect7:before, .effect7:after
{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.effect7:after
{
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}

Свойство CSS text-shadow.

В данное время не поддерживается Internet Explorer.
Свойство имеет четыре параметра:

text-shadow: X Y амплитуда цвет;
  1. X — горизонтальное смещение тени к тексту (положительное значение — вправо, отрицательное — влево),
  2. Y — вертикально смещение тени к тексту (положительное — вниз, отрицательно — вверх),
  3. амплитуда — чем выше значение, тем больше степень размытия,
  4. очевидно, цвет тени.

CSS тень текста

p {font-size: 4em; text-shadow: 1px 1px 1px #000; color: #f9f5ed;}

тень на тёмном фоне

p {font-size: 4em; text-shadow:4px 4px 5px #AAAAAA; color:#000;}

фон и текст одного цвета

p {font-size: 4em; text-shadow: 0.1em 0.1em 0.2em black; color: aliceblue;}

затемнение

p {font-size: 4em; text-shadow: 1px 4px 0 #456; color: #FFF;}

обтекаемый

p {font-size: 4em; text-shadow: 0 2px 2px rgba(0, 0, 30, 0.6); color: rgba(102, 0, 102, 0.5);}

shpargalkablog.ru

p {font-size: 4em; text-shadow: 4px 2px black; color: #ece2ca;}

много оттенков

p {font-size: 4em; text-shadow:3px 3px 10px red,-3px -3px 10px yellow;color: #101921;}

контур

p {font-size: 4em; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; color: #ddcca3;}

вдавленный

p {font-size: 4em; text-shadow: -1px -1px #666, 1px 1px #FFF; color: #ddcca3;}

объёмный

p {font-size: 4em; text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF; color:#ddcca3;}

retro

p {background-color: #EEE; 
    color: #707070;
    font-family: Times New Roman;
    font-size: 7em;
    margin: 0 auto;
    text-transform: uppercase;
    text-shadow: 5px 5px 0px #EEE, 7px 7px 0px #707070;}

neon

p {background-color: #000;
        padding: 20px 0;
        margin: 20px auto;
        font-family: Garamond;
        font-size: 7em;
        text-transform: uppercase;
        color: #fff;
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;}

Inset

p {background-color: #474747;
        margin: 20px auto;
        font-family: Helvetica;
        font-size: 7em; 
        text-transform: uppercase;
        color: #222;
        text-shadow: 0px 2px 3px #666;}

Arial

p {background-color: #fff;
        margin: 20px auto;
        font-family: Arial;
        font-size: 7em; 
        text-transform: uppercase;
        color: rgba(0,168,255,0.5);
        text-shadow: 8px 8px 0 rgba(255,0,180,0.5);}

Fire

p {background-color: #000;
        padding:90px 0 0;
        margin: 20px auto;
        font-family: Arial;
        font-size: 200px; 
        text-transform: uppercase; 
        color: #fff;
        text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;}

Game

p {background-color: #eee;
        text-align: left;
        padding: 10px 0 50px 35px;
        margin: 20px auto;
        font-family: Arial;
        font-size:7em;
        text-transform: uppercase;
        color: #fff;
        text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px 0 #5ac7ff;}

Слоёный

p {color: #4c6271;
        font-family: Arial; 
        font-size: 7em;
        margin: 20px auto;
        text-shadow: -4px -2px 0 #ece2ca, -6px -4px 0 #5a5a5a;
        }

Слоёный

p {color: #FE6602; 
        font-family: 'Aclonica',serif;
        font-size: 7em; 
        margin: 20px auto; 
        text-shadow: 0 1px 0 #000000, 0 2px 0 #888888, 0 3px 0 #777777, 0 4px 0 #FFFFFF, 0 5px 0 #555555, 0 6px 0 #444444, 0 7px 0 #333333, 0 8px 7px #001135; 
        }

Такой вариант

p {color: #fff; 
        font: 7em 'ChunkFiveRegular'; 
        margin: 20px auto; 
        text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);}

❝Нажмите❞

CSS пример тени текста

Автор

тень CSS

тень CSS

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

Ограничения фильтра drop-shadow

Недостатки использования фильтра:

  • Чтобы создавать такую объемную тень внизу блока CSS, как с помощью box-shadow, фильтр drop-shadow должен поддерживать четвертое значение spread. Но в текущей реализации Webkit четвертое значение будет расцениваться как ошибка, и тень в этом случае не выводится вообще;
  • Спецификация фильтра не поддерживает значение inset, поэтому с помощью кода фильтра вы не сможете легко создавать внутреннюю тень.

Другие различия

Оба эффекта тени учитывают border-radius и transform. Но CSS тень блока снизу, созданная с помощью фильтра, будет выводиться под элементом, не учитывая фон, в то время как box-shadow будет учитывать сплошной фон элемента. Если граница неоднородная (например, пунктирная), фильтр будет учитывать это, а box-shadow нет:

border: 3px solid #262b57; 
width: 150px; height:150px;
border-radius: 10px;
transform: rotate(8deg);
box-shadow: 9px 9px 7px rgba(0,0,0,0.3);

filter: drop-shadow(9px 9px 9px rgba(0,0,0,0.3));
filter: url(shadow.svg#drop-shadow);

border: 3px dashed #262b57;
box-shadow: 9px 9px 7px rgba(0,0,0,0.3);

filter: drop-shadow(9px 9px 9px rgba(0,0,0,0.3));
filter: url(shadow.svg#drop-shadow);

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

Вердикт

Фильтр (drop-shadow), безусловно, является победителем в этом раунде: он имеет большую гибкость, а его недостатки проявляются только, если речь идет о внутренней тени и отсутствии ее распределения.

Скорость и качество

Качество отображения теней, полученных с помощью этих двух способов, примерно одинаково. Фильтры drop-shadow имеют преимущество аппаратного ускорения, если браузер поддерживает его; box-shadow не имеет доступа к нему. При других равных условиях фильтр drop-shadow CSS внутреннюю тень блока выводит быстрее.

Вывод

На данном этапе мы можем установить несколько простых правил:

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

Если у вас есть PNG-изображение с альфа-маской, существует несколько вариантов реализации:

  • Создайте тени с помощью Photoshop, чтобы все браузеры отображали их одинаково;
  • Оставьте изображение без изменения и используйте фильтр drop-shadow, учитывая, что на данный момент только Webkit-браузеры будут выводить эту тень.
  • Попробуйте применить к контенту SVG-фильтр drop-shadow, чтобы тень одинаково распознавалась в других браузерах.

Если элемент имеет неоднородный контур, который не задается с помощью border-radius, почему бы не создать CSS тень вокруг блока с помощью обоих методов?

Webkit будет «дублировать» тень стандартного элемента. В то же время вы сможете обеспечить резервную поддержку для старых браузеров, которые распознают только box-shadow.

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

Данная публикация представляет собой перевод статьи «box-shadow property vs. drop-shadow filter: a complete comparison» , подготовленной дружной командой проекта Интернет-технологии.ру

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS MarginsCSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS FontsCSS IconsCSS LinksCSS ListsCSS TablesCSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS FloatCSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation BarCSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

More Examples

Example

Add a blur effect to the shadow:

#example1 {  box-shadow: 10px 10px 8px #888888;
}

Example

Define the spread radius of the shadow:

#example1 {  box-shadow: 10px 10px 8px 10px #888888;
}

Example

Define multiple shadows:

#example1 {  box-shadow: 5px 5px blue, 10px 10px
red, 15px 15px green;
}

Example

Add the inset keyword:

#example1 {  box-shadow: 5px 10px inset;}

Example

Images thrown on the table. This example demonstrates how to create «polaroid» pictures and rotate the
pictures:

div.polaroid {  width: 284px; 
padding: 10px 10px 20px 10px;  border: 1px solid
#BFBFBF;  background-color: white;  box-shadow: 10px 10px 5px #aaaaaa;}

Эффект тени 2

В этом примере тень от блока идёт слева и справа, а по середине её нет. Получается очень интересный эффект.

CSS

.box h3{
    text-align:center;
    position:relative;
    top:80px;
}
.box {
    width:70%;
    height:200px;
    background:#FFF;
    margin:40px auto;
}

/*==================================================
 * Effect 2
 * ===============================================*/
.effect2
{
  position: relative;
}
.effect2:before, .effect2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

Property Values

Value Description Play it
none Default value. No shadow is displayed Play it »
h-offset Required. The horizontal offset of the shadow. A positive value puts the
shadow on the right side of the box, a negative value puts the shadow on the
left side of the box
Play it »
v-offset Required. The vertical offset of the shadow. A positive value puts the
shadow below the box, a negative value puts the shadow above the box
Play it »
blur Optional. The blur radius. The higher the number, the more blurred the
shadow will be
Play it »
spread Optional. The spread radius. A positive value increases the size of the
shadow, a negative value decreases the size of the shadow
Play it »
color Optional. The color of the shadow. The default value is the text color. Look at CSS Color Values for a complete list of possible color values.Note: In Safari (on PC) the color parameter is required. If you do not specify the color, the shadow is not displayed at all. Play it »
inset Optional. Changes the shadow from an outer shadow (outset) to an inner shadow Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Tip: Read more about allowed values (CSS length units)

Тень с закруглёнными углами

Если элементу задать свойство border-radius, тень будет с закругленными углами.

.class{
    box-shadow: 0 16px #3a8fe7;
    border-radius: 8px;
}

Результат

Задавая растяжение тени, мы увеличиваем и её скругление. Например, border-radius 8px, а растяжение тени — 4.

8+4=12px — это радиус скругления тени.

.class{
    box-shadow: 0 16px 0 4px #3a8fe7;
    border-radius: 8px;
}

Результат

Этот же принцип распространяется и на сжатие тени, когда значение отрицательное.

8+(-4)=4px — получим скругление тени в два раза меньше.

Если сжатие тени больше, чем border-radius, получим тень с прямыми углами. Например, сжатие 16px.

8+(-16)=(-8), но у скругления не может быть отрицательного значения и применится ноль.

.class{
    box-shadow: 0 24px 0 -16px #3a8fe7;
    border-radius: 8px;
}

Результат

CSS по стандартам

  • !important
  • @charset
  • @font-face
  • @import
  • @keyframes
  • @media
  • Комментарии в CSS
  • CSS свойства

    • animation
    • animation-delay
    • animation-direction
    • animation-duration
    • animation-iteration-count
    • animation-name
    • animation-play-state
    • animation-timing-function
    • appearance
    • azimuth
    • backface-visibility
    • background
    • background-attachment
    • background-clip
    • background-color
    • background-image
    • background-origin
    • background-position
    • background-repeat
    • background-size
    • border
    • border-bottom
    • border-bottom-color
    • border-bottom-left-radius
    • border-bottom-right-radius
    • border-bottom-style
    • border-bottom-width
    • border-collapse
    • border-color
    • border-image
    • border-image-outset
    • border-image-repeat
    • border-image-slice
    • border-image-source
    • border-image-width
    • border-left
    • border-left-color
    • border-left-style
    • border-left-width
    • border-radius
    • border-right
    • border-right-color
    • border-right-style
    • border-right-width
    • border-spacing
    • border-style
    • border-top
    • border-top-color
    • border-top-left-radius
    • border-top-right-radius
    • border-top-style
    • border-top-width
    • border-width
    • bottom
    • box-shadow
    • box-sizing
    • break-after
    • break-before
    • break-inside
    • caption-side
    • clear
    • clip
    • color
    • column-count
    • column-gap
    • column-rule
    • column-rule-color
    • column-rule-style
    • column-rule-width
    • column-span
    • column-width
    • columns
    • content
    • counter-increment
    • counter-reset
    • cue
    • cue-after
    • cue-before
    • cursor
    • direction
    • display
    • elevation
    • empty-cells
    • float
    • font
    • font-family
    • font-size
    • font-size-adjust
    • font-stretch
    • font-style
    • font-variant
    • font-weight
    • height
    • left
    • letter-spacing
    • line-height
    • list-style
    • list-style-image
    • list-style-position
    • list-style-type
    • margin
    • margin-bottom
    • margin-left
    • margin-right
    • margin-top
    • marquee-direction
    • marquee-play-count
    • marquee-speed
    • marquee-style
    • max-height
    • max-width
    • min-height
    • min-width
    • nav-down
    • nav-index
    • nav-left
    • nav-right
    • nav-up
    • opacity
    • orphans
    • outline
    • outline-color
    • outline-offset
    • outline-style
    • outline-width
    • overflow
    • overflow-x
    • overflow-y
    • padding
    • padding-bottom
    • padding-left
    • padding-right
    • padding-top
    • page-break-after
    • page-break-before
    • page-break-inside
    • pause
    • pause-after
    • pause-before
    • perspective
    • perspective-origin
    • pitch
    • pitch-range
    • play-during
    • position
    • quotes
    • resize
    • richness
    • right
    • speak
    • speak-header
    • speak-numeral
    • speak-punctuation
    • speech-rate
    • src
    • stress
    • table-layout
    • text-align
    • text-decoration
    • text-indent
    • text-overflow
    • text-shadow
    • text-transform
    • top
    • transform
    • transform-origin
    • transform-style
    • transition
    • transition-delay
    • transition-duration
    • transition-property
    • transition-timing-function
    • unicode-bidi
    • unicode-range
    • vertical-align
    • visibility
    • voice-family
    • volume
    • white-space
    • widows
    • width
    • word-spacing
    • word-wrap
    • z-index
  • Псевдоклассы

    • :active
    • :checked
    • :default
    • :disabled
    • :empty
    • :enabled
    • :first-child
    • :first-of-type
    • :focus
    • :hover
    • :in-range
    • :invalid
    • :lang
    • :last-child
    • :last-of-type
    • :link
    • :not
    • :nth-child
    • :nth-last-child
    • :nth-last-of-type
    • :nth-of-type
    • :only-child
    • :only-of-type
    • :optional
    • :out-of-range
    • :read-only
    • :read-write
    • :required
    • :root
    • :target
    • :valid
    • :visited
  • Псевдоэлементы

    • :after
    • :before
    • :first-letter
    • :first-line

Хватит теории! Давай примеры!

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

Эффект глубины для body

body:before {
  content: "";
  position: fixed;
  top: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  z-index: 100;
  -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
  -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
  box-shadow: 0px 0px 10px rgba(0,0,0,.8);
  }

Красивая неровная тень

#box {
 position: relative;
 width: 60%;
 background: #ddd;
 -moz-border-radius: 4px;
 border-radius: 4px;
 padding: 2em 1.5em;
 color: rgba(0,0,0, .8);
 text-shadow: 0 1px 0 #fff;
 line-height: 1.5;
 margin: 60px auto;
}

#box:before,
#box:after {
 z-index: -1;
 position: absolute;
 content: "";
 bottom: 15px;
 left: 10px;
 width: 50%;
 top: 80%;
 max-width:300px;
 background: rgba(0, 0, 0, 0.7);
 -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);
 -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
 box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
 -webkit-transform: rotate(-3deg);
 -moz-transform: rotate(-3deg);
 -o-transform: rotate(-3deg);
 -ms-transform: rotate(-3deg);
 transform: rotate(-3deg);
}

#box:after {
 -webkit-transform: rotate(3deg);
 -moz-transform: rotate(3deg);
 -o-transform: rotate(3deg);
 -ms-transform: rotate(3deg);
 transform: rotate(3deg);
 right: 10px;
 left: auto;
}

Применение

1. Подключение стилей

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

head>
  link rel="stylesheet" href="/box-shadows.css">
  
  link rel="stylesheet" href="/box-shadows.min.css">
head>

Загрузка

box-shadows.css или box-shadows.min.css

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

Добавьте класс к блоку, который вы хотите использовать:

div class="bShadow">div>

3. Добавление класса с номером

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

div class="bShadow bShadow-1">div>

div class="bShadow-1">div>

Сейчас коллекция состоит более чем из 50 вариантов теней с номером, а также четырех независимых классов: .bShadow, .bShadow-light, .bShadow-inset и .bSnone.

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom
-width
border-collapse
border-color
border-image
border-image-outset
border-image
-repeat
border-image-slice
border-image
-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top
-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style
-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index

Customizing

Box Shadows

By default Tailwind provides three drop shadow utilities, one inner shadow utility, and a utility for removing existing shadows. You can change, add, or remove these by editing the section of your Tailwind config.

If a shadow is provided, it will be used for the non-suffixed utility. Any other keys will be used as suffixes, for example the key will create a corresponding utility.

// tailwind.config.js
module.exports = {
theme: {

boxShadow: {

      default: ‘0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06)’,
      md: ‘ 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06)’,
      lg: ‘ 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05)’,
      xl: ‘ 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04)’,
      2xl: ‘0 25px 50px -12px rgba(0, 0, 0, .25)’,

+     3xl: ‘0 35px 60px -15px rgba(0, 0, 0, .3)’,
      inner: ‘inset 0 2px 4px 0 rgba(0,0,0,0.06)’,

—     outline: ‘0 0 0 3px rgba(66,153,225,0.5)’,

+     focus: ‘0 0 0 3px rgba(66,153,225,0.5)’,
      ‘none’: ‘none’,

}
}
}

Responsive and pseudo-class variants

By default, only responsive, hover and focus variants are generated for box shadow utilities.

You can control which variants are generated for the box shadow utilities by modifying the property in the section of your file.

For example, this config will also generate active and group-hover variants:

// tailwind.config.js
module.exports = {

variants: {

    // …

—   boxShadow: ,

+   boxShadow: ,

}
}

Disabling

If you don’t plan to use the box shadow utilities in your project, you can disable them entirely by setting the property to in the section of your config file:

// tailwind.config.js
module.exports = {

corePlugins: {

    // …

+   boxShadow: false,

}
}

Ссылка на основную публикацию