Вы не зашли.

#1 

TheDark
Знаток
Зарегистрирован: 2010-08-01
Сообщений: 1552
На форуме: 531 час.
Репутация: 111 (88%) ±
Инфо  Написать

Добрый вечер. Вот задался целью найти решение для сайта на css. Вобщем нужен градиент, да так, чтобы не картинкой, а стилями задавался. Хорошо бы, чтобы во всех браузерах корректно отображался (:

Еще видел где-то решение, но вот где уже не вспомню. Суть такая: стилями задается параметры, чтобы каждая первая буква абзаца была определенного цвета. Вобщем искал, но не нашел даже ничего близкого к этому.

Вобщем, надеюсь на вашу помощь) Заранее благодарю.

Неактивен

#2 

Web3r
Мастер
Зарегистрирован: 2008-05-22
Сообщений: 4616
На форуме: 2162 час.
Репутация: 508 (98%) ±
Инфо  Вебсайт  Написать

Про градиент - есть одна реализация, но она только вертикальным стилем.
http://www.webdesignerwall.com/demo/css-gradient-text/

Про первую букву абзаца: либо заключить каждую первую букву в span:
p span{...}

Либо заюзать псевдокласс first-letter:
p:first-letter{...}

Неактивен

#3 

TheDark
Знаток
Зарегистрирован: 2010-08-01
Сообщений: 1552
На форуме: 531 час.
Репутация: 111 (88%) ±
Инфо  Написать

Сообщение от Weber:

Про градиент - есть одна реализация, но она только вертикальным стилем.
Про первую букву абзаца: либо заключить каждую первую букву в span:
p span{...}

Либо заюзать псевдокласс first-letter:
p:first-letter{...}

с первой буквой разобрался) спасибо)

А вот градиент мне нужен не текста, а блока.

Собственно, решение для градиента блока:

<div id="block">SomeText</div>

#block {
background: rgb(219,232,246);
background: -moz-linear-gradient(top, rgb(219,232,246) 0%, rgb(246,249,253) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(219,232,246)), color-stop(100%,rgb(246,249,253)));
background: -webkit-linear-gradient(top, rgb(219,232,246) 0%,rgb(246,249,253) 100%);
background: -o-linear-gradient(top, rgb(219,232,246) 0%,rgb(246,249,253) 100%);
background: -ms-linear-gradient(top, rgb(219,232,246) 0%,rgb(246,249,253) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbe8f6', endColorstr='#f6f9fd',GradientType=0 );
background: linear-gradient(top, rgb(219,232,246) 0%,rgb(246,249,253) 100%);
}

Вобщем, первой строчкой стилей задаем фоновый цвет, для старых браузеров, которые стандарты CSS 3 не поддерживают.
Дальше задаем два цвета: синий - это верхний цвет, красный - это нижний цвет.

В этом решении необходимо использовать фильтры (для IE) поэтому нужно задать верхний и нижний html цвета.

Проверено во всех современных браузерах, включая IE 7, 8

Отредактированно DarkLive (2011-08-12 00:07:00)

Неактивен

#4 

Web3r
Мастер
Зарегистрирован: 2008-05-22
Сообщений: 4616
На форуме: 2162 час.
Репутация: 508 (98%) ±
Инфо  Вебсайт  Написать

http://recens.ru/css/css3_gradient.html - Тут как-то попроще... Да и кода меньше...

Неактивен

#5 

TheDark
Знаток
Зарегистрирован: 2010-08-01
Сообщений: 1552
На форуме: 531 час.
Репутация: 111 (88%) ±
Инфо  Написать

Сообщение от Weber:

http://recens.ru/css/css3_gradient.html - Тут как-то попроще... Да и кода меньше...

да, и какбы ничего, что этот вариант Оперой не поддерживается...

Отредактированно DarkLive (2011-08-12 00:42:39)

Неактивен

[ Generated in 0.006 seconds, 11 queries]