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

Статус
В этой теме нельзя размещать новые ответы.

acelotuse

Профессор
Регистрация
31 Мар 2009
Сообщения
312
Реакции
37
У меня вот такой стиль есть:
HTML:
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?
 
У меня вот такой стиль есть:
Можно ли подправить этот стиль так, чтобы блок, который получается в результате имел градиент сверху вниз, а именно, вверху имел цвет #ccffcc, а внизу #ffffff?
В смысле, без использования изображений? Если да, то пока только с использованием filter, который работает только в IE, и вообще является корявым решением:
HTML:
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#ccffcc', EndColorStr='#ffffff')
 
м-да, я так поковырялся в ссылках и понял, что одними средствами css не обойтись, ибо таким способом можно только для IE сделать, а другие браузеры не поймут. Либо использовать яваскрипт, что не очень хочется. Придется делать картинки и прикручивать через вот такой код приблизительный:
HTML:
#block{
background: #000000 url(images/bg.jpg) repeat-x top left;
}
 
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; /* Заливаем градиентом весь нижний участок блока */
}
 
спасибо, я уже все сделал, поставил картинку шириной в пиксель. Все хорошо отображается. Просто я искал метод без использования картинок одними средствами css. Но как оказалось, просто через css это не получается.
В общем, сделал картинку в фотошопе и создал такой стиль:
HTML:
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;
для чего нужно было мне так заморачиваться? Просто хотелось, чтобы при отключении картинок в браузере, не отключался и градиент. Но так как это невозможно, довольствуюсь малым, но в принципе, не жалею. Спасибо всем за помощь.
 
... Просто я искал метод без использования картинок одними средствами css. Но как оказалось, просто через css это не получается....
Почему же не получается? Вполне получается вот пример только css и ничего больше:


И кстати честные градиенты уже появились в спецфикации CSS3 и поддерживаются например Firefox 3.6
 
Интересно! И как это реализовать? Что-то не увидел там кода, который это все вытворяет.
Все браузеры видят такое творение?
 
2 acelotuse: Самые используемые в народе браузеры пока не поддерживают. Разве что последние/альфа версии, ночные сборки. В CSS3 много вкусных вещей — одна поддержка нескольких фоновых изображений чего стоит, но пока приходится искать альтернативу.
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху