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

Тема в разделе "Веб-дизайн", создана пользователем acelotuse, 22 ноя 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. acelotuse

    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?
     
  2. JESUS

    JESUS

    Регистр.:
    28 ноя 2006
    Сообщения:
    374
    Симпатии:
    110
    acelotuse нравится это.
  3. Eihwaz

    Eihwaz

    Регистр.:
    7 окт 2007
    Сообщения:
    156
    Симпатии:
    54
    В смысле, без использования изображений? Если да, то пока только с использованием filter, который работает только в IE, и вообще является корявым решением:
    HTML:
    
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#ccffcc', EndColorStr='#ffffff')
    
     
    acelotuse нравится это.
  4. troop3r

    troop3r Постоялец

    Регистр.:
    14 ноя 2009
    Сообщения:
    138
    Симпатии:
    22
  5. acelotuse

    acelotuse

    Регистр.:
    31 мар 2009
    Сообщения:
    312
    Симпатии:
    37
    м-да, я так поковырялся в ссылках и понял, что одними средствами css не обойтись, ибо таким способом можно только для IE сделать, а другие браузеры не поймут. Либо использовать яваскрипт, что не очень хочется. Придется делать картинки и прикручивать через вот такой код приблизительный:
    HTML:
    #block{
    background: #000000 url(images/bg.jpg) repeat-x top left;
    }
     
  6. The Finn

    The Finn Постоялец

    Регистр.:
    30 авг 2009
    Сообщения:
    80
    Симпатии:
    9
    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 нравится это.
  7. acelotuse

    acelotuse

    Регистр.:
    31 мар 2009
    Сообщения:
    312
    Симпатии:
    37
    спасибо, я уже все сделал, поставил картинку шириной в пиксель. Все хорошо отображается. Просто я искал метод без использования картинок одними средствами 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;
    для чего нужно было мне так заморачиваться? Просто хотелось, чтобы при отключении картинок в браузере, не отключался и градиент. Но так как это невозможно, довольствуюсь малым, но в принципе, не жалею. Спасибо всем за помощь.
     
  8. ztztss

    ztztss

    Регистр.:
    22 авг 2006
    Сообщения:
    310
    Симпатии:
    107
    Почему же не получается? Вполне получается вот пример только css и ничего больше:
    http://www.designdetector.com/demos/css-gradients-demo-3.php

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

    acelotuse

    Регистр.:
    31 мар 2009
    Сообщения:
    312
    Симпатии:
    37
    Интересно! И как это реализовать? Что-то не увидел там кода, который это все вытворяет.
    Все браузеры видят такое творение?
     
  10. Eihwaz

    Eihwaz

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