Градиент текста с помощью css

[ValentoS]

Вот сайт http://teplee.com/

Сделал средствами css перелив полосок меню и разделов по бокам. Но оказалось что коректно работает только в мозиле, в опере без изменений, в ИЕ вообще цвет другой и градиент не такой как задумывалось.

вот код:

div#menu {
	position: relative;
	width: auto;
	height: 36px; 
	background-color: #D12E03; 
	background: -moz-linear-gradient(#671402, #FF4500, #671402);
		background: -webkit-gradient(linear, 0 0, 0  100%, from(#671402), to(#671402), color-stop(0.5, #FF4500));
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00BBD6', endColorstr='#EBFFFF');

}

Что не так сделал подскажите.

[psywalker]

В опере градиент не пашет. А в ИЕ - это уж настрой цвета, и ты забыл прозрачность впереди.

Вот пример:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#500000FF, endColorstr=#50FFFFFF);
		-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#50007f00, endColorstr=#50007f00);

[ValentoS]

Извините за мое нубство, но я очень слабо понимаю в html и css если можно дайте код который мне нужно заменить на мой что бы хотя бы в ИЕ работало, для оперы у меня стили есть старые и прийдется нверное пользователям этого браузера терпеть эти неудобства.

[Selen]

Извините за мое нубство, но я очень слабо понимаю в html и css если можно дайте код который мне нужно заменить на мой что бы хотя бы в ИЕ работало, для оперы у меня стили есть старые и прийдется нверное пользователям этого браузера терпеть эти неудобства.

Для реализации градиента (и не только) в ИЕ 6+ тебе необходим PIE. http://css3pie.com/ Качай, подключай, пробуй

[psywalker]

Для реализации градиента (и не только) в ИЕ 6+ тебе необходим PIE. http://css3pie.com/ Качай, подключай, пробуй

Ну начинается. Вот молодёжь пошла, без кастылей не может жить уже. Ужас, что твориться.

ValentoS

Если хочешь, чтобы за тебя написали код, свистни мне на почту, там и поговорим. psywalker09@gmail.com

[Selen]

Ну начинается. Вот молодёжь пошла, без кастылей не может жить уже. Ужас, что твориться.

ValentoS

Если хочешь, чтобы за тебя написали код, свистни мне на почту, там и поговорим. psywalker09@gmail.com

Ну почему сразу "кастыли" ?)) PIE помогает достаточно легко реализовать скругление, тени и градиент на ослике. К тому же сохраняется семантика HTML кода. Не нужно нагромождать код громоздкими конструкциями блоков, что бы получить тень или скругление с помощью картинок или джавы. А обернув отдельный стиль для ИЕ (вместе с PIE) в условный комментарий, можно спокойно работать в нормальных браузерах. Научиться ИЕ понимать скругление/тень/градиент без PIE, удаляем всего одну строчку CSS кода и вуаля - чистый красивый код без "кастылей") Самое главное HTML код не нужно будет чистить от ненужных, вложенных друг в дружку блоков.

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

Из двух зол я выбираю меньшее) Если я не прав, готов выслушать критику и замечания

Edited February 13, 2011 by Selen

[psywalker]

Ну почему сразу "кастыли" ?)) PIE помогает достаточно легко реализовать скругление, тени и градиент на ослике. К тому же сохраняется семантика HTML кода. Не нужно нагромождать код громоздкими конструкциями блоков, что бы получить тень или скругление с помощью картинок или джавы. А обернув отдельный стиль для ИЕ (вместе с PIE) в условный комментарий, можно спокойно работать в нормальных браузерах. Научиться ИЕ понимать скругление/тень/градиент без PIE, удаляем всего одну строчку CSS кода и вуаля - чистый красивый код без "кастылей") Самое главное HTML код не нужно будет чистить от ненужных, вложенных друг в дружку блоков.

Из двух зол я выбираю меньшее) Если я не прав, готов выслушать критику и замечания

Ты не прав. Критика простая, как дважды два. Твой любимый кастыль ещё сырой и может создать большие проблемы, начиная с отказа работы некоторых свойств css, ломая вёрстку, и заканчивая перебиванием других скриптов, например пнг-фиксов. Лучше сделать пару лишних обёрток, чем потом мучатся, всё перевёрстывая.

Я бы своих детей к нему близко не подпустил)

sigma77 придёт, расскажет тебе всё.

[sigma77]

sigma77 придёт, расскажет тебе всё.

Рассказываю.

Помимо вышесказанного данный скрип тут просто не нужен.

Задача стоит градиент для ИЕ. Для этого существует фильтр градиента от того же МС, который вполне успешно справляется со своей задачей. Бывают нюансы, но этих же нюансов в том же PIE на порядок больше.

Но даже не в этом дело. Конечно можно использовать градиентные штучки, но в данном случае я бы обошлась обычным бекграундом. Сильного масштабирования строка меню не подразумевает. А ресурсов на загрузку 2-х картинок браузер потратит меньше, чем на отрисовку градиента. И никаких оберток тут не нужно.

[Selen]

Ты не прав. Критика простая, как дважды два. Твой любимый кастыль ещё сырой и может создать большие проблемы, начиная с отказа работы некоторых свойств css, ломая вёрстку, и заканчивая перебиванием других скриптов, например пнг-фиксов. Лучше сделать пару лишних обёрток, чем потом мучатся, всё перевёрстывая.

Я бы своих детей к нему близко не подпустил)

sigma77 придёт, расскажет тебе всё.

Ок)

Твоя критика справедливая. Я еще не сталкивался с конфликтами PIE. К тому же, вариант с PIE прочитал на одном, достаточно информативном, сайте, посвященном верстке. И из нескольких вариантов (включая картинки) рекомендовали PIE.

Спасибо за совет. Приму к сведению

Edited February 13, 2011 by Selen

[ValentoS]

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#500000FF, endColorstr=#50FFFFFF);
		-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#50007f00, endColorstr=#50007f00);

В css файле код не подсвечивается, что не так?

[SelenIT]

Нестандартные свойства, чисто MS-овские, редактор вправе их не знать. А старый вариант (который без префикса) еще и не подчиняется стандартному CSS-синтаксису (во втором варианте, насколько я в курсе, нужны еще кавычки — тогда он будет подчиняться). Поэтому эти вещи и рекомендуют выносить в отдельный файл, только для IE соответствующих версий.

[ValentoS]

А можно в коде показать что в какие кавычки нужно вносить?

[ValentoS]

В принципе разобрался, остался вопрос о реализации такого эффекта в опере

[SelenIT]

что в какие кавычки нужно вносить?

Значение свойства целиком:

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#50007f00, endColorstr=#50007f00)";