Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Скругленные углы и тени (https://javascript.ru/forum/css-html/15652-skruglennye-ugly-i-teni.html)

seregarem 08.03.2011 14:25

Скругленные углы и тени
 
При нажатии на пункт меню должен подсвечиваться блок текста с скругленными углами и тенью:
function setCur(cur){
	var head = document.getElementById('menu');
	var elems = head.getElementsByTagName('li');
	for(var i=0; i<elems.length; i++)elems[i].className='';
	
	document.getElementById('about_div').className='';
	document.getElementById('service_div').className='';
	document.getElementById('objects_div').className='';
	document.getElementById('reference_div').className='';
	document.getElementById('contacts_div').className='';

	document.getElementById(cur.id).className='current';
	document.getElementById(cur.id+'_div').className='current_div';
}

Т.е. стиль слоя задается динамически. В Opera и Mozilla отображается все нормально. А в хроме либо углы скругляются, либо тень делается, а в IE8 - ни то, ни другое. Пробовал подключить DD_roundies_0.0.2a - не работает. Как можно реализовать и тень, и скругленные углы во всех браузерах?
Сайт - http://spi43.ru

Aetae 08.03.2011 14:45

http://lmgtfy.com/?q=rounded+corners+css

seregarem 08.03.2011 15:35

Гениальный ответ. Проблема в том, что стиль динамически задается - как быть в этом случае?
При одновременном использовании -webkit-border-radius и -webkit-box-shadow не работает.

dmitriymar 08.03.2011 17:54

seregarem,
слабо доки почитать что в каком браузере работает и синтаксис для каждого браузера?
динамически стиль-ну и что мешает его динамически задавать исходя из браузера и задачи?
http://htmlbook.ru/css/box-shadow

seregarem 08.03.2011 18:06

dmitriymar, слабо вопрос внимательнее читать?
Цитата:

Сообщение от seregarem
При одновременном использовании -webkit-border-radius и -webkit-box-shadow не работает.

Для работы в IE подключаю
behavior: url(border-radius.htc);
behavior: url(ie-css3.htc);

Ноль эффекта.

Вот css:
.current_div{
	background:url(../images/bg.gif) repeat;

	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;

	box-shadow:inset #9b9ca1 0 0 15px;
	-moz-box-shadow:inset #9b9ca1 0 0 15px;
	-webkit-box-shadow:inset #9b9ca1 0 0 15px;

	behavior: url(border-radius.htc);
	behavior: url(ie-css3.htc);
}

dmitriymar 08.03.2011 18:48

seregarem,
читать не умеешь однозначно. ну на тебе выборку с той страницы
Internet Explorer не поддерживает свойство box-shadow, взамен можно использовать нестандартное свойство filter:

seregarem 08.03.2011 19:01

я ЗНАЮ, что IE не поддерживает box-shadow!!!!!!!!!!!
filter: фильтр делает только внешнюю тень и это не тень, а смещение.

Еще раз спрашиваю:
1. При одновременном использовании -webkit-border-radius и -webkit-box-shadow не работает. В чем причина? Как исправить?
2. Для работы в IE подключаю
behavior: url(border-radius.htc); 
behavior: url(ie-css3.htc);

Не работает. В чем причина? Как исправить?

розовый слоник 16.03.2011 18:16

написать внизу
not working in IE
:)
а вообще можно конечно сделать много дивов с боков которым указать прозрачность таким образом вы и получите свою тень во всех браузерах. По поводу закругления такая же фигня с дивами.
Пользуйтесь гуглом и будем вам счастье.

kostr 16.03.2011 23:15

Скругленные углы делает rocon:
http://chikuyonok.ru/playground/rocon/

Там скрипт для этого подключен, rounded-corners.js


Часовой пояс GMT +3, время: 17:29.