Оригинал сообщения



Верстая очередной сайт, не раз с грустью вздыхала о том, как все это легко было бы сделать на 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):

Скриншот:



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

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







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

LIci WP - WordPress crossposting plugin