Закругление углов блока css
Содержание:
Огромное влияние на посетителей любого ресурса сети Интернет оказывает его дизайн. Профессиональные дизайнеры стараются из каждого нового проекта создать уникальный шедевр.
↑ Зачем дизайнеры закругляют углы на блоках?
Очень часто при создании макета какого-либо сайта дизайнеры используют закругление углов различных блоков. Таким образом, дизайнеры добиваются легкости восприятия страниц ресурса будущими посетителями.
↑ Способы закругления углов
В html-верстке страниц сайта существует несколько способов создания округлых углов различных блоков.
↑ Изображение блока с закругленными углами
Чтобы округлить углы определенного блока, можно использовать заранее подготовленное изображение с округлыми углами и заданными размерами, равными размерам этого блока, и установить это изображение как фон (background) блока.
↑ Вставки по углам блока изображений
Так же, существует способ создания круглых углов div-блока путем вставки в каждый угол заранее подготовленных изображений углов.
↑ Закругление углов при помощи css
При создании 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 кода в угол округляемого блока вставляется маленький квадратный блок, равный четверти универсальной картинки и отображается поверх содержимого.
