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

Пятница, 04 Сентября 2015 г. 00:04 + в цитатник

Цитата сообщения 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

Серия сообщений "МОИ РАМОЧКИ":
Часть 1 - Для любителей скромных рамочек...
Часть 2 - Рамочки для Вашего творчества - золотые
...
Часть 35 - Рамочка с разрывом
Часть 36 - Рамки для творчества
Часть 37 - Внутренние тени изображений и текста

Метки: рамочки
Понравилось: 1 пользователю

<a href="https://www.liveinternet.ru/users/4985921/post370928216/">Р’РЅСѓС‚СЂРµРЅРЅРёРµ С‚РµРЅРё РёР·РѕР±СЂР°Р¶РµРЅРёР№ Рё С‚РµРєСЃС‚Р°</a><br/>Р’РЅСѓС‚СЂРµРЅРЅРёРµ С‚РµРЅРё РёР·РѕР±СЂР°Р¶РµРЅРёР№ Рё С‚РµРєСЃС‚Р°

Р’РЅСѓС‚СЂРµРЅРЅРёРµ С‚РµРЅРё РёР·РѕР±СЂР°Р¶РµРЅРёР№, С‚РµРєСЃС‚Р° С€РёСЂРѕРєРѕ РїСЂРёРјРµРЅСЏСЋС‚СЃСЏ РІ  CSS, РЅРѕ Рё РІ HTML  РёС… С‚РѕР¶Рµ РјРѕР¶РЅРѕ РѕС‚СЂР°Р·РёС‚СЊ.
Р”РѕСЃС‚РёРіР°РµС‚СЃСЏ СЌС‚Рѕ СЃ  РїРѕРјРѕС‰СЊСЋ box-shadow РёР»Рё text-shadow.

1.РўРµРЅСЊ Р±Р»РѕРєР° (box-shadow)

Horizontal offset Рё vertical offset вЂ” СЌС‚Рѕ РіРѕСЂРёР·РѕРЅС‚Р°Р»СЊРЅРѕРµ Рё РІРµСЂС‚РёРєР°Р»СЊРЅРѕРµ СЃРјРµС‰РµРЅРёРµ. РС… Р·РЅР°С‡РµРЅРёСЏ СѓРєР°Р·С‹РІР°СЋС‚, РІ РєР°РєСѓСЋ СЃС‚РѕСЂРѕРЅСѓ РѕР±СЉРµРєС‚ Р±СѓРґРµС‚ РѕС‚Р±СЂР°СЃС‹РІР°С‚СЊ С‚РµРЅСЊ. 
Blur radius - СЌС‚Рѕ СЂР°Р·РјС‹С‚РёРµ, 
spread radius - С‚РѕР»С‰РёРЅР° С‚РµРЅРё.

РћСЃРЅРѕРІРЅС‹Рµ СЌР»РµРјРµРЅС‚С‹ box-shadow РјРѕР¶РЅРѕ СЂР°Р·РѕР±СЂР°С‚СЊ 
РїРѕ РЅРёР¶РµСЃР»РµРґСѓСЋС‰РµРјСѓ СЂРёСЃСѓРЅРєСѓ.

2.РўРµРЅСЊ С‚РµРєСЃС‚Р° (text-shadow)

Р—РЅР°С‡РµРЅРёСЏ Р°РЅР°Р»РѕРіРёС‡РЅС‹Рµ (box-shadow), С‚... <a href="https://www.liveinternet.ru/users/4985921/post370928216/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

Комментировать

« Пред. запись — К дневнику — След. запись »

Страницы: [1] [Новые]

LiveInternetLiveInternet

-Цитатник

-Рубрики

-Новости

-Ссылки

-Музыка

-Приложения

-Всегда под рукой

-Статистика

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