Создаём закругленные углы в CSS и Photoshop

Дата публикации: 2011-09-04

css3

От автора: в этом учебнике мы покажем, как создать красивую простую навигационную панель, использовав несколько скомбинированных стилей CSS3. Наша цель – повторить внешний вид того, что в прошлом могло быть сделано только путем комбинирования нескольких изображений, JavaScript’а и нескольких div’ов. В общем создадим закругленные углы в CSS. Давайте начнем…

Примечание: все последующие примеры тестировались на Mozilla Firefox, Safari и Chrome.

css3

Детали учебника

Программа: Любой редактор исходного кода (Dreamweaver, Photoshop)

Версия: CS5 (можно любая)

Сложность: Базовый уровень

Примерное время выполнения: 1 час

До начала

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

Шаг 1: Закругленные углы в Photoshop

О них слышали все, говорить о том, как их создать, будет излишне, поэтому в следующих примерах я сосредоточусь на различиях создания эффекта закругленных углов при помощи изображений и преимуществах и недостатках применения вместо этого CSS3.

Создание эффекта закругленных углов довольно просто в любом графическом софте, но в Photoshop’е возникают некоторые трудности:

Точность: даже если вы можете установить радиус закругленного угла, встроенный движок устранения контурных неровностей Photoshop’а часто добавляет к графике один или два лишних пикселя. Многим из нас в прошлом приходилось вручную снижать количество пикселей закругленных углов на неточном изображении, для того, чтобы создать аккуратное соединение с, например, цветами фона.

Закругленные углы

Редактирование: это одна из самых больших проблем создания закругленного угла на основе изображения. Если вы создаете в Photoshop’е графику для угла радиусом в 10px, и по какой-то причине вам нужно увеличить радиус до 20px, сделать это можно, только перечертив фигуру, или вручную отредактировав все ее углы, теряя при этом время и точность. Изменение размера – еще одна огромная проблема, если вам нужно растянуть или увеличить фигуру, вам приходится применять инструмент Photoshop’а Выделение точки (Point Selection), потому что употребление Сетки трансформации (Transform Controls) может вызвать нежелательные искажения формы угла. Я даже не буду упоминать о том, что разделение углов на слои занимает приличное количество ценных минут.

Закругленные углы

Заливки и Рамки: создание заливки градиента внутри основанного на изображении блока закругленного угла всегда было непростой задачей даже без перекрывания границ – чтобы разделить на слои вовлеченные изображения, требуется хирургическая точность. Вам нужно создать по меньшей мере 3 изображения для каждого блока, одно для верхних углов, другое для нижних и горизонтальный или вертикальный градиент, а затем написать для них код. Другой проблемой заливки изображения является то, что контейнеру часто требуется увеличить высоту или ширину, получая при этом нежелательный эффект градиента (смотрите скриншот внизу).

Заливки и Рамки

Стили смешанных углов: в Photoshop’е создании стилей смешанных углов занимает время, в нем отсутствуют опции комбинирования стилей углов. Вам приходится вручную уменьшать/увеличивать радиус или комбинировать формы… а затем каждый угол разделять на слои.

Стили смешанных углов

Закругленные углы в CSS

Применение CSS3 для создания классических закругленных углов, основанных на изображении – отличная идея. Вот пара аргументов «за»:

Снижается количество изображений и HTTP-запросов к серверу

Работает на всех современных браузерах (кроме IE 6,7,8), включая большинство популярных мобильных браузеров.

Чтобы заставить их работать, требуется всего пара строк в файле CSS

Увеличение/уменьшение радиуса, изменение размера, изменение заливки и границ занимают секунды, а в Photoshop’е – несколько минут

Давайте рассмотрим код для создания закругленных углов в CSS:

