[Решено] Как сделать скругленные углы?

[AlexAGF]

Ссылки нет. Все на Денвере.
Можно так:
- ставим Joomla без демо-данных
- кладем htc-файл в корень
- в index.php каждого шаблона добавляем:

Код:

<style type="text/css">
.round {
   background: #FFF;
   border: #ADADAD 1px solid;
   padding: 3px;
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -khtml-border-radius: 5px;
   behavior: url('/border-radius.htc');
}
</style>

- создаем статью на главной
- вставляем туда любую картинку с классом round

Получаем в разных шаблонах в IE:
http://s41.radikal.ru/i092/1006/11/a1a91c029618.png
http://s002.radikal.ru/i199/1006/b8/d1b0e595a830.png
http://i062.radikal.ru/1006/a6/1494e27ed098.png

Т.е. по шаблону beez видно, что бордюры таки отображаются и скругляются,
только улетают куда-то от заданной картинки.

А вот почему и как это лечить - вопрос.

[AlexAGF]

В общем, проблему решить так и не удалось.
Решил просто отказаться от скругления для IE.

[hgns]

В общем, проблему решить так и не удалось.
Решил просто отказаться от скругления для IE.

хак то работает автономно, не в Joomla, надо всё таки докапаться до истины !

[vilix]

Люди посмотрел все способы, понятно если создавать свой класс. А если классы уже объявлены как используя CSS скруглить, не используя css3 . и не используя тэги <b> (вообще не понимаю как этот способ применить для скругления бордеров модулей джомлы).

[vilix]

http://ab-w.net/CSS/CSS-roundet-corners.php вот тут нашел интересное решение в конце статьи," Скругление углов в CSS для всех видов браузеров" , вот такое решение мне подходит, но где в шаблоне(html) джомлы найти таблицу или див  в котором появляются модули?
мб можно в CSS картинки так вставить не лазя в HTML ?

P.S я просто на низком уровне знаю все это.

[intcorp]

Подскажите в какой программе рисовать картинки углов, ато пробую рисовать в корале, вроде и цвета нормально подбираю и во время сохранения  привью нормальная картинка, а готовый jpg неудовлетворительного качества - цвета значительно искажаются. Если экспортировать psd, то в фотошопе тоже видны несоответствия

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

[danik.html]

гы, зачем ж так извращаться ! Для изображений подобного рода нужно  использовать png.

[intcorp]

У png будут такие же не соответствия цвета как и у jpg)
Не вижу смысла использовать png там, где прозрачность как зайцу стоп сигнал и потом еще извращаться с исправлением прозрачности в 6 осле (речь идет конкретно о выложеном примере, где идет рамка на обычном белом фоне) или совать себе на сайт нотисы

Информируем пользователей сайта об их проблемах с браузером. Вставляем код в шаблон:
<!--[if IE 6]><script src="http://ie-note.googlecode.com/hg/ie-note.js"></script><![endif]-->

[danik.html]

В данном случае использовать Jpg абсолютно нецелесообразно. Он не подходит для подобных случаев. Он подойдет для фотографий, плавных градиентов и тд, но не для мелочи или картинок с ограниченным набором цветов, четкими краями и монотонными областями, преимущественно прямоугольными.
Вы похоже не знаете что у ие6 проблемы только с php24 и вклченным альфа-каналом.
Вас никто не заставляет сохранять в пнг24, и вас никто не заставляет включать прозрачность.
Алгоритм jpg не гарантирует сохранение цветов, и является сжатием с потерями, а значит с артефактами.
png же предлагает безпотерьное сжатие(пнг8 органичивает палитру)

[danik.html]

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

[Bogdan808]

z-index'ы не использую вообще.
Пропадает во всех ослах.

А позиционирование хоть ставите?*

[danik.html]

Код:

мб можно в CSS картинки так вставить не лазя в HTML ?

Можно, использую псевдоэлементы :before и :after  и свойство content: url(path_to_image)  а так же еще задать и фон этим псевдоэлементам. В итоге можно реализовать резиновые скругленные блоки не городя в HTML кучу левых элеметов. Сработает только если блок на монотонном фоне. Для ие6 и 7 нужно применить замечательный фикс IE8.js

[Bogdan808]

Для ие6 и 7 нужно применить замечательный фикс IE8.js

Фикс в  студию!

[danik.html]

http://code.google.com/p/ie7-js/#IE9.js

[Bogdan808]

пасибо учытэль!

[danik.html]

Можно, использую псевдоэлементы :before и :after  и свойство content: url(path_to_image)  а так же еще задать и фон этим псевдоэлементам. В итоге можно реализовать резиновые скругленные блоки не городя в HTML кучу левых элеметов. Сработает только если блок на монотонном фоне. Для ие6 и 7 нужно применить замечательный фикс IE8.js

Кстати, только что набрел на такое решение )
Воть - http://nova-group.se/test/rounded/
Подходит для резиновых блоков на монотонном фоне.

[effrit]

"Кстати, только что набрел на такое решение )"
восьмой осёл в режиме совместимости кажет ужасное вместо скругления.
так что фиг знает, что будет в 7-ом и, тем паче, 6-ом
а жаль

[effrit]

так и есть.
вот что кажет седьмой осел
http://browsershots.org/screenshots/4de456028a93ff15b57e6880b5897046

[danik.html]

Да действительно. А я как то даже не подумал проверить, наслово поверил...
Автор решения понадеялся на IE8.js, но он тут бессилен.
Но можно решить эту проблему. Примерно так:

Код:

<!--[if lt IE 8]>
<![endif]-->
<style>
.rounded{
    zoom: expression(runtimeStyle.zoom=1,insertBefore(createElement('before'),firstChild),appendChild(createElement('after')));
}
.rounded before{
    zoom: expression(runtimeStyle.zoom=1, appendChild(createElement('img')).src='corners.png');
}
.rounded after{
    zoom: expression(runtimeStyle.zoom=1, appendChild(createElement('img')).src='corners.png');
}
</style>
<![endif]-->

И продублировать код .rounded:before как .rounded before и after аналогично.

[Diki]

У блоков на страничке сделал закруглённые углы В каждый блок вписывал

Код:

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

а нельзя ли как нибудь написать это один раз и применить ко всем нужным блокам?