Pole wyszukiwania w CSS3


10 sierpnia 2012 / Michał Kortas


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.

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

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.



6 odpowiedzi na “Pole wyszukiwania w CSS3”

  1. L pisze:

    Demo nie wyglada jak na załączonym obrazku…

  2. rwtryb pisze:

    ładniusie pole :D

  3. Ryuk pisze:

    Niby takie proste a daje taki efekt ! Podziw :)

  4. Kamil pisze:

    Ktoś wdrążył?

Skomentuj Ryuk Anuluj pisanie odpowiedzi

Twój adres e-mail nie zostanie opublikowany.