Тень и цвет в CSS3


Коснёмся немного основ новых свойств : text-shadow, box-shadow, и border-radius. Эти свойства CSS3 обычно используются для улучшения формата, как правило чтобы создать теньили закруглённые углы, и очень хорошо если Вы знаете их и используете.

RGBA

Первые три значения задают значения цвета RGB, а последнее значение задаёт прозрачность (0 = прозрачный и 1 = непрозрачный).

RBGA может применяться к любым свойствам, связанных с цветом например, цвет шрифта, цвет границы, цвет фона, цвет тени, и т.п.

Тень текста

Тень текста структурирована в следующем порядке :x-смещение, y-смещение, размытие, и цвет;

Отрицательное значение x-отступаотодвинет тень влево. Отрицательное значение y-отступаотодвинет тень вверх. Также можно использовать значения RGBA для цвета тени.

Вы также можете накладывать несколько теней. Для этого нужно просто задать список этих теней (разделённых запятыми). Следующий пример использует двойное объявление тени, и позволяет создать эффект нажатия (1 пиксел вверх и один вниз):

text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;

Радиус бордера (границы)

Описание для радиуса бордера похоже на описание свойств paddingи margin(например border-radius: 20px). для того, чтобы браузеры отображали радиус бордера, добавьте "-webkit-" перед этими свойствами для webkit браузеров и "-moz-" для Firefox.

Вы можете задать для каждого из углов свой значение. Заметьте что имена свойств для браузеров не одинаковые.

Тень прямоугольника

Структура тени для прямоугольника такая же как и для тени текста:x-смещение, y-смещение, размытие, и цвет;

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

-moz-box-shadow: 
-2px -2px 0 #fff, 
2px 2px 0 #bb9595, 
2px 4px 15px rgba(0, 0, 0, .3);

Реклама
Поделиться
Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!

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

девять + 5 =