Подскажите советом как сверстать градиент?

[faynoit]

Вобщем есть такое чудо. И никак не приложу ума, как его лучше и правильнее сверстать.

Спасибо за любую подсказку.

Изображение

[Serlutin]

Что вас смущает больше всего?

Я бы градиент сделал картинкой и прижал бы его к верху. Снизу бы задал просто синий цвет.

А кто-нибудь сделал бы вот так:

background: #0F57A3; /* old browsers */
background: -moz-linear-gradient(top, #0F57A3 46%, #0372E8 100%); 
background: linear-gradient(top, #0F57A3 46%, #0372E8 100%);
background: o-linear-gradient(top, #0F57A3 46%, #0372E8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(46%,#0F57A3), color-stop(100%,#0372E8)); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0F57A3', endColorstr='#0372E8',GradientType=0 ); 

[ovemnengeam]

+1

[swetlana]

картинка-то вырвана из контекста.

Задача явно чуть сложнее, чем просто разместить градиент.

Покажите, пожалуйста, макет полностью.

[faynoit]

Что вас смущает больше всего?

Я бы градиент сделал картинкой и прижал бы его к верху. Снизу бы задал просто синий цвет.

Спасибо. А можно подробнее про картинку. Или на урок какой нить перенаправить?

[Serlutin]

Спасибо. А можно подробнее про картинку. Или на урок какой нить перенаправить?

Да, а что там рассказывать.

Делаем картинку шириной в 2px и высотой, которой вам нужно. Дальше блоку прописываем такие свойства:

background: #0F57A3; url(картинка.gif) top left repeat-x;

Что всё это значит читаем здесь: background

[faynoit]

Да, а что там рассказывать.

Делаем картинку шириной в 2px и высотой, которой вам нужно. Дальше блоку прописываем такие свойства:

background: #0F57A3; url(картинка.gif) top left repeat-x;

Что всё это значит читаем здесь: background

так в данном случаем у меня должно быть четыре картинки:

1. Картинка, где будет название (красное-синее)

2. Картинка с левым краем (где тень и закругление внизу)

3. Картинка с центром (синяя в 1пиксель)

4. Картинка с правым краем (где тень и закругление внизу)

Тогда возникает вопрос, а как оно тогда будет тянуться вниз?

[swetlana]

так в данном случаем у меня должно быть четыре картинки:

совершенно верно.

Но это же непотребно.

Потому и говорю: покажите макет целиком.

Наверняка можно решить проще.

[faynoit]

Дело в том, что это и есть левый блок. Он в отдельном диве и в нем надо уже делать то, что указано на картинке

[swetlana]

автор, если вы сопротивляетесь, вам вряд ли кто помочь сможет против вашей воли.

[faynoit]

автор, если вы сопротивляетесь, вам вряд ли кто помочь сможет против вашей воли.

Можно в личку я вам перешлю тогда?

[rus]

можно еще воспользоваться этим сервисом и не мучиться.

[swetlana]

Можно в личку я вам перешлю тогда?

нельзя.

Личка работает только у пользователей, набравших не менее 30 постов.

Можно же на хостинг картинок выкинуть. Например на itmages.ru. И прямо ссылку сюда, в тему.

[faynoit]

Нашел такое решение:

background: #999; /* for non-css3 browsers */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0d5cb2', endColorstr='#0371e9'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#0d5cb2), to(#0371e9)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #0d5cb2,  #0371e9); /* for firefox 3.6+ */
width: 223px;

Не работает в опере, а во всех остальных идеально. Может есть подобное решение для этого браузера?

Нашел решение здесь:

Великий Хабр

Но не понимаю что такое:

Рисуем маленький градиент в фотошопе, подключаем его через data:URI и масштабируем на размер блока!

Edited March 16, 2011 by faynoit

[swetlana]

это ненужный гемор.

Нормальные варианты:

• традиционная картинка + background-size
• svg

[faynoit]

это ненужный гемор.

Нормальные варианты:

• традиционная картинка + background-size
• svg

Так если картинка, она тянуться не будет. И градиент как сделать картинкой?

[swetlana]

Так если картинка, она тянуться не будет.

Читаем внимательно: http://htmlbook.ru/css/background-size

И градиент как сделать картинкой?

Это прикол такой? Но судя по наличию такого рода тем: http://forum.htmlbook.ru/index.php?showtopic=16868 — может и нет. Прочитайте, ознакомьтесь.

[faynoit]

Все. Извините за тупизм. Но я просто не знал про свойство background-size. Спасибо

[swetlana]

и опять же: внимательно смотрите на список браузеров, поддерживающих это свойство.

Чтобы не было неожиданностей, когда в старых осликах что-то не работает.

[wanntuzz]

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

А че!? Хотя бы попробуй! Зато кросбраузерно!

[faynoit]

Да как то не айс. Слишком сложно