Стильні CSS3 — кнопки без графіки

37

Стильные CSS3 — кнопки без графики

Доброго часу доби!

Зустріли Новий рік, прийшли в себе від бурхливих святкувань і почнемо по тихому, без суєти, шукати нові рішення використання різних технік створення та облаштування наших сайтів. Сьогодні, щоб не навантажувати втомлений розум, хочу почати з малого, розповісти про цікаві способи оформлення і виведення кнопок на сторінки сайту, без використання зображень і додаткової розмітки.

Я не раз звертався до теми створення кнопок виключно засобами CSS, наприклад, в недавній статті CSS3 Градієнт для кнопок, ми детально розібрали кілька прикладів створення кнопок, різних форм, розмірів, не вдаючись до застосування додаткових файлів зображень, використовуючи лише нові стандарти CSS3. Експериментуючи з параметрами стилів можна досягти вражаючих результатів в оформленні будь-якого елемента сторінок сайту, наприклад, простий, але часом такий потрібної дрібниці як кнопка.

Цікаве рішення, на мій погляд, знайшов «товарищч-буржуяка» Stuart Nicholls, як завжди насправді, все виявилося до смішного простим. Такі рішення, все більше переконують мене у величезному потенціалі CSS.

CSS3-Кнопки

З прикладу видно що кнопки оформлені в стилі «Vista» і «Aqua». Цей спосіб чудово працює в браузерах Firefox, Safari і Google Chrome. При оформленні через стилі використовувалися тільки радіус кордонів (border-radius), тіні (box-shadow), градієнт фону, ну і звичайно ж функція text-shadow для тексту.
Код стилів вийшов досить об’ємний, так що краще його винести в окремий файл, якщо у вас такого немає, то краще створити, найчастіше це .css і підключити його до документа html.

CSS

