Від автора: у цьому уроці ми покажемо, як створити гарну просту навігаційну панель, використавши кілька скомбінованих стилів CSS3. Наша мета – повторити зовнішній вигляд того, що в минулому могло бути зроблено тільки шляхом комбінування декількох зображень, JavaScript’а й кількох div ів. Загалом створимо закруглені кути в CSS. Давайте почнемо…
Примітка: всі наступні приклади тестувалися на Mozilla Firefox, Safari і Chrome.
Деталі підручника
Програма: Будь-редактор вихідного коду (Dreamweaver, Photoshop)
Версія: CS5 (можна будь -)
Складність: Базовий рівень
Приблизний час виконання: 1 година
До початку
Добре смотрящаяся і правильно спроектована навігаційна панель з зорі веб-дизайну була одним з найбільш потужних елементів організації і структурування веб-сайту. Минулого створення гарного проекту з застосуванням тіней, градієнтів, закруглених кутів і ефекту при проведенні миші над елементом потрібно було безліч прийомів, які збільшували розмір коду і кількість зображень.
У цьому підручнику ми заглибимося в два дуже важливих ефекту CSS3: Закруглені кути і Тіні блоку, до того ж застосуємо лінійні градієнти.
Крок 1: Закруглені кути в Photoshop
Про них чули всі, говорити про те, як їх створити, буде зайво, тому в наступних прикладах я зосереджуся на відмінностях створення ефекту закруглених кутів за допомогою зображень та переваги і недоліки застосування замість цього CSS3.
Створення ефекту закруглених кутів досить просто в будь-якому графічному софті, але в photoshop’е виникають деякі труднощі:
Точність: навіть якщо ви можете встановити радіус закругленого кута, вбудований движок усунення контурних нерівностей photoshop’у часто додає до графіку один або два зайвих пікселів. Багатьом з нас у минулому доводилося вручну знижувати кількість пікселів закруглених кутів на неточному зображенні, для того, щоб створити акуратне з’єднання з, наприклад, кольорами фону.
Редагування: це одна з найбільших проблем створення закругленого кута на основі зображення. Якщо ви створюєте в photoshop’е графіком для кута радіусом в 10px, і з якоїсь причини вам потрібно збільшити радіус до 20px, зробити це можна, тільки перечертив фігуру, або вручну змінити все її кути, втрачаючи при цьому час і точність. Зміна розміру – ще одна величезна проблема, якщо вам потрібно розтягнути або збільшити фігуру, вам доводиться застосовувати інструмент photoshop’у Виділення точки (Selection Point), тому що вживання Сітки трансформації (Transform Controls) може викликати небажані спотворення форми кута. Я навіть не буду згадувати про те, що поділ кутів на шари займає пристойну кількість цінних хвилин.
Заливки і Рамки: створення заливки градієнта всередині заснованого на зображенні блоку закругленого попереду завжди було непростим завданням навіть без перекривання кордонів – щоб розділити на шари залучені зображення, потрібна хірургічна точність. Вам потрібно створити щонайменше 3 зображення для кожного блоку, одне для верхніх кутів, інше для нижніх і горизонтальний або вертикальний градієнт, а потім написати для них код. Іншою проблемою заливки зображення є те, що контейнера часто потрібно збільшити висоту або ширину, отримуючи при цьому небажаний ефект градієнта (дивіться скріншот внизу).
Стилі змішаних кутів: в photoshop’е створення змішаних стилів кутів займає час, в ньому відсутні опції комбінування стилів кутів. Вам доводиться вручну зменшувати/збільшувати радіус або комбінувати форми… а потім кожен кут поділяти на шари.
Закруглені кути в CSS
Застосування CSS3 для створення класичних закруглених кутів, заснованих на зображенні – відмінна ідея. Ось пара аргументів «за»:
Знижується кількість зображень і HTTP-запитів до сервера
Працює на всіх сучасних браузерах (крім IE 6,7,8), включаючи більшість популярних мобільних браузерів.
Щоб змусити їх працювати, потрібно всього пара рядків у файлі CSS
Збільшення/зменшення радіусу, зміна розміру, зміна заливки і меж займають секунди, а в photoshop’е – кілька хвилин
Давайте розглянемо код для створення закруглених кутів в CSS:
/*Rounded Corner Boxes*/
.box{
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: ;
Для створення схожою на створену в photoshop’е Внутрішньої тіні (Inner Shadow) можна застосувати наступний синтаксис:
box-shadow: inset ;
А ось код для створення декількох варіантів тіні блоку (Shadow Box):
/*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).
- Lorem Ipsum
- Dolor Sit Amet
- Sed do Eiusmod
- Consectetur Adipisicing
- Lipsum amet
- Lorem Ipsum
Крок 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{
}
Тепер додамо заливки градієнт (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;
}
Далі закруглені кути (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;
}
І нарешті, тіні блоку (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);
}
Переглянути Демо
Крок 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;
}
…які дають нам більш бажаний результат при проведенні над ній мишею:
Колір заливки акуратно розташовується всередині кордонів нашої елемента.
Висновок
Створення красивої і добре смотрящейся простий панелі навігації за допомогою CSS3 легше і швидше, ніж коли-небудь, так чому б не спробувати її в своєму наступному проекті?
На цьому урок по створенню закруглених кутів в CSS і Фотошоп, для меню сайту, закінчено. Спасибі за прочитання!
