CSS3 vs. Photoshop: закругленные углы и тени блока
От автора: в этом учебнике мы покажем, как создать красивую простую навигационную панель, использовав несколько скомбинированных стилей CSS3. Наша цель – повторить внешний вид того, что в прошлом могло быть сделано только путем комбинирования нескольких изображений, JavaScript’а и нескольких div’ов. Давайте начнем…
Примечание: все последующие примеры тестировались на Mozilla Firefox, Safari и Chrome.
Детали учебника
Программа: Любой редактор исходного кода (Dreamweaver, Photoshop)
Версия: CS5 (можно любая)
Сложность: Базовый уровень
Примерное время выполнения: 1 час
До начала
Хорошо смотрящаяся и правильно спроектированная навигационная панель с зари веб-дизайна была одним из самых мощных элементов организации и структуризации веб-сайта. В прошлом создание красивого проекта с применением теней, градиентов, закругленных углов и эффекта при проведении мышью над элементом требовалось множество приемов, увеличивавших размер кода и количество изображений.
В этом учебнике мы углубимся в два очень важных эффекта CSS3: Закругленные углы и Тени блока, к тому же применим линейные градиенты.
Шаг 1: Закругленные углы
О них слышали все, говорить о том, как их создать, будет излишне, поэтому в следующих примерах я сосредоточусь на различиях создания эффекта закругленных углов при помощи изображений и преимуществах и недостатках применения вместо этого CSS3.
Создание эффекта закругленных углов довольно просто в любом графическом софте, но в Photoshop’е возникают некоторые трудности:
Точность: даже если вы можете установить радиус закругленного угла, встроенный движок устранения контурных неровностей Photoshop’а часто добавляет к графике один или два лишних пикселя. Многим из нас в прошлом приходилось вручную снижать количество пикселей закругленных углов на неточном изображении, для того, чтобы создать аккуратное соединение с, например, цветами фона.
Редактирование: это одна из самых больших проблем создания закругленного угла на основе изображения. Если вы создаете в Photoshop’е графику для угла радиусом в 10px, и по какой-то причине вам нужно увеличить радиус до 20px, сделать это можно, только перечертив фигуру, или вручную отредактировав все ее углы, теряя при этом время и точность. Изменение размера – еще одна огромная проблема, если вам нужно растянуть или увеличить фигуру, вам приходится применять инструмент Photoshop’а Выделение точки (Point Selection), потому что употребление Сетки трансформации (Transform Controls) может вызвать нежелательные искажения формы угла. Я даже не буду упоминать о том, что разделение углов на слои занимает приличное количество ценных минут.
Заливки и Рамки: создание заливки градиента внутри основанного на изображении блока закругленного угла всегда было непростой задачей даже без перекрывания границ – чтобы разделить на слои вовлеченные изображения, требуется хирургическая точность. Вам нужно создать по меньшей мере 3 изображения для каждого блока, одно для верхних углов, другое для нижних и горизонтальный или вертикальный градиент, а затем написать для них код. Другой проблемой заливки изображения является то, что контейнеру часто требуется увеличить высоту или ширину, получая при этом нежелательный эффект градиента (смотрите скриншот внизу).
Стили смешанных углов: в Photoshop’е создании стилей смешанных углов занимает время, в нем отсутствуют опции комбинирования стилей углов. Вам приходится вручную уменьшать/увеличивать радиус или комбинировать формы… а затем каждый угол разделять на слои.
Сегодня в CSS3
Применение CSS3 для создания классических закругленных углов, основанных на изображении – отличная идея. Вот пара аргументов «за»:
Снижается количество изображений и HTTP-запросов к серверу
Работает на всех современных браузерах (кроме IE 6,7,8), включая большинство популярных мобильных браузеров.
Чтобы заставить их работать, требуется всего пара строк в файле CSS
Увеличение/уменьшение радиуса, изменение размера, изменение заливки и границ занимают секунды, а в Photoshop’е – несколько минут
Давайте рассмотрим код для создания закругленных углов у элемента HTML:
001./*Rounded Corner Boxes*/
002..box{
003.background-image:-moz-linear-gradient(top, #FAD502, #E89502);
004.background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FAD502), to(#E89502), color-stop(1,#E89502));
005.}
006.
007..fourcorners{
008.-moz-border-radius: 20px;
009.-webkit-border-radius: 20px;
010.-khtml-border-radius: 20px;
011.border-radius: 20px;
012.}
013.
014..topleft{
015.-moz-border-radius-topleft: 20px;
016.-webkit-border-top-left-radius: 20px;
017.-khtml-border-radius-topleft: 20px;
018.border-top-left-radius: 20px;
019.}
020.
021..bottomleft{
022.-moz-border-radius-bottomleft: 20px;
023.-webkit-border-bottom-left-radius: 20px;
024.-khtml-border-radius-bottomleft: 20px;
025.border-bottom-left-radius: 20px;
026.}
027.
028..topright{
029.-moz-border-radius-topright: 20px;
030.-webkit-border-top-right-radius: 20px;
031.-khtml-border-radius-topright: 20px;
032.border-top-right-radius: 20px;
033.}
034.
035..bottomright{
036.-moz-border-radius-bottomright: 20px;
037.-webkit-border-bottom-right-radius: 20px;
038.-khtml-border-radius-bottomright: 20px;
039.border-bottom-right-radius: 20px;
040.}
041.
042..asymmetrical1{
043.-webkit-border-top-left-radius: 160px;
044.-khtml-border-radius-topleft: 160px;
045.-moz-border-radius-topleft: 160px;
046.border-top-left-radius: 160px;
047.
048.-webkit-border-top-right-radius: 20px;
049.-khtml-border-radius-topright: 20px;
050.-moz-border-radius-topright: 20px;
051.border-top-right-radius: 20px;
052.
053.-webkit-border-bottom-left-radius: 10px;
054.-khtml-border-radius-bottomleft: 10px;
055.-moz-border-radius-bottomleft: 10px;
056.border-bottom-left-radius: 10px;
057.
058.-webkit-border-bottom-right-radius: 0px;
059.-khtml-border-radius-bottomright: 0px;
060.-moz-border-radius-bottomright: 0px;
061.border-bottom-right-radius: 0px;
062.}
063.
064..asymmetrical2{
065.-webkit-border-top-left-radius: 0px;
066.-khtml-border-radius-topleft: 0px;
067.-moz-border-radius-topleft: 0px;
068.border-top-left-radius: 0px;
069.
070.-webkit-border-top-right-radius: 90px;
071.-khtml-border-radius-topright: 90px;
072.-moz-border-radius-topright: 90px;
073.border-top-right-radius: 90px;
074.
075.-webkit-border-bottom-left-radius: 0px;
076.-khtml-border-radius-bottomleft: 0px;
077.-moz-border-radius-bottomleft: 0px; border-bottom-left-radius: 0px;
078.
079.-webkit-border-bottom-right-radius: 90px;
080.-khtml-border-radius-bottomright: 90px;
081.-moz-border-radius-bottomright: 90px;
082.border-bottom-right-radius: 90px;
083.}
084.
085..circle{
086.width:170px;
087.height:170px;
088.
089.padding:15px;
090.font-family:Arial, Helvetica, sans-serif;
091.color:#FFF;
092.font-size:12px;
093.font-weight:bold;
094.float:left;
095.
096.background-image:-moz-linear-gradient(top, #FAD502, #E89502);
097.background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FAD502), to(#E89502), color-stop(1,#E89502));
098.
099.-webkit-border-top-left-radius: 100px;
100.-khtml-border-radius-topleft: 100px;
101.-moz-border-radius-topleft: 100px;
102.border-top-left-radius: 100px;
103.
104.-webkit-border-top-right-radius: 100px;
105.-khtml-border-radius-topright: 100px;
106.-moz-border-radius-topright: 100px;
107.border-top-right-radius: 100px;
108.
109.-webkit-border-bottom-left-radius: 100px;
110.-khtml-border-radius-bottomleft: 100px;
111.-moz-border-radius-bottomleft: 100px;
112.border-bottom-left-radius: 100px;
113.
114.-webkit-border-bottom-right-radius: 100px;
115.-khtml-border-radius-bottomright: 100px;
116.-moz-border-radius-bottomright: 100px;
117.border-bottom-right-radius: 100px;
118.}Просмотреть Демо
Шаг 2: Тени блока
Один из самых красивых эффектов, которые можно получить при помощи Photoshop’а – это отбрасываемые тени (Drop Shadow) и внутренние тени (Inner Shadow). При их правильном применении в результате получаются выдающиеся 3D-эффекты. Конечно, использовав отбрасываемую или внутреннюю тень неправильно, можно быстро добиться убогого вида.
Ниже вы найдете пару хороших примеров:
Сегодня в CSS3
CSS3 дает возможность создавать тени всего лишь при помощи пары строк кода, «дежурный» стиль — “box-shadow”.
Для создания похожей на созданную в Photoshop’е Отбрасываемой тени (Drop Shadow) можно применить следующий синтаксис:
box-shadow: <xpos> <ypos> <size> <color>;
Для создания похожей на созданную в Photoshop’е Внутренней тени (Inner Shadow) можно применить следующий синтаксис:box-shadow: inset <style> <xpos> <ypos>
<size> <color>;
А вот код для создания нескольких вариантов тени блока (Box Shadow):
01./*Box shadows*/
02..dropshadow{
03.background-image:-moz-linear-gradient(top, #F3F4F5, #C8C9CA);
04.background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F3F4F5), to(#C8C9CA), color-stop(1,#C8C9CA));
05.
06.border:2px solid #F2F2F2;
07.
08.box-shadow: 10px 10px 10px rgba(0,0,0,0.25);
09.-moz-box-shadow: 10px 10px 10px rgba(0,0,0,0.25);
10.-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.25);
11.}
12.
13..innershadow{
14.background-image:-moz-linear-gradient(top, #E2E2E2, #CCCCCC);
15.background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E2E2E2), to(#CCCCCC), color-stop(1,#CCCCCC));
16.
17.border:2px solid #FEFEFE;
18.
19.box-shadow: inset 5px 5px 5px rgba(0,0,0,0.25);
20.-moz-box-shadow: inset 5px 5px 5px rgba(0,0,0,0.25);
21.-webkit-box-shadow: inset 5px 5px 5px rgba(0,0,0,0.25);
22.}
23.
24..intenseshadow{
25.background-color:#FFF;
26.border:1px solid #F00;
27.
28.box-shadow: 10px 10px 0px #F00;
29.-moz-box-shadow: 10px 10px 0px #F00;
30.-webkit-box-shadow: 10px 10px 0px #F00;
31.}
32.
33..bevel{
34.background-color:#CCC;
35.
36.box-shadow: 10px 10px 0px #F00;
37.-moz-box-shadow:inset 0px 0px 120px rgba(0,0,0,.60);
38.-webkit-box-shadow: 10px 10px 0px #F00;
39.}Просмотреть Демо
Шаг 3: Навигационное меню
Для создания навигационного меню мы скомбинируем закругленные углы, заливку градиента и тени блока. Начать всегда можно с создания графики в Photoshop’е; если хотите сразу перейти к делу, возьмите закачку исходного кода вверху страницы.
Самое забавное при этом – попробовать получить тот же результат с помощью CSS3!
Сначала макет HTML (да, я применяю тэг “nav” из HTML5, потому что он хорош и отлично подходит семантически – но вы вместо него можете взять div).
01.<nav class="horizontal"> 02.<ul> 03.<li><a href="#">Lorem Ipsum</a></li> 04.<li><a href="#">Dolor Sit Amet</a></li> 05.<li><a href="#">Sed do Eiusmod</a></li> 06.<li><a href="#">Consectetur Adipisicing</a></li> 07.<li><a href="#">Lipsum amet</a></li> 08.<li><a href="#">Lorem Ipsum</a></li> 09.</ul> 10.</nav>
Шаг 4: CSS
Теперь перейдем к CSS. Сначала установим расположение и высоту.
01./*Sample Navigation Bar*/
02.nav.horizontal{
03.}
04.
05.nav.horizontal h3{
06.padding-bottom:20px;
07.}
08.
09.nav.horizontal ul{
10.height:50px;
11.}
12.
13.nav.horizontal ul li{
14.list-style:none;
15.display:inline;
16.float:left;
17.}
18.
19.nav.horizontal ul li a{
20.display:block;
21.height:28px;
22.margin:2px 6px 2px 6px;
23.padding:15px 20px 0px 20px;
24.}
25.
26.nav.horizontal ul li a:hover{
27.}Теперь добавим заливки градиента (Gradient Fill):
01.nav.horizontal{
02.}
03.
04.nav.horizontal h3{
05.padding-bottom:20px;
06.}
07.
08.nav.horizontal ul{
09.height:50px;
10.
11.background-image:-moz-linear-gradient(top, #93C204, #608009);
12.background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#93C204), to(#608009), color-stop(1,#608009));
13.
14.border:1px solid #608009;
15.}
16.
17.nav.horizontal ul li{
18.list-style:none;
19.display:inline;
20.float:left;
21.}
22.
23.nav.horizontal ul li a{
24.display:block;
25.height:28px;
26.margin:2px 6px 2px 6px;
27.padding:15px 20px 0px 20px;
28.
29.font-size:12px;
30.font-weight:bold;
31.color:#FFF;
32.text-transform:uppercase;
33.text-decoration:none;
34.
35.border:1px solid transparent;
36.background-image:none;
37.}
38.
39.nav.horizontal ul li a:hover{
40.background-image:-moz-linear-gradient(top, #161616, #2B3615);
41.background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#161616), to(#2B3615), color-stop(1,#2B3615));
42.
43.border:1px solid #A3D804;
44.}Далее закругленные углы (Rounded Corners):
01.nav.horizontal{
02.}
03.
04.nav.horizontal h3{
05.padding-bottom:20px;
06.}
07.
08.nav.horizontal ul{
09.height:50px;
10.
11.background-image:-moz-linear-gradient(top, #93C204, #608009);
12.background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#93C204), to(#608009), color-stop(1,#608009));
13.
14.-moz-border-radius: 8px;
15.-webkit-border-radius: 8px;
16.-khtml-border-radius: 8px;
17.border-radius: 8px;
18.
19.border:1px solid #608009;
20.}
21.
22.nav.horizontal ul li{
23.list-style:none;
24.display:inline;
25.float:left;
26.}
27.
28.nav.horizontal ul li a{
29.display:block;
30.height:28px;
31.margin:2px 6px 2px 6px;
32.padding:15px 20px 0px 20px;
33.
34.font-size:12px;
35.font-weight:bold;
36.color:#FFF;
37.text-transform:uppercase;
38.text-decoration:none;
39.
40.border:1px solid transparent;
41.background-image:none;
42.
43.-moz-border-radius: 10px;
44.-webkit-border-radius: 10px;
45.-khtml-border-radius: 10px;
46.border-radius: 10px;
47.}
48.
49.nav.horizontal ul li a:hover{
50.background-image:-moz-linear-gradient(top, #161616, #2B3615);
51.background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#161616), to(#2B3615), color-stop(1,#2B3615));
52.
53.-moz-border-radius: 10px;
54.-webkit-border-radius: 10px;
55.-khtml-border-radius: 10px;
56.border-radius: 10px;
57.
58.border:1px solid #A3D804;
59.}И наконец, тени блока (Box Shadows):
01.nav.horizontal{
02.}
03.
04.nav.horizontal h3{
05.padding-bottom:20px;
06.}
07.
08.nav.horizontal ul{
09.height:50px;
10.
11.background-image:-moz-linear-gradient(top, #93C204, #608009);
12.background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#93C204), to(#608009), color-stop(1,#608009));
13.
14.-moz-border-radius: 8px;
15.-webkit-border-radius: 8px;
16.-khtml-border-radius: 8px;
17.border-radius: 8px;
18.
19.border:1px solid #608009;
20.
21.box-shadow: 5px 5px 5px rgba(0,0,0,0.25);
22.-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.25);
23.-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.25);
24.}
25.
26.nav.horizontal ul li{
27.list-style:none;
28.display:inline;
29.float:left;
30.}
31.
32.nav.horizontal ul li a{
33.display:block;
34.height:28px;
35.margin:2px 6px 2px 6px;
36.padding:15px 20px 0px 20px;
37.
38.font-size:12px;
39.font-weight:bold;
40.color:#FFF;
41.text-transform:uppercase;
42.text-decoration:none;
43.
44.border:1px solid transparent;
45.background-image:none;
46.
47.-moz-border-radius: 10px;
48.-webkit-border-radius: 10px;
49.-khtml-border-radius: 10px;
50.border-radius: 10px;
51.}
52.
53.nav.horizontal ul li a:hover{
54.background-image:-moz-linear-gradient(top, #161616, #2B3615);
55.background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#161616), to(#2B3615), color-stop(1,#2B3615));
56.
57.-moz-border-radius: 10px;
58.-webkit-border-radius: 10px;
59.-khtml-border-radius: 10px;
60.border-radius: 10px;
61.
62.border:1px solid #A3D804;
63.
64.box-shadow: inset 4px 4px 4px rgba(0,0,0,0.25);
65.-moz-box-shadow: inset 4px 4px 4px rgba(0,0,0,0.25);
66.-webkit-box-shadow: inset 4px 4px 4px rgba(0,0,0,0.25);
67.}Просмотреть Демо
Шаг 5: устраняем «вытекание»
Финальное примечание по поводу закругленных углов с заливкой и границей: они выходят за край («вытекают»). Вы заметите это при проведении мышью над кнопками навигации:
Этого можно достичь, применив свойство background-clip, которое определяет, распространяется ли фон данного элемента на края. По умолчанию (border-box) позволяет распространяться, что дает нам беспорядочное «вытекание», но его можно заменить на padding-box, который останавливает распространение, не достигнув краев.
Давайте добавим к свой кнопке следующие стили css:
01.nav.horizontal ul li a{
02.display:block;
03.height:28px;
04.margin:2px 6px 2px 6px;
05.padding:15px 20px 0px 20px;
06.
07.font-size:12px;
08.font-weight:bold;
09.color:#FFF;
10.text-transform:uppercase;
11.text-decoration:none;
12.
13.border:1px solid transparent;
14.background-image:none;
15.
16.-moz-border-radius: 10px;
17.-webkit-border-radius: 10px;
18.-khtml-border-radius: 10px;
19.border-radius: 10px;
20.
21.-moz-background-clip: padding;
22.-webkit-background-clip: padding-box;
23.background-clip: padding-box;
24.}…которые дают нам более желательный результат при проведении над ней мышью:
Цвет заливки аккуратно располагается внутри границ нашего элемента.
Заключение
Создание красивой и хорошо смотрящейся простой панели навигации при помощи CSS3 легче и быстрее, чем когда-либо, так почему бы не попробовать ее в своем следующем проекте?
Спасибо за прочтение!
Автор: Alvaro Guzman
Источник: http://webdesign.tutsplus.com/
Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
