Просмотр темы
 Создаем закругленные углы без помощи картинок
|
|
| yury |
Опубликовано 01.08.2010 20:51
|
 Супер Администратор  Сообщений: 1051 Зарегистрирован: 26.07.2010 13:12 |
Закругленные углы, одна из популярнейших тенденций в современном веб-дизайне. Есть множество вариантов их реализации часто, заключающихся в размещении изображений по углам контейнера, в худших случаях используются теги 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 |
Опубликовано 01.08.2010 21:31
|
|
Супер Администратор Сообщений: 1051 Зарегистрирован: 26.07.2010 13:12 |
Есть также способ скругления с помощью jQuery http://malsup.com...ry/corner/ |
|
|
|
| yury |
Опубликовано 02.08.2010 22:37
|
|
Супер Администратор Сообщений: 1051 Зарегистрирован: 26.07.2010 13:12 |
Вот наткнулся на еще один полезный пример, который использует небольшую дополниткльную библиотеку: http://neoprizma....radius.htc  Код.round { |
|
|
|
| jikaka |
Опубликовано 20.08.2010 11:51
|
 Супер Администратор Разработчики  Сообщений: 4843 Зарегистрирован: 26.07.2010 12:10 |
кстати, этот сайт использует закругления первого метода 80 |
|
|
|
| wowan |
Опубликовано 04.03.2011 19:24
|
 Пользователь  Сообщений: 122 Зарегистрирован: 06.11.2010 20:09 |
yury, Можно ли использовать первый метод для скругления углов панелей? Если да, то как это реализовать и имеет ли смысл эта затея? |
|
|
|
| Rasmusok |
Опубликовано 04.03.2011 20:41
|
 Пользователь Сообщений: 163 Зарегистрирован: 21.11.2010 16:18 |
 походу знания css полный 0. CSS3 на улице уже как и весна... и закругляются концы всего 3-мя строчками, причем каждая строчка идет на опред.браузер.
Разработка сайтов. Продвижение. Раскрутка. www.wooas.ru
Начхать на красоту, главное что под капотом. |
|
|
|
| Rasmusok |
Опубликовано 04.03.2011 20:43
|
|
Пользователь Сообщений: 163 Зарегистрирован: 21.11.2010 16:18 |
yury написал: Вот наткнулся на еще один полезный пример, который использует небольшую дополниткльную библиотеку: http://neoprizma....radius.htc Код.round {Полная чушь... учитывая то что тут 6 команд вообще не нужны... и в 1-ю очередь behavior: url("border-radius.htc"); Профессиональная разработка сайтов www.artcell.ru - *ROFL* Разработка сайтов. Продвижение. Раскрутка. www.wooas.ru
Начхать на красоту, главное что под капотом. |
|
|
|
| Polarfox |
Опубликовано 05.03.2011 05:23
|
 Администратор  Разработчики Группа поддержки  Сообщений: 3381 Зарегистрирован: 20.08.2010 14:03 |
Мне вот интересно у тебя сертификат какой то, бриллиантовая печать или ты MVP - и потому ты смело говоришь что остальные ноли?
Всегда делайте backup перед изменениями | Указывайте свою версию в подписи/профиле. | Вся бесплатная тех. поддержка только на форуме
|
|
|
|
| Rasmusok |
Опубликовано 05.03.2011 05:26
|
|
Пользователь Сообщений: 163 Зарегистрирован: 21.11.2010 16:18 |
Psc написал: Мне вот интересно у тебя сертификат какой то, бриллиантовая печать или ты MVP - и потому ты смело говоришь что остальные ноли? Не стоит умничать... ты прекрастно знаешь что выше описанное полная чушь, у меня нет сертификатов и прочего, но стаж уж css и прочего огромный... и не стоит слушать тех что пишет подобные примеры... и смысл сообщения был прост... не он же его придумал а откудато взял... так что не поднимай волну,накроет. Разработка сайтов. Продвижение. Раскрутка. www.wooas.ru
Начхать на красоту, главное что под капотом. |
|
|
|
| Polarfox |
Опубликовано 05.03.2011 14:06
|
|
Администратор Разработчики Группа поддержки Сообщений: 3381 Зарегистрирован: 20.08.2010 14:03 |
А ты учись как с людьми разговаривать, они в css может и новички, а реально могут быть афигенными профи , скажем в ядерной физике. Dixi. Пока нет 3его css все извраты с уголками принимаются на уровне - работает в браузере - значит годится. Всегда делайте backup перед изменениями | Указывайте свою версию в подписи/профиле. | Вся бесплатная тех. поддержка только на форуме
|
|
|
|
| yury |
Опубликовано 05.03.2011 18:56
|
|
Супер Администратор Сообщений: 1051 Зарегистрирован: 26.07.2010 13:12 |
CSS 3 не как весна и людям надо чтобы в ИЕ работало. И пока еще юзают ИЕ6 (а таких к сожалению предостаточно), ИЕ 7 (таких больше), то CSS 3 на них не распространяется. Поэтому умничать не надо, т.к глупо выглядит. А вот когда будет CSS 3 тогда все с удовольствием откажутся от лишних библиотtк и лишних CSS |
|
|
|
| poz1t1v |
Опубликовано 05.03.2011 20:02
|
 Пользователь Сообщений: 75 Зарегистрирован: 08.11.2010 15:53 |
wowan написал: yury, Можно ли использовать первый метод для скругления углов панелей? Если да, то как это реализовать и имеет ли смысл эта затея? тоже интересует вопрос, и как закруглить оформление новостей))) |
|
|
|
| yury |
Опубликовано 05.03.2011 20:50
|
|
Супер Администратор Сообщений: 1051 Зарегистрирован: 26.07.2010 13:12 |
десли вы про то, как закруглены углы на этом сайте, так посмотрите просто код html и CSS |
|
|
|
| poz1t1v |
Опубликовано 05.03.2011 20:54
|
|
Пользователь Сообщений: 75 Зарегистрирован: 08.11.2010 15:53 |
лично я в этом не смыслю)))
|
|
|
|
| yury |
Опубликовано 05.03.2011 20:57
|
|
Супер Администратор Сообщений: 1051 Зарегистрирован: 26.07.2010 13:12 |
тогда воспользуйся первым описанным примером) |
|
|
|
| poz1t1v |
Опубликовано 06.03.2011 15:23
|
|
Пользователь Сообщений: 75 Зарегистрирован: 08.11.2010 15:53 |
да вот именно что я не знаю куда это ставить)))) для моего сайта можно это сделать??? сайт в подписи))
|
|
|
|
| yury |
Опубликовано 06.03.2011 18:33
|
|
Супер Администратор Сообщений: 1051 Зарегистрирован: 26.07.2010 13:12 |
для любого сайта можно сделать почти что угодно) |
|
|
|
| Поделиться этой темой | |
| Социальные закладки: |
|
| URL: | |
| BBcode: | |
| HTML: |
| Перейти на форум: |
