14.06.11

Створюємо кнопку з допомогою CSS3

Сьогодні розповім як Ви можете зробити кнопки на свій сайт, не використовуючи картинок. За допомогою  стилів CSS.
Для початку подивимось як буде виглядати наша кнопка в кінцевому результаті. Щоб її зробити вам потрібно лише елементарні знання в CSS.

Кожен дизайнер коли створює новий шедевр намагається створити як можна красивіші і унікальні елементи, в тому числі і кнопки на сайті. Він додає градієнти, обємність, декілька кольорів, і т. д. І коли дизайн переходить до верстки такі елементи передаються картинками або з допомогою JQuery, що не завжди зручно і забирає багато ресурсів.

CSS3 пропонує нам вихід з цієї ситуації. Але недостаток CSS3 в тому що він працює тільки на нових версіях браузерів. На страхрих версіях IE воно будепоказуватись але не так красиво.


Для початку створюємо простий HTML-код. Ви можете використовувати і інші елементи, наприклад div’и.

Крок 1
Створюємо простий CSS для нашої кнопки.
button.blue-btn{
background: #2e8ce3;
padding: 7px 30px;
font-size:13px;
font-weight: bold;
color:#fff;
text-align: center;  
border:solid 1px #73c8f0;
}
Кнопка повинна виглядати так.

Так вона буде виглядати і на старих браузерах, де не працює CSS3.

Крок 2 - градієнта

Додаємо градієнту на нашу кнопку
background: -moz-linear-gradient(0% 100% 90deg,#2e8ce3, #73c2fd);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#73c2fd), to(#2e8ce3));
Це додає градієнту в браузерах mozilla і які підтримують webkit. Зверніть увагу що початок і кінець кольру розрізняються для двох випадках.


Крок 3 - заквруглені кути

Додаємо код для закруглення кутів
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
Цей код працює у всіх нових браузерах


Крок 4 - тінь

Додаємо білі вставки що створює об'ємний ефект.
box-shadow: inset 0 1px 0 0 #fff;
-moz-box-shadow: inset 0 1px 0 0 #fff;
-webkit-box-shadow: inset 0 1px 0 0 #fff;
Параметр ‘inset’ дозволяє нам вставити внутрішню тінь. Ми додаємо 1px білої тіні у верхній частині кнопки.

Додаємо темний колір для кращого контрасту.
border-bottom-color:#196ebb;




 

Останній крок - тінь на тексті

Це не обовязково, але цей ефект зробить наш текст більш контрастним.
text-shadow: 0 -1px 0 #196ebb;


Висновок

Не бійтесь експериментувати, створюйте кнопки в інших кольорах.
  • rss
  • Del.icio.us
  • Digg
  • Twitter
  • StumbleUpon
  • Reddit
  • Share this on Technorati
  • Post this to Myspace
  • Share this on Blinklist
  • Submit this to DesignFloat

0 коментар(ів):

Дописати коментар

 
Copyright 2011 St@sDesign