Внутренние тени изображений и текста

Воскресенье, 01 Апреля 2012 г. 01:20 + в цитатник

Цитата сообщения Mariea

Прочитать целиком В свой цитатник или сообщество!

Внутренние тени изображений и текста

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

1.Тень блока (box-shadow)

Horizontal offset и vertical offset — это горизонтальное и вертикальное смещение. Их значения указывают, в какую сторону объект будет отбрасывать тень.
Blur radius - это размытие,
spread radius - толщина тени.

Основные элементы box-shadow можно разобрать
по нижеследующему рисунку.

2.Тень текста (text-shadow)

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

3.Inset в box-shadow
Чтобы «перевернуть» тень внутрь объекта,
необходимо добавить inset.

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

4.Цвет теней (RGB):

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

***
Таким образом, свойство box-shadow позволяет добавлять
элементу одну или несколько теней, указывая их параметры
через запятую. Если для элемента задается свойство
border-radius, то тень будет с закругленными углами.
Ниже наглядный пример с использованием свойства box-shadow:

код:
<*img style="box-shadow: 10px 10px 10px 10px red; margin-center: 150px;" src="//img1.liveinternet.ru/images/attach/c/0/118/414/118414115_
0_dc4e7_3795837b_XL.jpg" width="300" height="450" alt="0_dc4e7_3795837b_XL" />

Примечание:
1.При пользовании кодом не забудьте убрать звездочку за скобкой.
2.Еще примеры с кодами по теням смотрите здесь - http://www.liveinternet.ru/users/marmuh/post346863156/

Источники:Хабрахабр - http://habrahabr.ru/post/154211/

Дневник* Mariea@mmg

Рубрики:

Уроки на Лиру/Простые рамочки