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

[GrekNK]

Народ помогите, голову уже слома! Решил я сделать у себя на сайте блоки с закругленными уголками, нашел  как это сделать (http://techmeat.net/example/rounded-corners/) Для реализации там предлагают 2 CSS файла (Style, reset)  и 2 файла JS (jquery-1.3.1, Common)  скопировал  их себе в Joomla в папки CSS и  js в XHTML файле дописал мол:
<css>
      <filename>css/ja-sosdmenu.css</filename>
      <filename>css/menu.css</filename>
      <filename>css/template.css</filename>
      <filename>css/template_rtl.css</filename>
      <filename>css/style.css</filename>
      <filename>css/resrt.css</filename>

                <filename>js/ja.cssmenu.js</filename>
      <filename>js/ja.moomenu.js</filename>
      <filename>js/ja.rightcol.js</filename>
      <filename>js/ja.script.js</filename>
                <filename>js/common.js</filename>
                <filename>js/jquery-1.3.1.js</filename>

В  index.php до писал следующие.
<link rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?>templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?>templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/template.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/style.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/reset.css" type="text/css" />

<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/ja.script.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/common.js"></script>
 <script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/jquery-1.3.1"></script>

выключаю редактор, создаю материал и в ручную пишу <div class="block news blue">
         <div class="block news blue">
                           <div class="container">
            <div class="title"><strong>News</strong></div>
              <div class="text">
               <ul>
                  <li>Text</li>
                  <li>Text</li>
                  <li>Text</li>
               </ul>
            </div>
         </div>
      </div>
И каких красивых уголков я не наблюдаю!!! только блок и текст! Что не правильно???

[PaLyCH]

Народ помогите, голову уже слома! Решил я сделать у себя на сайте блоки с закругленными уголками, нашел  как это сделать (http://techmeat.net/example/rounded-corners/)

Извращенец. Зачем подключать скрипты для скругления, елси все это делается базовым CSS

[GrekNK]

ну  так и просвети слепца, просто очень надо а  способ только такой нашел! Подскажи как проще буду очень благодарен!  

[PaLyCH]

ну  так и просвети слепца, просто очень надо а  способ только такой нашел! Подскажи как проще буду очень благодарен!  

Вот тут очень много вариантов

[nOObMeister]

PaLyCH а как их применить непосредственно к модулям Joomla, я так и не понял, для каждого модуля писать отдельный код в файле темплейта?

[PaLyCH]

PaLyCH а как их применить непосредственно к модулям Joomla, я так и не понял, для каждого модуля писать отдельный код в файле темплейта?

Да. Можно создать туеву кучу оформлений модулей. Чтобы было понятно. Возьмите стандратный шаблон beez. В шаблоне есть папка HTML, в ней лежит файлик modules.php/ Внимательно изучи и ты поймешь

[xTMx]

Кстати вопрос в тему
есть ли компонент какой то, при помощи которого можно было бы изменять шаблон непосредственно допустим content'a ( внешнего вида )

я копался в каких-то  контент конструкторах но чото не нашёл ничего путного . смотрел тут
http://extensions.joomla.org/extensions/style-a-design/articles-styling



конкретно тоже надо округлить углы , задать стандартный фон сообщений и тд и тп. кроме копания в коде и кссках есть вары?

[GapArchi]

Кстати вопрос в тему
есть ли компонент какой то, при помощи которого можно было бы изменять шаблон непосредственно допустим content'a ( внешнего вида )

я копался в каких-то  контент конструкторах но чото не нашёл ничего путного . смотрел тут
http://extensions.joomla.org/extensions/style-a-design/articles-styling



конкретно тоже надо округлить углы , задать стандартный фон сообщений и тд и тп. кроме копания в коде и кссках есть вары?

хтмл и CSS тебе в помощь, редактируй шаблон.

[GapArchi]

Народ помогите, голову уже слома! Решил я сделать у себя на сайте блоки с закругленными уголками, нашел  как это сделать (http://techmeat.net/example/rounded-corners/) Для реализации там предлагают 2 CSS файла (Style, reset)  и 2 файла JS (jquery-1.3.1, Common)  скопировал  их себе в Joomla в папки CSS и  js в XHTML файле дописал мол:

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

[xTMx]

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

типа футер и хэдер добавить надо? )

[GapArchi]

типа футер и хэдер добавить надо? )

к примеру, если у модуля будет изменятся только высота, то да.
<div>хэдер</div>
<div>модуль</div> тут можно края бардюром обозначить
<div>футер</div>
Ну вот http://avalar.su особо не старался.
установи плагин firebug для firefox, разбери данный пример, и я думаю все будет ясно


аааа, хотя вот тут у меня немного другой вариант, с помощью таблицы, но принцип не отличается.


Вот еще тема на которой я учился закругленные углы для модулей joomla.

[xTMx]

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

а когда смотришь шаблон в Joomla ( корректируя линк типа tp=1 ) у некоторых модулей  пишет типа rounded outline кажется
это не означает как раз то что края округлены?

[Jomel]

Смотрю шаблоны известных контор. Везде скругленные углы нарисованы.

[zelenin]

с появлением html5 закругленные уголки можно делать такой конструкцией:

Код:

-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;

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

[yuri-it]

Код:

-moz-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;

это только в мозиле работать будет. Т.е. не вариант.

[zelenin]

это только в мозиле работать будет. Т.е. не вариант.

ты думаешь 80% моих посетителей - файрфокс? поддержка этого параметра добавлена во все крупные браузеры, кроме ИЕ. Только что проверил и в опере и в хроме.

[ibrodin]

Листинг создания скругленных углов:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Закругленные углы</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style>
<!--

/* общие стили */

*  {
   padding: 0;
   margin: 0;
}

body {
   font: 0.8em/1.5em arial;
}

h3 {
   font: 1.5em/1em arial;
   margin-bottom: 0.5em;
}

/* элементы закругления */

.inner-box {
   padding:1em;
}

.r1, .r2, .r3, .r4, .r5, .r6, .r7, .r8, .r9, .r10 {
   display: block;
   height: 1px;
   overflow: hidden;
   font-size:1px;
}

.r10 { margin: 0 10px; }
.r9 { margin: 0 9px; }
.r8 { margin: 0 8px; }
.r7 { margin: 0 7px; }
.r6 { margin: 0 6px; }
.r5 { margin: 0 5px; }
.r4 { margin: 0 4px; }
.r3 { margin: 0 3px; }
.r2 { margin: 0 2px; }
.r1 { margin: 0 1px; }

/*

возможные комбинации

r3 r1 r1 вверху
r1 r1 r3 внизу

r5 r3 r2 r1 r1 вверху
r1 r1 r2 r3 r5 внизу

r10 r7 r5 r4 r3 r2 r2 r1 r1 r1 вверху
r1 r1 r1 r2 r2 r3 r4 r5 r7 r10 внизу

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

*/

#rounded-box-3, #rounded-box-5, #rounded-box-10 { margin:1em; }

.inner-box, b { background-color: #CCCCCC; }

/* уменьшаем отступы по мере роста радиуса закругления */
#rounded-box-3 .inner-box { padding: 1em;}
#rounded-box-5 .inner-box { padding: 0.7em 1em;}
#rounded-box-10 .inner-box { padding: 0.4em 1em;}

-->
</style>

</head>

<body>

   <div id="rounded-box-3">
      <b class="r3"></b><b class="r1"></b><b class="r1"></b>
      <div class="inner-box">
         <h3>Элемент с закругленными углами R=3px</h3>
         <p>Этот способ закругления углов подсмотрен на GMail.</p>
      </div>
      <b class="r1"></b><b class="r1"></b><b class="r3"></b>
   </div>

   <div id="rounded-box-5">
      <b class="r5"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b><b class="r1"></b>
      <div class="inner-box">
         <h3>Элемент с закругленными углами R=5px</h3>
         <p>Этот способ закругления углов подсмотрен на GMail.</p>
      </div>
      <b class="r1"></b><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r5"></b>
   </div>

   <div id="rounded-box-10">
      <b class="r10"></b><b class="r7"></b><b class="r5"></b><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r2"></b><b class="r1"></b><b class="r1"></b><b class="r1"></b>
      <div class="inner-box">
         <h3>Элемент с закругленными углами R=10px</h3>
         <p>Этот способ закругления углов подсмотрен на GMail.</p>
      </div>
      <b class="r1"></b><b class="r1"></b><b class="r1"></b><b class="r2"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b><b class="r5"></b><b class="r7"></b><b class="r10"></b>
   </div>

</body>
</html>

[danik.html]

    border-radius+
   -webkit-border-radius+
   -moz-border-radius+
   -khtml-border-radius+
    behavior: border-radius.htc

=почти кроссбраузерное решение( в жопе токо опера до 10.5)

fotolider.ru

[toha86]

Спасибо Огромное, ibrodin! Очень хорошее решение Вы подсмотрели у Gmail. Я проверил в 9 браузерах, правда новых версий (FireFox 3.6, Opera 10, Navigator 9, Flock, SeaMonkey, K-Meleon, Safari, Chrome, IE) отображают все.
Ослик IE (у меня IE7 для проверок) как всегда не в духе -) радиус R=3 не видит, остальные закруглил -)

