В этом уроке я расскажу как сделать простую но красивую кнопку, а так же поведаю, как, используя css и javascript, присобачить к этой кнопке классный эффект смены цвета. Весь урок займет у вас 15 минут, но результат вас порадует.
Шаг 1
Создадим новый документ в фотошопе. Размер не важен. Фон залейте белым цветом. Затем на новом слое с помощью инструмента с радиусом в 5 пикселей нарисуйте вот такую фигуру черного цвета (на скриншоте фигура в реальном размере):
Шаг 2
Созданный слой дублируйте 2 раза так, чтобы у нас получилось 3 одинаковых слоя. Затем 3 новый слой скройте нажав на глаз рядом с ним в панели слоев:
Шаг 3
К первому слою не требуется применять никаких стилей - такова задумка. У второго слоя параметр fill установите на 0%, затем примените вот эти стили:
Вот что мы получим:
Шаг 4
Теперь необходимо создать блик. Сделайте видимым третий слой, затем сделайте ctrl+клик по иконке слоя на панели слоев чтобы выделить его. затем выберите select > modify > contract. Вы увидите вот такое диалоговое окно:
Введите значение 2 и нажмите OK. Затем выполните select > inverse чтобы инвертировать выделение и нажмите delete. У вас должен получится прямоугольник чуть меньше исходного. Нажмите ctrl+i чтобы сделать его белым. Теперь сделайте овальное выделение с помощью инструмента как показано ниже.
Нажмите delete а затем удалите и нижнюю часть белой фигуры. У вас должен получиться вот такой блик:
Шаг 5
Примените к блику вот эти стили:
Затем установите параметр fill слоя с бликом на 0%.
Шаг 6
В этом шаге я добавил текст (шрифт Myriad Pro) на самый верх списка слоев и применил к нему стили, как на скрине ниже (текст добавляется с помощью инструмента :horisontal_type:):
Вот что мы получаем на этом шаге:
Кнопка не очень красива, можно было сделать гораздо более приятный внешне блик, но стили настроены так для того, чтобы можно было сохранить кнопку без нижнего слоя, при этом не изменив её отображение. Этот плюс раскроется далее.
В принципе это финальный результат фотошопного урока. Но я так же обещал рассказать о эффекте переливания цвета, поэтому продолжим. Продолжение во втором посте.
Выполните ctrl+клик по первому слою с нашей кнопкой чтобы получить его выделение, сделайте этот слой невидимым, затем щелкните правой кнопкой мышки по слою background и в выпадающем меню выберите Layer from background затем выберите этот слой (не снимая выделения) и нажмите delete. Это уберет фон подкнопкой:
Шаг 8
Обрежте рисунок инструментом . Будьте осторожны и не отрежьте кусок кнопки или тень.
Шаг 9
Сохраните получившееся изображение кнопки в формате PNG24 так, чтобы сама кнопка была прозрачной. назовите изображение button. Вот это изображение:
Шаг 10
Теперь приступим к созданию веб страницы. Создайте html документ и скопируйте в него вот этот код:
Code
<html> <head> <title>Кнопка, которая меняет цвет сама по себе</title> <style type='text/css'> .button {width:176px;height:65px;background:url(button.png) #222;} </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head> <body> <div class='button' onmouseover='colors.animate("jump",this,{"backgroundColor":"#d900d1"},500)' onmouseout='colors.animate("compress",this,{"backgroundColor":"#222"},1000)'></div>
<script type="text/javascript"> colors={current:function(el,st){var result;if(el.style[st]&&el.style[st]!=""){result=el.style[st]}else{if(/*@cc_on!@*/false){result=el.currentStyle[st]}else{result=document.defaultView.getComputedStyle(el,null)[st]}}return result=="transparent"?"#FFFFFF":result},torgb:function(e){var h,f,c,a;function d(i,g){var j={A:10,B:11,C:12,D:13,E:14,F:15};return parseInt(i in j?j[i]:i)*16+parseInt(g in j?j[g]:g)}a=e.toUpperCase();if(/RGB\(\d+,\s?\d+,\s?\d+\)/.test(a)){h=a.match(/\d+/g)[0];f=a.match(/\d+/g)[1];c=a.match(/\d+/g)[2]}else{if(/#([0-9A-F]{2}){3}/.test(a)){h=d(a.charAt(1),a.charAt(2));f=d(a.charAt(3),a.charAt(4));c=d(a.charAt(5),a.charAt(6))}else{if(/#([0-9A-F]{1}){3}/.test(a)){h=d(a.charAt(1),a.charAt(1));f=d(a.charAt(2),a.charAt(2));c=d(a.charAt(3),a.charAt(3))}}}return{r:h,g:f,b:c}},animtype:function(e,b){switch(b){case"simple":return e;break;case"compress":var a=2;return Math.pow(e,2)*((a+1)*e-a);break;case"smooth":function f(c){return Math.pow(c,3)}if(e<0.5){return f(2*e)/2}else{return(2-f(2*(1-e)))/2}break;case"jump":function g(h){for(var d=0,c=1;1;d+=c,c/=2){if(h>=(7-4*d)/11){return -Math.pow((11-6*d-11*h)/4,2)+Math.pow(c,2)}}}return 1-g(1-e);break;default:return e;break}},animator:{},anielems:0,animate:function(a,e,b,d,f){for(key in b){c(key,b[key])}function c(h,j){var i,g;j=colors.torgb(j);i=colors.torgb(colors.current(e,h));for(key in colors.animator){if(colors.animator[key].o==e&&colors.animator[key].p==h){clearInterval(colors.animator[key].timer)}}g=colors.anielems;colors.animator[g]={o:e,p:h,start:new Date().getTime(),timer:setInterval(function(){var n,m,l,p,o,k;n=(new Date().getTime())-colors.animator[g].start;m=n/d;l=colors.animtype(m,a);p=parseInt((parseInt(j.r)-parseInt(i.r))*l+parseInt(i.r));o=parseInt((parseInt(j.g)-parseInt(i.g))*l+parseInt(i.g));k=parseInt((parseInt(j.b)-parseInt(i.b))*l+parseInt(i.b));e.style[h]="rgb("+p+","+o+","+k+")";if(m>=1){clearInterval(colors.animator[g].timer);e.style[h]="rgb("+j.r+","+j.g+","+j.b+")";if(f){f()}delete colors.animator[g]}},10)};colors.anielems++}}}; </script> </body> </html>
значения 176 и 65 замените на ширину и высоту получившегося у вас изображения.
Сохраните эту страничку например на рабочем столе. Убедитесь что рисунок нашей кнопки находится там же, где и ваша страничка (в данном случае на рабочем столе);
Теперь откройте страницу и наведите мышку на кнопку. если вы сделали всё правильно - кнопка эффектно изменит цвет с черного на розовый как в этом примере.
Duck4Fuck, этот код содержит 4 варианта анимации, трех из которых в квери вообще нет. К тому же анимация цвета в квери работает только с плагином, а тут она встроена.
php_expert, неправда ваша. Кнопка не прозрачна в ie6. Все это и так знают, а так же знают как это исправить. Форум же полностью кроссбраузерен, как и сайт.
Aleko, знаешь, у меня весь этот код (прям в этом примере) просто виснет (firefox 3.5, win xp, Intel Core 2 Duo E8400, GTX 260 core 216, 4GB 1066 mhz). И надпись тут плохо смотрится
Иван0, js код в несколько строчек виснет?)))) наверно процессор перегружен или в брауезере запущено много страниц. а надпись это фотошоп перерисуешь на свой вкус сам, че заглупости
Aleko, знаешь, у меня весь этот код (прям в этом примере) просто виснет
Знаешь, у меня весь этот код стабильно работает в firefox 3, opera 9 и 10, ie c 5.5 по 8, safari и Chrome, win vista intel core 2 quad 2.34 GHz, 4Gb ram, geforce GTX 260.
Aleko, извени за тупость, но мог бы переписать так. Чтобы было при навидении на шапку, она менялась на другую картинку только на ту которую нужно. Может это есть то, но я нечего непонял
с радиусом в 5 пикселей нарисуйте вот такую фигуру черного цвета (на скриншоте фигура в реальном размере): 
как показано ниже. 
. Будьте осторожны и не отрежьте кусок кнопки или тень. 
Но по моему на jquery можно было бы обойтись куда меньшим кодом =)
и кнопка тоже сексапильная)
