Способы верстки блока с закругленными краями. Блог для вебмастеров

Способы верстки блока с закругленными краями

24 Август 2008 просмотров 5,174 комментариев 20

Верстая очередной сайт, не раз с грустью вздыхала о том, как все это легко было бы сделать на CSS3… Дело в том, что дизайн сайта содержал довольно много элементов с закругленными углами. При этом большинство блоков должно было растягиваться и по высоте и по ширине, наподобие этому:

Метод МСОМЕ-ИМСИ

Этот блок реализован с помощью конструктора RoundedCornr.

Сервис предлагает не самое идеальное решение, т.к. ширина и высота блока будет ограничена фоновым изображением: 1024 х 600. При этом, изображения генерируются в формате PNG с прозрачностью, что добавляет проблем вебмастерам, верстающим под IE6.

Что касается самой логики кода, то конкретно для данного вида блоков, другое решение врятли найдется. Структура включает 6 блоков: основной обрамляющий блок, 4 блока для уголков и блок для контента. При этом, код можно было бы оптимизировать: вместо вложенных дивов для уголков использовать элемент <b>.

А вы знаете где зарегистрировать домен в зоне .RU по очень низкой цене? Отличный сервис регистрации доменов Domain4ik предлагает домены в зоне .RU по 109 WMR!

Как создать свой сайт бесплатно? Пошаговое описание процесса разработки сайта на портале Постройка.ру.

Что такое “Песочница”?. Полезная информация для вебмастеров о фильтре Google SandBox.

Как работают саттелиты? Как зарабатывать на Xap? Почему Xap лучше Sape? Все ответы на SEO блоге Денискина.

отзывы о Вьетнаме.

Топ10 попсовых памятников архитектуры Беларуси. Первая пятерка

Параметры блока:

HTML:

<div class="roundedcornr_box">
   <div class="roundedcornr_top"><div></div></div>
   <div class="roundedcornr_content">
       <p>Lorem ipsum dolor sit amet, consectetur
       adipisicing elit, sed do eiusmod tempor incididunt
       ut labore et dolore magna aliqua.</p>
   </div>
   <div class="roundedcornr_bottom"><div></div></div>
</div>

CSS:

.roundedcornr_box {
	background: url(roundedcornr_tl.png) no-repeat top left;
}
.roundedcornr_top {
	background: url(roundedcornr_tr.png) no-repeat top right;
}
.roundedcornr_bottom {
	background: url(roundedcornr_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom div {
	background: url(roundedcornr_br.png) no-repeat bottom right;
}
.roundedcornr_content {
	background: url(roundedcornr_r.png) top right repeat-y;
}

.roundedcornr_top div,.roundedcornr_top,
.roundedcornr_bottom div, .roundedcornr_bottom {
	width: 100%;
	height: 15px;
	font-size: 1px;
}
.roundedcornr_content, .roundedcornr_bottom {
	margin-top: -19px;
}
.roundedcornr_content { padding: 0 15px; }

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

Как многие из вас уже знают, одно из самых востребованных свойств CSS 3 – это border-radius, позволяющее реализовать закругленные края одной строчкой. Т.к. данное свойство пока поддерживают только FIreFox 3 и Safari, то будем использовать -moz-border-radius и -webkit-border-radius:

div.rounded {
    margin: 10px;
    padding: 15px;
    border: 7px solid #FFBFBF;
    background-color: #FFF;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
}

<div class="rounded">
         <p>Lorem ipsum dolor sit amet, consectetur
         adipisicing elit, sed do eiusmod tempor incididunt
         ut labore et dolore magna aliqua.</p>
</div>

Результат (смотреть в FF или Safari):

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Скриншот:

Теперь, думаю, вы понимаете от чего я вздыхала :) Разница реализации блока ощутима на лицо.

Но т.к. CSS 3 поддерживает только 2 браузера, а первый способ мне кажется довольно громоздким, я нашла альтернативное решение – использовать JS, а точнее плагин JQuery Corner. С помощью него можно реализовать блоки самой разнообразной формы:

Весит это чудо всего 8кб. Скачайте JQuery Corner и не парьтесь изобретая CSS-велосипед :)

Комментариев 20 »

]]>Алчный воронежский упырЪ пишет: ]]>

Спасибо. Jquery поистину может все.

Цитировать

# 24 Август 2008 at 19:54
]]>Способы верстки блока с закругленными краями пишет: ]]>

# 25 Август 2008 at 11:05
]]>Maxim пишет: ]]>

Эммм, здравствуйте, я подписан на rss и почитываю иногда коллег.
Далеко не самые идеальные решения, я бы даже сказал грубее, но даме не буду.
Работаем только самым прогрессивым методом “single image round corners” – то есть одна картинка для всех углов (ну максимум две, для градиентных бордеров … ну или когда лень).
Например: http://www.codeboy.ru/test/220/test.html
соответственно картинки
1 – http://www.codeboy.ru/test/220/img/wzRcSmYe-corners.gif
2 – http://www.codeboy.ru/test/220/img/wzRcSmYe-horizont.gif
посмотрите на вес картинок

