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

Тень блока (свойство 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

<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 — тень блока (внешняя и внутренняя)

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

Описание

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: drop–shadow()», и указывал на страницу 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>

Генератор стилей 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

Пример

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

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


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: отключено;
  

 нет | <тень> # 
 где 
  <тень> = вставка? && <длина> {2,4} && <цвет>?  
 
 где 
  <цвет> =  |  |  |  | <шестнадцатеричный цвет> | <имя-цвета> | текущий цвет | <цвет устаревшей системы>  
 
, где 
   = rgb (<процент> {3} [/ ]?) | rgb (<число> {3} [/ <альфа-значение>]?) | rgb (<процент> # {3}, <альфа-значение>?) | rgb (<число> # {3}, <альфа-значение>?) 
  = rgba (<процент> {3} [/ <альфа-значение>]?) | rgba (<число> {3} [/ <альфа-значение>]?) | rgba (<процент> # {3}, <альфа-значение>?) | rgba (<число> # {3}, ?) 
  = hsl (   [/ ]?) | hsl (<оттенок>, <процент>, <процент>, <альфа-значение>?) 
  = hsla (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsla (<оттенок>, <процент>, <процент>, <альфа-значение>?)  
 
, где 
  <альфа-значение> = <число> | <процент> 
 <оттенок> = <число> |   
 

  
  Ты можешь застрелить меня своими словами, 

Можешь порезать меня глазами, 

Ты можешь убить меня своей ненавистью, 

Но все равно, как воздух, поднимусь. 
 & mdash; Майя Анжелу 
  

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

  
 
 Привет, мир 
 
  

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

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

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

  box-shadow:  5px 5px  10px;  

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

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

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

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

  box-shadow:  20px  10px;  

  box-shadow: 10px  -20px ;  

  box-shadow: 5px 5px  20px ;  

  box-shadow: 0 0 10px  5px ;  

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

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

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

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

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

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

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

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

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

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

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

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

 .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: [горизонтальное смещение] [вертикальное смещение] [радиус размытия] [дополнительный радиус распространения] [цвет];  

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

   
  
  
  
  
 < / head> 
  
 
 
  
 Стиль 4 
 
 
  
 
 
  
   

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

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