Jak zrobić ładne przyciski na stronie www bez photoshopa

Ładne przyciski i grafiki na stronę www zwykle robi się jako grafikę w photoshopie, gimpie lub innym programie graficznym. Obecnie jednak znajomość css pozwala na zrobienie tego samego efektu przy pomocy arkusza stylów.  Można tu zastosować takie efekty jak gradient i zaokrąglone rogi.  Chcemy żeby przycisk miał ładny efekt cieniowany kolorystyczny i zaokrąglone rogi.

Tworzymy obszar np. <div class=przycisk></div>  i nadajemy mu kolor tła w stylach.  Css pozwala na określenie tła w jakimś kolorze lub tłem może być obrazek. Jeśli zdecydujemy się na tlo kolorowe, może to być pełny kolor, kolor z przezroczystością lub w postaci gradientu. Jeśli zdecydujemy się na tło w postaci obrazka, możemy określić czy obrazek ma się powielać w tle czy nie a także określić jego pozycję.

Najładniejszy efekt uzyskać nadając przyciskowi gradient. Jednak opisanie go w css jest dość skomplikowane i wymaga sporo liczenia. Dlatego najlepiej posłużyć się generatorem gradientów np. http://www.colorzilla.com/gradient-editor/

Zaokrąglone rogi tworzymy nadając dla obszaru border-radius. Musimy przy tym dodać deklaracje dla róznych przeglądarek:

 -webkit-border-radius: 12px; /* Android ≤ 1.6, iOS 1-3.2, Safari 3-4 */
          border-radius: 12px; /* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ */

I tutaj też z pomocą przyjdą ci generatory np. http://css3please.com/ lub CSS3 Generator

Pobierz fragment ebooka m.in. na temat tworzenia przycisków w css.

Jeśli interesuje cię temat czytaj poniżej na temat ustawiania tła w css.

4 Comments
  1. Można przecież zrobić przycisk zwykły w gimpie, zaokrąglić rogi i gotowe.

    1. W zasadzie najprościej zrobić przycisk przy pomocy CSS używając generatora gradientów i border-radius. Unikamy wtedy używania grafiki i mamy przyciski w postaci tekstowej.

Pozostaw odpowiedź Małgorzata Anuluj pisanie odpowiedzi

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

This site uses Akismet to reduce spam. Learn how your comment data is processed.