На саму страницу не смотрите, взял что было под рукой, это очень-очень сильно драфт.

Похожие вещи можно найти здесь: http://www.smileycat.com/miaow/archives/000044.php

Цитировать

# 25 Август 2008 at 19:07
]]>Maxim пишет: ]]>

Опс, забыл!
Любой JS, а тем более Джеки занимает место в памяти (а джеки так вобще хранит все нужные и зачастую и не нужные элементы DOM вместе со свойствами в большом хеше\хешах), а так как память для виртуализации скрипта отводится из памяти для браузера, и далеко не резиновая, + на работу скрипта нужны ресурсы процессора (а перебор всех узлов документа порой очень жоркая вещь), то это может приводить (и приводит) к лагам и тормозам в работе.
Через это, необходимо облегчить жизнь браузеру пользователя (и опять-таки самому юзеру), всеми доступными способами.

Цитировать

# 25 Август 2008 at 19:17
]]>Автор пишет: ]]>

4 картинки в 1 – это, конечно, решение хорошее, но код состоит из тех же 6 блоков, как и в первом моем примере. Так что, это тоже не самый идеальный вариант.

Цитировать

# 25 Август 2008 at 20:17
]]>Автор пишет: ]]>

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

Цитировать

# 25 Август 2008 at 20:32
]]>Maxim пишет: ]]>

Не 8кб, а значительно больше, т.к. 8 это только код, а после передачи интерпретатору (или даже Just-in-Time компилятору) в браузере, он будет значительно больше, и если PHP сработал скрипт и всё, то геко в Фаере будет харнить и код и результат в выделеной области памяти. По этому там где возможно отказываться от джаваскрипта, и уж подавно не использовать фреймворк если надо просто сменить стиль у элемента!

Цитировать

# 25 Август 2008 at 23:21
]]>Maxim пишет: ]]>

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

Цитировать

# 25 Август 2008 at 23:23
]]>Vii пишет: ]]>

Не хочу придираться, но в самом первом блоке с кодом, div.roundedcornr_content визуально получается “вложен” в div.roundedcornr_top.

А способ действительно пригодный — сам пользуюсь почти таким же, только с 1 картинкой на 4 уголка и position вместо margin. Правда для случая когда необходимо “положить” закруглённый блок на градиент он не совсем подходит.

Цитировать

# 25 Август 2008 at 23:27
]]>Автор пишет: ]]>

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

Цитировать

# 26 Август 2008 at 9:59
]]>flakyspark пишет: ]]>

Есть еще такой вариант – http://www.html.it/articoli/niftycube/index.html. Честно говоря не знаю, может jquery и гибче, но я пользовался и этим способом.

Цитировать

# 5 Октябрь 2008 at 10:56
]]>AntonTau пишет: ]]>

Хороший способ! Спасибо! Да CSS3 удобен, блин, ну почему Opera и IE его игнорят ((( А вот новый Google Chrome его воспроизводит ))

Подскажите, пожалуйста, как в диве сделать прозрачный фон. Заранее благодарен!

Цитировать

# 5 Октябрь 2008 at 20:03
]]>Интересное для веб-мастеров (10.10.2008) » Как создать сайт бесплатно? Как сделать сайт? Журнал для веб-мастеров и блогеров от школы создания с пишет: ]]>

# 10 Октябрь 2008 at 20:33
]]>WebMast пишет: ]]>

Код не кроссбраузерен.. В опере вообще налипалово..

Цитировать

# 3 Декабрь 2008 at 14:09
]]>Автор пишет: ]]>

Какой код вы имеете ввиду?

Цитировать

# 3 Декабрь 2008 at 23:58
]]>WebMast пишет: ]]>

Код этого блока, с закругленными краями!

Цитировать

# 4 Декабрь 2008 at 13:08
]]>5 способов как оформить изображение. Блог для вебмастеров пишет: ]]>

# 7 Декабрь 2008 at 18:55
]]>Certus пишет: ]]>

Спасибо за ссылку на конструктор! Очень удобно!

Цитировать

# 11 Январь 2009 at 11:02
]]>Val пишет: ]]>

Это можно решить комментариями, например. И чтобы первый громоздкий способ повлиял на размер html и читабельность, таких блоков должно быть десяток или больше. Сложно представить себе такой дизайн.Я пользуюсь способом с абсолютным позиционированием “углов”. Вроде он самый оптимальный сейчас.

Цитировать

# 30 Январь 2009 at 10:52
]]>den пишет: ]]>

Привет всем.
Я для скругленных уголков использовал несколько методов. У вас пример еще довольно простой для уголков. Представьте что у вас допустим неоднородный фон и блок имеет бордюр, только в этом отчаеном случае я впервые использовал js для уголков.
Я лично рекомендую библиотеку rocon Сергея Чикуенка.
Ссылка1
Примеры
Единственный минус не поддержка opera 9.0, но от этого как правило можно отказаться.

Ps: Уголки для картинок всегда делаются спрайтом.

Цитировать

# 1 Сентябрь 2009 at 9:49