Цветовой перелив /Color overlay

среда, 20 января 2010

19:06

все записи пользователя в сообществе mieze

Ich bin ein Teil von jener Kraft, die stets das Gute will und das Böse macht.

У меня для вас есть кое-что нужное! Может некоторые спрашивали себя, как сделать так, что-бы фон был заполнен фоновой картинкой, но сверху в низ ( с низу в верх, с право на лева итд.)
шёл как-бы такой цветовой залив, которые переходит от тёмного цвета до прозрачного.
как на скриншоте:

я вам покажу как это сделать!

пишем в код:

html {
    background: url('картинка для фона');
}

body {
    background: url('картинка для цветового перелива') top repeat-x;
}

если мы хотим ещё сделать вааааще хитро, и зафиксировать фон, т.е. что-бы фоновая картинка не двигалась, но цветовой перелив двигался, то пишем вот так:

html {
    background-image: url('картинка для фона');background-attachment: fixed;
}

body {
    background: url('картинка для цветового перелива') top repeat-x;
}

надеюсь вам понравится

@темы: дневники, фоновые картинки, diaryCSS, платный сервис, Дизайн, Учеба

URL

Капал расплавленным целлофаном в муравейник. Смешно. Посл... Мне только что звонил мэр г. Кореновска. Приятно так по... Чем дальше в лес, тем больше сюра. :roll: Вчера поздно н...

до чего ж все лень!...ну просто очень лень! По всей Корее через метр на два расставленны автоматы по ... С чаем тут, кстати, беда. Ладно, что за привычным черным ...

Комментарии

20.01.2010 в 19:23

Грин

раны не лечатся, когда ранам рады

ого_0
спасибо

great!

URL

20.01.2010 в 19:32

mieze

Ich bin ein Teil von jener Kraft, die stets das Gute will und das Böse macht.

Liar MD

URL

20.01.2010 в 19:39

rastakawaii

Миру - мир, войне - пипиську!

А можно примеры картинок выложить? Что-то не совсем понятно %)

URL

20.01.2010 в 19:44

mieze

Ich bin ein Teil von jener Kraft, die stets das Gute will und das Böse macht.

ну вот например если вот такая вот цветная, полупрозрачная полосочка с цветовым переливом:

накладывается на вот такой вот фон:

то получается так, как на этом сайте:
пример

URL

20.01.2010 в 19:47

rastakawaii

Миру - мир, войне - пипиську!

Ага, понял) Спасибо

URL

20.01.2010 в 19:52

mieze

Ich bin ein Teil von jener Kraft, die stets das Gute will und das Böse macht.

rastakawaii пожалуйста ;-)

URL

20.01.2010 в 20:55

Listad_V

Спасибо большое :white:

URL

20.01.2010 в 20:59

Walterka

Я то же самое делал, накладывая на боди полупрозначный эддблок.)

URL

20.01.2010 в 22:30

синяк на пятке

Это гениально, спасибо большое-пребольшое! :love:

URL

21.01.2010 в 00:48

mieze

Ich bin ein Teil von jener Kraft, die stets das Gute will und das Böse macht.

рад стараться :shy:

URL

21.01.2010 в 14:13

polishastik

Even on the worst days, there's a possibility for joy.

Я то же самое делал, накладывая на боди полупрозначный эддблок.)
+1))

URL

21.01.2010 в 14:18

Пушистый хикки

you can't stop me lovin' myself

Оо, здорово! теперь не нужно будет с доп.блоками заморачиваться. mieze, спасибо! :inlove:

URL

21.01.2010 в 14:45

mieze

Ich bin ein Teil von jener Kraft, die stets das Gute will und das Böse macht.

накладывая на боди полупрозначный эддблок.) а как это делается?

URL

08.03.2010 в 12:33

Гвенанне

Простите, но не очень поняла. Размер вашей полоски с переливом 1х744 пикселя, на мониторе большего размера она сама будет растягиваться в высоту или как?

Ещё раз извиняюсь. Всё дело в том, что она на одном конце прозрачная! Торможу, пардон. :gigi:

URL

08.03.2010 в 19:45

mieze

Ich bin ein Teil von jener Kraft, die stets das Gute will und das Böse macht.

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

URL

08.03.2010 в 20:08

Гвенанне

mieze, спасибо)

URL

08.04.2010 в 20:43

Пушистый Летучий Боярский.

Виной всему мои сиськи с дерзкими сосками. (с)

спасибо за код, смотрится отлично! но у меня не получилось пустить полоску в других направлениях Оо как это сделать?

URL

09.04.2010 в 00:05

mieze

Ich bin ein Teil von jener Kraft, die stets das Gute will und das Böse macht.

а в каких направлениях надо? если с верху в низ, то попробуйте repeat-y
(за правильность не отвечаю, ибо у меня кончился платный аккаунт и я не могу проверить работает ли оно)

URL

09.04.2010 в 00:33

Пушистый Летучий Боярский.

Виной всему мои сиськи с дерзкими сосками. (с)

нет, я хотел сделать слева направо, или наоборот... сверху вниз оно как раз по вашему коду прекрасно встает)

URL

21.07.2010 в 22:49

Bernadett-e

В море соли и так до чёрта, морю не надо слёз.

Я то же самое делал, накладывая на боди полупрозначный эддблок.)
Walterka а как именно?

Насколько я знаю, IE 6 картинки в формате PNG показывает серым цветом. Как обойти?

URL

22.07.2010 в 14:31

rastakawaii

Миру - мир, войне - пипиську!

Беатрикс, обойти можно сменив IE на что-нибудь вменяемое. Он не понимает прозрачность.

URL

22.07.2010 в 19:44

Bernadett-e

В море соли и так до чёрта, морю не надо слёз.

rastakawaii вообще-то я спрашиваю для сайта, там браузер смотрящему не выберешь)

URL

22.07.2010 в 21:03

rastakawaii

Миру - мир, войне - пипиську!

В любом случае, ИЕ прозрачности не научишь.

URL

23.07.2010 в 00:41

Bernadett-e

В море соли и так до чёрта, морю не надо слёз.

Да, с этим у него плохо.Ладно, решу силами Фотошопа.

URL

24.02.2011 в 21:45

Bernadett-e

В море соли и так до чёрта, морю не надо слёз.

www.css-lab.com/demos/multi-bg/dual-top-bg.html

вот здесь в IE 6 сделана полупрозрачность слоя. Правда, не совсем понимаю, как.

URL


Запомнить

Цветовой перелив /Color overlay

@CSS — стилизация дневников