W dzisiejszym tutorialu przygotujemy ciekawe, kolorowe buttony, bez używania elementów graficznych. Będą one podlegały procesowi płynnego przejścia, przy zastosowaniu poleceń (transition) zawartych w specyfikacji CSS3. Cały efekt wspierana jest przez wszystkie przeglądarki, z wyjątkiem IE. Nie obsługuje on płynnej transformacji elementów. Tak czy inaczej, już wkrótce rozwiązanie to będzie można stosować z pełnym powodzeniem, dlatego przyjrzyjmy się mu bliżej. Przygotujemy kilka wersji kolorystycznych, zamieniając tylko używane gradienty. Zacznijmy od koloru niebieskiego.
Wstawmy poniższy kod do naszego dokumentu HTML.
1 | <span class="button niebieski">Wyślij</span> |
Teraz dodajemy gradient. Aby był on dobrze wyświetlany we wszystkich przeglądarkach, trzeba się trochę nagimnastykować.
1 2 3 4 5 6 7 8 9 10 | .niebieski { background: #00d1ed; background: -moz-linear-gradient(top, #00d1ed 0%, #009ec3 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00d1ed), color-stop(100%,#009ec3)); background: -webkit-linear-gradient(top, #00d1ed 0%,#009ec3 100%); background: -o-linear-gradient(top, #00d1ed 0%,#009ec3 100%); background: -ms-linear-gradient(top, #00d1ed 0%,#009ec3 100%); background: linear-gradient(top, #00d1ed 0%,#009ec3 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00d1ed', endColorstr='#009ec3',GradientType=0 ); } |
Na koniec musimy ostylować pozostałe, standardowe własności.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | .button { float: right; padding: 5px 15px; text-align: right; cursor: pointer; color: white; font-family: calibri; letter-spacing: -1px; text-shadow: 0 0 1px #000; border: 1px solid gray; /*Zaokrąglanie rogów*/ -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; /*Transformacja*/ -moz-transition: 0.3s ease-in; -webkit-transition: 0.3s ease-in; -o-transition: 0.3s ease-in; transition: 0.3s ease-in; } .button:hover { padding: 5px 15px 5px 20px; border: 1px solid #000; } |
Właściwie to wszystko. Teraz aby dodać inne wersje kolorystyczne, musimy użyć innych klas w naszym buttonie. Przygotowałem ich pięć, a możecie zobaczyć je poniżej.
1 2 3 4 5 | <span class="button niebieski">Wyślij</span> /*NIEBIESKI*/ <span class="button czerwony">Wyślij</span> /*CZERWONY*/ <span class="button zielony">Wyślij</span> /*ZIELONY*/ <span class="button zolty">Wyślij</span> /*ŻÓŁTY*/ <span class="button fioletowy">Wyślij</span> /*FIOLETOWY*/ |
A oto kody potrzebne gradientów:
Gradient czerwony
1 2 3 4 5 6 7 8 9 10 | .czerwony { 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(top, #ff3019 0%,#cf0404 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); } |
Gradient niebieski
1 2 3 4 5 6 7 8 9 10 | .zielony { background: #e0ed28; background: -moz-linear-gradient(top, #e0ed28 1%, #abdc28 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#e0ed28), color-stop(100%,#abdc28)); background: -webkit-linear-gradient(top, #e0ed28 1%,#abdc28 100%); background: -o-linear-gradient(top, #e0ed28 1%,#abdc28 100%); background: -ms-linear-gradient(top, #e0ed28 1%,#abdc28 100%); background: linear-gradient(top, #e0ed28 1%,#abdc28 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0ed28', endColorstr='#abdc28',GradientType=0 ); } |
Gradient żółty
1 2 3 4 5 6 7 8 9 10 | .zolty { background: #f1e767; background: -moz-linear-gradient(top, #f1e767 0%, #feb645 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1e767), color-stop(100%,#feb645)); background: -webkit-linear-gradient(top, #f1e767 0%,#feb645 100%); background: -o-linear-gradient(top, #f1e767 0%,#feb645 100%); background: -ms-linear-gradient(top, #f1e767 0%,#feb645 100%); background: linear-gradient(top, #f1e767 0%,#feb645 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#feb645',GradientType=0 ); } |
Gradient fioletowy
1 2 3 4 5 6 7 8 9 10 | .fioletowy { background: #e570e7; background: -moz-linear-gradient(top, #e570e7 0%, #c85ec7 47%, #a849a3 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e570e7), color-stop(47%,#c85ec7), color-stop(100%,#a849a3)); background: -webkit-linear-gradient(top, #e570e7 0%,#c85ec7 47%,#a849a3 100%); background: -o-linear-gradient(top, #e570e7 0%,#c85ec7 47%,#a849a3 100%); background: -ms-linear-gradient(top, #e570e7 0%,#c85ec7 47%,#a849a3 100%); background: linear-gradient(top, #e570e7 0%,#c85ec7 47%,#a849a3 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e570e7', endColorstr='#a849a3',GradientType=0 ); } |
Na koniec udostępniam linki do źródła, jak i przykład online.
Wszelkie pytania i wskazówki dotyczące tego poradnika proszę zostawiać tylko i wyłącznie w komentarzach, poniżej niniejszego wpisu.
O ile dobrze rozumiem to wykorzystujesz to właściwość „transition” w CSS3 „animation” to coś innego – tytuł artykułu może być więc mylący… chyba…
co do gradientu jest tak fajna stronka, która ułatwia życie:
http://www.colorzilla.com/gradient-editor/
:)
Faktycznie, niefortunnie dobrałem słowo „animacja”. Poprawione ;-)