Gradient & Ornament

[UDFj]

Речь пойдёт об одновременном наложении градиентной заливки и орнамента, прописанного картинкой.
В посте по ссылке:

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

уж простите великодушно, но, ввела вас в заблуждение, в котором и сама пребывала. По неопытности, ранее опрометчиво полагала, что градиент не совместим с какими-либо картинками в атрибуте background. Совершенно случайно обнаружила возможность наложения и фоновой картинки и градиента, разумеется того, который поддерживается браузером (смотрите всё в тот же пост по ссылке).

Code:

#post190719794 .paragraph {margin: 5px !important; padding: 5px !important; background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.1) 100%), url('/userdir/3/1/4/0/3140767/79174861.png') repeat; background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 100%), url('/userdir/3/1/4/0/3140767/79174861.png') repeat; background: -o-linear-gradient(left, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 100%), url('/userdir/3/1/4/0/3140767/79174861.png') repeat; background: linear-gradient(left, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 100%), url('/userdir/3/1/4/0/3140767/79174861.png') repeat; box-shadow: 0px 0px 10px 0px rgba(115, 94, 94, 0.7); }

Разбираем код:

— #post190719794 .paragraph - идентификатор элемента. В данном примере - отдельно взятого поста в дневнике. Можно прописывать для любого элемента.
— background - атрибут, определяющий оформление фона элемента.

Особенности:

— чтобы эффект работал, в CSS-код оформления соответствующего идентификатора необходимо прописывать атрибут background с градиентом, в данном случае линейным, и фоновой картинкой для каждого браузера отдельно. Утомительно, и всё же, утончённого и требовательного перфекциониста не остановят препятствия в достижении прекрасного эффекта. Итак, например, для FireFox:

background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.1) 100%), url('/userdir/3/1/4/0/3140767/79174861.png') repeat;

и для Opera:

background: -o-linear-gradient(left, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 100%), url('/userdir/3/1/4/0/3140767/79174861.png') repeat;

— если картинку прописать перед градиентом, то получится такой эффект:

То есть, картинку над градиентом будет видно в любом случае, если её цвет не совпадает с цветом фона и они при этом не "сольётся" с ним.

Code:

#post190719794 .paragraph {margin: 5px !important; padding: 10px !important; background: url('/userdir/3/1/4/0/3140767/79175749.png') repeat, -moz-linear-gradient(left, rgba(115, 94, 94, 0.1) 0%, rgba(0, 0, 0, 0.8) 100%); background: url('/userdir/3/1/4/0/3140767/79175749.png') repeat, -webkit-linear-gradient(left, rgba(115, 94, 94, 0.1) 0%, rgba(0, 0, 0, 0.8) 100%); background: url('/userdir/3/1/4/0/3140767/79175749.png') repeat, -o-linear-gradient(left, rgba(115, 94, 94, 0.1) 0%, rgba(0, 0, 0, 0.8) 100%); background: url('/userdir/3/1/4/0/3140767/79175749.png') repeat, linear-gradient(left, rgba(115, 94, 94, 0.1) 0%, rgba(0, 0, 0, 0.8) 100%); box-shadow: 0px 0px 10px 0px rgba(115, 94, 94, 0.7); }

Возникли вопросы? Пожалуйте в комментарии к посту. Всенепременно и с удовольствием поделюсь )
Много курю. Карр не берёт. Сама - Карр. Вспомнился недавно просмотренный фильм "Транс". Разве что изолировать месяца на три где-то в местности без растительности, там, где даже саксаулы не растут. Ах, какая же чудная игрушка этот CSS! )

запись создана: 12.08.2013 в 01:59

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

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

Comments

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

Вы гениальны... *восхитился, поаплодировал*

[UDFj]

Кареглазый демон,
*скромно улыбнулась* Благодарю вас, Кареглазый Демон ) Ваши слова поддерживают и вдохновляют )

[смольник]

К сожалению, пример я почти не вижу на всём тёмном. Примерно только.

[UDFj]

Ловчий->, да мне сегодня в у-мейл приблизительно о том же написали. Буду что-то думать. Нет., ну если выключить в комнате свет и оставить только тусклый ночничок, то даже что-то видно ) А в своей ленте скрины можешь нормально рассмотреть? Если что, перезалью поярче и покрупнее. Вот понимаешь, "примерно" и задумывала. Если бы сделала ярче, на фоне картинки орнамента не читался бы текст, примерно как на втором скрине.

[смольник]

UDFj, не нужно, я напрягся и вполне разглядел.

[UDFj]

Ловчий->, хорошо ) Правда, настройки самого поста видны только в моём дневнике. Если скрин открыть в новой вкладке, то картинка приобретёт свои реальные размеры, то есть станет крупнее. Всё же подумаю над тем, как сберечь зрение читателей.