Округление углов div-блоков

27 Фев 2015 0 573 Разное
Округление углов div-блоков

Оцените статью:

Огромное влияние на посетителей любого ресурса сети Интернет оказывает его дизайн. Профессиональные дизайнеры стараются из каждого нового проекта создать уникальный шедевр.

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

В html-верстке страниц сайта существует несколько способов создания округлых углов различных блоков.

Чтобы округлить углы определенного блока, можно использовать заранее подготовленное изображение с округлыми углами и заданными размерами, равными размерам этого блока, и установить это изображение как фон (background) блока.

Так же, существует способ создания круглых углов div-блока путем вставки в каждый угол заранее подготовленных изображений углов.

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

Схема работы способа округления углов div-блоков с помощью универсальной картинки.

Код, с помощью которого мы обрабатываем изображение:

< !DOCTYPE html>

<html>

<head>

<style type=»text/css»>

#container {display:block; position:relative; width:666px; height:295px;}

#container .corner_lt {width:8px; height:8px; position:absolute; left:0; top:0; background:url(ht0tp://1cabinet.ru/…/corner.png) left top no-repeat;}

#container .corner_rt {width:8px; height:8px; position:absolute; right:0; top:0; background:url(ht0tp://1cabinet.ru/…/corner.png) right top no-repeat;}

#container .corner_lb {width:8px; height:8px; position:absolute; left:0; bottom:0; background:url(ht0tp://1cabinet.ru/…/corner.png) left bottom no-repeat;}

#container .corner_rb {width:8px; height:8px; position:absolute; right:0; bottom:0; background:url(ht0tp://1cabinet.ru/…/corner.png) right bottom no-repeat;}

</style>

</head>

<body>

<div id=»container»>

<div class=»corner_lt»></div>

<div class=»corner_rt»></div>

<img class=»aligncenter» src=»ht0tp://1cabinet.ru/…/image.jpg»/>

<div class=»corner_lb»></div>

<div class=»corner_rb»></div>

</div>

</body>

</html>

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

Div-блоку, которому необходимо закруглить углы присваивается заданная ширина и высота. В каждый угол данного блока вставляются дополнительные маленькие квадратные блоки с абсолютным позиционированием относительно округляемого блока, которым присваиваем различные классы («corner_lt», «corner_rt», «corner_rb», «corner_lb»), сторона которых равна радиусу округления.

После этого, с помощью CSS-кода мы задаем каждому из маленьких блоков фон (background), который является частью нашей универсальной картинкой. Универсальная картинка имеет вид квадрата со стороной равной двум радиусам скругления, и с вписанной в него окружностью. Окружность имеет прозрачность 100%, а углы квадрата универсальной картинки имеют цвет, который соответствует цвету страницы, на которой расположен округляемый блок.

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

Добавить комментарий