Tworzenie przycisku na potrzeby strony www

Nie od dzisiaj wiadomo, że czym mniej obrazków, czyli czym mniej “waży” nasza strona www, tym lepiej. Strona internetowa szybciej się ładuje jest przyjaźniejsza dla użytkowników jak i robotów wyszukiwarek. W tym artykule zaprezentuje metodę tworzenie fajnych przycisków na potrzeby stron internetowych bez użycia grafiki. Kolejnym atutem takiego rozwiązania jest ustawienie dowolnej wielkości takiego obiektu, czyli przycisk będzie wyglądał identycznie na telefonie, tablecie czy komputerze stacjonarnym. Nie będziemy potrzebować trzech obrazków aby nasz przycisk wyglądał dobrze a wszystko opiszemy w stylu strony www.

A więc najpierw musimy stworzyć nasz przycisk:

Wygląda to tak:

Następnie bierzemy się do pracy ze stylem CSS naszej strony internetowej i tworzymy następujący kod:

Co daje nam efekt przycisku na stronę www, który wygląda tak:

W pierwszym fragmencie kodu CSS opisujemy wygląd przycisku w stanie “spoczynku”. Określamy jego rozmiar, wpływamy na wielkość liter, ich rozmiar i kolor, następnie wprowadzamy obramowanie przycisku oraz przypisujemy cień liter, które znajdują się w naszym przycisku. Linia 2 i 3 odpowiada za zaokrąglenia naszego przycisku stworzonego na potrzeby strony www. Kolejne wiersze do wiersza 12 odpowiadają za gradient tu użyty. Istnieje wiele generatorów kodu CSS, którymi można się posłużyć do wygenerowania takiego koloru danego buttona. Osobiście używam i polecam  http://www.colorzilla.com/gradient-editor/ .

Wiersz 12 i 13 odpowiada za cień wewnątrz naszego przycisku, który też można wygenerować, zaglądając na stronę http://css3generator.com/ . Znajdziecie tam sporo ciekawych opcji, znacznie ułatwiających pisanie stylów CSS na potrzeby stron internetowych.

Od wiersza 16 mamy opisany element po najechaniu na niego myszką. Zmieniamy kolor obramowania i gradientu oraz kolor cienia wewnętrznego. W ten sposób mamy przygotowany przycisk bez użycia grafiki, który możemy dowolnie modyfikować w zależności od naszych potrzeb.

Modyfikacja tego kodu CSS jest bardzo prosta a wygląd przycisku tworzonego na potrzeby strony www jest praktycznie dowolny i zależy wyłącznie od wyobraźni autora. Możemy np. dodać cień zewnętrzny i wewnętrzny np.

W przypadku tego przycisku mamy dodatkowo animację, która również napisana jest w stylu CSS strony internetowej. Animację elementów składających się na budowę strony www omówię jednak w innym artykule.

Zapraszamy do komentowania artykułu "Tworzenie przycisku na potrzeby strony www" oraz odwiedzin strony www Olsztyn.
31 sierpnia, 2013
Powrót

Komentarze zostały wyłączone.

Dodaj komentarz do tego artykułu

Zobacz także

Tworzenie pierwszego arkuszu CSS na potrzeby strony www

Od czego zacząć pisanie pierwszego kaskadowego arkuszu stylów CSS na potrzeby strony www, proponuję rozpocząć cały proces od ustawień ogólnych naszej strony internetowej. Wprowadzimy ustawienia ogólne dla wszystkich najpopularniejszych znaczników naszej stronie a później będziemy definiować precyzyjnie każdy z elementów. Ułatwi to nam cały proces tworzenia strony www. Nazywam ten proces “czyszczeniem”. Przed rozpoczęciem pracy powinniśmy mieć już  gotowy projekt strony internetowej, tak że widzimy jak nasza witryna internetowa będzie …

5 lipca, 2013
więcej

Czym są style CSS

Style CSS Cascading Style Sheets (Kaskadowe Arkusze Stylów), to elementy strony internetowej określające nam wygląd, położenie a nawet animację danych elementów strony www, a dokładniej zdefiniowanych elementów kodu HTML. Dzięki CSS możemy określić np. kolor danego elementu, wielkość czcionki, animację po najechaniu czy kliknięciu, położenie względem innych elementów, wymiary i inne wartości budujące całą stronę internetową. Kod HTML buduje nam strukturę witryny a styl CSS określa właściwości tej struktury.

5 czerwca, 2013
więcej

Dyrektywa stylu CSS !important

Chciałbym omówić dyrektywę !important w arkuszu stylów CSS. Jest to bardzo przydatny element pozwalający nam definiować elementy w CSS, które są opisane np. w HTMLu. W dobie responsive web design dyrektywa pozwala na zdefiniowanie wielkości danych elementów na stronie internetowej. W skrócie dyrektywa !important wskazuje na najważniejszy opis danego elementu, opis elementu w kodzie strony www, ważniejszy niż wynikałoby to z kolejności.

8 listopada, 2013
więcej

Archiwum

Archiwa