[AlexAGF]

Кто-нибудь может объяснить, почему behavior: border-radius.htc не работает на j1.5.18?
В голом HTML никаких проблем. Как только подключаю в Joomla, бордюры, которые должны скругляться,
в IE вообще пропадают.

Убился уже... Где копать?

Код:

.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');
}

<img class="round" src="img.gif" />

[danik.html]

во первых, нужно положить border-radius.htc, в данном случае в корень сайта. можно и в шаблон, но тогда указываем путь /templates/my_template/shit/border-radius.htc
Во вторых, картинки это врядли скруглит, для скругления картинаг  я юзал както ictinus, там все просто.

[AlexAGF]

danik.html
Естественно, border-radius.htc лежит там, где нужно.
Повторяю, в чистом htmi ВСЕ прекрасно работает. не работает именно на Joomla.
И скругляю я не картинку, а бордюр вокруг нее.

[biohan]

Тоже не работает...вставлял и через .ссs и через style=""...в чистом работает...

[AlexAGF]

Ну что, господа гуру и простые джумловоды, кто-нибудь может выявить,
с чем конфликтует border-radius.htc в Joomla 1.5.18, что вызывает пропадание бордюров в IE?

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

[danik.html]

именно в 18 версии не проверял, но сомневаюсь что в ней скрипты, отличные от 14, хотя мож ошибаюсь.
нужно тщательно проверить путь. в CSS файле ie.css нужно указывать путь ОТ КОРНЯ САЙТА, хотя это и не очевидно. для проверки можно вписать в файл htc почти в начале строчку alert('this works !');

[AlexAGF]

danik.html
Путь прописан 100% правильно.
При неправильноим пути в IE, как и положено, отображаются нескругленные границы.
Как только htc начинает работать, границы полностью пропадают.

[biohan]

Код:

<div style=" background: #FFF;
   border: #ADADAD 1px solid;
   padding:10px;
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -khtml-border-radius: 5px;
   behavior: url('border-radius.htc');">Пример</div>

Добавил в шаблон...В ие углы не скругляет...border-radius.htc лежит в корне(да и везде где только можно)

[danik.html]

Мля.. только щас допер! трабла не в том что не скругляет а в том что пропадает)
да, встречал такую проблему. не помню как решил...вроде это изза z-index бывает. кстати вроде однажды косяк был в ие8, а в 6 и 7 было ок. смотри z-index'ы

[AlexAGF]

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

[danik.html]

ну ссылку в студию

[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;

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