Сегодня стандарты HTML5 и Css3 все активнее входят в мир веб-дизайна. В скором будущем эти стандарты будут одинаково хорошо поддерживаться всеми браузерами. Но уже сегодня многие новшества начинают активно применяться для дизайна веб страниц. Одним из таких новшеств является скруление углов блоков. Возможно, Вы уже знакомы с этим приемом, но в этом уроке я хочу рассказать Вам, как можно получать не только стандартные формы, но и достаточно необычные…
Сейчас уже многие веб дизайнеры применяют в дизайнах своих веб страниц скругленные углы для блоков и добиваются этого при помощи новых возможностей CSS3. Такие блоки выглядят достаточно привлекательно и более мягко, чем блоки с острыми квадратными углами.
При помощи скругленных углов можно делать красивые кнопки, привлекательные блоки с текстом, а также все, что придёт Вам в голову.
Но немногие знают, что при помощи «продвинутых» методов скругления можно получить не только стандартный прямоугольник со скругленными углами, но и другие интересные формы, которые уже трудно назвать прямоугольником.
Несомненно, такие формы могут украсить Ваш веб-дизайн и привлечь дополнительное внимание к Вашему сайту или блогу.
Сегодня я расскажу и покажу Вам, как можно создавать различные формы при помощи стилей Css3. Давайте, перейдем от слов к делу.
5 способов скругления углов с Css3
1. Для моих пяти способов я создам html-документ, а также файл таблицы стилей с расширением «.css». html-файл я назову «borders.html», а файл таблицы стилей «borders.css» и размещу эти файлы в одном каталоге.
Разметка html-файла будет достаточно простой. Я просто подключаю к нему созданную таблицу стилей, а между тегов «body» размещаю 5 блоков «div» с различными идентификаторами. Внутри каждого блока будет абзац с текстов, чтобы блок не был пустым. Для html-файла это все. Вот его код:
<!doctype html> <html> <head> <meta charset="windows-1251"> <link rel="stylesheet" type="text/css" href="borders.css"> <title>Borders</title> </head> <body> <div id="border0"> <p>This is content for border number zero. It has border-radius</p> </div> <div id="border1"> <p>This is content for border number one. It has border-radius</p> </div> <div id="border2"> <p>This is content for border number two. It has border-radius</p> </div> <div id="border3"> <p>This is content for border number three. It has border-radius</p> </div> <div id="border4"> <p>This is content for border number four. It has border-radius</p> </div> </body> </html>
2. Вся остальная работа будет с файлом таблицы стилей. Он уже подключен к нашему html-документу и теперь осталось только открыть его и начать с ним работать.
Сначала я задам несколько основных стилей для страницы и ее элементов. Я задам ширину страницы; выровняю блоки «div» так, чтобы они располагались в центре; придам им фоновый цвет; создам для блоков отступы, а также сделаю для них рамку в 1 пиксель.
Вот код, задающий основные стили для страницы:
body{text-align:center;
width:960px;
margin:0 auto}
#border0,#border1,#border2,#border3,#border4{
margin-left:320px;
margin-top:20px;
padding:5px;
width:300px;
height:150px;
background:#FFC;
border:1px solid #F90;
}
А вот то, что мы увидим, если просмотрим страницу в браузере.
Пока что ничего особенного. Просто 5 квадратных блоков, но сейчас мы сделаем им разные интересные формы.
3. Начнем с первого блока с идентификатором «border0». Ему мы придадим самое обычное скругление. Для этого для свойства «border-radius» нужно лишь указать радиус скругления и все 4 угла будут округлены согласно этому радиусу.
#border0{border-radius:20px;}
4.Это самое простое. Давайте немного усложним задачу и получим другую форму.
Мы можем придать каждому углу разный радиус скругления. Делается это вот так:
#border1{
border-radius:25px 50px 25px 85px;
}
Первый параметр – это верхний левый угол, второй – верхний правый, третий – нижний правый, четвертый – нижний левый.
Получим вот такой результат:
5. Продолжим наши эксперименты со скруглением углов.
Мы также можем скруглять углы не только по радиусу круга, но и по радиусам эллипса. Для этого сначала нужно указать тот угол, над которым мы будем работать, а потом передать свойству 2 параметра: первый – горизонтальный радиус эллипса, а второй для вертикального радиуса эллипса. Просто представьте в углу вашего блока эллипс и Вам сразу станет понятно, каким образом скруглится угол.
В следующем примере я задаю радиусы скругления для верхнего левого и верхнего правого углов:
#border2{
border-top-left-radius:150px 30px;
border-top-right-radius:150px 30px;
}
Вот такой результат мы получим:
6. Таким же образом можно обработать все углы блока и тогда уже получится совсем другой результат:
#border3{
border-top-left-radius:150px 30px;
border-top-right-radius:150px 30px;
border-bottom-right-radius:150px 30px;
border-bottom-left-radius:150px 30px;
}
7. А теперь попробуйте сделать тоже самое, но только установите для углов различные значения радиусов эллипса:
#border4{
border-top-left-radius:100px 40px;
border-top-right-radius:50px 50px;
border-bottom-right-radius:100px 50px;
border-bottom-left-radius:120px 30px;
margin-bottom:20px;
}
Поэкспериментировав с этим способом можно получать различные интересные формы. А если Вы еще и придадите тень Вашим блокам, то они будут выглядеть еще интереснее и эффектнее.
Надеюсь этот короткий урок был Вам полезен. Я думаю, Вы обязательно найдете применение этим приемам и сможете разнообразить страницы Ваших сайтов. Если нужен полный код – качайте с исходников (в начале статьи).
Пишите свои комментарии, делитесь Вашим мнением и успехами, а также пишите какие темы Вам интересны – буду очень признательна.
Также Вы можете поделиться этим уроком со своими друзьями при помощи кнопок социальных сетей ниже. И конечно же подписывайтесь на обновление блога, если Вы еще на него не подписаны. Со временем я планирую собрать достаточно большой архив полезной информации для веб мастеров и веб дизайнеров… так что оставайтесь на связи!
Спасибо за внимание!
