Начать свой бизнес, гораздо проще чем
многие думают. Здесь как раз об этом

Закругление углов блока css

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

Зачем дизайнеры закругляют углы на блоках?

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

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

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

Изображение блока с закругленными углами

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

Вставки по углам блока изображений

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

Закругление углов при помощи css

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

Закругление углов блока css

Схема работы способа округления углов 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 кода в угол округляемого блока вставляется маленький квадратный блок, равный четверти универсальной картинки и отображается поверх содержимого.

Прокомментировать
Кликните на изображение чтобы обновить код, если он неразборчив
Читайте также