Закругление углов в дизайне сайта на CSS3

Сегодня расскажу про очень интересный стиль в новом CSS3 который придает бордюрам округлость. То, что раньше делалось исключительно на картинках или больших скриптах, теперь создается одной сторкой. Тег называется border-radius и может закруглить любой угол, под любым наклоном, в слюбую сторону

Синтаксис border-radius:

Закругление углов в дизайне сайта на CSS3


Закругление углов в дизайне сайта на CSS3


Думаю пояснять ничего не стоит. Все предельно просто. Это самый простой способ задать окружность. Закруглит равномерно со всех сторон. Так же можно задать определенный угол закругления. Т.е. под каким наклоном и в какую сторону:

Закругление углов в дизайне сайта на CSS3


Первое число - горизонтальное отклонение, 2е - вертикальное. Линии соедиянт эти точки и получится воеобразное закругления

Пример последнего скриншота:

<div style="
border-top-left-radius:25px 100px;
border-top-right-radius:25px 100px;
border-bottom-right-radius:25px 100px;
border-bottom-left-radius:25px 100px;
border:1px solid #ccc;
width:500px;
padding:30px 5px;
font:20px arial;
background:#ccc;">

border-top-left-radius:25px 100px; <br/>
border-top-right-radius:25px 100px; <br/>
border-bottom-right-radius:25px 100px; <br/>
border-bottom-left-radius:25px 100px; <br/>
Вертикально - 100, горизонтально - 25

</div>
Понравилась статья "Закругление углов в дизайне сайта на CSS3" из раздела Создание сайта » Работа с кодом? Подпишись на RSS. Будь в курсе всего происходящего на сайте
Комментариев: 0 •  Просмотров: 3287   Дата: 30-янв-2012, 21:54

Похожие статьи

Комментарии

b
i
u
s
|
left
center
right
|
emo
color
|
hide
quote
translit
© 2010-2015 artemmian.ru v 7.0: flexyflat tpl Designed by artstudios
Карта сайта HTMLКарта сайта XMLПравообладателям
Яндекс.Метрика