box-shadow — CSS | MDN

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

Свойство box-shadow позволяет вам задать тень для почти любого элемента. Если элементу задано свойство border-radius, то тень также будет с закруглёнными углами. Расположение теней по оси z будет такое же, как и при применении свойства text-shadow (первая тень будет впереди остальных).

Генератор box-shadow generator — интерактивный инструмент, позволяющий вам генерировать box-shadow.

box-shadow: 60px -16px teal;


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


box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);


box-shadow: inset 5em 1em gold;


box-shadow: 3px 3px red, -1em 0 0.4em olive;


box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;
 

Чтобы задать одну тень, можно использовать:

• Два, три и четыре значения <length>.
  • Если задано только два значения, они интерпретируется как <offset-x><offset-y> values.
  • Если задано третье значение, оно понимается как <blur-radius>.
  • Если задано четвёртое значение, оно интерпретируется <spread-radius>.
• Дополнительно, можно задать ключевое слово inset.
• Дополнительно, можно задать значение <color>.

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

Значения

inset

Если ключевое слово inset не указано (по умолчанию), тень будет снаружи элемента (и создаст эффект выпуклости блока).
При наличие ключевого слова inset, тень будет падать внутри блока и создаст эффект вдавленности блока. Inset-тени рисуются в пределах границ элемента (даже прозрачные), поверх фона и за контентом.

<offset-x> <offset-y>

Существуют 2 значения <length>, которые устанавливают смещение тени. <offset-x> определяет горизонтальное расстояние. Отрицательные значения располагают тень слева от элемента. <offset-y> определяет вертикальное расстояние. Отрицательные значения располагают тень выше элемента. Посмотрите какие единицы <length> можно задать.
Если оба значения равны 0, то тень расположится за элементом (и будет отображаться размытие, если <blur-radius> и/или <spread-radius> установлены).

<blur-radius>

Это третье значение <length>. Чем больше это значение, тем больше и светлее размытие. Отрицательные значения не поддерживаются. Если не определено, будет использоваться 0 (резкий край тени). Спецификация не содержит в себе точного алгоритма расчёта размытости теней, однако, в ней указано следующее:

…for a long, straight shadow edge, this should create a color transition the length of the blur distance that is perpendicular to and centered on the shadow’s edge, and that ranges from the full shadow color at the radius endpoint inside the shadow to fully transparent at the endpoint outside it.

<spread-radius>

Это четвёртое значение <length>. Положительные значения увеличивают тень, отрицательные — сжимают. По умолчанию значение равно 0 (размер тени равен размеру элемента).

<color>

Смотрите возможные ключевые слова и нотации для <color>.
Если не указано, используемый цвет будет зависеть от браузера — обычно будет применено значение свойства color (en-US), но Safari в настоящее время рисует прозрачную тень в этом случае.

Интерполяция

Each shadow in the list (treating none as a 0-length list) is interpolated via the color (as color) component, and x, y, blur, and (when appropriate) spread (as length) components. For each shadow, if both input shadows are or are not inset, then the interpolated shadow must match the input shadows in that regard. If any pair of input shadows has one inset and the other not inset, the entire shadow list is uninterpolable. If the lists of shadows have different lengths, then the shorter list is padded at the end with shadows whose color is transparent, all lengths are 0, and whose inset (or not) matches the longer list.

Формальный синтаксис

