Градиентная заливка блоков средствами CSS

[UDFj]

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

ЛИНЕЙНЫЙ градиент до и после наведения мышки

Скрины:

Реализуется этот эффект атрибутом linear-gradient. Ссылка на htmlbook с подробным описанием и визуализацией некоторых особенностей - linear-gradient.
Код для примера в скринах:

#post186927558.singlePost {background: -moz-linear-gradient(top, rgba(117, 83, 83, 0.5) 0%, rgba(117, 83, 83, 0.2) 30%, rgba(117, 83, 83, 0.2) 71%, rgba(117, 83, 83, 0.5) 100%) !important; background: -webkit-linear-gradient(top, rgba(117, 83, 83, 0.5) 0%, rgba(117, 83, 83, 0.2) 30%, rgba(117, 83, 83, 0.2) 71%, rgba(117, 83, 83, 0.5) 100%) !important; background: -o-linear-gradient(top, rgba(117, 83, 83, 0.5) 0%, rgba(117, 83, 83, 0.2) 30%, rgba(117, 83, 83, 0.2) 71%, rgba(117, 83, 83, 0.5) 100%) !important; background: linear-gradient(top, rgba(117, 83, 83, 0.5) 0%, rgba(117, 83, 83, 0.2) 30%, rgba(117, 83, 83, 0.2) 71%, rgba(117, 83, 83, 0.5) 100%) !important; margin: 20px 20px 20px 20px !important; padding: 20px 20px 20px 20px !important; box-shadow: 0 0 10px 10px rgba(117, 83, 83, 0.3) !important; -webkit-transition: all 2s; -moz-transition: all 2s; -o-transition: all 2s; transition: all 2s; }
#post186927558.singlePost:hover {box-shadow: 0 0 20px 10px rgba(117, 83, 83, 0.8) !important; }

Пояснения по коду аха, код становится такииим "пушистым" ):

В селекторе #post186927558.singlePost прописываются свойства элемента ДО наведения мышки:
— Синтаксис атрибута "линейный градиент":
background: linear-gradient(top, rgba(117, 83, 83, 0.5) 0%, rgba(117, 83, 83, 0.2) 30%, rgba(117, 83, 83, 0.2) 71%, rgba(117, 83, 83, 0.5) 100%) !important;

1) !important - в конце НЕ обязателен, просто в данном примере свойства прописывались для отдельного поста.
2) Для браузеров старых версий в свойства селектора прописываются дополнительно к background: linear-gradient(___) ещё такие с теми же значениями:
- Firefox: background: -moz-linear-gradient(___),
- Chrome: background: -webkit-linear-gradient(___),
- Opera: background: -o-linear-gradient(___).
3) top - направление градиентной заливки. Другие примеры смотрите по ссылке вверху на htmlbook.
4) Как видно, в синтаксисе прописаны 4-е цвета с их относительными позициями в %. НО, можно оставить 2 или 3, можно и 5. Позиции можно прописать в пикселях. Тут решаете вы сами.
5) Формат заданного цвета можно брать как стандартный #______, так и rgba(___, ___, __, ___), который мне больше нравится, хотя и длиннее, т.к. в последнем параметре позволяет задавать прозрачность для цвета.

— В остальных атрибутах прописаны свойства:

1) margin: - отступы от предка (родителя) - отступы от родительских элементов в ленте. Это можно понять по тени, которая прописана в ту область отступов.
2) padding: - отступы до потомка (дочернего элемента), по сути - отступы до содержимого внутри блока. Ну, чтобы было красиво.
3) box-shadow: - тень для блока, которая потом поменяется после наведения мышки.
4) transition: - динамика и временные параметры изменений тени после наведения мышки.

В селекторе #post186927558.singlePost:hover - свойства элемента ПОСЛЕ наведения мышки:
— только одно свойство - box-shadow: - новый формат тени.

РАДИАЛЬНЫЙ градиент до и после наведения мышки

Скрины:

Ещё один, на мой взгляд, более интересный способ градиентной заливки с описанием по ссылке radial-gradient.
Код для примера в скринах:

 #post186927558.singlePost {background: -moz-radial-gradient(30px 20px, farthest-side, rgba(117, 83, 83, 0.4), rgba(0,0,0,0.8)) !important; background: -webkit-radial-gradient(30px 20px, farthest-side, rgba(117, 83, 83, 0.4), rgba(0,0,0,0.8)) !important; background: -o-radial-gradient(30px 20px, farthest-side, rgba(117, 83, 83, 0.4), rgba(0,0,0,0.8)) !important; background: radial-gradient(30px 20px, farthest-side, rgba(117, 83, 83, 0.4), rgba(0,0,0,0.8)) !important; margin: 20px 20px 20px 20px !important; padding: 20px 20px 20px 20px !important; box-shadow: 0 0 20px 10px rgba(117, 83, 83, 0.3) !important; -webkit-transition: all 2s; -moz-transition: all 2s; -o-transition: all 2s; transition: all 2s; }
  #post186927558.singlePost:hover {box-shadow: 0 0 20px 10px rgba(117, 83, 83, 0.8) !important; }

Этот атрибут детально расписывать не стану. По ссылке выше есть вся необходимая информация. А будут вопросы, обращайтесь сюда в комменты )

ОСОБЕННОСТИ

Кроется в этих атрибутах небольшой подвох: если для какого-либо блока нужно прописать фоновую картинку, рисованную рамку, например, или вензель в конце или в начале поста, то этот атрибут не будет работать. Т.е. атрибут _background: url('');_ не совместим с со свойствами атрибута градиентной заливки.

запись создана: 27.04.2013 в 13:29

@настроение: Оставить что-то, надеюсь, полезное.

@темы: без подтекста, CSS, деперсонализировано!, CSS-примеры

Comments

[Кареглазый Демон]

Эффектно и как всегда очень детально и доходчиво расписано... Так и хочется применить.

[UDFj]

Спасибо за отзыв )) Очень приятно, когда работу ценят. Извините, ответить раньше не было возможности. Ещё немного сил наберусь и займусь недоработанными идеями.
Как вы смотрите на то, чтобы перейти на "ты"? )

[Кареглазый Демон]

Всегда пожалуйста) Для меня это довольно интимный переход, так что давайте повременим если можно.

[UDFj]

давайте повременим если можно.

Муз-вдохновитель, конечно, безусловно ) Ну а если решите, просто скажите, в любое время )

[Кареглазый Демон]

Хорошо. Возможно со временем.

[UDFj]

Просто я вас очень хорошо понимаю ) Мне тоже порой трудно пойти на подобный шаг.

[Кареглазый Демон]

*воспринимает как комплимент*