Да, бывает необходимо сделать скругленные углы средствами HTML+CSS.
Методов несколько. Добавлю их в эту напоминалку по мере вспоминания.
1. Метод №1.
Нам понадобится круглая картинка (радиусом соответсвующая радиусу необходимых заготовок). Например черный круг радиусом 20px.
И небольшие инструкции CSS.
Как сделать закругленные углы в Photoshop (Фотошоп)?
Инструкция:
1. Открываем изображение: «File::Open::Изображение»
2. Добираемся до инструмента «Rounded Rectangle Tool» в панельке «Tools».
3. Сверху в настройках инструмента выбираем «Paths» и задаем радиус закругления.
4. Идем к нашему изображению и выделяем область точно по краям.
5. После кликаем правой кнопкой мышки по изображению и в выпадающем меню жмем «Make Selection». Перед Вами выскачет окошко и ничего не меняя просто жмем «Ok». Тем самым мы выделили область закругления…
6. Далее жмем «Select::Inverse….
7. Теперь жмем кнопку «Delete» для удаления выделенного.
8. И ctrl+D для снятия выделения.
Что должно быть в HTML:
<div id="corners"> <div id="tl"></div> <div id="tr"></div> <div id="br"></div> <div id="bl"></div> <div id="spacer"><div>Содержимое блока</div></div> </div> |
Что должно быть в CSS:
div#corners {border:1px solid black; position:relative;} div#tl {background:transparent url(../images/corner.gif) no-repeat scroll 0 0; left:-1px; top:-1px;} div#tr {background:transparent url(../images/corner.gif) no-repeat scroll 100% 0; right:-1px; top:-1px;} div#bl {background:transparent url(../images/corner.gif) no-repeat scroll 0 100%; bottom:-1px; left:-1px;} div#br {background:transparent url(../images/corner.gif) no-repeat scroll 100% 100%; bottom:-1px; right:-1px;} div#spacer {padding:5px;} /* необязетельно */ |
Должно работать так: когда картинки отключены — углы прямоугольные, когда включены — углы скругленные прямоугольными секторами картинки.
Метод получения закруглений без помощи картинок, только CSS
HTML-код примера:
<div class="raised"><b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b><div class="boxcontent"><h1>Круглые углы</h1><p>Скругления с радиусом в 5px</p></div><b class="bottom"><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></b></div> |
CSS-код примера:
.raised {background:none repeat scroll 0 0 transparent;margin:0 auto;width:40%;} .raised .top, .raised .bottom {background:none repeat scroll 0 0 transparent;display:block;font-size:1px;} .raised .b1 {background:none repeat scroll 0 0 #CCCCCC;margin:0 5px;} .raised .b1, .raised .b2, .raised .b3 {height:1px;} .raised .b1, .raised .b2, .raised .b3, .raised .b4 {display:block;overflow:hidden;} .raised .top, .raised .bottom {font-size:1px;} .raised .b2, .raised .b2b {border-width:0 2px;margin:0 3px;} .raised .b2 {background:none repeat scroll 0 0 #CCCCCC;border-left:1px solid #CCCCCC;border-right:1px solid #CCCCCC;} .raised .b3 {margin:0 2px;} .raised .b3 {background:none repeat scroll 0 0 #CCCCCC;border-left:1px solid #CCCCCC;border-right:1px solid #CCCCCC;} .raised .b4, .raised .b4b {height:2px;margin:0 1px;} .raised .b4 {background:none repeat scroll 0 0 #CCCCCC;border-left:1px solid #CCCCCC;border-right:1px solid #CCCCCC;} .raised .boxcontent {background:none repeat scroll 0 0 #CCCCCC;border-left:1px solid #CCCCCC;border-right:1px solid #CCCCCC;display:block;} .raised h1 {color:#FFFFFF;font-size:1.5em;letter-spacing:1px;} .raised h1, .raised p {margin:0 10px;} .raised p {padding-bottom:0.5em;} |
Слегка подредактированный источник: http://www.cssplay.co.uk/boxes/krazy.html.
Кстати при вставке кода этого примера в пост WordPress вставляет лишние теги <p>. Может так он борется за стандартизацию разметки. Кто-нибудь в курсе как это отключить?
