градиент в css, возможно?

[acelotuse]

У меня вот такой стиль есть:

span.color-6 {
	display: block;
	padding: 10px;
	margin-bottom: 10px;
	border-left: 1px solid #ccc;
	border-top: 1px solid #ccc;
	border-bottom: 2px solid #bbb;
	border-right: 2px solid #bbb;
	color: #156c94;
	background-color: #ccffcc;
}

Он выдает мне блок, однородного цвета #ccffcc. Можно ли подправить этот стиль так, чтобы блок, который получается в результате имел градиент сверху вниз, а именно, вверху имел цвет #ccffcc, а внизу #ffffff?

 

[JESUS]

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

 

[Eihwaz]

У меня вот такой стиль есть:
Можно ли подправить этот стиль так, чтобы блок, который получается в результате имел градиент сверху вниз, а именно, вверху имел цвет #ccffcc, а внизу #ffffff?

В смысле, без использования изображений? Если да, то пока только с использованием filter, который работает только в IE, и вообще является корявым решением:

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#ccffcc', EndColorStr='#ffffff')

 

[troop3r]

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

 

[acelotuse]

м-да, я так поковырялся в ссылках и понял, что одними средствами css не обойтись, ибо таким способом можно только для IE сделать, а другие браузеры не поймут. Либо использовать яваскрипт, что не очень хочется. Придется делать картинки и прикручивать через вот такой код приблизительный:

#block{
background: #000000 url(images/bg.jpg) repeat-x top left;
}

 

[The Finn]

acelotuse, не мучайтесь, создайте полосу шириной в 1 пиксель (либо высотой в 1px, а ширина в зависимости от требований) и далее:

Если у вас есть блок, например 400x400 пикселей, а полоса высотой в 1x300 и вы хотите разместить её вверху блока, то записываем в стили:

.gradbox {
background:#fff url(gradboxbg.png) repeat-x; /* Цвет фона блока следует брать тот, которым заканчивается градиент снизу */
height:300px;
width:400px; /* Заливаем градиентом весь верхний участок блока */
}

И следовательно, если вы хотите расположить градиент внизу блока:

.gradbox {
background:#ccffcc url(gradboxbg.png) repeat-x bottom left; /* В этом случае цвет фона блока следует брать тот, которым начинается градиент сверху */
height:300px;
width:400px; /* Заливаем градиентом весь нижний участок блока */
}

 

[acelotuse]

спасибо, я уже все сделал, поставил картинку шириной в пиксель. Все хорошо отображается. Просто я искал метод без использования картинок одними средствами css. Но как оказалось, просто через css это не получается.
В общем, сделал картинку в фотошопе и создал такой стиль:

span.color-6 {
	background: #e6fde6 url('../images/color-6.png') repeat-x 0 top;
	border-left: 1px solid #ccc;
	border-top: 1px solid #ccc;
	border-bottom: 2px solid #bbb;
	border-right: 2px solid #bbb;
	color: #156c94;

для чего нужно было мне так заморачиваться? Просто хотелось, чтобы при отключении картинок в браузере, не отключался и градиент. Но так как это невозможно, довольствуюсь малым, но в принципе, не жалею. Спасибо всем за помощь.

 

[ztztss]

... Просто я искал метод без использования картинок одними средствами css. Но как оказалось, просто через css это не получается....

Почему же не получается? Вполне получается вот пример только css и ничего больше:

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

И кстати честные градиенты уже появились в спецфикации CSS3 и поддерживаются например Firefox 3.6

 

[acelotuse]

Интересно! И как это реализовать? Что-то не увидел там кода, который это все вытворяет.
Все браузеры видят такое творение?

 

[Eihwaz]

2 acelotuse: Самые используемые в народе браузеры пока не поддерживают. Разве что последние/альфа версии, ночные сборки. В CSS3 много вкусных вещей — одна поддержка нескольких фоновых изображений чего стоит, но пока приходится искать альтернативу.