none | (en-US) <shadow># (en-US)
где 
<shadow> = inset? (en-US) && (en-US) <length>{ (en-US)2,4} (en-US) && (en-US) <color>? (en-US)
где 
<color> = <rgb()> | (en-US) <rgba()> | (en-US) <hsl()> | (en-US) <hsla()> | (en-US) <hex-color> | (en-US) <named-color> | (en-US) currentcolor | (en-US) <deprecated-system-color>
где 
<rgb()> = rgb( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgb( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<rgba()> = rgba( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgba( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<hsl()> = hsl( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsl( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )
<hsla()> = hsla( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsla( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )
где 
<alpha-value> = <number> | (en-US) <percentage>
<hue> = <number> | (en-US) <angle>

BCD tables only load in the browser

Нестандартные тени CSS | Vaden Pro

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

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

Да ну, может проще картинкой?

У Вас может возникнуть вопрос, зачем же играться с кодом, если даже начинающий пользователь Photoshop умеет создавать самые разнообразные эффекты тени? Запилить картинку, залить на сервер. Делов то…

С одной стороны оно конечно так, но, как говорит неевклидовая геометрия, прямолинейный путь не всегда самый короткий…

Применение картинок в качестве тенеобразующих элементов имеет ряд существенных недостатков:

• Скорость. Дополнительные картинки негативно сказываются на скорости загрузки страниц и создают дополнительную нагрузку на сервер.
• Резинка. Если Вы уже ознакомились с базовой версткой и переходите к решению реальных практических задач, у вас обязательно возникнет необходимость использовать «резиновую» верстку, и тут с картинками начинаются канители…
• Прощай «чистый» код. Применение картинок-теней приводит нас к необходимости ввода дополнительных блоков и оберток, вследствие чего код становится нечитабельным.

Какой у нас план?

В основе нашего примера будет лежать свойство box-shadow, щедро дарованное CSS3.

box-shadow добавляет элементу тень (что примечательно, по умолчанию – наружную, с параметром inset – внутреннюю), позволяет одновременно применять несколько разных теневых следов, адекватно оттеняет border-radius…

Ну, как Вы уже догадались, автор очень любит это свойство))).

Рассмотрим пример использования:

box-shadow: <offsetX> <offsetY> < blur radius > < spread radius > <shadow color>

• offsetX – вертикальный сдвиг тени относительно блока
• offsetY – горизонтальный сдвиг тени относительно блока
• blur radius – радиус размытия тени
• spread radius – протяженность тени
• shadow color – цвет тени (черный по умолчанию)

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

Важно!!!

• Устаревшие браузеры на web-kit движке поддерживают экспериментальное свойство -webkit-box-shadow (Sf до v5.1, Cr до v10.0, Andr до v4.0 и iOS Sf до v5.0).
• IE до v9.0 не понимает box-shadow, по этому придется поиграться с фильтрами вида
  

  filter: progid:DXImageTransform.Microsoft.dropshadow(offsetX, offsetY, shadow color);

  .

Переходим к практике

Создадим страницу с базовым контейнером, к которому будем прикручивать тень.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" media="all" type="text/css" href="./style.css">
        <title> Нестандартные тени </title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div>Нестандартные тени <span>CSS</span></div>
    </body>
</html>

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

CSS:

body {
    background: aqua; /*Задаем фон страницы*/
}
 
#blockd {/*Базовый контейнер*/
 position: relative; /*Позиционируем контейнер*/
 width: 50%; /*Ширина контейнера*/
 background: #f2ea09; /*Фон контейнера*/
 -moz-border-radius: 5px; /*Фаска для Мозюки*/
 border-radius: 5px;/*Фаска*/
 padding: 20px 20px; /*Внутренние отступы*/
 color: rgba(25,1,255, 0.7);/*Цвет текста*/
 text-shadow: 0 1px 0 #211e3c; /*Тень текста*/
 font-size: 45px;/*Размер шрифта*/
 font-weight: bold;
 margin: 120px auto;/*Внешние поля*/
}
#blockd span {
   color: rgba(252,47,0, .8); 
   font-weight: bolder;
   font-size: 50px;
}

Результатом наших стараний будет следующий пейзаж:

В создании обещанной не совсем стандартной тени нам помогут:

• псевдоэлементы :before, :after, позволяющие выводить некий контент непосредственно перед и после родительским элементом.
• CSS свойство transform, позволяющее трансформировать элемент, (вращать, наклонять в разных плоскостях, применять матрицу преобразований и многое другое).

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

CSS:

#blockd:before,/*Темизируем псевдоэлементы*/
#blockd:after {
 z-index: -1;/*Прячем псевдоэлементы за родителя*/
 position: absolute;/*Задаем позиционирование*/
 content: "";/*Намекаем, что нужно что-то вывести*/
 bottom: 16px;/*Уточняем абсолютное положение*/
 left: 9px;/*Уточняем абсолютное положение*/
 width: 50%;/*Задаем ширину*/
 top: 70%;/*Смещаем вниз*/
 max-width:350px;/*Ограничиваем ширину*/
 background: rgba(0, 0, 0, 0.8);/*Задаем фон псевдоэлемента*/
 -webkit-box-shadow: 0 20px 10px rgba(244,63,0, 0.7);/*тень для вэбкит-движков*/
 -moz-box-shadow: 0 20px 10px rgba(244,63,0, 0.7);/*Тень для Мозиллы*/
 box-shadow: 0 20px 10px rgba(244,63,0, 0.7);/*Тень для всех, кому CSS3 не чуждо*/
 -webkit-transform: rotate(-4deg);/*Вращаем на 4 градуса для вэбкит*/
 -moz-transform: rotate(-4deg);/*Вращаем на 4 градуса для Мозиллы*/
 -o-transform: rotate(-4deg);/*Вращаем на 4 градуса для Оперы*/
 -ms-transform: rotate(-4deg);/*Вращаем на 4 градуса для мелкософта*/
 transform: rotate(-4deg); /*Вращаем на 4 градуса для всех, кому CSS3 не чуждо*/
}
 
