Css внутренняя тень: Внутренние тени в CSS / Хабр

Содержание

Tailwind CSS — Box Shadow Утилиты для управления боковой тенью элемента.

Basic usage

Добавление внешней тени

Используйте утилиты shadow-sm , shadow , shadow-md , shadow-lg , shadow-xl или shadow-2xl для применения к элементу теней внешнего блока разного размера.

<div></div>
<div></div>
<div></div>
<div></div>

Добавление внутренней тени

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

<div></div>

Удаление тени

Используйте shadow-none , чтобы удалить существующую тень блока из элемента. Это чаще всего используется для удаления тени, которая была применена к меньшей точке останова.

<div></div>

Applying conditionally

Наведение,фокус и другие состояния

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:shadow-lg , чтобы применять утилиту shadow-lg только при наведении shadow-lg

<div>
  <!-- ... -->
</div>

Полный список всех доступных модификаторов состояния см . в документации Hover, Focus и других состояний .

Точки останова и медиа-запросы

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

md:shadow-lg , чтобы применить утилиту shadow-lg только к экранам среднего размера и выше.

<div>
  <!-- ... -->
</div>

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

Использование пользовательских значений

Настройка вашей темы

По умолчанию Tailwind предоставляет шесть утилит для теней, одну утилиту для внутренних теней и утилиту для удаления существующих теней. Вы можете настроить эти значения, отредактировав theme.boxShadow или theme.extend.boxShadow в файле

tailwind.config.js .

Если предоставлена тень DEFAULT , она будет использоваться для утилиты shadow Любые другие клавиши будут использоваться в качестве суффиксов, например, клавиша '2' создаст соответствующую утилиту shadow-2 .

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      boxShadow: {
        '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
      }
    }
  }
}

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

Arbitrary values

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

<div>
  <!-- ... -->
</div>

Узнайте больше о поддержке произвольных значений в документации по произвольным значениям.

seodon.ru | CSS справочник — box-shadow

Опубликовано: 18.08.2010 Последняя правка: 08.12.2015

Свойство CSS box-shadow используется для добавления теней к HTML-элементам. Если элемент имеет скругленные углы (свойство border-radius), то тень тоже скругляется. При этом надо четко понимать, что наличие или отсутствие тени никак не влияет на размер самого элемента, так как она «падает» на его поля и пространства за пределами элемента (в случае наружной тени).

Тип свойства

Назначение: контент.

Применяется: ко всем элементам.

Наследуется: нет.

Значения

Значением свойства box-shadow является ключевое слово none либо указание через пробелы параметров тени: ее тип (внутренняя, наружная), цвет и от двух до четырех параметров в единицах измерения принятых в CSS отвечающих за смещение, размытие и размах тени.

