<< Уроки CSS
Как закруглить углы без использования графики
На прошлом уроке мы разбирали как закруглить углы в таблице с помощью маленьких изображений, этот способ является самым простым, но в некоторых случаях может оказаться так, что человек зашедший на ваш сайт отключил в браузере загрузку картинок и тогда ваша таблица с закруглёнными углами будет выглядеть просто ужасно. Для решения такой проблемы можно обойтись вовсе без графики, будем использовать блоки толщиной 1 пиксель.
За пример возьмём теперь не таблицу, а слой, хотя и с таблицей можно сделать тоже самое.
Для ясности посмотрите на увеличенный угол слоя:
На самом деле мы будем использовать два слоя (окрашены в серый и черный цвета) и 7 блоков (цветные).
Для начала создайте слой в который вложите ещё один, в нём будет текст:
<div id="radius">
<div id="text">
Закругляем углы на сайте computerlessons.ru
</div>
</div>
Создайте таблицу стилей и задайте для слоёв следующие параметры:
#radius {width:350px; }
#text {padding:5px; background-color:#ccc; }
Теперь над слоем text будем создавать шапку из блоков толщиной в 1 пиксель. Всего будет 7 блоков, можно использовать любое количество это зависит от радиуса закругления. Для создания блока можно использовать тег <div> или любой другой, но как правило используют устаревший тег <b>. Создадим первый блок:
<div id="radius">
<b class="r1"></b>
<div id="text">
Закругляем углы на сайте computerlessons.ru
</div>
</div>
В таблицу стилей пропишите параметры для нового блока:
#radius {width: 350px; }
#text {padding:5px; background-color:#ccc; }
#radius b {background-color:#ccc; display:block; height:1px; overflow:hidden; font-size:1px; }
.r1 {margin:0 10px; }
Для блока мы задали отступы по 10 пикселей слева и справа, для следующих блоков эти параметры будут уменьшаться, закругляя таким образом угол:
#radius {width:350px; }
#text {padding:5px; background-color:#ccc; }
#radius b {background-color:#ccc; display:block; height:1px; overflow:hidden; font-size:1px; }
.r1 {margin:0 10px; }
.r2 {margin:0 7px; }
.r3 {margin:0 5px; }
.r4 {margin:0 4px; }
.r5 {margin:0 3px; }
.r6 {margin:0 2px; }
.r7 {margin:0 1px; }
Теперь добавим блоки в html-страницу:
<div id="radius">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
<b class="r5"></b>
<b class="r6"></b>
<b class="r6"></b>
<b class="r7"></b>
<b class="r7"></b>
<b class="r7"></b>
<div id="text">
Закругляем углы на сайте computerlessons.ru
</div>
</div>
6-й и 7-й блоки повторяются для более мягкого закругления угла. Теперь осталось скопировать блоки и вставить их в обратном порядке под слоем text и получим вот такой слой:
Скачать готовый хтмл-код
Можно поэкспериментировать и получить вот такое интересное меню:
Скачать готовый хтмл-код
Создавать интересные css-меню с закруглёнными или скошенными углами можно до бесконечности:
Скачать готовый хтмл-код
Скачать готовый хтмл-код
Скачать готовый хтмл-код