#blockd:after { /*Вращаем и размещаем тень «после» контейнера*/
    transform: rotate(4deg);
 -webkit-transform: rotate(4deg);
 -moz-transform: rotate(4deg);
 -o-transform: rotate(4deg);
 -ms-transform: rotate(4deg);
 
 right: 9px;
 left: auto;
}

Теперь взглянем на результат.

Как видно из примера, мы использовали красную (244,63,0) полупрозрачную (0.7) тень. Целью такого шага было продемонстрировать возможность применения любого элемента из RGB пространства в качестве тенеобразующей основы.

Разноцветные тени способны помочь Вам в создании оригинальных дизайнерских решений.

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

Важно!!!

1. Кросс-браузерность. Рассмотренный метод построения нестандартных теней показал полную работоспособность в браузерах, начиная с Fx3.5, Op10.5, Sf, Cr, IE9.
2. В отличии от метода картинок, скорость загрузки страниц не ухудшается, наличие тени не влияет на размер блока:
   

   Shadows do not influence layout and may overlap other boxes or their shadows.

Оценок: 8 (средняя 5 из 5)

• 3520 просмотров

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Уровень сложности:

Средний

Еще интересное

Box-shadow • Про CSS

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

Спецификация: w3.org/TR/css3-background/#the-box-shadow

Синтаксис совсем простой:

box-shadow: 15px 15px 5px -5px rgba(0,0,0,.2);

Этот код даст вот такую тень:

Первое значение отвечает за отступ слева, второе — сверху. Значения могут быть отрицательными. Третье — радиус размытия. Если значение не задано или равно 0 — тень имеет четкие края. Четвертое — уменьшение или увеличение тени. Значения могут быть отрицательными.

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

Последнее значение — цвет. Очень удобно задавать его в hsla или в rgba, чтобы тень была прозрачной и затемняла нижележащий фон независимо от его цвета.

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

Есть ещё один параметр — inset. Если он задан, тень отбрасывается внутрь элемента.

При использовании нескольких теней они задаются одна за другой через запятую.

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

При этом если теней несколько, изменение порядка заданных теней при анимации дает интересный эффект:

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

Каждый из примеров ниже сделан с помощью теней на основе одного дива, в некоторых используются псевдоэлементы:

Ещё можно сделать радугу:

Или вот, например, пуговицы:

Или пузырь с текстом:

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

Также в последнее время становятся популярными длинные тени (в данном случае это box-shadow + text-shadow):

Суть способа состоит в использовании множества теней, при этом ближайшие к фигуре имеют цвет, собственно, тени, а дальние от неё плавно переходят к цвету фона. Использовать rgba с прозрачностью здесь не получится, потому что тогда тени будут просвечивать друг под другом.

Руками такие штуки писать неудобно, поэтому проще будет воспользоваться генераторами:

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

Создание изогнутых теней с использованием только CSS

Ранее мы рассказали, как создать изогнутую тень элементу HTML с помощью изображения тени в формате PNG, созданного в программе PhotoShop. Но нужно ли использовать программу для создания теней, если в CSS есть свойство тени блока? В этом уроке мы рассмотрим, можно ли создать изогнутые тени, используя только это свойство.

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

Воспользуемся тем же способом, что и в предыдущем уроке. В нем использовались псевдоэлементы ::before (до) и ::after (после) с изображением в качестве значения свойства содержимого. Но совершенно не обязательно задавать какое-либо содержимое псевдоэлементам для того, чтобы у них были тени.

В этом случае положим элемент изображения в блок, чтобы было немного проще:

<div>
        <img src="perhentian-island-malaysia.jpg" alt="Dawn at Perhentian Island">
</div>

