Vnútorné tiene v CSS. Vnútorné tiene v CSS Vnútorný tieň css3

3 значение — или размытие. Данное значение вводить не обязательно, без его указания тени всё равно будут работать.

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

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

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

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

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

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

Для изменения цвета подойдет любая цветовая система — , а также стандартные цвета.

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

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

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

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

Открываем наш CSS документ, записываем тег , он будет нашим основным селектором.

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

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

В итоге, у нас получился вот такой блок:

HTML/CSS — тень текста

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

1. Сдвиг по горизонтали.
2. Сдвиг по вертикали.
3. Радиус размытия. Необязательно.
4. Цвет.

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

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

Первая тень будет располагаться ближе к тексту, а вторая выше её. Напоминает работу со свойствами outline и border, но здесь можно создавать и 2, 3 и больше теней.

Тени при наведении — CSS

Теперь давайте рассмотрим создание теней для определенного состояния. В нашем примере будет использоваться кнопка.

Для того, чтобы создать тень для кнопки, её для начала нужно разместить. Открываем тег a, записываем для него класс button и любое текстовое значение, для лучшего отображения.

Сначала зададим размещение, с помощью свойства margin и увеличим кнопку до определенных размеров. Для увеличения можно использовать свойства width и height, либо же воспользоваться свойством padding.

Теперь задаем цвет фона, текста и рамку. Наша кнопка готова, приступаем к созданию тени.

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

Сделаем самый простой эффект — увеличим тень. Можете сделать её размытой или изменить растяжение — по вкусу.

Для лучшего эффекта зададим свойство transition для обычной ссылки, поставим время в 0.5s.

Теперь у нас есть отличная кнопка с красивой тенью, которая при наведении будет плавно расширяться.

Заключение

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

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

Обычные тени легко реализовать с помощью box-shadow или text-shadow. Но как быть, если необходимо сделать внутренние тени? В этой статье описывается, как сделать такие тени с помощью всего нескольких строчек кода.

Синтаксис

box-shadow

Horizontal offset и vertical offset - горизонтальное и вертикальное смещение соответственно. Эти значения указывают, в какую сторону объект будет отбрасывать тень:

Blur radius и spread radius немного сложнее. В чем их разница? Взглянем на пример с двумя элементами, где значения blur radius отличаются:

Край тени просто размывается. При различном значении spread radius видим следующее:

В этом случае видим, что тень рассеивается на большую площадь. Если не указывать значения blur radius и spread radius , то они будут равны 0.

text-shadow

Значения аналогичные, только нет spread-shadow . Пример использования:

Inset в box-shadow

Разобравшись с основным синтаксисом box-shadow, понять принципы реализации внутренних теней очень легко. Значения все те же, можно добавить цвет (RGB в hex):

Цвет в формате RGB, альфа-значение отвечает за прозрачность тени:

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

Логично предположить, что добавить тень можно так:

Img { box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5); }

Но тень не видно:

Существует несколько способов решить эту проблему, каждый из которых имеет свои плюсы и минусы. Рассмотрим два из них. Первый - это обернуть картинку в обычный div :

Div { height: 200px; width: 400px; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9); } img { height: 200px; width: 400px; position: relative; z-index: -2; }

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

Div { height: 200px; width: 400px; background: url(http://lorempixum.com/400/200/transport/2); box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9); }

Вот, что может получится при использовании внутренних теней:

Inset в text-shadow

Для решения, сначала применим к заголовку h1 установим темный фон и светлую тень:

H1 { background-color: #565656; color: transparent; text-shadow: 0px 2px 3px rgba(255,255,255,0.5); }

Вот, что получается:

Добавляем секретный ингредиент background-clip , который обрезает все, что выходит за пределы текста (на темный фон):

H1 { background-color: #565656; color: transparent; text-shadow: 0px 2px 3px rgba(255,255,255,0.5); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; }

Получилось почти то, что надо. Теперь просто немного затемняем текст (альфа), и итог:

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

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

Рис. 1. Значения свойства box-shadow

1. ключевое слово inset устанавливает тень внутри элемента;
2. сдвиг тени по горизонтали (5px - вправо, -5px - влево);
3. сдвиг по вертикали (5px - вниз, -5px - вверх);
4. радиус размытия тени (0 - резкая тень);
5. растяжение тени (5px - растяжение, -5px - сжатие);
6. цвет тени.

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

За счёт комбинаций разных параметров и их значений можно получить широкое разнообразие видов теней. В табл. 1 представлен код и результат, к которому он приводит.

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

Пример 1. Тень на фоновом рисунке

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Výsledok tohto príkladu je znázornený na obr. 2. Tieň sleduje zaoblenie rohov kvádra.

Ryža. 2. Vzhľad tieňa na obrázku v pozadí

Pri pridávaní „širokého“ tieňa si uvedomte, že môže presahovať viditeľné okraje okna prehliadača, čo môže viesť k zobrazeniu vodorovného posúvača.

K pseudoprvkom je možné pridať aj tiene, čo sa niekedy vyžaduje pri zložitých rozloženiach. Na obr. Obrázok 3 zobrazuje blok hlavičky s pridaným tieňom. Aby ste sa vyhli akýmkoľvek čiaram na križovatke, musíte použiť pseudoprvok ::after a pridať k nemu tieň.

Ryža. 3. Blok s tieňom

Príklad 2 ukazuje vytvorenie takéhoto bloku.

Príklad 2. Blok s tieňom

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Element môže mať viac ako jeden tieň, ale niekoľko naraz, ich parametre sú uvedené oddelené čiarkami v hodnote vlastnosti box-shadow. Príklad 3 ukazuje, ako pridať dvojitý tieň ku všetkým obrázkom.

Príklad 2. Blok s tieňom

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Výsledok tohto príkladu je znázornený na obr. 4.

Ryža. 4. Dvojitý tieňový obraz

Prvý tieň je zobrazený naľavo od obrázka s polomerom rozostrenia 20px, jeho veľkosť je zmenšená o štvrtý parameter (-20px). Parametre druhého tieňa sú uvedené za desatinnou čiarkou, tieň je zobrazený napravo od obrázka a je tiež zmenšený kvôli symetrii.

Dnes sa naučíme, ako vytvoriť tiene CSS bez obrázkov. Po dokončení tohto návodu už nebudete potrebovať generátor tieňov CSS.

Hlavnou výhodou tieňov vytvorených pomocou CSS3 je jednoduchosť implementácie a zníženie počtu požiadaviek na server (keďže už nepoužívame obrázky). Na vytvorenie tieňa CSS potrebujeme značku div a vlastnosť box-shadow CSS. Nebudete potrebovať žiadne ďalšie označenie, pretože vytvoríme pseudo prvky :after a :before, ktoré umiestnime za hlavný objekt (div s triedou blokovať).

Pozrite sa na HTML kód, pre ktorý vytvoríme tieň CSS3:

Ďalej si môžete pozrieť hotové príklady a kód potrebný na ich implementáciu. Aby sme minimalizovali text na stránke, vynecháme CSS vlastnosti s predponami prehliadača. Celý kód je možné zobraziť kliknutím na odkaz "Príklad" zodpovedajúci príkladu.

Pomocou tieňa môžete poskytnúť blokovú perspektívu. Pozri príklad.

CSS tieň pre zvýšený blok. Pozri príklad.

Príklad tieňa CSS3 pre vertikálne zložený blok. Pozri príklad.

Príklad tieňa CSS3 pre horizontálne zložený blok. Pozri príklad.

CSS3 tieň pre otočený blok. Pozri príklad.