Забыли пароль?
Запросите новый здесь.

Автор темы: yury
ID темы: 14
Информация:
Тема содержит 17 сообщения, была просмотрена 3312 раз.
Просмотр темы
PHP-Fusion Russia » Веб-разработка » HTML и CSS
 Распечатать тему
Создаем закругленные углы без помощи картинок
yury
Закругленные углы, одна из популярнейших тенденций в современном веб-дизайне. Есть множество вариантов их реализации часто, заключающихся в размещении изображений по углам контейнера, в худших случаях используются теги img, в лучших свойство background, для некоторых браузеров есть специфические решения, например -moz-border-radius для FireFox, но их полезность сомнительна. Простой и удобный способ скругления уголков без использования изображений или малораспространенных свойств был бы очень полезен.

У закругленных уголков выполненных с помощью изображений есть несколько недостатков:
несемантические элементы при верстке,
дополнительная нагрузка на сервер в виде запросов множества уголков различного цвета и размера (в лучшем случае уголки группируются по 4 в одном изображении),
не лучший вид страницы, если у пользователя отключена загрузка изображений (особенно если используются img, а не свойство background).

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

Но во многих случаях, можно избежать использования изображений. Метод, который я хочу предложить, не оригинален и возможно многим известен, но наверняка, не всем, придуман он не мной, а подсмотрен на GMail, немного развит и адаптирован, для его работы требуется только HTML и CSS.

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

Разметка будет достаточно простой:

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


Дальше все просто, делаем b блочным элементом высотой 1px и задаем ему соответствующие поля.

.r1, .r2, .r3 {
display: block;
height: 1px;
}

.r3 { margin: 0 3px; }
.r2 { margin: 0 2px; }
.r1 { margin: 0 1px; }


Затем указываем цвет фона и отступы
#rounded-box-3 .inner-box, #rounded-box-3 b {
background-color: #CCCCCC;
}

.inner-box {
padding:1em;
}


Для всех нормальных браузеров этого достаточно, но у IE6 есть свое мнение. Пустые блоки, для которых задана высота 1px, растягиваются до 2px, что не способствует закруглению уголков, решить проблему можно указав overflow:hidden

Для старых версий IE, IE в quirks mode и блоков вложенных в таблицы в IE7, по совету читателя tapazukk, добавим правило font-size:1px
.r1, .r2, .r3 {
overflow: hidden;
font-size:1px;
}


Браузерам отличным от IE6 это свойство ничем не мешает, поэтому нет необходимости использовать хаки или условные комментарии.

[small]Источник: http://designform...-no-image/[/small]
 
yury
Есть также способ скругления с помощью jQuery

http://malsup.com...ry/corner/
 
yury
Вот наткнулся на еще один полезный пример, который использует небольшую дополниткльную библиотеку:

http://neoprizma....radius.htc

Скачать исходники  Код
.round {
    border:1px solid #ae037b;
    border-radius: 15px;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    -o-border-radius: 5px;
    -khtml-border-radius: 5px;
    behavior: url("border-radius.htc");
    height:200px;
    width:400px;
    background:#c146a4;
}


 
jikaka
кстати, этот сайт использует закругления первого метода
80
 
Web
wowan
yury, Можно ли использовать первый метод для скругления углов панелей? Если да, то как это реализовать и имеет ли смысл эта затея?
 
Web
Rasmusok
bj походу знания css полный 0. CSS3 на улице уже как и весна... и закругляются концы всего 3-мя строчками, причем каждая строчка идет на опред.браузер.
Разработка сайтов. Продвижение. Раскрутка. www.wooas.ru
Начхать на красоту, главное что под капотом.
 
Web
Rasmusok
yury написал:
Вот наткнулся на еще один полезный пример, который использует небольшую дополниткльную библиотеку:

http://neoprizma....radius.htc

Скачать исходники  Код
.round {
    border:1px solid #ae037b;
    border-radius: 15px;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    -o-border-radius: 5px;
    -khtml-border-radius: 5px;
    behavior: url("border-radius.htc");
    height:200px;
    width:400px;
    background:#c146a4;
}




Полная чушь... учитывая то что тут 6 команд вообще не нужны... и в 1-ю очередь behavior: url("border-radius.htc");
Профессиональная разработка сайтов www.artcell.ru - *ROFL*
Разработка сайтов. Продвижение. Раскрутка. www.wooas.ru
Начхать на красоту, главное что под капотом.
 
Web
Polarfox
Мне вот интересно у тебя сертификат какой то, бриллиантовая печать или ты MVP - и потому ты смело говоришь что остальные ноли?
Всегда делайте backup перед изменениями | Указывайте свою версию в подписи/профиле.
Ежели кто забанен за спам, но не считает себя ботом: можете сообщить мне об этом, все будет хорошо.

PolarLab - вход для подопытных
 
Web
Rasmusok
Psc написал:
Мне вот интересно у тебя сертификат какой то, бриллиантовая печать или ты MVP - и потому ты смело говоришь что остальные ноли?


Не стоит умничать... ты прекрастно знаешь что выше описанное полная чушь, у меня нет сертификатов и прочего, но стаж уж css и прочего огромный... и не стоит слушать тех что пишет подобные примеры... и смысл сообщения был прост... не он же его придумал а откудато взял... так что не поднимай волну,накроет.
Разработка сайтов. Продвижение. Раскрутка. www.wooas.ru
Начхать на красоту, главное что под капотом.
 
Web
Polarfox
А ты учись как с людьми разговаривать, они в css может и новички, а реально могут быть афигенными профи , скажем в ядерной физике. Dixi.

Пока нет 3его css все извраты с уголками принимаются на уровне - работает в браузере - значит годится.
Всегда делайте backup перед изменениями | Указывайте свою версию в подписи/профиле.
Ежели кто забанен за спам, но не считает себя ботом: можете сообщить мне об этом, все будет хорошо.

PolarLab - вход для подопытных
 
Web
yury
CSS 3 не как весна и людям надо чтобы в ИЕ работало. И пока еще юзают ИЕ6 (а таких к сожалению предостаточно), ИЕ 7 (таких больше), то CSS 3 на них не распространяется. Поэтому умничать не надо, т.к глупо выглядит.

А вот когда будет CSS 3 тогда все с удовольствием откажутся от лишних библиотtк и лишних CSS
 
poz1t1v
wowan написал:
yury, Можно ли использовать первый метод для скругления углов панелей? Если да, то как это реализовать и имеет ли смысл эта затея?

тоже интересует вопрос, и как закруглить оформление новостей)))
 
Web
yury
десли вы про то, как закруглены углы на этом сайте, так посмотрите просто код html и CSS
 
poz1t1v
лично я в этом не смыслю)))
 
Web
yury
тогда воспользуйся первым описанным примером)
 
poz1t1v
да вот именно что я не знаю куда это ставить)))) для моего сайта можно это сделать??? сайт в подписи))
 
Web
yury
для любого сайта можно сделать почти что угодно)
 

Поделиться этой темой
Социальные закладки: Vkontakte Odnoklassniki Mail.ru Facebook Google Tweet This
URL:
BBcode:
HTML:

Перейти на форум:
Похожие темы
Топ 5 пользователей форума
Alex Alex (1,171)   Zaxap Zaxap (1,078)   Vova Vova (877)   Pisatel Pisatel (678)   util util (666)