Webdesign & UX

Buttony w kształcie koła z animacją obrotu w CSS3

Dzisiejszy, wieczorny wpis poświęcony będzie również pojęciu webdesignu, a ściślej – możliwościom tworzenia różnorodnych elementów na stronach internetowych tylko i wyłącznie za pomocą języka CSS3. Dlaczego skupiamy się na samej stronie technicznej, pomijając elementy graficzne? Odpowiedź jest prosta i kilka argumentów już teraz stoi murem za akceptacją tego typu rozwiązań. Po pierwsze „odchudzamy” nasze witryny – ukłon ten szczególnie tyczy się do urządzeń mobilnych. Po drugie – po co za każdym razem odpalać program graficzny, żmudnie edytować pliki z użytymi obrazkami i ponownie wgrywać je na serwer? Korzystając z CSS3 będziemy zmuszeni, w przypadku zmian, do edycji zazwyczaj kilku-kilkunastu linijek kodu. W tym krótkim tutorialu pokażę Wam, jak przygotować buttony w kształcie kół, które po najechaniu na nie kursorem myszy będą obracać się wokół swojego środka symetrii. A więc zaczynajmy!

Struktura buttonów w HTML

Jak zwykle, przygotujmy sobie uprzednio całą strukturę w formacie HTML.

<div class="kolo niebieskie">
    <span class="nazwa">Niebieski</span>
    <span class="ukryty">Wybierz mnie!</span>
</div>
<div class="kolo zielone">
    <span class="nazwa">Zielony</span>
    <span class="ukryty">Wybierz mnie!</span>
</div>
<div class="kolo czerwone">
    <span class="nazwa">Czerwony</span>
    <span class="ukryty">Wybierz mnie!</span>
</div>
<div class="kolo zolte">
    <span class="nazwa">Żółty</span>
    <span class="ukryty">Wybierz mnie!</span>
</div>

Jakie mamy założenia? Nasze buttony mają wyświetlać nazwy kolorów, po najechaniu na nie kursorem powinny wykonać jeden obrót i dodatkowo – po nazwą główną ma pojawić się napis zachęcający do wyboru danego przycisku. Proste? No to przejdźmy teraz do arkusza CSS.

Formatowanie w arkuszu CSS

Gradientowe przejścia w tle

Na początek nadajmy kolory teł dla buttonów. Niech staną się dla nas widoczne. W tym celu pomogą nam wcześniej utworzone klasy. Zdecydowałem, że każdy background będzie miał przejście gradientowe, które po prostu wygląda dużo ładniej niż jednolita barwa.

Sporo kodu to tylko pozory. Deklaracje gradientów zajmują zawsze dużo miejsca.

background: #00b7ea;
background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3));
background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%);
background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%);
background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%);
background: linear-gradient(to bottom, #00b7ea 0%,#009ec3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 );
}