После этого используем примерно тот же способ, что и раньше: в этот раз у блока будет относительное позиционирование, чтобы эффекты псевдоэлементов ::before и ::after были расположены относительно родительского блока, а не тега <body>:

div#island-dawn {
        margin-bottom: 2rem;
        position: relative;
}

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

div#island-dawn:before,  div#island-dawn:after {
        content: " ";
        width: 80px;
        height: 8px;
}

После этого применим свойство тени блока к этим псевдоэлементам, задав ему численное значение распространения 15 пикселей:

div#island-dawn:before, div#island-dawn:after {
          content: " ";
          width: 80px; height: 8px;
          box-shadow: rgba(0,0,0,0.6) 0px 0px 15px 8px;
          position: absolute;
          bottom: 7px;
}

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

div#island-dawn:before {
        left: 22px;
        transform-origin: top left;
        transform: rotate(-4deg);
}
div#island-dawn:after {
        right: 11px;
        transform-origin: top right;
        transform: rotate(4deg);
}

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

Примечание Дежурки:

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

Использована фотография с разрешения Choh Wah Ye, лицензированная по лицензии Creative Commons.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

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

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

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

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

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

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

border-radius:10px;

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

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

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

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

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

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

border-radius: 10px/20px;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

text-shadow

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

text-shadow: 0 0 3px #FF0000;

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

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

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

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

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

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

Практика:

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

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

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

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

Свойство CSS3 box-shadow — Блог ITVDN

Введение

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

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

<!DOCTYPE html>

<html>

