Содержание

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

box-shadow generator

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

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

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

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

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

толщина тени

<div></div>

Эффект тени блока

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

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

CSS тень с одной стороны

Снизу (под блоком div)

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

Многослойный блок с помощью box-shadow

Разноцветная CSS рамка

Еще варианты можно посмотреть у css. yoksel.ru.

CSS внутренняя тень блока (внутри элемента)

Как сделать вдавленный элемент

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

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

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

<span><img alt="котёнок мечтает стать львом" src="http://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.

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 с прозрачностью здесь не получится, потому что тогда тени будут просвечивать друг под другом.

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

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

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

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

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

Описание

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

Для каждой тени можно задать от 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;
}
Попробовать »

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

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

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

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

Синтаксис

box-shadow: none|смещение-х смещение-у размытие размер цвет [inset]|inherit;

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

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

Значение Описание
смещение-x и смещение-y Первые два значения устанавливают смещение тени. Первое значение (смещение-x) указывает расстояние смещения по горизонтали. Отрицательные значения располагают тень слева от элемента. Второе значение (смещение-y) указывает расстояние смещения по вертикали. Отрицательные значения располагают тень над элементом. Если оба значения 0, тень располагается за элементом и её не будет видно, так как по умолчанию тень имеет тот же размер, что и элемент. (обязательные параметры)
размытие Третье значение устанавливает степень размытия тени. Чем больше это значение, тем сильнее размытость — тень становится более большой и светлой. Отрицательные значения не допускаются. Если значение отсутствует или равно 0, это означает, что тень будет без размытия — с острыми углами. (необязательное значение)
размер тени Четвёртое значение изменяет размер тени. Положительное значение увеличивает размер тени со всех сторон, отрицательное — уменьшает. Если значение отсутствует или равно 0, это означает, что тень будет того же размера, что и элемент. (необязательное значение)
цвет Определяет цвет тени. Цвет можно установить различными способами, например: указать имя цвета, использовать шестнадцатеричные значения (HEX), с помощью синтаксиса RGB (RGBA) или HSL (HSLA). Всегда указывайте цвет тени, так как браузеры по разному обрабатывают отсутствие значения цвета.
inset Ключевое слово, указывающее, что тень должна располагаться внутри элемента. Внутренняя тень создаёт эффект вдавленности и располагается над фоновым цветом и/или фоновым изображением, но под любым содержимым элемента. Если ключевое слово не указано, тень будет отбрасываемая, т.е. будет располагаться под элементом. Ключевое слово может быть расположено в качестве первого или последнего значения. (необязательное значение)
none
Указывает на отсутствие тени.

Пример

div#myDIV {
background-color: yellow;
width: 200px;
height: 100px;
box-shadow: 10px 10px black;
}

Как создавалась функция shadow spread в Figma

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

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

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

Существует много возможностей для формирования надежной веб-платформы проектирования для команд, вместе создающих продукты. Мы предоставляем систему, которая помогает вам разрабатывать и понимать ценность сложных дизайн-систем, обеспечивать совместную работу в реальном времени для дизайнеров, разбросанных по всему миру и даже совершенствовать старые инструменты, такие как перо. Вы можете спросить: тогда почему до сих пор нет поддержки изменения размера тени, базовой функции CSS box-shadow? Хотя прошло уже 958 дней с тех пор, как пользователь в Spectrum впервые попросил добавить ее. Неужели нам так сложно сделать тень, просто … больше?

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

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

Может показаться, что рендеринг тени со значением spread может быть таким же простым, как масштабирование геометрии тени. Это так для прямоугольника, но не для более сложного объекта – скажем, логотипа Figma, в котором полно дыр:

Если мы будем руководствоваться определением shadow spread – расширение тени на определенное количество пикселей наружу (или внутрь) от фигуры во всех направлениях, то получим примерно такой результат:

Но никто не сказал мне этого до того, как в прекрасный майский день во время Maker Week я решил заняться созданием этой функции. Осознав ошибочность этого подхода, я решил разобраться. Это не ракетостроение, подумал я. Мы можем выяснить, как визуализировать тени 2D-фигур.

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

Фреймворк для определения приоритетов

Если есть одна вещь, которая мне нравится больше, чем отладка ошибок рендеринга, это чтение спецификаций об интернет-технологиях. (Спросите меня обо всех странных вещах, которые я узнал о GIF89 в прошлом году, добавляя в Figma поддержку GIF). Я опросил коллег каких предположений касательно размера тени мы придерживались. Мы знаем, что сегодня пользователи Figma внедряют обходные пути и добавляют документацию для передачи проекта разработчикам, когда речь идет о значениях shadow spread. Если мы хотим облегчить передачу проекта разработчикам, то наши ограничения должны определяться CSS. Нужно ли нам рисовать идеальную тень для лого Figma? Можем ли мы сделать это в CSS?!

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

(Кроме того: на каждом этапе этого процесса кто-то говорил мне: «на самом деле, значения размера тени поддерживаются в filter: dropshadow()», и указывал на страницу MDN, которая по ошибке утверждала, что значения размера тени еще не поддерживались браузерами. К сожалению, это не правда, что явно указано в спецификации W3C).

Мы провели дискуссию с нашими дизайнерами. Они были уверены, что в большинстве вариантов использования будет достаточно функции shadow spread для прямоугольников и эллипсов. Кроме того, подкрепленный идеей, что соответствие CSS должно мотивировать наши решения, мы решили, что не имеет значения, можем ли мы сделать логотип в форме Figma. Мы решили безжалостно расставить приоритеты: по крайней мере, мы будем делать то, что умеет CSS.

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

Вверху: тень, создаваемая простым растяжением геометрии объекта; внизу: тень, созданная путем создания нового закругленного прямоугольника

Препятствия

Конечно, это не было так просто, как мы ожидали. В этом плане было несколько проблем: как создать правильные эллипсы? (Тень эллипса больше не будет определенно эллиптической; наш код генерации эллипса не генерирует не эллипсы, а простые преобразования эллипса в любом направлении сохраняют свои эллиптические свойства). Как отображать закругленные углы, когда эффект spread shadow был применен к прямоугольнику с закругленными углами? (Спецификация W3 определяет, как общее правило о преобразовании угловых радиусов, так и конкретную формулу, которая будет использоваться для больших значений spread shadow). Как отображать shadow spread на узлах только для обводки?

Мы решили некоторые из этих проблем с помощью проверенного временем метода: нажимать кнопки в CodePen и смотреть, что делают браузеры. Интересно, что браузеры не создают эллиптические тени, они просто создают больший эллипс. Решив подражать CSS, мы тоже это делаем.

Эффект становится более выраженным, когда оси эллипса расходятся:

Что еще более удивительно, после следования кубическому правилу W3C для угловых радиусов теней с большими значениями shadow spread (тщательно продуманное правило!), сравнение наших результатов с CodePen показало, что браузеры вообще не реализуют это. Чтобы создать тень для прямоугольника с закругленными углами, браузеры – а теперь и Figma – просто добавляют или вычитают значение shadow spread и исходный радиус угла.

Но CodePen не помог бы в определении shadow spread только для узлов обводки, поскольку наш подход уже значительно отличается от CSS. Даже полностью прозрачная заливка в CSS влияет на их собственные тени и маскирует их (но не другие тени). В Figma используется подход, близкий к физическому рендерингу, позволяющий пользователю видеть тени сквозь прозрачные и полупрозрачные заливки.

Ниже те же прямоугольники (заливки с нулевой непрозрачностью, с обводками и тенями) в CSS (слева) и Figma (справа):

Хотя легко узнать, как визуализировать тень для узла с заливкой (внизу слева), вы можете представить, как применить shadow spread для обводки несколькими способами:

A. Начните обводку с помощью параметра spread, оставив обводку постоянной
B. Добавьте spreadна внешнюю сторону ширины обводки.
C. Добавьтеspread к ширине штриха, отцентрированный так, чтобы тень распределялась по обе стороны
D. Добавьте параметр spread к каждому краю ширины обводки, в конечном итоге добавив 2 * spread к ширине обводки.

Изучив варианты, мы пришли к варианту D: мы подумали, что, когда вы переключаете видимость заливки объекта, внешний след тени должен оставаться прежним, что исключает вариант C. Из оставшихся вариантов D, похоже, больше всего соответствует идее shadow spread: тень, вытянутая вдоль каждой точки с помощью параметра spread.

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

css: Размер тени блока CSS3

Вы хотите, чтобы box-shadow масштабировалась по ширине контейнера или по высоте контейнера? Вы не можете точно указать высоту и ширину вашей тени, только спред. Таким образом, если ваш контейнер сжимается на 10% по ширине, но не сжимается по высоте, тогда ваша тень будет уменьшаться на 10% (если бы это было возможно), то есть высота вашей тени изменялась бы, хотя, вероятно, не должна.

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

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

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

Однако, если вы ищете масштабируемые границы, т.е. box-shadow без размытия: P, то не смотрите дальше:

http://jsfiddle. net/925r2/3/

<style>
    * {
        margin: 0;
        padding: 0;
        border: 0;
        box-sizing: border-box;
    }

    .wrapper {
        position: relative;
        margin: 100px auto 0;
        width: 80%;         /* .content width */
        height: 400px;      /* .content height */
    }

    .content {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #fff;   /* .content background */
    }

    .shadow {
        position: absolute;
        top: -10%;          /* .content shadow top height */
        right: -5%;         /* .content shadow right width */
        bottom: -10%;       /* .content shadow bottom height */
        left: -5%;          /* .content shadow left width */
        background: #000;   /* .content shadow, unfortuntely no blur effect */
    }
</style>

<div>
    <div></div>
    <div>This is your content</div>
</div>
Автор: Cornelius Размещён: 11. 07.2014 10:19

Генератор стилей CSS — Vseweb.com

Генератор стилей CSS — удобный инструмент для создания как простейших так и более сложных стилей css. Не всегда удобно сидеть и вручную подбирать необходимый цвет, либо угол закругления рамки , а тень box-shadow требует еще более изощренных манипуляций, так как выбор всевозможных вариантов и комбинаций безграничен.В онлайн генераторе стилей css Вы сможете без труда подобрать толщину и цвет рамки ( BORDER ) и ( BORDER-COLOR ) , фон блока ( BACKGROUND-COLOR ), которые можно подобрать , нажав на кнопку внизу под названием настройки блока

1. Закругленные углы

— если Вам нужно подобрать величины для закругления углов блока либо изображения ( BORDER-RADIUS ) , то для этого воспользуйтесь самым первым ползунком в блоке с названием ПОДБИРАЕМ ЗАКРУГЛЕНИЕ УГЛОВ. Достаточно передвигать ползунок, и смотреть на результат в правом блоке. Если же Вам нужно подобрать для каждого из углов разные закругления, или выборочно , то удобнее это сделать будет по нажатию на крестик в кружке , для открытия расширенной панели, в которой можно подобрать радиус для каждого угла.

2. Тень для блока

— если нужно подобрать тень для блока , изображения , сделать это можно с помощью ползунка , который располагается под названием ПОДБИРАЕМ ТЕНЬ БЛОКА. Достаточно просто передвигать ползунок , для получения нужной плотности тени. Если такая тень не подходит , можно нажать на крестик в кружке для открытия расширенного меню , которое позоляет подобрать нужные параметры для ( BOX-SHADOW ). С помощью расширенных настроек можно подобрать цвет и насыщенность тени , сдвиг по горизонтали и вертикали , размытость. Также можно с помощью кнопки указать расположение тени , внутри блока или снаружи.

3. Градиент блока

— все чаще применяется в веб-строительстве. Для того чтобы подобрать градиент и получить готовый код вида ( BACKGROUND-IMAGE: LINEAR-GRADIENT ) достаточно включить кнопку ВКЛ в блоке под названием ПОДБИРАЕМ ГРАДИЕНТ , выбрать начальный и конечный цвет, с помощью подборщика цвета ( colorpicker ) а плавное смешивание на границе генератор сделает сам. Если Вам нужно поменять направление градиента , то нужно нажать на крестик для открытия дополнительного меню , в котором можно выбрать несколько разных направлений градиента: сверху вниз, слева направо, справа налево.

4. Прозрачнось блока

— часто используемое свойство ( OPACITY ) , которое позволяет выставлять различным блокам степень прозрачности , что несомненно расширяет визуальную реализацию проектов. Для того чтобы подобрать необходимую Вам степень прозрачности блока, достаточно передвигать ползунок в блоке под названием ПОДБИРАЕМ СТЕПЕНЬ ПРОЗРАЧНОСТИ до получения нужного результата. Дополнительного меню у блока для регулировки прозрачности нет. Здесь итак все ясно.

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

Сделать тень сайта

Вот что может получиться, если уделить этому свойству достаточное количество внимания:. Далее в учебнике: как задать интервалы в CSS между символами, словами и строками. Девять простых примеров CSS3 анимации. Интернет-магазинам: как фотографировать одежду и оформлять страницу товара. Фильмы и сериалы на IT-тематику. ТОП подборка сайтов с параллакс-эффектом. Простое боковое слайд-меню на jQuery. Облегчаем жизнь корректору: 24 правила набора текста. Способы линкбилдинга для построения ссылочного профиля сайта.

Часть 1. Бренд Lacoste помогает вымирающим видам животных. Профессия линкбилдер в SEO. Примеры аутрич: практические кейсы и результаты. Инфографика в SEO — инструкция. Что такое robots. Аутрич в SEO — главные факторы. Блог Indigo Выберите рубрику:. Пройдемся по порядку: 3px — первое значение отвечает за смещение тени по оси X вправо, влево. Положительным значением тень сдвигается вправо, а отрицательным — влево. Положительным значением тень сдвигается вниз, а отрицательным — вверх.

Этот параметр указывать необязательно. По умолчанию размытие равняется 0 пикселей, что делает тень четкой и неразмытой. По умолчанию цвет тени устанавливается такой же, как у текста, к которому применяется стиль. Как выглядит тень в браузере скриншот : Скриншот: текст с тенью, CSS Несколько теней CSS для текста Также допускается использовать несколько групп значений для свойства text-shadow.

Вот что может получиться, если уделить этому свойству достаточное количество внимания: Скриншот: объемная тень текста в CSS Далее в учебнике: как задать интервалы в CSS между символами, словами и строками. Единственный нюанс — можно дополнительно указать цвет в формате RGBA :. Альфа-значение будет отвечать за прозрачность тени:. Для создания внутренней тени текста, недостаточно просто добавить inset в код:. Сначала можно применить к h2 светлую тень и темный фон:.

Добавить тень к изображению несколько сложнее, чем к обычному div. Например, изначально картинка выглядит так:. Решить эту проблему можно, обернув изображение в div :. Далее следует установить изображение фоном нужного блока:. Кроме того, можно поместить тень внизу блока и поменять ее цвет и степень размытия. Для упрощения создания нужных эффектов существуют специальные CSS3 -генераторы. Вот самые удобные и функциональные из них:. С помощью CSS3 Generator можно создать до десяти разных эффектов, таких как, например, закругленные углы, плавный переход, тень блока CSS.

