Понедельник, 09 Апреля 2012 10:01

Скругленные углы средствами HTML, CSS

Written by 
Оцени эту запись
(1 Голос)

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

 

Для начала рассмотрим такую ситуацию:

 

 

1. Первый способ - border-radius

 

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
 
Будем иметь код;
 
<div style="width: 100px; height: 100px; border: 1px solid #f65a0e; background: #e2b098; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;"></div>
 
Результат:
 
 
 

 

Плюсы метода - отсутствие картинок, мало кода. Минус - не поддерживается IE.

 

2. Второй способ - вставляем уголки картинками.

 

 

 
 
 
 
 
 
 

 

 

 

<div style="width: 100px; height: 100px;">
<div style="width: 10px; float:left; background: url('/images/stories/borders/lt.png'); height: 10px;"></div>
<div style="width: 10px; float:right; background: url('/images/stories/borders/rt.png'); height: 10px;"></div>
<div style="width: 80px; margin: 0 10px; border-top: 1px solid #f65a0e; background: #e2b098; height: 9px;">/div>
<div style="width: 98px; border-right: 1px solid #f65a0e; border-left: 1px solid #f65a0e; background: #e2b098; height: 80px;"></div>
<div style="width: 10px; float:left; background: url('/images/stories/borders/lb.png'); height: 10px;"></div>
<div style="width: 10px; float:right; background: url('/images/stories/borders/rb.png'); height: 10px;"></div>
<div style="width: 80px; margin: 0 10px; border-bottom: 1px solid #f65a0e; background: #e2b098; height: 9px;"></div>
</div>

 

Идея метода:

 - есть основной блок, размером 100 на 100

- есть 4 уголка. У них фоновые картинки  с уголками, размеры 10 на 10, они плавающие: float: left/right

- кусочки верха и низа, которые находятся между уголками. Например верхний, имеет высоту 10, ширину 80, нужный фон и верхный бордер.

 

Плюс метода - кроссбраузерность, блок можно наложить на любой фон. Минус - много кода и картинки. 

В данном случае у нас 4 маленькие картинки. Но их можно было объединить в спрайт. Это лучше для загрузки страницы.

 

3. Третий способ - уголки картинками + меньще кода. 

 

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

 

 

 
 
 
 

 

 

 

Плюс метода - кроссбаузерно и меньшим количеством кода. Минус метода - отсутсвие прозрачного кода.

 

4. Блок с градиентной заливкой.

 

Для блока, у которого неоднородный фон (градиент или фоновая картинка), есть некоторые нюансы. Если известно на каком фоне будет лежать наш блок, то подходит третий метод. Просто картинки углов будут разными. Если же цвет фона может быть любым - это сложнее. Если не нужна кроссбраузерность, то с первым методом проблем не будет. IE на понимает ни border-radius и градиентной заливки. Потому в нем будут прямые углы и какой-то фон.

 

Рассмотрим случай, когда блок залит градиентом.

 

 

 
 
 
 
 
 
 

 

 

 

<div style="width: 100px; height: 100px;">
<div style="width: 10px; float:left; background: url('/images/stories/borders/lt_g.png'); height: 10px;"></div>
<div style="width: 10px; float:right; background: url('/images/stories/borders/rt_g.png'); height: 10px;"></div>
<div style="width: 80px; margin: 0 10px;  background: url('/images/stories/borders/t_g.png') repeat-x; height: 10px;"></div>
<div style="width: 100px;  background: url('/images/stories/borders/g.png') repeat-x; height: 80px;"></div>
<div style="width: 10px; float:left; background: url('/images/stories/borders/lb_g.png'); height: 10px;"></div>
<div style="width: 10px; float:right; background: url('/images/stories/borders/rb_g.png'); height: 10px;"></div>
<div style="width: 80px; margin: 0 10px;  background: url('/images/stories/borders/b_g.png') repeat-x; height: 10px;"></div>
</div>

 

 

Код такой же, как во втором примере. Разница лишь в том, что у верхнего, нижнего и центрального блоков фон задается не цветом, а картинкой, шириной 1px, которая повторяется по горизонтали repeat-x.   

 

5. Скругляем картинку.

 

Если есть возможность использовать border-radius, то тут все понятно. Рассмотрим вариант, когда нужно сделать кроссбраузерный вариант и при этом известно на каком фоне будет лежать картинка.

 

 

 
 
 
 

 

Здесь мы вставляем в блок картинку. И в него же добавляем блоки размером 10 на 10, у которых фонов сделаны наши уголки. Блоки спозиционированы абсолютно и размещаются по углам.

 

Код выглядит так: 

 

 

<div style="width: 100px; height: 100px; position: relative">
<div style="width: 10px; height :10px; background: url('/images/stories/borders/lt_w.png'); position:absolute; top: 0px; left: 0px;"></div>
<div style="width: 10px; height :10px; background: url('/images/stories/borders/rt_w.png'); position:absolute; top: 0px; right: 0px;"></div>
<div style="width: 10px; height :10px; background: url('/images/stories/borders/lb_w.png'); position:absolute; bottom: 0px; left: 0px;"></div>
<div style="width: 10px; height :10px; background: url('/images/stories/borders/rb_w.png'); position:absolute; bottom: 0px; right: 0px;"></div>
<img alt="" src="/images/stories/article_list_img.jpg" /></div>

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов