Css box-shadow генератор

UPDATE

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

#wrapper {
width: 84px;
position: relative;
}
#element {
background-color: #3D668F;
height: 54px;
width: 100%;
position: relative;
z-index: 10;
}
#shadow {
background-color: #3D668F;
height: 8px;
width: 80px;
margin-left: -40px;
position: absolute;
bottom: 0px;
left: 50%;
z-index: 5;
-webkit-box-shadow: 0px 2px 4px #000000;
-moz-box-shadow: 0px 2px 4px #000000;
box-shadow: 0px 2px 4px #000000;
}

Растягивание изображений с помощью object-fit

Поддержка браузерами — 89,7% (на 11.2017)

Значения contain, cover, fill похожи на аналогичные значения свойства background-size, которое указывает как фоновое изображение заполняет какой-либо элемент. Свойство object-fit очень похоже на упомянутое выше свойство background-size, так как оно также определяет размер изображения внутри его контейнера. Значение contain масштабирует изображение внутри контейнера. Cover делает тоже самое, но если соотношение сторон изображения и контейнера не совпадают, изображение обрезается. Fill заставляет изображение растягиваться и заполнять его контейнер. scale-down уменьшает изображение чтобы оно поместилось внутри контейнера.

HTML

<div id='container'>
  <img src="/rose.png' alt="rose flower'>
</div>

CSS

#container {
  width: 300px;
  height: 300px;
}
img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

Вдавленный текст

С помощью свойства text-shadow можно создавать различные эффекты для текста, не ограничиваясь простыми падающими тенями. Например, здесь приводится код для формирования иллюзии вдавленного текста.

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

Цвет фона #222, а цвет текста имеет уровень непрозрачности 60%. Белая тень позиционируется немного вниз и вправо с уровнем непрозрачности 10%.

body {
    background: #222;
}
 
#text h1 {
    color: rgba(0,0,0,0.6);
    text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
}

Нативная поддержка браузерами

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

• Для поддержки в Opera, IE9 и выше используется официальный вариант свойства от консорциума W3C, без префиксов:
• Для поддержки в Firefox, используется вариант с префиксом :
• Для поддержки браузеров на движке WebKit (таких как Google Chrome и Apple Safari), используется вариант с префиксом :
• IE до версии 8 включительно не поддерживает это свойство вовсе, так что вам придётся либо отказаться от тени, либо создать обходной путь — мое решение описано ниже.

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

	Internet Explorer	Firefox	Safari	Chrome	Opera
Давнее прошлое	6.0	3.0	3.2	3.0	9.6
Прошлое	7.0	3.5	4.0	4.0	10.10
Настоящее	8.0	3.6	5.0	5.0	10.60
Ближайшее будущее (первая половина 2010)
Будущее (вторая половина 2010 или позже)	9.0	4.0	5.*	6.0	11.0

Данные об IE9 взяты из IE9 Platform Preview 3.

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
caption-side
caret-color
@charset
clear
clip
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-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
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
object-fit
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
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
z-index

Выравнивание изображений с помощью vertical-align

Иногда мы добавляем тег <img /> (который по своей природе является строчным элементом) внутрь текста в качестве иллюстраций или для украшения. В таких случаях выравнивание изображений и текста в необходимом нам положении может стать сложной задачей, если вы не знаете какое свойство применить.

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

HTML

<p>
PDF <img width="15px" src="/pdf.png"
style="vertical-align:text-top" alt="Image">
</p>

Добавляем тень, используя filter: drop-shadow()

Тени, применяемые к тексту и блочным элементам, могут сделать ваши страницы более привлекательными. То же самое относится и к изображениям. Значения, которые передаются filter: drop-shadow() очень похожи на значения CSS-свойств для создания тени (text-shadow, box-shadow). Первые 2 указывают вертикальный и горизонтальный отступ тени от изображения, третий и четвёртый – степень размытия и радиус распространения тени, а последнее, пятое значение – цвет тени.

Как text-shadow и drop-shadow тень добавляется к объектам, к которым применяется этот фильтр

При использовании filter: drop-shadow() к изображениям во внимание принимаются прозрачные участки в изображении и тень отбрасывается с их учётом

Summary

Shadow DOM can include styles, such as or .

Local styles can affect:

• shadow tree,
• shadow host with -family pseudoclasses,
• slotted elements (coming from light DOM), allows to select slotted elements themselves, but not their children.

Document styles can affect:

• shadow host (as it lives in the outer document)
• slotted elements and their contents (as that’s also in the outer document)

When CSS properties conflict, normally document styles have precedence, unless the property is labelled as . Then local styles have precedence.

CSS custom properties pierce through shadow DOM. They are used as “hooks” to style the component:

