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.
1 2 3 | <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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | 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.
Demo nie wyglada jak na załączonym obrazku…
obrazek nie mial przedstawiac wiernej kopii dema :-)
ładniusie pole :D
Niby takie proste a daje taki efekt ! Podziw :)
Ktoś wdrążył?
W jakim sensie? Wystarczy „podpiąć” odpowiednie klasy CSS pod pole wyszukiwania na stronie i powinno się wyświetlać tak, jak w przykładzie.