.black1 {background:#000; margin-left:10px; display:inline; border:4px solid #000;}
.red1 {background:#c00; margin-left:10px; display:inline; border:4px solid #c00;}
.blue1 {background:#00a; margin-left:10px; display:inline; border:4px solid #00a;}
.green1 {background:#080; margin-left:10px; display:inline; border:4px solid #080;}
.aqua {display:block; line-height: 32px; color:#fff; font-family:arial, sans-serif; font-size:14px; font-weight:bold; float:left; text-decoration:none; padding:0 10px;
text-shadow: -1px -1px 6px rgba(0, 0, 0, 0.6), -1px -1px 1px #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
background-image: -webkit-gradient(linear, left, top, left bottom, from(rgba(255, 255, 255, 0.8)), to(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.4)), color-stop(50%, rgba(255, 255, 255, 0.2)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4) 30%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0));
}
.black2 {background:#000; margin-left:10px; display:inline; border:1px solid #000;}
.red2 {background:#c00; margin-left:10px; display:inline; border:1px solid #c00;}
.blue2 {background:#00a; margin-left:10px; display:inline; border:1px solid #00a;}
.green2 {background:#080; margin-left:10px; display:inline; border:1px solid #080;}
.vista {display:block; line-height: 36px; color:#fff; font-family:arial, sans-serif; font-size:14px; font-weight:bold; float:left; text-decoration:none; padding:0 13px 0 14px;
text-shadow: -1px -1px 6px rgba(0, 0, 0, 0.6), -1px -1px 1px #000;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
background-image: -webkit-gradient(linear, left, top, left bottom, from(rgba(255, 255, 255, 0.8)), to(rgba(255, 255, 255, 0)), color-stop(48%, rgba(255, 255, 255, 0.5)), color-stop(50%, rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5) 48%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
}

.black1 {background:#000; margin-left:10px; display:inline; border:4px solid #000;}
.red1 {background:#c00; margin-left:10px; display:inline; border:4px solid #c00;}
.blue1 {background:#00a; margin-left:10px; display:inline; border:4px solid #00a;}
.green1 {background:#080; margin-left:10px; display:inline; border:4px solid #080;}.aqua {display:block; line-height: 32px; color:#fff; font-family:arial, sans-serif; font-size:14px; font-weight:bold; float:left; text-decoration:none; padding:0 10px;
text-shadow: -1px -1px 6px rgba(0, 0, 0, 0.6), -1px -1px 1px #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
background-image: -webkit-gradient(linear, left, top, left bottom, from(rgba(255, 255, 255, 0.8)), to(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.4)), color-stop(50%, rgba(255, 255, 255, 0.2)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4) 30%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0));
}.black2 {background:#000; margin-left:10px; display:inline; border:1px solid #000;}
.red2 {background:#c00; margin-left:10px; display:inline; border:1px solid #c00;}
.blue2 {background:#00a; margin-left:10px; display:inline; border:1px solid #00a;}
.green2 {background:#080; margin-left:10px; display:inline; border:1px solid #080;}.vista {display:block; line-height: 36px; color:#fff; font-family:arial, sans-serif; font-size:14px; font-weight:bold; float:left; text-decoration:none; padding:0 13px 0 14px;
text-shadow: -1px -1px 6px rgba(0, 0, 0, 0.6), -1px -1px 1px #000;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
background-image: -webkit-gradient(linear, left, top, left bottom, from(rgba(255, 255, 255, 0.8)), to(rgba(255, 255, 255, 0)), color-stop(48%, rgba(255, 255, 255, 0.5)), color-stop(50%, rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5) 48%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
}

Як бачимо з коду, ми не використовуємо жодного файлу зображень, що саме по собі спрощує редагування кнопок надалі. Але як завжди і буває, без мінусів поки не обходиться жодне вагоме рішення при використанні стилів. Так Opera, моя улюблена Opera, всупереч всім очікуванням, навіть у одинадцятій версії не здатна відображати ефект градієнта, видає лише суцільну заливку. Начебто яка дрібниця, а все ж відчувається якась відчуженість від загального процесу. Не знаю в чому причина упертости розробників цього чудового браузера, але трохи напружує неповноцінна підтримка сучасних стандартів CSS3.

CSS3-Кнопки в Opera

Звичайно на Opera і тормознутом IE світ клином не зійшовся, але пригнічує те, що такі широко використовувані браузери вставляють палиці в колеса всім хто бажає йти в ногу з часом.
Для Opera існують різні обхідні шляхи для досягнення віддалено схожого результату на наш, рішення запропоновані на сайті Dev.Opera по своєму гарні, але все ж не те що можна було б досягти при підтримці функції градієнта.

CSS - Кнопки

 .button{
margin-left:10px;
border: 1px solid maroon;
background-color: red;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: inset 0 1px 3px pink, inset 0 -5px 15px maroon, 0 2px 1px black;
-o-box-shadow: inset 0 1px 3px pink, inset 0 -5px 15px maroon, 0 2px 1px black;
-webkit-box-shadow: inset 0 1px 3px pink, inset 0 -5px 15px maroon, 0 2px 1px black;
-moz-box-shadow: inset 0 1px 3px pink, inset 0 -5px 15px maroon, 0 2px 1px black;
color: white;
text-decoration:none;
text-shadow: 0 1px 1px black;
padding: 5px 30px;
}

.button{
margin-left:10px;
border: 1px solid maroon;
background-color: red;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: inset 0 1px 3px pink, inset 0 -15px 5px maroon, 0 2px black 1px;
-o-box-shadow: inset 0 1px 3px pink, inset 0 -15px 5px maroon, 0 2px black 1px;
-webkit-box-shadow: inset 0 1px 3px pink, inset 0 -15px 5px maroon, 0 2px black 1px;
-moz-box-shadow: inset 0 1px 3px pink, inset 0 -15px 5px maroon, 0 2px black 1px;
color: white;
text-decoration:none;
text-shadow: 0 1px black 1px;
padding: 5px 30px;
}

Все начебто акуратно зліплено і виглядає пристойно, але немає єдиного кінцевого результату, тобто розбрат у стані браузерів, а хочеться нарешті то не напружуватися з приводу того, як видадуть твою роботу різні браузери. На IE я давно вже забив щільно, а от від Opera все чекаю розуміння і взаємності. А поки дивіться результат роботи в Firefox, Safari і Google Chrome, впевнений, що така стилізація кнопок сподобається багатьом.
Можете погратися з настройками стилів і додати наприклад зміни стану градієнтної заливки при наведенні, щоб додати ефект освітлення кнопкам. Хотілося б дізнатися вашу думку і побачити ваші приклади використання CSS3 стилів.

Просто новорічний відпал:

Останнім часом стало модно вішати ялинки вниз головою. Треба орієнтувати дитину при читанні вірша відповідно ялинці? Якщо так, то як кріпити до стелі табурет? А як водити хоровод? Хто знає, поділіться досвідом!