1. The component uses a custom CSS property to style key elements, such as .
2. Component author publishes these properties for developers, they are same important as other public component methods.
3. When a developer wants to style a title, they assign CSS property for the shadow host or above.
4. Profit!

Examples

Установка трех теней

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

<blockquote><q>You may shoot me with your words,<br/>
You may cut me with your eyes,<br/>
You may kill me with your hatefulness,<br/>
But still, like air, I'll rise.</q>
<p>&mdash; Maya Angelou</p>
</blockquote>

blockquote {
  padding: 20px;
  box-shadow:
       inset  -3em 3em rgba(,,,0.1),
                 2px rgb(255,255,255),
             0.3em 0.3em 1em rgba(,,,0.3);
}

Установка нуля для смещения и размытия

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

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

You can watch this tutorial on YouTube as well if you like:

Why Should You Use The CSS box-shadow Property?

Attention to small details separates a good website from an excellent looking website. If you want to add those small details to your website, you should definitely use this property along with many other properties.

Let’s took at some examples.

A Website Design

Pay close attention to the button components in the image above. You’ll see that we have some drop shadows.

Let’s examine these buttons even further:

Button with no box-shadow propertyButton using the box-shadow property

You can tell that the latter one looks more dynamic and interesting, as it has more attention to detail. This is called a drop shadow effect. Let’s see how we can implement it in our code.

Project Setup

CSS

Clear your default browser settings like this:

Now, let’s create a button with the following code:

We’re all set, now let’s start coding!

All the inputs of box-shadow property

Here’s the syntax for the box-shadow property:

Let’s look at each part in more detail.

Значения свойств

Значение	Описание
none	Значение по умолчанию. Тень не отображается
h-offset	Обязательно. Горизонтальное смещение тени. Положительное значение кладет тень на правую сторону коробки, отрицательное значение кладет тень на левую сторону коробки
v-offset	Обязательно. Смещение тени по вертикали. Положительное значение кладет тень под коробку, отрицательное значение кладет тень над коробкой
blur	Дополнительные. Радиус размытия. Чем выше число, тем более размытой будет тень
spread	Дополнительные. Радиус разворота. Положительное значение увеличивает размер тени, отрицательное значение уменьшает размер тени
color	Дополнительные. Цвет тени. Значением по умолчанию является цвет текста. Посмотрите на значения цвета CSS для полного списка возможных значений цвета.Примечание: В Safari (на ПК) параметр Color является обязательным. Если цвет не указан, тень не отображается вовсе.
inset	Дополнительные. Изменяет тень от внешней тени (вначале) на внутреннюю тень
initial	Присваивает этому свойству значение по умолчанию. (Читайте о initial)
inherit	Наследует это свойство из родительского элемента. (Читайте о inherit)

Совет: ПодроБнее о допустимых значениях (единицы измерения длины CSS)

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;}

Примечание

Safari до версии 5.1, Chrome до версии 10.0, Android до версии 4.0 поддерживают свойство -webkit-box-shadow
.

Firefox до версии 4.0 поддерживает свойство -moz-box-shadow
.

Internet Explorer до версии 9.0 не поддерживает свойство box-shadow
, взамен можно использовать свойство filter
:

