вход

Тень и цвет в 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);

Нашли это полезным? Поделитесь с другими:
Не останавливайтесь, читайте дальше:
Оставить комментарий

Статья → Тень и цвет в CSS3

Правила комментирования

  1. Кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.