none — отсутствие тени у элемента.
Параметры тени :
1. Горизонтальное смещение — первый (обязательный) числовой параметр, который отвечает за смещение тени по горизонтали. Положительная величина смещает тень вправо, а отрицательная — влево.
2. Вертикальное смещение — второй (обязательный) числовой параметр, который отвечает за смещение тени по вертикали. Положительная величина смещает тень вниз, а отрицательная — вверх.
3. Размытие — третий (необязательный) числовой параметр, отвечающий за радиус размытия тени, вроде фильтра Гаусса. Если не указан, то размытие равно нулю. Отрицательные значения недопустимы.
4. Размах — четвертый (необязательный) числовой параметр, который отвечает за радиус размаха (распространения) тени. Положительная величина увеличивает размер тени во всех направлениях, а отрицательная — уменьшает.
5. inset — необязательное ключевое слово, означающее создание внутренней тени, если не указано, то тень наружная.
6. Цвет — необязательный параметр. Указание цвета тени в любом доступном в CSS формате — имя цвета, шестнадцатеричное значение перед которым ставится знак решетки (#) либо десятичный формат RGB или RGBA (A — это прозрачность цвета, которая может меняться от 0 до 1, например 0. 5). Если цвет тени не указан, то он совпадает с цветом текста элемента (свойство color).

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

Процентная запись: не существует.

Значение по умолчанию: none.

Разные варианты наружной тени для одного элемента.

Синтаксис

box-shadow: none | параметры тени [, параметры тени]

Пример CSS: использование box-shadow

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство box-shadow</title>
  <style type="text/css">
   p {
    width: 100px; /* ширина параграфов */
    height: 100px; /* их высота */
    background: #ccff00; /* фоновый цвет */
    border: 2px #ff00cc solid; /* стили рамок */
    border-radius: 15px; /* радиус скругления углов */
   }
  .  p1 {
    box-shadow: inset 20px 20px 5px #003300; /* внутренняя тень */
   }
   .p2 {
    box-shadow: inset 20px 20px 5px #003300,
                10px 10px #003300; /* внутренняя и наружная тень */
    }
  </style>
 </head>
 <body>
  <p></p>
  <p></p>
 </body>
</html>

Результат примера

Результат. Использование свойства CSS box-shadow в браузере Opera.

Версии CSS

Версия:	CSS 1	CSS 2	CSS 2.1	CSS 3
Поддержка:	Нет	Нет	Нет	Да

Браузеры

Браузер:	Internet Explorer		Google Chrome		Mozilla Firefox		Opera		Safari
Версия:	До 9.0	9.0 и выше	До 10.0	10.0 и выше	До 4.0	4.0 и выше	До 10.5	10.5 и выше	3.1 и выше
Поддержка:	Нет	Да	Нет	Да	Нет	Да	Нет	Да	Нет

тень окна | тень внутреннего блока с примерами

Автор: Авинаш Малхотра

Обновлено 19 февраля 2022 г.

← Радиус границы
Тень текста →

Дом
Веб-дизайн
CSS3
Тень коробки

Тень коробки CSS3

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

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

Генератор теней коробки

0px 0px 0px 0px #000

900 93

Пример тени блока

Коробчатая тень

Box Shadow может быть снаружи ( по умолчанию ) или внутри. В следующем примере мы рассмотрим оба примера один за другим.

Внешняя тень коробки

По умолчанию тень блока является внешней. x-offset и y-offset являются обязательными свойствами , остальные необязательны. Синий цвет по умолчанию и ширина 0 пикселей, а цвет тени по умолчанию — цвет шрифта. Однако мы также можем изменить размытие, распространение и цвет тени.
См. примеры

box-shadow: 0px 0px 5px 2px красный;

тень одинакова со всех четырех сторон, так как смещения по оси x и по оси y равны нулю. Размытие — 5 пикселей, распространение — 2 пикселя, а цвет — красный.

box-shadow: -2px -2px 10px 0px синий;

тень составляет 2 пикселя слева и 2 пикселя сверху, так как оба значения отрицательные. Размытие — 10 пикселей, разброс — 0 пикселей (без сплошного цвета тени), а цвет — синий.

box-shadow: 2px 2px 10px 0px синий;

тень находится на 2 пикселя слева и на 2 пикселя сверху, так как оба значения положительные. Размытие — 10 пикселей, разброс — 0 пикселей (без сплошного цвета тени), а цвет — синий.

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

тень находится на расстоянии 5 пикселей слева и 5 пикселей сверху, так как оба значения положительные. Размытие — 0 пикселей, разброс — 5 пикселей (только сплошной цвет тени), а цвет — морской.

Внутренняя тень коробки

Чтобы использовать внутреннюю тень блока

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

box-shadow: 2px 2px 5px 1px красная вставка;

тень находится на расстоянии 2 пикселя слева и 2 пикселя сверху, так как оба значения положительные. Размытие — 5 пикселей, разброс — 1 пиксель, цвет — морской, а вставка — для внутренней тени.

box-shadow: 0px 0px 20px 1px белая вставка;

тень составляет 0 пикселей слева и 0 пикселей сверху, так как оба значения положительные. Размытие — 20 пикселей, разброс — 1 пиксель, цвет — белый, а вставка — для внутренней тени.

box-shadow: 0px 0px 80px 1px #bbb inset;

тень составляет 0 пикселей слева и 0 пикселей сверху, так как оба значения положительные. Размытие — 80 пикселей, разброс — 1 пиксель, цвет — #bbb, а вставка — для внутренней тени.

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

Чтобы использовать Множественные тени блока , используйте запятую (,). Запятая работает как разделитель для нескольких теней блока . Мы можем использовать n чисел из теней , используя разделитель-запятую. См. примеры

box-shadow: -2px -2px 5px 1px #f00, -4px -4px 5px 0px #00f;

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

box-shadow: -2px -2px 5px 1px #000, 2px 2px 5px 0px #f00;

черная тень слева вверху, красная тень справа внизу

box-shadow: -2px -2px 5px 1px #f00, 2px 2px 5px 0px #f0f, 0px 0px 50px 0px #000 inset;

три тени, две смещения, одна вставка

Префиксы поставщика Box Shadow

Как использовать Box Shadow с использованием префиксов браузера.

граница-тень:0px 0px 10px красный; // все последние браузеры

-webkit-border-shadow:0px 0px 10px красный; // для Chrome, Edge, Firefox, Safari

-moz-border-shadow:0px 0px 10px красный; // для браузера на основе Mozilla

-ms-border-shadow:0px 0px 10px красный; // для IE 9и выше

-o-border-shadow:0px 0px 10px красный; // Браузеры Opera

Дизайн кнопок с помощью Box Shadow

Chrome, Safari, Firefox 4, Opera и IE9 поддерживают Box Shadow без какого-либо поставщика префикс (например, box-shadow). Но нам нужно добавить еще одно свойство, например -moz-box-shadow для Firefox 3.6 и более ранних версий.

← Радиус границы
Тень текста →

html — внутренняя тень CSS

спросил 8 лет, 5 месяцев назад

Изменено 8 лет, 5 месяцев назад

Просмотрено 4к раз

У меня проблема с внутренней тенью css.

Я создал это DEMO из codepen.io

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

Как просмотреть внутреннюю тень на изображении?

HTML:

 тело {
  цвет фона: #323949;
  семейство шрифтов: 'mstfont' !важно;
  поле: 0px;
  отступ: 0px;
  минимальная ширина: 100%;
  плыть налево;
  высота: 100%;
  -webkit-backface-visibility: скрыто;
}
.globalHeader {
  z-индекс: 90;
  цвет фона: #323949;
  положение: фиксированное;
  ширина: 100%;
  нижняя граница: 1px сплошная #3f4858;
  цвет: #fff;
  размер шрифта: 40px;
  семейство шрифтов: arial, без засечек;
  -webkit-box-shadow: 0px 0px 5px #000000;
  -moz-box-shadow: 0px 0px 5px #000000;
  box-shadow: 0px 0px 5px #000000;
}
.globalHeader_in {
  z-индекс: 99999;
  -webkit-box-sizing: рамка-бокс;
  -moz-box-sizing: рамка-бокс;
  box-sizing: граница-коробка;
  -webkit-user-select: нет;
  -moz-user-select: нет;
  -ms-user-select: нет;
  выбор пользователя: нет;
  -webkit-font-smoothing: сглаживание;
  -moz-osx-font-smoothing: оттенки серого;
  положение: родственник;
  минимальная ширина: 960 пикселей;
  ширина: 100%!важно;
  максимальная ширина: 1580 пикселей;
  высота: 52 пикселя;
  слева: 0;
  сверху: 0;
  отступ: 0 20 пикселей 0 15 пикселей;
  маржа: авто;
}
. профиль-капак {
  ширина: 100%;
  высота: 385 пикселей;
  нижняя граница: 1px сплошная #3f4858;
  -moz-box-shadow: вставка 0 0 5px #000000;
  -webkit-box-shadow: вставка 0 0 5px #000000;
  box-shadow: вставка 0 0 5px #000000;
}
.изображение {
  поле: 0px авто;
  ширина: 900 пикселей;
  высота: 385 пикселей;
  переполнение: скрыто;
}
.изображение изображения {
  ширина: 100%;
}

 <дел>
  заголовок

<дел>
  <дел>

html
css

Вы не можете добавить внутреннюю тень к изображению. Вместо этого вы можете установить родителя .image to positon:relative и создайте наложение, установленное на position:absolute , с box-shadow:

HTML

 
   <дел>

CSS

 . overlay{
   ширина: 100%;
   высота: 100%;
   положение: абсолютное;
   сверху: 0;
   слева: 0;
   -moz-box-shadow: вставка 0 0 10px #000000;
   -webkit-box-shadow: вставка 0 0 10px #000000;
   box-shadow: вставка 0 0 10px #000000;
}

(перешел на скрипку, я просто привык к ней):

FIDDLE

 .img-тень {
    положение: родственник;
    отображение: встроенный блок;
}
.img-тень :: после {
    положение: абсолютное;
    сверху: 0;
    справа: 0;
    внизу: 0;
    слева: 0;
    box-shadow: 0 0 10px 14px rgba(90,0,90,0.65) вставка;
    содержание: "";
}
.img-тень> img {
    вертикальное выравнивание: сверху;
}

 <диапазон>
    <ширина изображения=280px; src="http://www.accordionplus.ru/wp-content/uploads/2014/10/1_web_mini.jpg">

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.

Добавить комментарий Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Комментарий *

Имя *

Email *

Сайт

смещение по x
смещение по y
размытие	900 59
распространение
цвет
тип

Tailwind CSS — Box Shadow Утилиты для управления боковой тенью элемента.

Basic usage

Добавление внешней тени

Добавление внутренней тени

Удаление тени

Applying conditionally

Наведение,фокус и другие состояния

Точки останова и медиа-запросы

Использование пользовательских значений

Настройка вашей темы

Arbitrary values

seodon.ru | CSS справочник — box-shadow

Тип свойства

Значения

Синтаксис

Версии CSS

Браузеры

тень окна | тень внутреннего блока с примерами

Тень коробки CSS3

Генератор теней коробки

Пример тени блока

Внешняя тень коробки

box-shadow: 0px 0px 5px 2px красный;

box-shadow: -2px -2px 10px 0px синий;

box-shadow: 2px 2px 10px 0px синий;

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

Внутренняя тень коробки

box-shadow: 2px 2px 5px 1px красная вставка;

box-shadow: 0px 0px 20px 1px белая вставка;

box-shadow: 0px 0px 80px 1px #bbb inset;

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

box-shadow: -2px -2px 5px 1px #f00, -4px -4px 5px 0px #00f;

box-shadow: -2px -2px 5px 1px #000, 2px 2px 5px 0px #f00;

box-shadow: -2px -2px 5px 1px #f00, 2px 2px 5px 0px #f0f, 0px 0px 50px 0px #000 inset;

Префиксы поставщика Box Shadow

Дизайн кнопок с помощью Box Shadow

html — внутренняя тень CSS

Зарегистрируйтесь или войдите в систему

Опубликовать как гость

Опубликовать как гость

Добавить комментарий Отменить ответ

Рубрики

Рубрики