<head>

    <title>Box-Shadowtitle>

    <style type=»text/css»>

        body {

            background: url(http://palma-ceramic.ru/images/newcatalog/1945.jpg);

        }

        .button {

            width: 80px;

            height: 80px;

            margin: 30px;

            display: inline-block;

            cursor: pointer;

     background: green;

        }

        .left {

            border-radius: 50%;

        }

        .center {

            border-radius: 20%;

        }

        .right {

            border-radius: 50%;         

        }

    style>

head>

<body>

    <div>div>

    <div>div>

    <div>div>

body>

html>

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

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

Вооружившись знаниями о данном свойстве, можно приступить к созданию наших кнопок. Для начала изменим фон элементов на такой же, как у тела нашего документа. Теперь указываем параметры для box-shadow: первый отвечает за смешение по горизонтали, второй – по вертикали, третий — за радиус размытия, четвертый определяет цвет. Также используем значение inset, с помощью которого делаем внутреннюю верхнюю тень белой, а внутреннюю нижнюю — черной, при этом устанавливаем для них прозрачность, чтобы они не выглядели грубо. 

<!DOCTYPE html>

<html>

<head>

    <title>Box-Shadowtitle>

    <style type=»text/css»>

        body {

            background: url(http://palma-ceramic.ru/images/newcatalog/1945.jpg);

        }

        .button {

            display: inline-block;

            cursor: pointer;

            margin: 30px;

            width: 80px;

            height: 80px;

            background: url(http://palma-ceramic.ru/images/newcatalog/1945.jpg);

            box-shadow: 0 4px 22px rgba(0,0,0, 0.25), inset 0 3px 0 rgba(255,255,255, 0.5), 0 3px 0 rgba(0,0,0, 0.1), inset 0 0 22px rgba(0,0,0, 0.1);

        }

        .left {

            border-radius: 50%;   

        }

        .center {        

            border-radius: 20%;

        }

        .right {        

            border-radius: 50%;

        }

    style>

head>

<body>

    <div>div>

    <div>div>

    <div>div>

body>

html>

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

<!DOCTYPE html>

<html>

<head>

    <title>Box-Shadowtitle>

    <style type=»text/css»>

        body {

            background: url(http://palma-ceramic.ru/images/newcatalog/1945.jpg);

        }

        .button {

            display: inline-block;

            cursor: pointer;

            margin: 30px;

            width: 80px;

            height: 80px;

            background: url(http://palma-ceramic.ru/images/newcatalog/1945.jpg);

            box-shadow: 0 4px 22px rgba(0,0,0, 0.25), inset 0 3px 0 rgba(255,255,255, 0.5), 0 3px 0 rgba(0,0,0, 0.1), inset 0 0 22px rgba(0,0,0, 0.1);

        }

        .left {

            border-radius: 50%;

        }

        .center {        

            border-radius: 20%;

        }

        .right {        

            border-radius: 50%;

        }

        .button:hover {

            box-shadow: inset 0 0 22px rgba(0,0,0,0.2), 0 3px 0 rgba(255,255,255,0.4),inset 0 3px 0 rgba(0,0,0,0.1), inset 0 0 22px rgba(0,0,0,0.1);

        }

    style>

head>

<body>

    <div>div>

    <div>div>

    <div>div>

body>

html>

Следующее, что мы сделаем – это добавим иконки для наших кнопок, для этого мы используем псевдокласс :after и, чтобы усилить эффект вдавленности элемента при наведении, мы будем смещать картинки на 3% от начально положения.

<!DOCTYPE html>

<html>

<head>

    <title>Box-Shadowtitle>

    <style type=»text/css»>

        body {

            background: url(http://palma-ceramic.ru/images/newcatalog/1945.jpg);

        }

        .button {

            display: inline-block;

            cursor: pointer;

            margin: 30px;

            width: 80px;

            height: 80px;

            background: url(http://palma-ceramic.ru/images/newcatalog/1945.jpg);

            box-shadow: 0 4px 22px rgba(0,0,0, 0.25), inset 0 3px 0 rgba(255,255,255, 0.5), 0 3px 0 rgba(0,0,0, 0.1), inset 0 0 22px rgba(0,0,0, 0.1);

            -moz-box-shadow: 0 4px 22px rgba(0,0,0, 0.25), inset 0 3px 0 rgba(255,255,255, 0.5), 0 3px 0 rgba(0,0,0, 0.1), inset 0 0 22px rgba(0,0,0, 0.1);

            -webkit-box-shadow: 0 4px 22px rgba(0,0,0, 0.25), inset 0 3px 0 rgba(255,255,255, 0.5), 0 3px 0 rgba(0,0,0, 0.1), inset 0 0 22px rgba(0,0,0, 0.1);

        }

        .left {

            border-radius: 50%;

        }

        .center {        

            border-radius: 20%;

        }

        .right {        

            border-radius: 50%;

        }

        .button:hover {

            box-shadow: inset 0 0 22px rgba(0,0,0,0.2), 0 3px 0 rgba(255,255,255,0.4),inset 0 3px 0 rgba(0,0,0,0.1), inset 0 0 22px rgba(0,0,0,0.1);

            -moz-box-shadow: inset 0 0 22px rgba(0,0,0,0.2), 0 3px 0 rgba(255,255,255,0.4),inset 0 3px 0 rgba(0,0,0,0.1), inset 0 0 22px rgba(0,0,0,0.1);

            -webkit-box-shadow: inset 0 0 22px rgba(0,0,0,0.2), 0 3px 0 rgba(255,255,255,0.4),inset 0 3px 0 rgba(0,0,0,0.1), inset 0 0 22px rgba(0,0,0,0.1);

        }

        .button::after {

            content: »;

            width: 80px;

            height: 80px;

            display: block;

            opacity: 0.7;

        }

        .left::after {

            background: url(http://www.defaulticon.com/sites/default/files/styles/icon-front-page-32×32-preview/public/field/image/MD-previous.png?itok=Myj2aYPA);

            background-repeat: no-repeat;

            background-position: 50%;

        }

        .center::after {

            background: url(http://www.defaulticon.com/sites/default/files/styles/icon-front-page-32×32-preview/public/field/image/MD-play.png?itok=iQrN1tL3);

            background-repeat: no-repeat;

            background-position: 50%;

        }

        .right::after {

            background: url(http://www.defaulticon.com/sites/default/files/styles/icon-front-page-32×32-preview/public/field/image/MD-next.png?itok=LBqF9Nod);

            background-repeat: no-repeat;

            background-position: 50%;

        }

        .button:hover::after {

            background-position: center 53%;

        }

    style>

head>

<body>

    <div>div>

    <div>div>

    <div>div>

body>

html>

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

Как закруглить углы изображения на CSS без Фотошопа — Технический блокнот

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

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

Чтобы приведенные примеры в статье корректно отображались у вас на экране, вы должны использовать самые свежие версии браузеров, FireFox, Chrome и те что сделаны на основе их: Яндекс.Браузер, Амиго и так далее.

Закругление углов у блоков DIV

По стандарту CSS3 чтобы блок DIV имел скругленные углы, ему необходимо придать стиль border-radius, например так:

border-radius: 10px;

Для наглядности нарисуем два блока с прямыми и скругленными углами:

Блок с прямыми углами

Блок с закругленными углами

Закругление углов у картинок

По аналогии с примером выше можно закруглить углы и у картинок на сайте, например фотографий. Для наглядности закруглим углы для фотографии со страницы https://moonback.ru/page/shinomontazh

Вот изображение без CSS обработки

А теперь с загругленными углами:

border-radius: 10px;

Чтобы стало совсем «красиво» с начала добавим окантовку…

border-radius: 10px;
border: 5px #ccc solid;

а затем и тени:

border-radius: 10px;
border: 5px #ccc solid;
box-shadow: 0 0 10px #444;

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

border-radius: 10px;
box-shadow: 0 0 10px #444;

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

border-radius: 50%;
border: 5px #cfc solid;
box-shadow: 0 0 10px #444;

Если вы откроете изображении в новом окне, то увидите, что оно (изображение) в неизменном виде, а все углы, тени и так далее — всего лишь результат обработки CSS стилей вашим браузером.

Маленькое лирическое отступление

Стиль border увеличивает размер изображения на величину окантовки. Если указано значение border: 5px, то итоговое изображение станет шире и выше на 10 пикселей. Учитывайте это, в некоторых случаях может «поехать» верстка сайта.

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

Как закруглить углы картинок на WordPress

Во всех приведенных примерах выше я прописывал стили прямо в тегах html кода. Например последний выглядит так:

<img src="/wp/wp-content/uploads/2016/01/humor/humor01.jpg">

Это хорошо когда нужно переоформить одну картинку или фотографию. А если вы захотите изменить все? Ну не будете же вы лазить по всему своему сайту, чтобы подредактировать отображение каждой. В большинстве случаев WordPress тегу IMG определяет несколько классов стилей. Один по уникальному имени файла с изображением, другой по размеру, и еще по выравниваю. Вы можете дополнить один из них вышеуказанными параметрами.

Например для всех изображений, для который не указано выравнивание, в файле style.css вашей темы WordPress пропишите следующее:

.alignnone {
border-radius: 10px; 
border: 5px #cfc solid; 
box-shadow: 0 0 10px #444;
}

Либо самый жесткий метод для всех картиной на сайте. Переопределим стиль для всех тегов IMG:

img {
border-radius: 10px; 
border: 5px #cfc solid; 
box-shadow: 0 0 10px #444;
}

Последний вариант подойдет не только для WordPress, а для любой CMS. И даже для простой HTML странички в том случае когда при выводе изображений тегу IMG не присваеватся никаких классов стилей. Но будьте внимательны. Если вы переопределите параметры отображения тега IMG вы измените внешний вид ВСЕХ картинок на сайте!

Вместо заключения

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

CSS Изображение с тенью

Изображения с эффектом тени

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

Изображение с CSS Shadow

Исходный код

Изображение с закругленными углами и CSS Shadow

Исходный код

Скругленные изображения с CSS Shadow

Исходный код

Изображения со вставкой CSS Shadow

Исходный код

Изображение за текстом

Исходный код

Дикая жизнь ….

Фигурное изображение с тенью CSS

Исходный код

drop-shadow () — CSS: каскадные таблицы стилей

Функция drop-shadow () CSS применяет эффект тени к входному изображению.Результат — .

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

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

  падающая тень (смещение-x, смещение-y, радиус размытия)  

Функция drop-shadow () принимает параметр типа (определенный в свойстве box-shadow ), за исключением того, что ключевое слово inset и spread параметры не являются допустимый.

Параметры

offset-x offset-y (обязательно)

Два значения , которые определяют смещение тени. offset-x указывает горизонтальное расстояние, при котором отрицательные значения помещают тень слева от элемента. offset-y указывает расстояние по вертикали, при котором отрицательные значения помещают тень над элементом. Если оба значения равны 0 , тень помещается непосредственно за элементом.

радиус размытия (опционально)

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

цвет (опционально)

Цвет тени, заданный как <цвет> . Если не указано, используется значение свойства цвет .

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

 
drop-shadow (16px 16px 10px черный)
  

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

 
падающая тень (.5rem .5rem 1rem # e23)  

Как использовать CSS box-shadow: 13 приемов и примеров

CSS — это язык, который разработчики используют для стилизации веб-страницы. Он контролирует, как элементы HTML отображаются на экране, на бумаге или на любом другом носителе. CSS предоставляет все возможности настройки для стилизации веб-страницы под ваше собственное изображение.

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

Что такое CSS box-shadow?

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

Синтаксис CSS:

  box-shadow: [смещение по горизонтали] [смещение по вертикали] [радиус размытия] [необязательный радиус распространения] [цвет];  

1. смещение по горизонтали: Если смещение по горизонтали положительное, тень будет справа от поля.А если смещение по горизонтали отрицательное, тень будет слева от поля.
2. вертикальное смещение: Если вертикальное смещение положительное, тень будет ниже прямоугольника. И если вертикальное смещение отрицательное, тень будет над прямоугольником.
3. радиус размытия: Чем выше значение, тем более размытой будет тень.
4. Радиус распространения: Указывает, насколько должна распространяться тень.Положительные значения увеличивают разброс тени, отрицательные значения уменьшают разброс.
5. Цвет: Обозначает цвет тени. Кроме того, он поддерживает любой цветовой формат, такой как rgba, hex или hsla.

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

1. Добавьте тусклую тень блока слева, справа и снизу блока

  box-shadow: rgba (149, 157, 165, 0.2) 0px 8px 24px;  

  box-shadow: rgba (100, 100, 111, 0.2) 0px 7px 29px 0px;  

  box-shadow: rgba (0, 0, 0, 0.15) 1.95px 1.95px 2.6px;  

  box-shadow: rgba (0, 0, 0, 0,35) 0px 5px 15px;  

  box-shadow: rgba (0, 0, 0, 0.25) 0px 54px 55px, rgba (0, 0, 0, 0.12) 0px -12px 30px, rgba (0, 0, 0, 0.12) 0px 4px 6px, rgba (0, 0, 0, 0.17) 0px 12px 13px, rgba (0, 0, 0, 0.09) 0px -3px 5px;  

  box-shadow: rgba (6, 24, 44, 0.4) 0px 0px 0px 2px, rgba (6, 24, 44, 0.65) 0px 4px 6px -1px, rgba (255, 255, 255, 0,08) 0px 1px 0px вставка;  

  box-shadow: rgba (0, 0, 0, 0.1) -4px 9px 25px -6px;  

  box-shadow: rgba (136, 165, 191, 0.48) 6px 2px 16px 0px, rgba (255, 255, 255, 0.8) -6px -2px 16px 0px;  

  box-shadow: rgba (3, 102, 214, 0.3) 0px 0px 0px 3px;  

  box-shadow: rgba (50, 50, 93, 0,25) 0px 30px 60px -12px вставка, rgba (0, 0, 0, 0.3) 0px 18px 36px -18px вставка;  

  box-shadow: rgba (240, 46, 170, 0.4) 0px 5px, rgba (240, 46, 170, 0.3) 0px 10px, rgba (240, 46, 170, 0.2) 0px 15px, rgba (240, 46). , 170, 0.1) 0px 20px, rgba (240, 46, 170, 0,05) 0px 25px;  

  box-shadow: rgba (240, 46, 170, 0.4) 5px 5px, rgba (240, 46, 170, 0.3) 10px 10px, rgba (240, 46, 170, 0.2) 15px 15px, rgba (240, 46 , 170, 0.1) 20px 20px, rgba (240, 46, 170, 0,05) 25px 25px;  

  box-shadow: rgba (0, 0, 0, 0,09) 0px 2px 1px, rgba (0, 0, 0, 0,09) 0px 4px 2px, rgba (0, 0, 0, 0,09) 0px 8px 4px, rgba ( 0, 0, 0, 0,09) 0 пикселей 16 пикселей 8 пикселей, rgba (0, 0, 0, 0,09) 0 пикселей 32 пикселей 16 пикселей;  

   
  
  
  
  
 < / head> 
  
 
 
  
 Стиль 4 
 
 
  
 
 
  
   

  .heading {
 выравнивание текста: по центру; 
} 
 .image-box {
 дисплей: блок; 
 левое поле: авто; 
 поле справа: авто; 
 box-shadow: rgba (0, 0, 0, 0.35) 0px 5px 15px; 
}  

   
  
  
  
  
 < ссылка rel = "stylesheet" href = "styles.css "> 
  
  
 
 
  
 Стиль 4 
 
 
  
 
 
  
   

 box-shadow: смещение-x, смещение-y, радиус размытия, цвет распространения; 

 

 Это коробка.
 

 

 Это коробка. 

  
<стиль>
div {
     высота: 100 пикселей;
     ширина: 200 пикселей;
     отступ: 10 пикселей;
     цвет фона: светло-голубой;
 } 

 

 Это коробка. 

  
<стиль>
div {
     высота: 100 пикселей;
     ширина: 200 пикселей;
     отступ: 10 пикселей;
     цвет фона: светло-голубой;
}
div {
box-shadow: 10 пикселей 10 пикселей;
} 

 

 Это коробка. 

  
<стиль>
div {
     высота: 100 пикселей;
     ширина: 200 пикселей;
     отступ: 10 пикселей;
     цвет фона: светло-голубой;
}
div {
box-shadow: 10 пикселей 10 пикселей;
}
div {
box-shadow: 10px 10px светло-серый;
} 

 

 Это коробка. 

  
<стиль>
div {
     высота: 100 пикселей;
     ширина: 200 пикселей;
     отступ: 10 пикселей;
     цвет фона: светло-голубой;
}
div {
box-shadow: 10 пикселей 10 пикселей;
}
div {
box-shadow: 10px 10px 3px светло-серый;
} 

 

 Это коробка.

  
<стиль>
div {
     высота: 100 пикселей;
     ширина: 200 пикселей;
     отступ: 10 пикселей;
     цвет фона: светло-голубой;
}
div {
box-shadow: 10 пикселей 10 пикселей;
}
div {
box-shadow: 10px 10px 5px 5px светло-серый;
} 

 box-shadow: shadow1, shadow2; 

 

 Это коробка. 

  
<стиль>
div {
     высота: 100 пикселей;
     ширина: 200 пикселей;
     отступ: 10 пикселей;
     цвет фона: светло-голубой;
}
div {
box-shadow: 10 пикселей 10 пикселей;
}
div {
box-shadow: 5px 5px светло-серый, 5px 5px розовый;
} 

 

 Это коробка. 

  
<стиль>
div {
     высота: 100 пикселей;
     ширина: 200 пикселей;
     отступ: 10 пикселей;
     цвет фона: светло-голубой;
}
div {
box-shadow: 10 пикселей 10 пикселей;
}
div {
box-shadow: вставка светло-серого цвета 5 пикселей и 5 пикселей;
} 

 box-shadow: <смещение по горизонтали> <смещение по вертикали> <радиус размытия> <радиус распространения> <цвет>; 

 .shadow-effect {
box-shadow: 3px 3px 10px 2px # a9a1a1;
} 

 .shadow-effect {
box-shadow: 5px 5px 0px 2px # a9a1a1;
} 

 .shadow-effect {
box-shadow: 10px 10px 0 синий, 15px 15px 0 красный, 20px 20px 0 зеленый;
} 

 .shadow-effect {
box-shadow: вставка 3px 3px 10px 2px # a9a1a1;
} 

 тень текста: <смещение по горизонтали> <смещение по вертикали> <радиус размытия> <цвет>; 

 p {
тень текста: 1px 1px 2px # 333333;
} 

 . Капля-тень
    {
    маржа: 20 пикселей;
    ширина: 250 пикселей;
    фон: url (../ images / drop_border.png) вверху слева без повтора;
    float: right;
}
  

  .drop-shadow img
    {
    маржа: 0px;
    отступ: 5 пикселей;
    ширина: 230 пикселей;
    высота: 170 пикселей;
    плыть налево;
}
  

  .drop-shadow p
    {
    цвет: # 666666;
    отступ: 5px 5px 0px 0px;
    выравнивание текста: центр;
    ясно: слева;
    стиль шрифта: курсив;
}
  

  

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

  

  .drop-shadow
    {
    фон: url (../ images / drop_border.gif) вверху слева без повтора;
}
  

 .shortpoint-listitem-wrap {
 border: 1px solid #dadada; 
} 

 .shortpoint-listitem-wrap {
 box-shadow: 4px 4px 5px #dadada ; 
} 

 .shortpoint-listitem-wrap {
 border- радиус: 10 пикселей; 
} 

 .shortpoint-listitem-img {
 border-radius: 10px; 
} 

 .shortpoint-listitem-wrap {
 граница: 1px solid #dadada; 
 box-shadow: 4px 4px 5px #dadada; 
 радиус границы: 10 пикселей; 
} 
 .shortpoint-listitem-img {
 border-radius: 10px; 
}