.zielone {
background: #b6e026;
background: -moz-linear-gradient(top, #b6e026 0%, #abdc28 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b6e026), color-stop(100%,#abdc28));
background: -webkit-linear-gradient(top, #b6e026 0%,#abdc28 100%);
background: -o-linear-gradient(top, #b6e026 0%,#abdc28 100%);
background: -ms-linear-gradient(top, #b6e026 0%,#abdc28 100%);
background: linear-gradient(to bottom, #b6e026 0%,#abdc28 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b6e026', endColorstr='#abdc28',GradientType=0 );
}

.czerwone {
background: #ff3019;
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404));
background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: linear-gradient(to bottom, #ff3019 0%,#cf0404 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );
}

.zolte {
background: #ffd65e;
background: -moz-linear-gradient(top, #ffd65e 0%, #febf04 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd65e), color-stop(100%,#febf04));
background: -webkit-linear-gradient(top, #ffd65e 0%,#febf04 100%);
background: -o-linear-gradient(top, #ffd65e 0%,#febf04 100%);
background: -ms-linear-gradient(top, #ffd65e 0%,#febf04 100%);
background: linear-gradient(to bottom, #ffd65e 0%,#febf04 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 );
}

Efekt, który otrzymaliśmy jest następujący.

Nadanie rozmiarów i owalnego kształtu

Nadszedł czas na ograniczenie wymiarów naszych buttonów. Oprócz tego dodamy im trochę web-designerskich ulepszeń.

width: 100px; 
height: 100px; 
float: left; 
margin: 5px; 
padding: 25px;
border: 10px solid white;
text-align: center;
box-shadow: 0 0 1px #000, 1px 1px 5px black inset;
border-radius: 90px;
}

Uzyskany efekt:

Formatowanie tekstu

Czas przygotować style dla tekstu zamieszczonego w buttonach. Uwidocznimy nazwę koloru, a ukryjemy napis namawiający do wyboru poszczególnych opcji.

.nazwa {
font-family: calibri;
font-size: 1.7em;
letter-spacing: -2px;
display: block;
position: relative;
top: 30px;
text-shadow: 0 0 10px #fff;
}

.ukryty {
font-family: calibri;
font-size: .85em;
letter-spacing: -1px;
display: block;
position: relative;
top: 30px;
text-shadow: 0 0 10px #fff;
visibility: hidden;
}

I oczywiście pogląd zmian.

Akcja po aktywacji buttona

Zanim zajmiemy się animacją, dodajmy zwykłe efekty do pseudoklasy :hover.

.kolo:hover {
    cursor: pointer;
    box-shadow: 0 0 50px gray, 1px 1px 5px black inset;
}
.kolo:hover .ukryty {
    visibility: visible;
}
.kolo, .kolo * {-moz-transition: 0.1s ease-in; -webkit-transition: 0.1s ease-in; -o-transition: 0.1s ease-in; transition: 0.1s ease-in;}

Uzyskaliśmy płynny efekt pojawiania się cienia, oraz uwidocznienie się napisu namawiającego do kliknięcia.

Animacja obrotu w CSS3

Najciekawszy element do zaaplikowania czeka nas własnie w tej chwili. Dla wygody podałem deklaracje tylko dla przeglądarek z silnikiem Webkit. Oczywiście dla Opery (-o-) i Mozilli (-moz-) podajemy przedrostki, które wpisałem w nawiasach. Więcej o podstawach animacji przeczytacie w jednym z naszych poradników na wortalu > Podstawy animacji w CSS3.

@-webkit-keyframes obrot {
from {
-webkit-transform: rotate(0deg);
}
to { 
-webkit-transform: rotate(360deg);
}
}
.kolo:hover
{
-webkit-animation-name: obrot; 
-webkit-animation-duration: .5s; 
-webkit-animation-iteration-count: 1;
-webkit-transition-timing-function: linear;
}

Zakończenie

Efekt końcowy zobaczyć możecie, uruchamiając demo, do którego link umieściłem na samym dole artykułu. Na koniec podam Wam jeszcze pełen listing arkusza CSS.

.niebieskie {
background: #00b7ea;
background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3));
background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%);
background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%);
background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%);
background: linear-gradient(to bottom, #00b7ea 0%,#009ec3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 );
}

.zielone {
background: #b6e026;
background: -moz-linear-gradient(top, #b6e026 0%, #abdc28 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b6e026), color-stop(100%,#abdc28));
background: -webkit-linear-gradient(top, #b6e026 0%,#abdc28 100%);
background: -o-linear-gradient(top, #b6e026 0%,#abdc28 100%);
background: -ms-linear-gradient(top, #b6e026 0%,#abdc28 100%);
background: linear-gradient(to bottom, #b6e026 0%,#abdc28 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b6e026', endColorstr='#abdc28',GradientType=0 );
}

.czerwone {
background: #ff3019;
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404));
background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: linear-gradient(to bottom, #ff3019 0%,#cf0404 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );
}

.zolte {
background: #ffd65e;
background: -moz-linear-gradient(top, #ffd65e 0%, #febf04 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd65e), color-stop(100%,#febf04));
background: -webkit-linear-gradient(top, #ffd65e 0%,#febf04 100%);
background: -o-linear-gradient(top, #ffd65e 0%,#febf04 100%);
background: -ms-linear-gradient(top, #ffd65e 0%,#febf04 100%);
background: linear-gradient(to bottom, #ffd65e 0%,#febf04 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 );
}

.kolo {
width: 100px; 
height: 100px; 
float: left; 
margin: 5px; 
padding: 25px;
border: 10px solid white;
text-align: center;
box-shadow: 0 0 1px #000, 1px 1px 5px black inset;
border-radius: 90px;
}

.nazwa {
font-family: calibri;
font-size: 1.7em;
letter-spacing: -2px;
display: block;
position: relative;
top: 30px;
text-shadow: 0 0 10px #fff;
}

.ukryty {
font-family: calibri;
font-size: .85em;
letter-spacing: -1px;
display: block;
position: relative;
top: 30px;
text-shadow: 0 0 10px #fff;
visibility: hidden;
}

.kolo:hover {
cursor: pointer;
box-shadow: 0 0 50px gray, 1px 1px 5px black inset;
}
.kolo:hover .ukryty {
visibility: visible;
}
.kolo, .kolo * {-moz-transition: 0.1s ease-in; -webkit-transition: 0.1s ease-in; -o-transition: 0.1s ease-in; transition: 0.1s ease-in;}

@-webkit-keyframes obrot {
from {
-webkit-transform: rotate(0deg);
}
to { 
-webkit-transform: rotate(360deg);
}
}
.kolo:hover
{
-webkit-animation-name: obrot; 
-webkit-animation-duration: .5s; 
-webkit-animation-iteration-count: 1;
-webkit-transition-timing-function: linear;
}

Zobacz DEMO | Pobierz źródło

komentarzy 7

  • Awatar
    Ryuk

    11 listopada 2012 01:58

    Ten sam efekt używa strona http://prizesfrom.net/

    Odpowiedz
  • Awatar
    Maciej Płocki

    26 listopada 2012 17:32

    a czemu cień się też obraca?

    Odpowiedz
  • Awatar
    faxe

    20 grudnia 2012 11:32

    Fajny bajer, ale w demo nie obracają się przyciski.

    Odpowiedz
  • Awatar
    fan

    29 grudnia 2012 15:20

    bardzo fajny pomysł. niestety nie dziala na operze (12.12) i na IE 9

    Odpowiedz
    • Awatar
      Michał Kortas

      29 grudnia 2012 20:17

      Faktycznie. Zapomniałem dodać deklaracji dla przeglądarek nie pracujących na silniku WEBKIT. Jutro poprawię. Co do IE – jego niestety nie przeskoczymy :-)

      Odpowiedz
  • Awatar
    Klaudyna

    12 kwietnia 2016 21:18

    Genialne! Długo tego szukałam.
    Po długich staraniach udało mi się i działa sprawnie.
    Moje zapytanie brzmi: co zrobić, aby zamiast tego kolorowego pola mógł być jakiś obrazek (deseń)?
    I jeszcze jedno. Po zmniejszeniu średnicy koła, tekst nie znajduje się na samym środku, odleglosc od dołu jest mniejsza niż odległosc jego od góry, co wygląda nieładnie. Jak moge temu zaradzić?
    Dziękuje za dodanie tak przydatnego postu i pozdrawiam! :))

    Odpowiedz

Zostaw odpowiedź