Projektowanie i tworzenie stron internetowych

poradniki, kursy o projektowaniu, tworzeniu i pozycjonowaniu stron www

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 CSS strony www.

A więc najpierw musimy stworzyć nasz przycisk:

<a href="" class="guziol">ala ma kota</a>

1	<a href="" class="guziol">ala ma kota</a>

Wygląda to tak:

ala ma kota

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

a.guziol { padding:10px 30px; text-transform:uppercase; font-size:14px; color:#FFF; border:1px solid #1E5799; text-shadow:-1px -1px 0px #1E5799; cursor:pointer;  
-webkit-border-radius: 10px;
border-radius: 10px;
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
-webkit-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.8);
box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.8);
}

a:hover.guziol { border:1px solid #ea5507; text-decoration:none; text-shadow:-1px -1px 0px #ea5507;
background: #feccb1; /* Old browsers */
background: -moz-linear-gradient(top,  #feccb1 0%, #f17432 50%, #ea5507 51%, #fb955e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feccb1), color-stop(50%,#f17432), color-stop(51%,#ea5507), color-stop(100%,#fb955e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #feccb1 0%,#f17432 50%,#ea5507 51%,#fb955e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #feccb1 0%,#f17432 50%,#ea5507 51%,#fb955e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #feccb1 0%,#f17432 50%,#ea5507 51%,#fb955e 100%); /* IE10+ */
background: linear-gradient(to bottom,  #feccb1 0%,#f17432 50%,#ea5507 51%,#fb955e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feccb1', endColorstr='#fb955e',GradientType=0 ); /* IE6-9 */
-webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
}

a.guziol { padding:10px 30px; text-transform:uppercase; font-size:14px; color:#FFF; border:1px solid #1E5799; text-shadow:-1px -1px 0px #1E5799; cursor:pointer;

-webkit-border-radius: 10px;

border-radius: 10px;

background: #1e5799; /* Old browsers */

background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */

background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

-webkit-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.8);

box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.8);

}

a:hover.guziol { border:1px solid #ea5507; text-decoration:none; text-shadow:-1px -1px 0px #ea5507;

background: #feccb1; /* Old browsers */

background: -moz-linear-gradient(top, #feccb1 0%, #f17432 50%, #ea5507 51%, #fb955e 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feccb1), color-stop(50%,#f17432), color-stop(51%,#ea5507), color-stop(100%,#fb955e)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, #feccb1 0%,#f17432 50%,#ea5507 51%,#fb955e 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, #feccb1 0%,#f17432 50%,#ea5507 51%,#fb955e 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, #feccb1 0%,#f17432 50%,#ea5507 51%,#fb955e 100%); /* IE10+ */

background: linear-gradient(to bottom, #feccb1 0%,#f17432 50%,#ea5507 51%,#fb955e 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feccb1', endColorstr='#fb955e',GradientType=0 ); /* IE6-9 */

-webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.8);

box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.8);

}

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

ala ma kota

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.

ala ma kota
ala ma kota
ala ma kota

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.

-webkit-box-shadow:1px 1px 3px 0px rgba(0, 0, 0, 0.3) , inset 0px 1px 1px 0px rgba(255, 255, 255, 0.8);
box-shadow:1px 1px 3px 0px rgba(0, 0, 0, 0.3) , inset 0px 1px 1px 0px rgba(255, 255, 255, 0.8);

1 2	-webkit-box-shadow:1px 1px 3px 0px rgba(0, 0, 0, 0.3) , inset 0px 1px 1px 0px rgba(255, 255, 255, 0.8); box-shadow:1px 1px 3px 0px rgba(0, 0, 0, 0.3) , inset 0px 1px 1px 0px rgba(255, 255, 255, 0.8);

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

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

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

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

Najnowsze na stronie

Kategorie

Tagi

Archiwum

Archiwa

Firma Troton oferuje profesjonalne farby jachtowe Sea-Line do malowania różnych podłoży z drewna, metali i laminatów. Farby jachtowe Sea-Line to profesjonalna chemia jachtowa stworzona przez najlepszych chemików, z zastosowaniem najnowszych technologi i wieloletniego doświadczenia. Tworzymy dbałością o środowisko naturalne.
Nowoczesne, ekologiczne ogrzewanie. Nie musisz już palić w piecu i wyrzucać w atmosferę dwutlenku siarki, tlenków azotu, sadzy oraz innych szkodliwych substancji. PRE-PRIM instaluje pompy ciepła Ostróda. Pompa ciepła pobierają energię słoneczną w powietrzu, ziemi i wodach gruntowych. To nowy chroniący środowisko naturalne sposób ogrzewania wody i budynku.