Zablokowane Szukajka w CSS3

Jakub · 16 Lipca 2015

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.

[code]<pre xml:lang=?html4strict?><form>
<input type="text" id="szukaj">
<input type="submit" value="Szukaj" id="wyslij">
</form>[/code]

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

[code]<pre xml:lang=?css?>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 :D XImageTransform.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 :D XImageTransform.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 :D XImageTransform.Microsoft.gradient( startColorstr=?#82b8ff?, endColorstr=?#18a5f2?,GradientType=0 );
}[/code]

</pre>
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.
<span style="font-size: 5px; line-height: normal"> </span></span>