Верстая очередной сайт, не раз с грустью вздыхала о том, как все это легко было бы сделать на CSS3… Дело в том, что дизайн сайта содержал довольно много элементов с закругленными углами. При этом большинство блоков должно было растягиваться и по высоте и по ширине, наподобие :
Этот блок реализован с помощью конструктора .
Сервис предлагает не самое идеальное решение, т.к. ширина и высота блока будет ограничена фоновым изображением: 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 - это , позволяющее реализовать закругленные края одной строчкой. Т.к. данное свойство пока поддерживают только 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):
Скриншот:
Теперь, думаю, вы понимаете от чего я вздыхала :) Разница реализации блока ощутима на лицо.
Но т.к. CSS 3 поддерживает только 2 браузера, а первый способ мне кажется довольно громоздким, я нашла альтернативное решение - использовать JS, а точнее плагин . С помощью него можно реализовать блоки самой разнообразной формы:
Весит это чудо всего 8кб. Скачайте и не парьтесь изобретая CSS-велосипед :)
