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

29 ноября 2012
870

Много копий сломано вокруг темы, что первее - дизайн или функциональность сайта? Но мы не будем бросаться в крайности - уделим внимание и тому, и другому. Украшением любого сайта становятся иллюстрации. А красиво поданные иллюстрации - ещё лучше. Можно добавить элементам дизайна тень, а можно закругленные углы - сегодня мы научимся делать последние.

Скругленные углы с помощью CSS3

Закругленные углы для блоков и картинок на сайте - давняя мечта разработчиков. Раньше их реализовывали с помощью JavaScript или ещё какими непрямыми методами, но в 2009 году новая редакция стандарта каскадных таблиц стилей - CSS3 - принесла свойство border-radius, которое сейчас и используется повсеместно для скругления углов.

Даже после выхода CSS3 свойство border-radius не сразу стало поддерживаться всеми браузерами. Наиболее оперативные в этом плане, как всегда, оказались Firefox и Google Chrome, следом подтянулись честные труженники браузерного фронат Opera и Safari. Замыкающим, как всегда, Internet Explorer. Однако, с версии IE9 и он признал существование общепринятых стандартов, так что сейчас проблем в использовании скругленных углов нет.

Итак, border-radius - это CSS-свойство, используемое для скругления углов изображений, границ и фонов контейнеров. То есть, если некий контейнер обозначен рамкой с помощью CSS-свойства border, углы рамки будут скруглены. То же касается фона контейнера (установленного, например, с помощью свойства background). Можно border-radius указать для изображения и получим картинку со скругленными углами.

Код может выглядеть так:

 В данном случае указано скругление всех углов любого контейнера класса anydiv (class="anydiv") с радиусом 10 пикселей.

А так можно указать, например, скругление только двух верхних углов:

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

P.S. На продвижение web сайта такие дизайнерские штучки не влияют - это мы делаем только для привлекательности сайта для посетителей. Но грамотное продвижение, конечно, приведёт вам множество посетителей, но удержит их только качественное содержимое сайта.

Related Posts Plugin for WordPress, Blogger...

4 комментария к записи “Скругленные углы средствами CSS3”

  1. n1se (мой Twitter:  aesinru)

    Спасибо. Нужная вещь!!!

    [Ответить]

  2. Emir (мой Twitter:  cyrusborn)

    Странно, что автор не закруглил изображение в примере CSS, а графическим редактором.

    [Ответить]

    deSiter (мой Twitter:  deSiter)

    Просто не стал заморачиваться с изменением стандартного кода, окружающего у меня картинку.

    [Ответить]

  3. Roman (мой Twitter:  http://otoplenia.com)

    Оно так и по другому будет смотреться

    [Ответить]

Комментируйте - автору важно ваше мнение!

Дополнительно: