Skocz do zawartości
Szukaj w
  • Więcej opcji...
Znajdź wyniki, które...
Szukaj wyników w...
Jakub

Szukajka w CSS3

Rekomendowane odpowiedzi

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>

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach
Gość
Ten temat został zamknięty. Brak możliwości dodania odpowiedzi.

×