HTML5 & CSS3

Pole wyszukiwania w CSS3

Internet bez wyszukiwarek byłby stosem nic nam nie mówiących linków – to prawda, której nie będę nawet próbował podważyć. W związku z tym, że dużo łatwiej nam jest wyszukać daną treść, niż zapamiętać i użyć długiego odnośnika, dzisiejszy artykuł – tutorial poświęcony będzie przygotowaniu eleganckiego (i mam nadzieję – ładnego) pola wyszukiwania. Gotowy kod HTML/CSS3 można bez problemu zaaplikować na własnej witrynie lub zmodyfikować go uprzednio, dostosowując panel do własnych potrzeb.

Zaczynamy oczywiście od dokumentu HTML. Bez zbędnego omawiania – dodajmy pole tekstowe i przycisk wysyłania formularza.

<form>
<input type="text" id="szukaj"> <input type="submit" value="Szukaj" id="wyslij">
</form>

Potrzebujemy jeszcze kodu CSS3, który sformatuje nam odpowiednio pole wyszukiwarki. W naszym arkuszu dodajmy następujący kod.

form input {float: left; border: 0; margin: 0; background: none;}
form #szukaj, form #wyslij {font-family: calibri; letter-spacing: -1px; font-size: 1em; padding: 10px; color: gray;}

/*ZAOKRĄGLENIA*/
form #szukaj {border-radius: 3px 0 0 3px;}
form #wyslij {border-radius: 0 3px 3px 0;}

/*CIEŃ I USUWANIE OTOCZKI*/
form #szukaj {box-shadow: 0 0 10px silver inset; -moz-outline: none; -webkit-outline: none; -o-outline: none; outline: none; }
form #wyslij {cursor: pointer;}

/*GRADIENT*/
form #szukaj {
background: #f2f2f2;
background: -moz-linear-gradient(top, #f2f2f2 1%, #d6d6d6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#f2f2f2), color-stop(100%,#d6d6d6));
background: -webkit-linear-gradient(top, #f2f2f2 1%,#d6d6d6 100%);
background: -o-linear-gradient(top, #f2f2f2 1%,#d6d6d6 100%);
background: -ms-linear-gradient(top, #f2f2f2 1%,#d6d6d6 100%);
background: linear-gradient(to bottom, #f2f2f2 1%,#d6d6d6 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#d6d6d6',GradientType=0 );
}

/*CIEŃ TESKTU I GRADIENT*/
form #wyslij {
text-shadow: 0 0 1px white;
background: #258dc8;
background: -moz-linear-gradient(top, #258dc8 0%, #f9ca2f 0%, #ffea4f 0%, #f9ca2f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#258dc8), color-stop(0%,#f9ca2f), color-stop(0%,#ffea4f), color-stop(100%,#f9ca2f));
background: -webkit-linear-gradient(top, #258dc8 0%,#f9ca2f 0%,#ffea4f 0%,#f9ca2f 100%);
background: -o-linear-gradient(top, #258dc8 0%,#f9ca2f 0%,#ffea4f 0%,#f9ca2f 100%);
background: -ms-linear-gradient(top, #258dc8 0%,#f9ca2f 0%,#ffea4f 0%,#f9ca2f 100%);
background: linear-gradient(to bottom, #258dc8 0%,#f9ca2f 0%,#ffea4f 0%,#f9ca2f 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#258dc8', endColorstr='#f9ca2f',GradientType=0 );

}
/*CIEŃ TEKSTU I GRADIENT*/
form #wyslij:hover {
text-shadow: 0 0 1px black;
color: white;
background: #82b8ff;
background: -moz-linear-gradient(top, #82b8ff 1%, #18a5f2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#82b8ff), color-stop(100%,#18a5f2));
background: -webkit-linear-gradient(top, #82b8ff 1%,#18a5f2 100%);
background: -o-linear-gradient(top, #82b8ff 1%,#18a5f2 100%);
background: -ms-linear-gradient(top, #82b8ff 1%,#18a5f2 100%);
background: linear-gradient(to bottom, #82b8ff 1%,#18a5f2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82b8ff', endColorstr='#18a5f2',GradientType=0 );
}

Zobacz DEMO > Pole wyszukiwania w CSS3

W komentarzach, pośród listingu, nazwałem najbardziej niezrozumiałe (przez początkujących) własności CSS3. Z edycją spokojnie powinniście sobie poradzić. Do zmiany gradientów polecam generator online ColorZilla.

komentarzy 6

  • Awatar
    L

    11 sierpnia 2012 22:20

    Demo nie wyglada jak na załączonym obrazku…

    Odpowiedz
  • Awatar
    rwtryb

    13 sierpnia 2012 07:59

    ładniusie pole :D

    Odpowiedz
  • Awatar
    Ryuk

    11 listopada 2012 02:02

    Niby takie proste a daje taki efekt ! Podziw :)

    Odpowiedz
  • Awatar
    Kamil

    21 lipca 2013 17:01

    Ktoś wdrążył?

    Odpowiedz
    • Awatar
      Michał Kortas

      22 lipca 2013 20:47

      W jakim sensie? Wystarczy „podpiąć” odpowiednie klasy CSS pod pole wyszukiwania na stronie i powinno się wyświetlać tak, jak w przykładzie.

      Odpowiedz

Zostaw odpowiedź