Zakoduj fajny przycisk w CSS3

Struktura HTML i podstawowy styl

Nasz projekt będzie składał się z 2 plików: index.html i style. css. Dokument HTML zawiera tylko to, co konieczne. Nasz przycisk to zwykły link opatrzony klasą .button: [html]   Hello Stranger [/html] Pora na podstawowe stylowanie. Zdefiniujmy nasz link jako element liniowo-blokowy - w ten sposób będziemy mogli kontrolować jego wymiary i pozostanie klikalny na całej powierzchni. Nadajemy także kolor, ustalamy padding i rozmiar tekstu i jego wyrównanie, w tym przypadku do środka: [css] a.button { display:inline-block; background:#4b82c5; padding:10px 50px; font-size:30px; text-align:center; }[/css] Nasz button nie prezentuje się na razie zbyt okazale, ale jest już w pełni funkcjonalny: [iframe src="http://rixa.pl/kylos-blog/css/button/1/" width="100%" height="135"]

Gradient, obrys i zaokrąglenie

Nadajmy nieco charakteru naszemu elementowi. Jedną z najfajniejszych, ale zarazem najtrudniejszych do opanowania technik CSS3 jest gradient. Z pomocą przychodzą nam tu rozmaite aplikacje, które znajdziemy w sieci. Ja korzystam z Ultimate CSS Gradient Generator, bo jest naprawdę przyjazny i przypomina pracę z gradientami w Photoshopie. Wybierz dwa kolory tworzące Twój gradient klikając na uchwyty poniżej paska gradientu. Aplikacja wygeneruje dla Ciebie kod CSS kompatybilny z większością przeglądarek. Otrzymany kod wklejamy do arkusza stylów. [css] background: -moz-linear-gradient(top, #60a2d4 0%, #325eb7 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#60a2d4), color-stop(100%,#325eb7)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #60a2d4 0%,#325eb7 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #60a2d4 0%,#325eb7 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #60a2d4 0%,#325eb7 100%); /* IE10+ */ background: linear-gradient(to bottom, #60a2d4 0%,#325eb7 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#60a2d4', endColorstr='#325eb7',GradientType=0 ); /* IE6-9 */ [/css] Dodanie zaokrągleń jest już sprawą znacznie łatwiejszą. Należy tylko pamiętać, że właściwość border-radius nie jest jeszcze rozpoznawana przez wszystkie przeglądarki i musimy posługiwać się tzw. vendor prefixes czyli przedrostkami dla reguł css przypisanych dla konkretnych przeglądarek. Należy przy tym pamiętać, że poprawną, czystą właściwość border-radius umieszczamy na końcu stosu deklaracji. [css]-webkit-border-radius:6px; -moz-border-radius:6px; -o-border-radius:6px; border-radius:6px;[/css] Dodanie obrysu to jedynie kwestia dobrania odpowiedniego odcienia, który powinien być o kilka tonów ciemniejszy od krańcowego koloru gradientu. [css]border:1px solid #264585;[/css] W efekcie otrzymamy taki oto elegancki button: [iframe src="http://rixa.pl/kylos-blog/css/button/2/" width="100%" height="135"]

Cień wewnętrzny i zewnętrzny

Przycisk nadal wygląda dość płasko, nadajmy mu jeszcze nieco charakteru. Aby uzyskać efekt wypiętrzenia dodamy cień wewnętrzny z wykorzystaniem właściwości box-shadow. Kluczem jest tu użycie parametru inset, który umieści cień wewnątrz elementu. Będzie on odsunięty o 1px w stosunku do górnej krawędzi i nadamy mu kolor jaśniejszy niż początek gradientu. [css]-webkit-box-shadow:0 1px 0 #9be0ef inset; -moz-box-shadow:0 1px 0 #9be0ef inset; -o-box-shadow:0 1px 0 #9be0ef inset; box-shadow:0 1px 0 #9be0ef inset; [/css] Wypukły przycisk powinien rzucać cień. CSS3 pozwala nam na zastosowanie wielu cieni na jednym elemencie. W tym celu, do poprzedniej deklaracji należy dopisać po przecinku stosowne wartości. Cień pod przyciskiem będzie odsunięty o 2 px w pionie i będzie posiadał delikatne rozmycie o promieniu 1 px. Aby przycisk dobrze prezentował się na każdym tle cień powinien być półprzeroczyty. Do osiągnięcia tego celu musimy posłużyć się modelem RGBa. Choć dla części może to być novum, ten model koloru jest bardzo łatwy w zastosowaniu, zwłaszcza dla czerni i bieli. Wyrażony jest w postaci rgba(0,0,0,0.5), gdzie pierwsze cyfry to składowe koloru (Red, Green, Blue), a ostatnia wartość odpowiada stopniowi przezroczystości. Nasz podwójny cień wygląda zatem następująco: [css]-webkit-box-shadow:0 1px 0 #9be0ef inset, 0 2px 1px rgba(0,0,0,0.3); -moz-box-shadow:0 1px 0 #9be0ef inset, 0 2px 1px rgba(0,0,0,0.3); -o-box-shadow:0 1px 0 #9be0ef inset, 0 2px 1px rgba(0,0,0,0.3); box-shadow:0 1px 0 #9be0ef inset, 0 2px 1px rgba(0,0,0,0.3); [/css] A tak prezentuje się przycisk na tym etapie. Jest nieźle, ale czegoś tu brakuje... [iframe src="http://rixa.pl/kylos-blog/css/button/3/" width="100%" height="135"]

Stylizacja napisu

Poza nadaniem tekstu przybliżonego rozmiaru, do tej pory nie zajmowaliśmy się napisem. Jeszcze niedawno chcąc korzystać w sieci z czcionek innych niż te zainstalowane na komputerze użytkownika, byliśmy zdani na rozwiązania oparte o Flash lub JavaScript. Od pewnego czasu jak grzyby po deszczu zaczęły pojawiać się usługi pozwalające na umieszczanie czcionek w postaci prostej deklaracji CSS. Czcionki te hostowane są na serwerach usługodawcy, co pozwala odciążyć zasoby naszego serwera i komputer użytkownika. Najciekawszą obecnie i w pełni darmową usługą jest Google Web Fonts. Katalog czcionek jest bardzo zasobny, a każdego dnia przybywa wiele nowych fontów. Dodanie czcionki do naszego projektu sprowadza się do wybrania odpowiedniego kroju i kliknięcia opcji Quick-use. W efekcie uzyskamy po jednej linijce kodu HTML i CSS, które należy umieścić odpowiednio w sekcji head pliku index.html i w deklaracji elementu a.button: [html] [/html] [css]font-family:'Fugaz One', cursive;[/css] Ustalamy kolor napisu na granatowy, likwidujemy podkreślenie linku i nadajemy subtelny cień: [css]text-decoration:none; color:#1e376b; text-shadow:-1px 1px 0px #60a2d4;[/css] W efekcie otrzymamy małe dzieło sztuki. Przycisk jest (niemal) gotowy! [iframe src="http://rixa.pl/kylos-blog/css/button/4/" width="100%" height="135"]

Stan po najechaniu

Wypadałoby jeszcze zasugerować użytkownikom, że przycisk jest klikalny. W tym celu dodamy stan :hover, w którym rozświetlimy nieco kolory gradientu. Używam w tym celu genialnego narzędzia 0to255.com. Z jego pomocą możemy błyskawicznie znaleźć odpowiedni odcień dowolnego koloru. Do podmiany kodów kolorystycznych warto użyć funkcji Znajdź & Zamień naszego edytora tekstu. Wklejanie kilkunastu wartości ręcznie może być frustrujące. [css]a.button:hover { background: #7bb2db; /* Old browsers */ background: -moz-linear-gradient(top, #7bb2db 0%, #406ecb 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7bb2db), color-stop(100%,#406ecb)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #7bb2db 0%,#406ecb 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #7bb2db 0%,#406ecb 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #7bb2db 0%,#406ecb 100%); /* IE10+ */ background: linear-gradient(to bottom, #7bb2db 0%,#406ecb 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7bb2db', endColorstr='#406ecb',GradientType=0 ); /* IE6-9 */ }[/css] Najedź kursorem na poniższy przycisk aby zobaczyć efekty wprowadzonych zmian: [iframe src="http://rixa.pl/kylos-blog/css/button/6/" width="100%" height="135"]

Stan po wciśnięciu

Aby zasymulować stan po wciśnięciu przycisku dokonamy kilku zabiegów. Po pierwsze, usuwamy gradient i ustawiamy kolor na ton ciemniejszy od spodu gradientu. Usuwamy cień pod przyciskiem i zmieniamy cień wewnętrzny na ciemny i o nieco większym zakresie. Usuwamy także cień pod tekstem. Korygujemy także padding, abu podkreślić wciśnięcie przycisku. Do określenia stanu po wciśnięciu używamy pseudo-selektora :active [css]a.button:active { background: #325eb7; text-shadow:none; color:#172a50; -webkit-box-shadow:0 1px 0 #172a50 inset; -moz-box-shadow:0 1px 0 #172a50 inset; -o-box-shadow:0 1px 0 #172a50 inset; box-shadow:0 1px 4px #172a50 inset; padding:13px 50px 11px; }[/css]

Gotowy przycisk

Nasz przycisk jest gotowy! Nic nie stoi na przeszkodzie aby stworzyć inną wersję kolorystyczną, zmienić krój czcionki czy rozmiar i kształt klawisza. CSS daje nam obecnie pełną kontrolę nad elementami interfejsu użytkownika. [iframe src="http://rixa.pl/kylos-blog/css/button/7/" width="100%" height="135"] [iframe src="http://rixa.pl/kylos-blog/css/button/8/" width="100%" height="135"]

Waszym zdaniem

Czy chętnie korzystacie z CSS do projektowania kompletnych elementów UI? Jakie są ograniczenia tej technologii? A może macie lepsze, szybsze i bardziej wydajne sposoby tworzenia przycisków. Dajcie znać w komentarzach!