Генератор очень прост и удобен в использовании:. В этом генераторе собраны все инструменты для создания идеального CSS -градиента:. Это один из самых продвинутых CSS -генераторов. Установите параметры, скопируете сгенерированный код и готово! Хороший генератор тени CSS , позволяющий создавать полезные фрагменты и с легкостью переносить их в свой проект. Этот CSS3 -генератор позаботится обо всех префиксах для популярных браузеров:.

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

ССЫЛКИ В САЙТЕ О ФАКТАХ

Появился ато агенство по раскрутке сайта Верхний Журавлёв переулок порекомендовать зайти

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

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

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

Применим стиль, нажав на кнопку в окне ОК. После чего у нашего слоя появится стиль слоя который мы на него наложили. Теперь из созданного стиля мы создадим отдельный слой, для этого кликнем правой кнопкой мыши по эффекту тень у нашего слоя с объектом и в появившемся меню выберем образовать слой. Выделим новый образовавшийся слой тени и при помощи трансформации отразим его по вертикали. И сдвигаем слой с тенью до нижнего уровня объекта. Так как у нас предмет освещен сзади, то в принципе наша тень так и будет падать, но по закону перспективы приближаясь к нам, она будет казаться немного больше.

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

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

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

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

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

Пополнил копилку знаний о фотошопе. Градиентом лучше. Кстати, на счет масок. Может тиснешь статейку на этот счет. А то я везде читаю про них, а сам что-то не очень в них разобрался. А я вот как-то с масками так и не научился работать. Было бы интересно почитать статейку о масках в фотошопе для новичков.

Пожалуйста, Евгений! Да можно и ластиком, но не всегда получится равномерный край, да наложение градиента в маске будет удобнее. Да в том, то и дело что ластиком юзать приходится по нескольку раз, чтоб получилось нормально, а градиентом проще будет. Хорошо, про маски напишу. В принципе масками пользоваться несложно, выше я указал статью в которой писал про обтравочные маски. А по Вашей просьбе и Евгения напишу статью про маски слоя. Хорошая идея с градиентом, а то я как то все ластик побольше с прозрачностью до 10 применял.

Но так думаю будет даже лучше. Для добавления тени используется свойство box-shadow , у которого имеется шесть значений, из них только два являются обязательными. На рис. Значения свойства box-shadow. Здесь: ключевое слово inset устанавливает тень внутри элемента; сдвиг тени по горизонтали 5px — вправо, -5px — влево ; сдвиг по вертикали 5px — вниз, -5px — вверх ; радиус размытия тени 0 — резкая тень ; растяжение тени 5px — растяжение, -5px — сжатие ; цвет тени.

Обязательно следует указать только сдвиг по горизонтали и вертикали, все остальные параметры будут приниматься по умолчанию. В этом случае тень будет резкой без размытия и чёрного цвета. За счёт комбинаций разных параметров и их значений можно получить широкое разнообразие видов теней. В табл. Сочетания параметров тени Код Результат Описание box-shadow: 5px 5px; Резкая тень справа и снизу. Как видно из таблицы, сдвиг тени не обязательно задавать в пикселах, хотя это и удобно.

Цвет тени можно указывать в любом доступном формате, так, для получения полупрозрачной тени подойдёт формат RGBA, такая тень будет хорошо смотреться на любом фоне. В примере 1 показано, как это сделать. Пример 1. Результат данного примера показан на рис. Тень повторяет скругление уголков блока. Вид тени на фоновом рисунке При добавлении «широкой» тени следует учесть, что она может выйти за пределы видимого окна браузера и привести таким образом к появлению горизонтальной полосы прокрутки.

Тень также можно добавлять и к псевдоэлементам, это иногда требуется для сложной вёрстки. Чтобы не было никаких линий в месте стыка приходится использовать псевдоэлемент ::after и добавлять тень к нему. Блок с тенью В примере 2 показано создание такого блока. Пример 2. Тень у элемента может быть не одна, а сразу несколько, их параметры перечисляются через запятую в значении свойства box-shadow. В примере 3 показано добавление двойной тени ко всем изображениям.

Изображение с двойной тенью Первая тень отображается слева от рисунка с радиусом размытия 20px, её размер уменьшен за счёт четвёртого параметра px.

CSS свойство box-shadow


Пример

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

:

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

# example2 {
box-shadow: 5px 10px # 888888;
}

Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.


Определение и использование

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


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

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

Числа, за которыми следует -webkit- или -moz- указывают первую версию, работавшую с префиксом.

Объект
тень коробки 10,0
4,0 -webkit-
9,0 4,0
3,5 млн унций-
5,1
3,1 -webkit-
10,5


Синтаксис CSS

box-shadow: нет | h-смещение v-смещение размытие цвет распространения | вставка | начальный | наследование;

Примечание: Чтобы прикрепить более одной тени к добавьте список теней, разделенных запятыми (см. пример «Попробуйте сами» ниже).

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