Filter: progid:DXImageTransform.Microsoft.dropshadow(offX=5, offY=5, color=#000000);

Здесь: offX
— смещение тени по горизонтали; offY
— смещение тени по вертикали; color
— цвет тени.

Применение фильтра dropshadow
дает чёткую резкую тень, поэтому для эффекта размытия можно использовать фильтр shadow
.

Filter: progid:DXImageTransform.Microsoft.shadow(direction=120, color=#000000, strength=10);

Здесь: direction
— угол направления тени от 0 до 360°; color
— цвет тени; strength
— смещение тени в пикселях.

Тень блока (свойство box-shadow) | CSS — Примеры

box-shadow generator

Свойство box-shadow (w3.org) создаёт элементу тень.

Как создать объёмный HTML элемент из нескольких box-shadow

box-shadow может иметь сколько угодно значений. Поэтому им можно заменить картинки форматов JPEG, PNG и даже GIF . Можно, но не нужно. А вот создание объёма может быть полезным для того, чтобы смастерить, например, объёмную красивую кнопку.

цвет другой стороны

толщина тени

<div></div>

Тень вокруг div CSS

Хм, отбрасывает ли предмет тень, когда свет на него падает сверху? Да, если предмет удалён от поверхности. Чем дальше, тем интенсивнее тень. Сама проверяла, светя фонариком.

По бокам (справа и слева)

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

box-shadow inset и картинка img

Понадобится статья «Как убрать отступ под изображением»

<span><img alt="котёнок мечтает стать львом" src="https://4.bp.blogspot.com//-uXTQrdgmR5A/TVOtm4AfAzI/AAAAAAAABcA/ZPY0DjhgY0o/s00/mechty.jpg"/></span>

box-shadow и HTML тег input

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

<input type="text" placeholder="псевдоним или email"/>
<input type="password" placeholder="пароль">

Или подсветка внутри input (получилась красивая форма входа CSS):

<input type="text" placeholder="псевдоним или email"/>
<input type="password" placeholder="пароль">

box-shadow и transition или animation

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

<span>да</span>
<span>нет</span>
<span>да</span>

Продолжение следует: box-shadow и :before и :after.

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

Пример

Добавьте эффект размытия в тень:

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

Пример

Определите радиус разворота тени:

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

Пример

Определите несколько теней:

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

Пример

Добавьте ключевое слово вставки:

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

Пример

Изображения, брошенные на стол. В этом примере демонстрируется создание снимков «Polaroid» и поворот рисунков:

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

box-shadow — тень блока (внешняя и внутренняя)

12.0+
9.0+
4.0+
10.0+
10.5+
5.1+

Описание

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

Для каждой тени можно задать от 2 до 6 параметров. Если добавляется несколько теней, то список параметров для каждой тени указывается через запятую:

div {
  width: 300px;
  height: 200px;
  margin: 100px;
  background-color: silver;
  box-shadow: 0 0 10px 5px black,
              40px -30px 15px lime,
			  40px 30px 50px red,
			 -40px 30px 15px yellow,
			 -40px -30px 50px blue;
}

При наложении теней друг на друга каждая последующая тень в списке будет располагаться под предшествующей.

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

Примечание: для добавления тени к тексту используйте CSS свойство text-shadow.

Значение по умолчанию:	none
Применяется:	ко всем элементам
Анимируется:	да
Наследуется:	нет
Версия:	CSS3
Синтаксис JavaScript:	object.style.boxShadow=»10px 10px 5px #888888″

Значения свойства

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

Значение

Описание

смещение-x и смещение-y

Первые два значения устанавливают смещение тени. Первое значение (смещение-x) указывает расстояние смещения по горизонтали. Отрицательные значения располагают тень слева от элемента. Второе значение (смещение-y) указывает расстояние смещения по вертикали. Отрицательные значения располагают тень над элементом. Если оба значения 0, тень располагается за элементом и её не будет видно, так как по умолчанию тень имеет тот же размер, что и элемент. (обязательные параметры)

размытие
Третье значение устанавливает степень размытия тени. Чем больше это значение, тем сильнее размытость — тень становится более большой и светлой. Отрицательные значения не допускаются. Если значение отсутствует или равно 0, это означает, что тень будет без размытия — с острыми углами. (необязательное значение)

размер тени
Четвёртое значение изменяет размер тени. Положительное значение увеличивает размер тени со всех сторон, отрицательное — уменьшает. Если значение отсутствует или равно 0, это означает, что тень будет того же размера, что и элемент. (необязательное значение)

цвет
Определяет цвет тени. Цвет можно установить различными способами, например: указать имя цвета, использовать шестнадцатеричные значения (HEX), с помощью синтаксиса RGB (RGBA) или HSL (HSLA). Всегда указывайте цвет тени, так как браузеры по разному обрабатывают отсутствие значения цвета.

inset
Ключевое слово, указывающее, что тень должна располагаться внутри элемента. Внутренняя тень создаёт эффект вдавленности и располагается над фоновым цветом и/или фоновым изображением, но под любым содержимым элемента. Если ключевое слово не указано, тень будет отбрасываемая, т.е. будет располагаться под элементом. Ключевое слово может быть расположено в качестве первого или последнего значения. (необязательное значение)

none
Указывает на отсутствие тени.

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)

Заключение

В этой статье мы ознакомились со всеми основными способами создания теней. Мы разобрали все свойства и параметры теней.

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

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

В чем основное достоинство теней, созданных при помощи CSS3, так это в простоте реализации и уменьшении числа запросов к серверу (поскольку мы больше не используем картинки). Чтобы сделать тень на CSS нам понадобится тег div и CSS свойство box-shadow . Вам не понадобится дополнительная разметка, поскольку мы создим псевдо элементы :after и :before , которые поместим за основным объектом (div с классом block
).

Взгляните на HTML код, для которого мы будем создавать CSS3 тень:

Содержимое

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

С помощью тени можно придать блоку перспективу. Смотреть пример .

CSS тень у проподнятого блока. Смотреть пример .

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

Пример CSS3 тени для горизонтально согнутого блока. Смотреть пример .

CSS3 тень для повернутого блока. Смотреть пример .