Połącz się z nami

Internet Maker

Jak stworzyć ciekawe formularze do wyszukiwania?

Opublikowane

dnia

W poniższym tutorialu będziemy ustalać style dla bloków tekstowych oraz buttonów przy tworzeniu ciekawych formularzy do wyszukiwania.

Stworzymy takie elementy w trzech kolorach, odcieniach szarości oraz dwóch kształtach ? prostokątne oraz lekko zaokrąglone. Efekt, który zamierzam tym osiągnąć znajduje się poniżej:

Część HTML

Każda z form posiadać będzie pole tekstowe oraz buton, którym zatwierdzać będziemy wyszukiwanie. Jeśli więc zamierzamy stworzyć trzy takie formy, musimy trzykrotnie powielić kod.

Każda z form zawiera dwa okienka wyszukiwania, z których pierwsze jest zaokrąglone z domyślnym tekstem ?Szukaj?. Wszystkie te okienka mają swoją klasę search, więc w łatwy sposób można wyświetlić w nich ikonkę lupy.

Drugie okienko jest prostokątne i posiada przycisk służący do potwierdzenia wyszukiwania obok.

Style

Najpierw stworzymy ogólne style, które oczywiście powielimy dla każdej z form.

	form{
    width:500px;
    margin:0 auto;
}
.search {
    padding:6px 15px 6px 30px;
    margin:3px;
    background: url('http://vpx.pl/i/G0oUb.png') no-repeat 8px 6px;}

Na sam początek wycentrujemy okienko, tak jak jest to pokazane na obrazku z początku tutoriala. Następnie możemy zmienić klasę wyszukiwania, alby pokazywała jako tło ikonkę lupy. Aby zrobić to prawidłowo, musimy zmienić pozycję ikonki wewnątrz pola. Jeśli mamy zamiar pokazywać lupę w formularzu, musimy tak dopasować dopełnianie okienka, aby tekst nie przykrył naszej ikonki.

.rounded {
    border-radius:15px;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
}

Pierwsze formularze są zaokrąglone, więc możemy dodać do nich klasę rounded, która zmieni wartość border-radius do 15 pikseli.

input[type=text]{
    color:#bcbcbc;
}

Dla wszystkich pól tekstowych zmienimy także kolor czcionki.

input[type=button], input[type=button]:hover {
    position:relative;
    left:-6px;
    border:1px solid #adc5cf;
    background: #e4f1f9; /* Stare przeglądarki */
    background: -moz-linear-gradient(top, #e4f1f9 0%, #d5e7f3 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f1f9), color-stop(100%,#d5e7f3)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* IE10+ */
    background: linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f1f9', endColorstr='#d5e7f3',GradientType=0 ); /* IE6-9 */
    color:#7da2aa;
    cursor: pointer;
}

Drugie formularze mają swoje przyciski, po prawej stronie. Zmieniamy więc pozycję ?left? na -6px.

.jasna, .szara, .ciemna {
    width:95%;
    height:50px;
    padding:40px 25px;
}

Ta część kodu odpowiedzialna jest za ustawienie znaczników div. Jedyna różnica między formularzami wyszukiwania jest taka, że divy, w których są wpisane, mają inne tła oraz pola tekstowe posiadają różne ramki oraz kolory tła.

Jasna wyszukiwarka

.jasna{
    background: #f9f9f9;
}
.jasna input[type=text]{
    border:1px solid #d0d0d0;
    background-color:#fcfcfc;
}

Szara wyszukiwarka

.szara{
    background: #d4d9df;
}
.szara input[type=text]{
    border:1px solid #acb1b7;
    background-color:#fcfcfc;
}

Ciemnoszara wyszukiwarka

.ciemna{
    background: #404348;
}
.ciemna input[type=text]{
    border:1px solid #2a2e31;
    background-color:#2d3035;
    color:#505358;
}

Kontynuuj czytanie
Reklama
Kliknij, by skomentować

Zostaw komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Internet Maker

Pozycjonowanie strony internetowej a reklamy w Internecie – czym się różnią?

Nie masz cierpliwości do pozycjonowania? Skorzystaj z pomocy profesjonalistów!

Opublikowane

dnia

przez

Chcesz osiągnąć sukces w e-biznesie i zwiększyć widoczność swojej strony w sieci? Nie pozostaje Ci nic innego jak zająć się promocją witryny. Zacznij od inwestycji w pozycjonowanie, czyli zgodnej ze wskazówkami Google optymalizacji strony pod wyszukiwarkę internetową. Pamiętaj, że największa ilość wejść pochodzi właśnie z wyszukiwarek, dlatego zajmowanie wysokiej pozycji w rankingu Google szybko przełoży się na lepsze statystyki.

(więcej…)

Kontynuuj czytanie

Internet Maker

Jak szybko i łatwo stworzyć stronę mobilną

Opublikowane

dnia

W dzisiejszych czasach coraz bardziej popularne staje się przeglądanie stron internetowych na urządzeniach mobilnych. Ba! Samo surfowanie po sieci to w sumie już przeszłość – obecnie zakupy czy płatności mobilne to chleb powszedni dla polskich internautów. 

(więcej…)

Kontynuuj czytanie

Internet Maker

Strona na WordPressie? Grunt to dobry hosting

Opublikowane

dnia

WordPress jest powszechnie uważany za najlepszy system zarządzania treścią zarówno dla prostych blogów i stron, jak i większych serwisów internetowych oraz sklepów. Szacuje się, że już 23% witryn na świecie korzysta z WordPressa, a wśród nich takie marki jak BBC,  MTV czy Sony.

(więcej…)

Kontynuuj czytanie

Internet Maker

Jak zabezpieczyć swoje zdjęcia w chmurze

Opublikowane

dnia

Niedawny wyciek nagich zdjęć znanych osobistości wznowił dyskusje na temat bezpieczeństwa naszych prywatnych danych. Jako że część fotografii została wykradziona poprzez iCloud, prezentujemy dziś jak zabezpieczyć swoje dane w chmurze. (więcej…)

Kontynuuj czytanie

Internet Maker

Jak usunąć historię swojej aktywności z Facebooka?

Opublikowane

dnia

Usunięcie swojej aktywności z Facebooka nie jest takie proste, jakby się mogło wydawać. Portal społecznościowy daje możliwość zachowania kopii swoich postów oraz zamknięcia całego konta, jednak co w przypadku gdy chcemy usunąć tylko poszczególne wpisy? (więcej…)

Kontynuuj czytanie
Reklama

Popularne