Лента Каталог Файлы Форумы Услуги
ОсновноеRadiotalkПользовательское
Программирование
6   •   Посмотреть все темы

Градиент и цвет символов

 
1

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

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

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

4619
Web3r @Web3r
Про градиент - есть одна реализация, но она только вертикальным стилем.
**********

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

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

1555
Алексей @TheDark
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

Отредактировано TheDark - 12.08.2011
4619
Web3r @Web3r
********** - Тут как-то попроще... Да и кода меньше...

1555
Алексей @TheDark
Weber пишет:

********** - Тут как-то попроще... Да и кода меньше...

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

Отредактировано TheDark - 12.08.2011