/*Rounded Corner Boxes*/
.box{
    background-image:-moz-linear-gradient(top, #FAD502, #E89502);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FAD502), to(#E89502), color-stop(1,#E89502));
}
 
.fourcorners{
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
}
 
.topleft{
    -moz-border-radius-topleft: 20px;
    -webkit-border-top-left-radius: 20px;
    -khtml-border-radius-topleft: 20px;
    border-top-left-radius: 20px;
}
 
.bottomleft{
    -moz-border-radius-bottomleft: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -khtml-border-radius-bottomleft: 20px;
    border-bottom-left-radius: 20px;
}
 
.topright{
    -moz-border-radius-topright: 20px;
    -webkit-border-top-right-radius: 20px;
    -khtml-border-radius-topright: 20px;
    border-top-right-radius: 20px;
}
 
.bottomright{
    -moz-border-radius-bottomright: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -khtml-border-radius-bottomright: 20px;
    border-bottom-right-radius: 20px;
}
 
.asymmetrical1{
    -webkit-border-top-left-radius: 160px;
    -khtml-border-radius-topleft: 160px;
    -moz-border-radius-topleft: 160px;
    border-top-left-radius: 160px;
 
    -webkit-border-top-right-radius: 20px;
    -khtml-border-radius-topright: 20px;
    -moz-border-radius-topright: 20px;
    border-top-right-radius: 20px;
 
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-radius-bottomleft: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-left-radius: 10px;
 
    -webkit-border-bottom-right-radius: 0px;
    -khtml-border-radius-bottomright: 0px;
    -moz-border-radius-bottomright: 0px;
    border-bottom-right-radius: 0px;
}
 
.asymmetrical2{
    -webkit-border-top-left-radius: 0px;
    -khtml-border-radius-topleft: 0px;
    -moz-border-radius-topleft: 0px;
    border-top-left-radius: 0px;
 
    -webkit-border-top-right-radius: 90px;
    -khtml-border-radius-topright: 90px;
    -moz-border-radius-topright: 90px;
    border-top-right-radius: 90px;
 
    -webkit-border-bottom-left-radius: 0px;
    -khtml-border-radius-bottomleft: 0px;
    -moz-border-radius-bottomleft: 0px; border-bottom-left-radius: 0px;
 
    -webkit-border-bottom-right-radius: 90px;
    -khtml-border-radius-bottomright: 90px;
    -moz-border-radius-bottomright: 90px;
    border-bottom-right-radius: 90px;
}
 
.circle{
    width:170px;
    height:170px;
 
    padding:15px;
    font-family:Arial, Helvetica, sans-serif;
    color:#FFF;
    font-size:12px;
    font-weight:bold;
    float:left;
 
    background-image:-moz-linear-gradient(top, #FAD502, #E89502);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FAD502), to(#E89502), color-stop(1,#E89502));
 
    -webkit-border-top-left-radius: 100px;
    -khtml-border-radius-topleft: 100px;
    -moz-border-radius-topleft: 100px;
    border-top-left-radius: 100px;
 
    -webkit-border-top-right-radius: 100px;
    -khtml-border-radius-topright: 100px;
    -moz-border-radius-topright: 100px;
    border-top-right-radius: 100px;
 
    -webkit-border-bottom-left-radius: 100px;
    -khtml-border-radius-bottomleft: 100px;
    -moz-border-radius-bottomleft: 100px;
    border-bottom-left-radius: 100px;
 
    -webkit-border-bottom-right-radius: 100px;
    -khtml-border-radius-bottomright: 100px;
    -moz-border-radius-bottomright: 100px;
    border-bottom-right-radius: 100px;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

/*Rounded Corner Boxes*/

.box{

background-image:-moz-linear-gradient(top, #FAD502, #E89502);

background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FAD502), to(#E89502), color-stop(1,#E89502));

}

.fourcorners{

-moz-border-radius: 20px;

-webkit-border-radius: 20px;

-khtml-border-radius: 20px;

border-radius: 20px;

}

.topleft{

-moz-border-radius-topleft: 20px;

-webkit-border-top-left-radius: 20px;

-khtml-border-radius-topleft: 20px;

border-top-left-radius: 20px;

}

.bottomleft{

-moz-border-radius-bottomleft: 20px;

-webkit-border-bottom-left-radius: 20px;

-khtml-border-radius-bottomleft: 20px;

border-bottom-left-radius: 20px;

}

.topright{

-moz-border-radius-topright: 20px;

-webkit-border-top-right-radius: 20px;

-khtml-border-radius-topright: 20px;

border-top-right-radius: 20px;

}

.bottomright{

-moz-border-radius-bottomright: 20px;

-webkit-border-bottom-right-radius: 20px;

-khtml-border-radius-bottomright: 20px;

border-bottom-right-radius: 20px;

}

.asymmetrical1{

-webkit-border-top-left-radius: 160px;

-khtml-border-radius-topleft: 160px;

-moz-border-radius-topleft: 160px;

border-top-left-radius: 160px;

-webkit-border-top-right-radius: 20px;

-khtml-border-radius-topright: 20px;

-moz-border-radius-topright: 20px;

border-top-right-radius: 20px;

-webkit-border-bottom-left-radius: 10px;

-khtml-border-radius-bottomleft: 10px;

-moz-border-radius-bottomleft: 10px;

border-bottom-left-radius: 10px;

-webkit-border-bottom-right-radius: 0px;

-khtml-border-radius-bottomright: 0px;

-moz-border-radius-bottomright: 0px;

border-bottom-right-radius: 0px;

}

.asymmetrical2{

-webkit-border-top-left-radius: 0px;

-khtml-border-radius-topleft: 0px;

-moz-border-radius-topleft: 0px;

border-top-left-radius: 0px;

-webkit-border-top-right-radius: 90px;

-khtml-border-radius-topright: 90px;

-moz-border-radius-topright: 90px;

border-top-right-radius: 90px;

-webkit-border-bottom-left-radius: 0px;

-khtml-border-radius-bottomleft: 0px;

-moz-border-radius-bottomleft: 0px; border-bottom-left-radius: 0px;

-webkit-border-bottom-right-radius: 90px;

-khtml-border-radius-bottomright: 90px;

-moz-border-radius-bottomright: 90px;

border-bottom-right-radius: 90px;

}

.circle{

width:170px;

height:170px;

padding:15px;

font-family:Arial, Helvetica, sans-serif;

color:#FFF;

font-size:12px;

font-weight:bold;

float:left;

background-image:-moz-linear-gradient(top, #FAD502, #E89502);

background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FAD502), to(#E89502), color-stop(1,#E89502));

-webkit-border-top-left-radius: 100px;

-khtml-border-radius-topleft: 100px;

-moz-border-radius-topleft: 100px;

border-top-left-radius: 100px;

-webkit-border-top-right-radius: 100px;

-khtml-border-radius-topright: 100px;

-moz-border-radius-topright: 100px;

border-top-right-radius: 100px;

-webkit-border-bottom-left-radius: 100px;

-khtml-border-radius-bottomleft: 100px;

-moz-border-radius-bottomleft: 100px;

border-bottom-left-radius: 100px;

-webkit-border-bottom-right-radius: 100px;

-khtml-border-radius-bottomright: 100px;

-moz-border-radius-bottomright: 100px;

border-bottom-right-radius: 100px;

}

Просмотреть Демо

Шаг 2: Тени блока

Один из самых красивых эффектов, которые можно получить при помощи Photoshop’а – это отбрасываемые тени (Drop Shadow) и внутренние тени (Inner Shadow). При их правильном применении в результате получаются выдающиеся 3D-эффекты. Конечно, использовав отбрасываемую или внутреннюю тень неправильно, можно быстро добиться убогого вида.

Ниже вы найдете пару хороших примеров:

Тени блока

Сегодня в CSS3

CSS3 дает возможность создавать тени всего лишь при помощи пары строк кода, «дежурный» стиль — "box-shadow".

Для создания похожей на созданную в Photoshop’е Отбрасываемой тени (Drop Shadow) можно применить следующий синтаксис:

box-shadow: <xpos> <ypos> <size> <color>;

1	box-shadow: <xpos> <ypos> <size> <color>;

Для создания похожей на созданную в Photoshop’е Внутренней тени (Inner Shadow) можно применить следующий синтаксис:

box-shadow: inset <style> <xpos> <ypos> <size> <color>;

1	box-shadow: inset <style> <xpos> <ypos> <size> <color>;

А вот код для создания нескольких вариантов тени блока (Box Shadow):

/*Box shadows*/
.dropshadow{
    background-image:-moz-linear-gradient(top, #F3F4F5, #C8C9CA);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F3F4F5), to(#C8C9CA), color-stop(1,#C8C9CA));
 
    border:2px solid #F2F2F2;
 
    box-shadow: 10px 10px 10px rgba(0,0,0,0.25);
    -moz-box-shadow: 10px 10px 10px rgba(0,0,0,0.25);
    -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.25);
}
 
.innershadow{
    background-image:-moz-linear-gradient(top, #E2E2E2, #CCCCCC);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E2E2E2), to(#CCCCCC), color-stop(1,#CCCCCC));
 
    border:2px solid #FEFEFE;
 
    box-shadow: inset 5px 5px 5px rgba(0,0,0,0.25);
    -moz-box-shadow: inset 5px 5px 5px rgba(0,0,0,0.25);
    -webkit-box-shadow: inset 5px 5px 5px rgba(0,0,0,0.25);
}
 
.intenseshadow{
    background-color:#FFF;
    border:1px solid #F00;
 
    box-shadow: 10px 10px 0px #F00;
    -moz-box-shadow: 10px 10px 0px #F00;
    -webkit-box-shadow: 10px 10px 0px #F00;
}
 
.bevel{
    background-color:#CCC;
 
    box-shadow: 10px 10px 0px #F00;
    -moz-box-shadow:inset 0px 0px 120px rgba(0,0,0,.60);
    -webkit-box-shadow: 10px 10px 0px #F00;
}

/*Box shadows*/

.dropshadow{

background-image:-moz-linear-gradient(top, #F3F4F5, #C8C9CA);

background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F3F4F5), to(#C8C9CA), color-stop(1,#C8C9CA));

border:2px solid #F2F2F2;

box-shadow: 10px 10px 10px rgba(0,0,0,0.25);

-moz-box-shadow: 10px 10px 10px rgba(0,0,0,0.25);

-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.25);

}

.innershadow{

background-image:-moz-linear-gradient(top, #E2E2E2, #CCCCCC);

background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E2E2E2), to(#CCCCCC), color-stop(1,#CCCCCC));

border:2px solid #FEFEFE;

box-shadow: inset 5px 5px 5px rgba(0,0,0,0.25);

-moz-box-shadow: inset 5px 5px 5px rgba(0,0,0,0.25);

-webkit-box-shadow: inset 5px 5px 5px rgba(0,0,0,0.25);

}

.intenseshadow{

background-color:#FFF;

border:1px solid #F00;

box-shadow: 10px 10px 0px #F00;

-moz-box-shadow: 10px 10px 0px #F00;

-webkit-box-shadow: 10px 10px 0px #F00;

}

.bevel{

background-color:#CCC;

box-shadow: 10px 10px 0px #F00;

-moz-box-shadow:inset 0px 0px 120px rgba(0,0,0,.60);

-webkit-box-shadow: 10px 10px 0px #F00;

}

Просмотреть Демо

Шаг 3: Навигационное меню

Для создания навигационного меню мы скомбинируем закругленные углы, заливку градиента и тени блока. Начать всегда можно с создания графики в Photoshop’е; если хотите сразу перейти к делу, возьмите закачку исходного кода вверху страницы.

навигационное меню

Самое забавное при этом – попробовать получить тот же результат с помощью CSS3!

Сначала макет HTML (да, я применяю тэг "nav" из HTML5, потому что он хорош и отлично подходит семантически – но вы вместо него можете взять div).

<nav class="horizontal">
  <ul>
    <li><a href="#">Lorem Ipsum</a></li>
    <li><a href="#">Dolor Sit Amet</a></li>
    <li><a href="#">Sed do Eiusmod</a></li>
    <li><a href="#">Consectetur Adipisicing</a></li>
    <li><a href="#">Lipsum amet</a></li>
    <li><a href="#">Lorem Ipsum</a></li>
  </ul>
</nav>

<ul>

<li><a href="#">Lorem Ipsum</a></li>

<li><a href="#">Dolor Sit Amet</a></li>

<li><a href="#">Sed do Eiusmod</a></li>

<li><a href="#">Consectetur Adipisicing</a></li>

<li><a href="#">Lipsum amet</a></li>

<li><a href="#">Lorem Ipsum</a></li>

</ul>

</nav>

Шаг 4: CSS

Теперь перейдем к CSS. Сначала установим расположение и высоту.

/*Sample Navigation Bar*/
nav.horizontal{
}
 
nav.horizontal h3{
    padding-bottom:20px;
}
 
nav.horizontal ul{
    height:50px;
}
 
nav.horizontal ul li{
    list-style:none;
    display:inline;
    float:left;
}
 
nav.horizontal ul li a{
    display:block;
    height:28px;
    margin:2px 6px 2px 6px;
    padding:15px 20px 0px 20px;
}
 
nav.horizontal ul li a:hover{
}

/*Sample Navigation Bar*/

nav.horizontal{

}

nav.horizontal h3{

padding-bottom:20px;

}

nav.horizontal ul{

height:50px;

}

nav.horizontal ul li{

list-style:none;

display:inline;

float:left;

}

nav.horizontal ul li a{

display:block;

height:28px;

margin:2px 6px 2px 6px;

padding:15px 20px 0px 20px;

}

nav.horizontal ul li a:hover{

}

Теперь добавим заливки градиента (Gradient Fill):

nav.horizontal{
}
 
nav.horizontal h3{
padding-bottom:20px;
}
 
nav.horizontal ul{
height:50px;
 
background-image:-moz-linear-gradient(top, #93C204, #608009);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#93C204), to(#608009), color-stop(1,#608009));
 
border:1px solid #608009;
}
 
nav.horizontal ul li{
list-style:none;
display:inline;
float:left;
}
 
nav.horizontal ul li a{
display:block;
height:28px;
margin:2px 6px 2px 6px;
padding:15px 20px 0px 20px;
 
font-size:12px;
font-weight:bold;
color:#FFF;
text-transform:uppercase;
text-decoration:none;
 
border:1px solid transparent;
background-image:none;
}
 
nav.horizontal ul li a:hover{
background-image:-moz-linear-gradient(top, #161616, #2B3615);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#161616), to(#2B3615), color-stop(1,#2B3615));
 
border:1px solid #A3D804;
}

nav.horizontal{

}

nav.horizontal h3{

padding-bottom:20px;

}

nav.horizontal ul{

height:50px;

background-image:-moz-linear-gradient(top, #93C204, #608009);

background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#93C204), to(#608009), color-stop(1,#608009));

border:1px solid #608009;

}

nav.horizontal ul li{

list-style:none;

display:inline;

float:left;

}

nav.horizontal ul li a{

display:block;

height:28px;

margin:2px 6px 2px 6px;

padding:15px 20px 0px 20px;

font-size:12px;

font-weight:bold;

color:#FFF;

text-transform:uppercase;

text-decoration:none;

border:1px solid transparent;

background-image:none;

}

nav.horizontal ul li a:hover{

background-image:-moz-linear-gradient(top, #161616, #2B3615);

background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#161616), to(#2B3615), color-stop(1,#2B3615));

border:1px solid #A3D804;

}

Далее закругленные углы (Rounded Corners):

nav.horizontal{
}
 
nav.horizontal h3{
padding-bottom:20px;
}
 
nav.horizontal ul{
height:50px;
 
background-image:-moz-linear-gradient(top, #93C204, #608009);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#93C204), to(#608009), color-stop(1,#608009));
 
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
 
border:1px solid #608009;
}
 
nav.horizontal ul li{
list-style:none;
display:inline;
float:left;
}
 
nav.horizontal ul li a{
display:block;
height:28px;
margin:2px 6px 2px 6px;
padding:15px 20px 0px 20px;
 
font-size:12px;
font-weight:bold;
color:#FFF;
text-transform:uppercase;
text-decoration:none;
 
border:1px solid transparent;
background-image:none;
 
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
 
nav.horizontal ul li a:hover{
background-image:-moz-linear-gradient(top, #161616, #2B3615);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#161616), to(#2B3615), color-stop(1,#2B3615));
 
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
 
border:1px solid #A3D804;
}

nav.horizontal{

}

nav.horizontal h3{

padding-bottom:20px;

}

nav.horizontal ul{

height:50px;

background-image:-moz-linear-gradient(top, #93C204, #608009);

background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#93C204), to(#608009), color-stop(1,#608009));

-moz-border-radius: 8px;

-webkit-border-radius: 8px;

-khtml-border-radius: 8px;

border-radius: 8px;

border:1px solid #608009;

}

nav.horizontal ul li{

list-style:none;

display:inline;

float:left;

}

nav.horizontal ul li a{

display:block;

height:28px;

margin:2px 6px 2px 6px;

padding:15px 20px 0px 20px;

font-size:12px;

font-weight:bold;

color:#FFF;

text-transform:uppercase;

text-decoration:none;

border:1px solid transparent;

background-image:none;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

-khtml-border-radius: 10px;

border-radius: 10px;

}

nav.horizontal ul li a:hover{

background-image:-moz-linear-gradient(top, #161616, #2B3615);

background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#161616), to(#2B3615), color-stop(1,#2B3615));

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

-khtml-border-radius: 10px;

border-radius: 10px;

border:1px solid #A3D804;

}

И наконец, тени блока (Box Shadows):

nav.horizontal{
}
 
nav.horizontal h3{
    padding-bottom:20px;
}
 
nav.horizontal ul{
    height:50px;
 
    background-image:-moz-linear-gradient(top, #93C204, #608009);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#93C204), to(#608009), color-stop(1,#608009));
 
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    border-radius: 8px;
 
    border:1px solid #608009;
 
    box-shadow: 5px 5px 5px rgba(0,0,0,0.25);
    -moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.25);
    -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.25);
}
 
nav.horizontal ul li{
    list-style:none;
    display:inline;
    float:left;
}
 
nav.horizontal ul li a{
    display:block;
    height:28px;
    margin:2px 6px 2px 6px;
    padding:15px 20px 0px 20px;
 
    font-size:12px;
    font-weight:bold;
    color:#FFF;
    text-transform:uppercase;
    text-decoration:none;
 
    border:1px solid transparent;
    background-image:none;
 
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
}
 
nav.horizontal ul li a:hover{
    background-image:-moz-linear-gradient(top, #161616, #2B3615);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#161616), to(#2B3615), color-stop(1,#2B3615));
 
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
 
    border:1px solid #A3D804;
 
    box-shadow: inset 4px 4px 4px rgba(0,0,0,0.25);
    -moz-box-shadow: inset 4px 4px 4px rgba(0,0,0,0.25);
    -webkit-box-shadow: inset 4px 4px 4px rgba(0,0,0,0.25);
}

nav.horizontal{

}

nav.horizontal h3{

padding-bottom:20px;

}

nav.horizontal ul{

height:50px;

background-image:-moz-linear-gradient(top, #93C204, #608009);

background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#93C204), to(#608009), color-stop(1,#608009));

-moz-border-radius: 8px;

-webkit-border-radius: 8px;

-khtml-border-radius: 8px;

border-radius: 8px;

border:1px solid #608009;

box-shadow: 5px 5px 5px rgba(0,0,0,0.25);

-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.25);

-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.25);

}

nav.horizontal ul li{

list-style:none;

display:inline;

float:left;

}

nav.horizontal ul li a{

display:block;

height:28px;

margin:2px 6px 2px 6px;

padding:15px 20px 0px 20px;

font-size:12px;

font-weight:bold;

color:#FFF;

text-transform:uppercase;

text-decoration:none;

border:1px solid transparent;

background-image:none;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

-khtml-border-radius: 10px;

border-radius: 10px;

}

nav.horizontal ul li a:hover{

background-image:-moz-linear-gradient(top, #161616, #2B3615);

background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#161616), to(#2B3615), color-stop(1,#2B3615));

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

-khtml-border-radius: 10px;

border-radius: 10px;

border:1px solid #A3D804;

box-shadow: inset 4px 4px 4px rgba(0,0,0,0.25);

-moz-box-shadow: inset 4px 4px 4px rgba(0,0,0,0.25);

-webkit-box-shadow: inset 4px 4px 4px rgba(0,0,0,0.25);

}

Просмотреть Демо

Шаг 5: устраняем «вытекание»

Финальное примечание по поводу закругленных углов с заливкой и границей: они выходят за край («вытекают»). Вы заметите это при проведении мышью над кнопками навигации:

вытекание

Этого можно достичь, применив свойство background-clip, которое определяет, распространяется ли фон данного элемента на края. По умолчанию (border-box) позволяет распространяться, что дает нам беспорядочное «вытекание», но его можно заменить на padding-box, который останавливает распространение, не достигнув краев.

Давайте добавим к свой кнопке следующие стили css:

nav.horizontal ul li a{
    display:block;
    height:28px;
    margin:2px 6px 2px 6px;
    padding:15px 20px 0px 20px;
 
    font-size:12px;
    font-weight:bold;
    color:#FFF;
    text-transform:uppercase;
    text-decoration:none;
 
    border:1px solid transparent;
    background-image:none;
 
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
 
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

nav.horizontal ul li a{

display:block;

height:28px;

margin:2px 6px 2px 6px;

padding:15px 20px 0px 20px;

font-size:12px;

font-weight:bold;

color:#FFF;

text-transform:uppercase;

text-decoration:none;

border:1px solid transparent;

background-image:none;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

-khtml-border-radius: 10px;

border-radius: 10px;

-moz-background-clip: padding;

-webkit-background-clip: padding-box;

background-clip: padding-box;

}

…которые дают нам более желательный результат при проведении над ней мышью:

вытекание

Цвет заливки аккуратно располагается внутри границ нашего элемента.

Заключение

Создание красивой и хорошо смотрящейся простой панели навигации при помощи CSS3 легче и быстрее, чем когда-либо, так почему бы не попробовать ее в своем следующем проекте?

На этом урок по созданию закругленных углов в CSS и Фотошоп, для меню сайта, окончен. Спасибо за прочтение!

Автор: Alvaro Guzman

Источник: //webdesign.tutsplus.com/

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Метки: Photoshop, css3, закругленные углы, тень блока