Значение Описание Играй
нет Значение по умолчанию. Тень не отображается Играй »
смещение по горизонтали Обязательно. Горизонтальное смещение тени. Положительное значение ставит тень на правой стороне поля, отрицательное значение помещает тень на левая часть коробки Играй »
v-образное смещение Обязательно.Вертикальное смещение тени. Положительное значение ставит тень под рамкой, отрицательное значение помещает тень над рамкой Играй »
размытие Необязательно. Радиус размытия. Чем выше число, тем более размытым тень будет Играй »
спред Необязательно. Радиус распространения. Положительное значение увеличивает размер тень, отрицательное значение уменьшает размер тени Играй »
цвет Необязательно.Цвет тени. Значение по умолчанию — цвет текста. Посмотрите на CSS Color Values ​​полный список возможных значений цвета.

Примечание: В Safari (на ПК) параметр цвета является обязательным. Если не указать цвет, тень вообще не отображается.

Играй »
вставка Необязательно. Изменяет тень от внешней тени (начало) до внутренней тени Играй »
начальный Устанавливает для этого свойства значение по умолчанию.Читать про начальный Играй »
унаследовать Наследует это свойство от своего родительского элемента. Читать про наследство

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


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

Пример

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

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

Попробуй сам »

Пример

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

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

Попробуй сам »

Пример

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

# example1 {
box-shadow: 5px 5px синий, 10px 10px красный, 15px 15px зеленый;
}

Попробуй сам »

Пример

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

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

Попробуй сам »

Пример

Изображения, брошенные на стол.Этот пример демонстрирует, как создавать «поляроидные» изображения и вращать фото:

div.polaroid {
width: 284px;
отступ: 10px 10px 20px 10px;
граница: сплошная 1px #BFBFBF;
цвет фона: белый;
box-shadow: 10px 10px 5px #aaaaaa;
}

Попробуй сам »

Связанные страницы

Учебник

CSS: закругленные углы CSS

Ссылка на HTML DOM: свойство boxShadow



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

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

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

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

 
тень коробки: нет;


box-shadow: 60–16 пикселей бирюзовый;


box-shadow: 10px 5px 5px черный;


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


box-shadow: вставка 5em 1em золото;


box-shadow: 3px 3px красный, -1em 0 0,4em оливковый;


box-shadow: наследовать;
box-shadow: начальный;
box-shadow: отключено;
  

Укажите одиночную тень блока, используя:

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

Значения

вставка
Если не указано (по умолчанию), предполагается, что тень является падающей тенью (как если бы прямоугольник был поднят над содержимым).
Наличие ключевого слова inset изменяет тень на тень внутри кадра (как если бы содержимое было вдавлено внутри рамки). Вставные тени рисуются внутри границы (даже прозрачные), над фоном, но под содержимым.
<смещение-x> <смещение-y>
Это два значения для установки смещения тени. определяет горизонтальное расстояние. Отрицательные значения помещают тень слева от элемента. определяет расстояние по вертикали. Отрицательные значения помещают тень над элементом. Смотрите <длина> для возможных единиц.
Если оба значения равны 0 , тень помещается за элементом (и может создавать эффект размытия, если задано и / или ).
<радиус размытия>
Это третье значение <длина> .Чем больше это значение, тем больше размытие, поэтому тень становится больше и светлее. Отрицательные значения не допускаются. Если не указано, это будет 0 (край тени резкий). В спецификации не содержится точного алгоритма расчета радиуса размытия, однако он уточняется следующим образом:
… для длинного прямого края тени это должно создать цветовой переход на длину расстояния размытия, которая перпендикулярна и центрирована на краю тени, и которая варьируется от полного цвета тени в конечной точке радиуса внутри тени до полного прозрачный в конечной точке за ее пределами.
<радиус распространения>
Это четвертое значение <длина> . Положительные значения заставят тень расширяться и увеличиваться в размерах, отрицательные значения заставят тень сжиматься. Если не указано, это будет 0 (размер тени будет такого же, как у элемента).
<цвет>
Возможные ключевые слова и обозначения см. В values.
Если не указано, по умолчанию используется значение .

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

Каждая тень в списке (обработка none как список нулевой длины) интерполируется через компонент цвета (как цвет), а также x, y, размытие и (при необходимости) распространение (как длину) составные части. Для каждой тени, если обе входные тени являются или не являются вставкой , то интерполированная тень должна соответствовать входным теням в этом отношении. Если какая-либо пара входных теней имеет одну вставку , а другую — не вставку , весь список теней не интерполируется.Если списки теней имеют разную длину, то более короткий список дополняется в конце тенями, цвет которых — , прозрачный, , все длины — 0 , и чья вставка (или нет) соответствует более длинному списку.

 нет | <тень> # 

где
<тень> = вставка? && <длина> {2,4} && <цвет>?

где
<цвет> = | | | | <шестнадцатеричный цвет> | <имя-цвета> | текущий цвет | <цвет устаревшей системы>

, где
= rgb (<процент> {3} [/ ]?) | rgb (<число> {3} [/ <альфа-значение>]?) | rgb (<процент> # {3}, <альфа-значение>?) | rgb (<число> # {3}, <альфа-значение>?)
= rgba (<процент> {3} [/ <альфа-значение>]?) | rgba (<число> {3} [/ <альфа-значение>]?) | rgba (<процент> # {3}, <альфа-значение>?) | rgba (<число> # {3}, ?)
= hsl ( [/ ]?) | hsl (<оттенок>, <процент>, <процент>, <альфа-значение>?)
= hsla (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsla (<оттенок>, <процент>, <процент>, <альфа-значение>?)

, где
<альфа-значение> = <число> | <процент>
<оттенок> = <число> |

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

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

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

& mdash; Майя Анжелу

CSS
  blockquote {
  отступ: 20 пикселей;
  тень коробки:
       вставка 0 -3em 3em rgba (0,0,0,0.1),
             0 0 0 2px rgb (255,255,255),
             0.3em 0.3em 1em rgba (0,0,0,0.3);
}  
Результат

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

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

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

HTML
  

Привет, мир

CSS
  п {
  box-shadow: 0 0 0 2em # F4AAB9,
              0 0 0 4em # 66CCFF;
  маржа: 4em;
  заполнение: 1em;
}  
Результат

Таблицы BCD загружаются только в браузере

Внимательный взгляд на CSS Box Shadow

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

Примеры

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

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

Вот как можно добавить к элементу div едва уловимую серую тень.

  box-shadow: 0 0 10px серый;  

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

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

  box-shadow:  inset  0 0 10 пикселей;  

Пример 3: Смещение падающей тени

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

  box-shadow:  5px 5px  10px;  

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

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

Теперь, когда вы увидели несколько примеров CSS box-shadow в действии, давайте копнем глубже.

Синтаксис

Общий синтаксис свойства box-shadow выглядит следующим образом:

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

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

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

  1. вставка
  2. смещение по горизонтали
  3. смещение по вертикали
  4. радиус размытия
  5. расстояние разнесения
  6. цвет

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

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

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

Обзор стоимости собственности
Стоимость объекта Обязательно? Блок Значение по умолчанию, если не указано
вставка Нет ключевое слово Если вставка не указана, тень блока будет вне HTML-элемента.
смещение по горизонтали Есть длина Нет значения по умолчанию. Это необходимо указать.
смещение по вертикали Есть длина Нет значения по умолчанию. Это необходимо указать.
радиус размытия Нет длина 0
расстояние распространения Нет длина 0
цвет Нет цвет Равно свойству цвета элемента / элементов HTML, к которым применяется тень блока.
вставка

Если присутствует значение свойства ключевого слова вставки , тень блока будет помещена внутри элемента HTML.

  box-shadow:  inset  0 0 5px 5px оливковый;  

Для сравнения, вот та же тень блока без свойства вставки:

  box-shadow: 0 0 5px 5px оливковый;  

смещение по горизонтали

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

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

  box-shadow:  20px  10px;  

смещение по вертикали

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

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

  box-shadow: 10px  -20px ;  

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

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

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

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

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

  box-shadow: 5px 5px  20px ;  

расстояние разнесения

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

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

  box-shadow: 0 0 10px  5px ;  

При отрицательном расстоянии распространения тень сжимается со всех сторон. В следующем примере тень меньше ширины прямоугольника из-за отрицательного расстояния распространения и отсутствия горизонтального смещения:

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

цвет

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

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

   цвет: красный; 
box-shadow: 0 0 10px 5px;  

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

   цвет: красный; 
box-shadow: 0 0 10px 5px  синий ;  

Множественные тени коробки

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

Синтаксис следующий:

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

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

В следующем примере есть две тени блока: красная в верхнем левом углу блока и синяя в правом нижнем углу.

  box-shadow:  -5px -5px 30px 5px красный ,
               5px 5px 30px 5px синий ;  

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

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

Примеры теней CSS Box

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

Посмотреть демо

Связанное содержимое

Все, что вам нужно знать о CSS3 Box Shadow

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

Элемент уровня блока — это любой элемент, имеющий структуру и макет. Наиболее распространенным элементом уровня блока является DIV, хотя почти любой элемент может быть преобразован в блок с помощью display: block .

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

Синтаксис следующий (все в одной строке):

 тень коробки:
вставка xPosition yPosition blurSize spreadSize color; 

Где:

  • вставка (необязательно), если включена, тень блока существует внутри блока.Если опущено, тень блока существует за пределами блока.
  • xPosition — горизонтальное смещение тени блока относительно элемента уровня блока.
  • y Позиция — это вертикальное смещение тени блока относительно элемента уровня блока.
  • blurSize (необязательно) — размер размытия теней.
  • spreadSize (необязательно) — размер распространения тени.
  • цвет — это значение цвета и может быть любым из обычных цветовых форматов — шестнадцатеричным, rgb, rgba, hsl, hsla или именованным цветом.

Предполагая, что у нас есть DIV на нашей странице с классом myElement, мы могли бы создать простую тень блока для этого элемента, используя код:

 .myElement {
    box-shadow: 2px 2px 2px # 666;
} 

В приведенном выше фрагменте кода мы устанавливаем координаты x и y тени на 2 пикселя, чтобы создать тень в правом нижнем углу. Мы также установили размер размытия на 2 пикселя и цвет на # 666 (серый).

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

 .myElement {
    box-shadow: -2px -2px 2px # 666;
} 

Используя значения xPosition и yPosition без размытия, мы можем создать тень блока со смещением, например:

 .myElement {
    тень коробки: 2px 2px 0 # 666;
} 

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

.myElement {
    тень коробки: 0 0 0 2px # 666;
} 

Хотите, чтобы тень вашего блока была размытой? Без проблем!

 .myElement {
    box-shadow: 0 0 5px 2px # 666;
} 

Если вы хотите, чтобы ваша тень появлялась внутри вашего элемента, используйте ключевое слово inset. Положительные числа заставят тень появляться слева (на xPosition) и выше (на yPosition).

 .myElement {
    box-shadow: вставка 2px 2px 2px # 000;
} 

В то время как отрицательные числа заставят тень появляться на правом и нижнем крае.

 .myElement {
    box-shadow: вставка -2px -2px 2px # 000;
} 

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

 .myElement {
    box-shadow: вставка 0 25px 2px # 92baf4;
} 

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

 .myElement {
    box-shadow: вставка 0 -25px 2px # 92baf4;
} 

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

 .myElement {
    box-shadow: 2px 2px 2px # 666, вставка 0 -25px 2px # 92baf4;
} 

Используя border-radius из последнего блога, мы можем объединить их, чтобы создать более закругленную кнопку.Это выглядит лучше, но тень будет иметь тот же радиус, что и у коробки

.
 .myElement {
    радиус границы: 8 пикселей;
    box-shadow: 2px 2px 2px # 666, вставка 0 25px 0 # 92baf4;
} 

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

 .myElement {
    радиус границы: 8 пикселей;
    box-shadow: 2px 2px 2px # 666, вставка 0 60px 0 -36px # 92baf4;
} 

Итак, какие браузеры поддерживают box-shadow? К счастью, больше, чем те, которые поддерживают изображение границы!

Все зеленое для всех браузеров — ну IE9 и выше.Он также поддерживается на мобильных устройствах, но если вы хотите использовать его на Android и iOS 3 и 4, вам нужно добавить префикс -webkit-. Точно так же, если вы все еще поддерживаете Firefox 3.6, вам нужно добавить префикс -moz-.

Если вы создали какие-либо потрясающие эффекты тени коробки, дайте нам знать в комментариях!

Энди Смит — технический архитектор презентаций, который пишет о веб-разработке, CSS и JavaScript на сайте andismith.com. Вы можете следить за ним в Твиттере по адресу @andismith.Последние сообщения Andi Smith (посмотреть все)

Как использовать 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.Добавьте тусклую тень блока слева, справа и снизу блока

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

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

Выход:

2.Добавьте затемненную тень ко всем сторонам

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

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

Выход:

3.Добавьте тонкую тень блока на нижнюю и правую стороны

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

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

Выход:

4.Добавить тень от темного блока ко всем сторонам

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

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

Выход:

5.Добавить рассеянную тень ко всем сторонам

Вы можете добавить рассеянную тень ко всем сторонам поля, используя следующую команду с вашим целевым HTML-элементом:

  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;  

Выход:

6.Добавить тонкую тень на все стороны

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

  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 вставка;  

Выход:

7.Добавьте тень блока на нижнюю и левую стороны

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

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

Выход:

8.Добавьте тусклую тень блока на верхнюю и левую стороны, темную тень на нижнюю и правую стороны

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

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

Выход:

9.Добавьте тонкую цветную тень на все стороны

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

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

Выход:

10.Добавьте несколько цветных границ теней на нижнюю и левую стороны коробки

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

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

Выход:

11.Добавить несколько цветных границ теней на нижнюю часть

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

  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;  

Выход:

12.Добавьте несколько цветных границ теней на нижнюю и правую стороны коробки

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

  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;  

Выход:

13.Добавьте светлые тени на левую и правую стороны, распространите тень на нижнюю часть

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

  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) 0px 16px 8px, rgba ( 0, 0, 0, 0,09) 0px 32px 16px;  

Выход:

Интеграция CSS с HTML-страницей

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

Связано: 11 полезных инструментов для проверки, очистки и оптимизации файлов CSS

Вы можете встроить его в саму HTML-страницу или прикрепить как отдельный документ.Есть три способа включить CSS в HTML-документ:

Внутренний CSS

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



Стиль 4





Встроенный CSS

Встроенный CSS используется для добавления уникальных стилевых правил к элементу HTML.Его можно использовать с элементом HTML через атрибут стиля . Атрибут стиля содержит свойства CSS в виде «свойство: значение» , разделенных точкой с запятой (; ).

Связанный: Узнайте, как создавать двумерные веб-сайты с помощью CSS Grid

Все свойства CSS должны быть в одной строке i.е. между свойствами CSS не должно быть разрывов строк. Вот пример, демонстрирующий, как использовать встроенный CSS с HTML-документом:

   



CSS box-shadow
< / head>


Стиль 4





Внешний CSS

Внешний CSS - это наиболее идеальный способ применения стилей к HTML-документам.Внешняя таблица стилей содержит все правила стилей в отдельном документе (файл .css), затем этот документ связывается с документом HTML с помощью тега . Этот метод - лучший метод определения и применения стилей к HTML-документам, так как затронутый HTML-файл требует минимальных изменений разметки. Вот пример, демонстрирующий, как использовать внешний CSS с документом HTML:

Создайте новый файл CSS с .css расширение. Теперь добавьте в этот файл следующий код CSS:

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

Наконец, создайте документ HTML и добавьте в него следующий код:

   



CSS box-shadow
< ссылка rel = "stylesheet" href = "styles.css ">



Стиль 4





Обратите внимание, что файл CSS связан с документом HTML через тег и атрибут href .

Все три вышеупомянутых метода (внутренний CSS, встроенный CSS и внешний CSS) будут отображать один и тот же вывод -

Сделайте свою веб-страницу элегантной с помощью CSS

Используя CSS, вы полностью контролируете стиль своей веб-страницы.Вы можете настроить каждый элемент HTML, используя различные свойства CSS. Разработчики со всего мира вносят свой вклад в обновления CSS, и они делают это с момента его выпуска в 1996 году. Таким образом, новичкам есть чему поучиться!

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

10 простых примеров кода CSS, которые можно выучить за 10 минут

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

Читать далее

Об авторе Юврадж Чандра (Опубликовано 13 статей)

Юврадж - студент бакалавриата по информатике в Университете Дели, Индия.Он увлечен веб-разработкой Full Stack. Когда он не пишет, он исследует глубину различных технологий.

Более От Ювраджа Чандры
Подпишитесь на нашу рассылку новостей

Подпишитесь на нашу рассылку, чтобы получать технические советы, обзоры, бесплатные электронные книги и эксклюзивные предложения!

Еще один шаг…!

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

Как добавить box-shadow к блокам

Эй,

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

Надеюсь, это поможет.

С уважением,
Врунда Кансара

Спасибо за ответ!

Есть довольно много разных UAG-блоков / элементов, в которые я хотел бы добавить эффект box-shadow.К сожалению, я не знаю CSS-классы UAG-блоков для использования пользовательского CSS.

Не могли бы вы помочь мне добавить box-shadow в некоторые из наиболее часто используемых UAG-блоков: например: SECTION, ADVANCED COLUMNS, INFO BOX.

Было бы здорово, если бы box-shadow мог быть настраиваемым свойством в следующей версии UAG-plugin.

Спасибо за отличную работу !!!

Абу Марьям

  • Этот ответ был изменен 1 год, 10 месяцев назад пользователем Abu Maryam.

Привет,

Разобрался как это сделать.
Для тех, кто хочет знать, вот как я это сделал:

- В каждом блоке есть расширенная опция (внизу) для добавления дополнительного класса CSS.
- Выберите имя для дополнительного класса CSS (например, uag-new-class).
- В административной части WordPress перейдите в Внешний вид >> Настройщик.
- В настройщике (внизу) добавьте класс Extra CSS как:

uag-new-class {
box-shadow: 5px 5px 5px;
}

Вы можете добавить любое свойство CSS, которое вам нравится, и вы можете использовать одно и то же имя класса CSS для разных блоков.

Было бы здорово, если бы box-shadow мог быть настраиваемым свойством в следующей версии UAG-плагина.

Большое спасибо!
Действительно отличный плагин !!!

Абу Марьям

Эй @ abu-maryam,

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

Кроме того, предоставленное вами решение является очень правильным.

С уважением,
Врунда Кансара

Большое спасибо !!!

Я действительно забыл точку (.) в стиле CSS.
Должно быть:

. uag-new-class {
box-shadow: 5px 5px 5px;
}

Привет,
Абу Марьям

Box shadow | Webflow University

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

В этом уроке:

  1. Тени перехода
  2. Создание границ с тенями блока

Тени перехода

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

  1. Добавьте тень блока к элементу и задайте стиль с черным цветом и непрозрачностью 20%
  2. В меню States выберите Hover
  3. Создайте для тени прямоугольника непрозрачность 55%
  4. Вернитесь в меню States и выберите None (normal)
  5. В нижней части панели стиля , в области Effects добавьте переход и выберите Box shadow из списка
  6. Установите время перехода или оставьте значение по умолчанию 200 мс

Обратите внимание, что после добавления перехода эффект наведения представляет собой плавное затухание между состоянием None и состоянием Hover .Без перехода на 200 мс эффект зависания будет резко переключаться между уровнями непрозрачности. Вы можете стилизовать состояния наведения или нажатия с помощью тени блока по своему усмотрению.

Создание границ с помощью теней блока

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

Подробнее о тенях блоков и других эффектах .

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

  1. Добавьте внешнюю падающую тень и установите Blur и Distance на 0px и Size на 1px
  2. Установите цвет тень rgba (0,0,0,0.1) - черный с непрозрачностью 10%
  3. Добавьте вторую внешнюю тень. Установите Blur на 8 пикселей и Distance на 2 пикселя.
  4. Установите цвет также на rgba (0,0,0,0.1)

Попробуйте Webflow - это бесплатно

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