Bio sam kritikovan, rekavši da je izgled loš, ali postoje moderni HTML5 i CSS3.
Naravno, razumijem, najnoviji standardi su cool i sve to. Ali činjenica je da ja, u pravilu, izrađujem rasporede po narudžbi, a u većini slučajeva je važan potpuni identitet u različitim pretraživačima, što ne dozvoljava korištenje najnovijih tehnologija. Stoga se prvenstveno fokusiram na kompatibilnost među pretraživačima i, iz navike, postavio sam formular za pretragu „na stari način“.
Generalno, ovim postom ispravljam situaciju (zbog onih koji su nezadovoljni prethodnim člankom =) i nudim svoju verziju izgleda iste forme za pretragu, ali koristeći HTML5 i CSS3 tehnologije.
Dostupan je primjer onoga što će se dogoditi kao rezultat.
Šta gubimo kada dizajniramo ovaj obrazac koristeći HTML5 i CSS3?U drugim modernim pretraživačima sve je u redu. Smatram da gore navedeni nedostaci nisu kritični, pa bih za svoju stranicu sigurno koristio formu dizajniranu korištenjem najnovijih tehnologija.
HTML kod obrasca za pretraguizgleda ovako:
U odnosu na obrazac iz prethodnog članka, urađene su sljedeće promjene u skladu sa HTML5 tehnologijom:
Ovdje su svi potrebni stilovi s komentarima:
Pretraga ( /* postavite potrebnu širinu obrasca u zavisnosti od dizajna ** formula se rasteže bez problema */ širina: 35%; /* dugme za slanje pozicioniraćemo apsolutno, ** stoga je ovo svojstvo neophodno */ pozicija: relativno; ) .pretraži unos ( /* onemogući ivice za unose */ granica: nema; ) /* stilovi za polje za unos */ .pretraži .input ( /* rastegne polje za unos na cijelu širinu forme */ širina : 100%; /* zbog gornjeg (8px) i donjeg (9px) unutrašnjeg paddinga ** podesiti visinu obrasca ** napraviti unutrašnji padding na desnoj strani (37px) veći od lijevog, ** od dugme za slanje će biti postavljeno tamo */ padding: 8px 37px 9px 15px; /* tako da širina polja za unos (100%) uključuje unutrašnji padding */ -moz-box-sizing: border-box; box-sizing: border -box; /* dodaj unutrašnje sjene */ box-shadow: umetnuti 0 0 5px rgba(0,0 ,0,0.1), umetnuti 0 1px 2px rgba(0,0,0,0.3); /* zaokružiti uglove * / radijus granice: 20px; pozadina: #EEE; font: 13px Tahoma, Arial, sans-serif; boja: #555; obris: nema; ) /* promijeniti dizajn polja za unos kada je fokusirano */ .search .input:focus ( box-shadow: inset 0 0 5px rgba(0,0,0,0.2), inset 0 1px 2px rgba(0,0, 0,0.4 ); pozadina: #E8E8E8; boja: #333; ) /* dizajniraj dugme za slanje */ .pretraži .submit ( /* pozicioniraj dugme apsolutno od desne ivice forme */ položaj: apsolutno; vrh: 0; desno: 0; širina: 37px; /* rastegni dugme do pune visine forme */ visina: 100%; kursor: pokazivač; pozadina: url(https://lh4.googleusercontent.com/-b- 5aBxcxarY/UAfFW9lVyjI/AAAAAAAABUg/gQtEXuPuIds/s13/go. png) 50% bez ponavljanja; /* dodaj transparentnost dugmetu za slanje */ neprozirnost: 0,5; ) /* kada lebdiš kursorom, promijeni prozirnost dugmeta * / .search .submit:hover ( neprozirnost: 0.8; ) /* ovo svojstvo je neophodno da u pretraživačima ** Chrome i Safari možete stilizirati unose */ input ( -webkit-appearance: nema; )
I stilovi za IE ispod verzije 9:
/* postavi odvojene stilove za IE pretraživače ispod verzije 9 */ *+html .search ( /* za IE7 prilagodi širinu drugim pretraživačima i dodaj desni ** padding tako da dugme za slanje bude na mestu */ širina: 28 % ; padding: 0 52px 0 0; ) .search .input ( border: 1px solid #DFDFDF; border-top: 1px solid #B3B3B3; padding-top: 7px; padding-bottom: 8px; ) .search .input:focus ( border: 1px solid #CFCFCF; border-top: 1px solid #999; ) .search .submit (filter: alpha(opacity=50); ) .search .submit:hover (filter: alpha(opacity=80); )
P.S. Hvala kritičarima na njihovim komentarima na prethodni članak! Zahvaljujući vama, neke nove tačke rasporeda su mi se zaglavile u glavi.
ZadatakPostavite dugme za slanje obrasca unutar okvira za unos teksta.
RješenjeMorate shvatiti da ne možete direktno dodati dugme unutar polja obrasca. Stoga sve metode samo imitiraju ovaj efekat. Da biste stvorili ovu iluziju, uklonite originalni okvir oko polja za pretraživanje i dodajte ga elementu koji sadrži polje i dugme. Ova metoda najbolje funkcionira kada sve naše dimenzije imaju fiksne vrijednosti. U primjeru 1, ukupna širina forme je postavljena na 300 piksela, polje je široko 274 piksela, a dugme je široko 20 piksela. Širina polja se odabire uzimajući u obzir da u obrascu nema crtica, što će negativno utjecati na cjelokupni izgled.
Safari i Chrome pretraživači će zahtijevati neke dodatke CSS kodu. Kada je fokus postignut, polja obrasca su istaknuta okvirom u boji, što razbija našu iluziju jednog polja. Kako biste spriječili da se to dogodi, dodajte outline stilu polja za pretraživanje sa vrijednošću none , to će blokirati pojavu okvira u navedenim pretraživačima. U svakom slučaju, oko polja za pretraživanje ( ) će biti tanka granica, koja se može ukloniti korištenjem specifičnog svojstva -webkit-appearance, opet s vrijednošću none .
Primjer 1. Obrazac za pretragu
HTML5 CSS 2.1 IE Cr Op Sa Fx
Obrazac za pretragu .search ( širina: 300px; /* Širina polja sa dugmetom */ granica: 1px solid #000; /* Parametri okvira */ min-height: 20px; /* Minimalna visina */ ) ulaz ( granica: nema; /* Ukloni okvir */ outline: nema; /* Ukloni sjaj u Chromeu i Safariju */ -webkit-appearance: nema; /* Ukloni okvir u Chromeu i Safariju */ širina: 274px; /* Širina polja */ vertical-align : sredina; /* Poravnaj u sredini */ ) ulaz ( širina: 20px; /* Širina dugmeta */ visina: 20px; /* Visina dugmeta */ granica: nema; /* Ukloni ivicu */ pozadina: url(images/video .png) bez ponavljanja 50% 50%; /* Parametri pozadine */ )
Rezultat primjera prikazan je na sl. 1.
Rice. 1. Prikaz polja za pretragu sa dugmetom
Samo dugme se može dodati na različite načine. Na primjer, neka bude obično dugme sa natpisom, kroz , ili, kao u gornjem primeru, kao dugme sa slikom u pozadini.
Danas predlažem da napravite prekrasan formular za pretraživanje koristeći CSS. Slažem se, standardni dizajn obrazaca u html-u nije impresivan, ali danas ćemo napraviti oblik slatkiša. Evo šta sam našao za ovaj članak:
Pokazat ću vam korak po korak, od A do Ž, kako napraviti takav obrazac. Ovdje možete preuzeti psd izgled ovog i još dva prekrasna oblika kako biste kasnije izrezali potrebne slike.
https://ideasplayer.com/2011/12/free-custom-search-boxes-psd/
Prvo, kreirajmo sam obrazac. Sastojiće se od dva polja - običnog polja za unos teksta i dugmeta za sliku, koje ćemo postaviti kasnije.
Za sada sve izgleda veoma tužno:
Za kreiranje oblika izrezat ću 2 slike.
Prvo je polje za unos i samo dugme. Da biste to učinili, isključite slojeve s tekstom i ikonom za pretraživanje, ostalo možete odabrati i spremiti za web, samo budite u png-24 formatu kako biste sačuvali transparentnost.
Sada isključujem sve osim ikone za pretragu i čuvam. Ovo je slika koju sam dobio. Slike sam nazvao btn.png i icon.png i stavio ih u folder sa html i css fajlovima. Sada možete raditi dalje.
Vrijeme je da počnete pisati CSS kod. Počnimo s pravilima za samu listu polja:
Traži (pozadina: url(btn.png) bez ponavljanja lijevo gore; širina: 268px; visina: 57px; stil liste: nijedan; )
Za sada izgleda užasno, zar ne? Ali u redu je, sada ćemo to raditi normalno.
Korak 4 - stilizirajte polje za unos tekstaI odmah predstavljam kod koji sam napisao da stilizujem polje za unos teksta.
Ulaz za pretragu (granica: nema; pozadina: prozirna; margina: 15px -20px 3px -15px; širina: 170px; padding: 5px; veličina fonta: 14px; )
Imajte na umu da sam koristio selektor atributa za pristup polju za unos. Da biste razumjeli o čemu govorimo, savjetujem vam da pročitate.
Kako je ovaj kod pomogao? Doveo je polje za unos u ovaj obrazac:
Odnosno, možete direktno upisivati u njega, sve je lijepo prikazano:
Sada da objasnim ovaj kod:
Također, kako bih osigurao da kada polje dobije fokus da se ne pojavi izdajnički plavi obris, dodao sam sljedeće stilove.
Pretraga input:focus( granica: nema; obris: nema; sjena okvira: nema; )
Pseudo-class:focus je odgovorna za stiliziranje polja kada dobiju fokus.
Odlično, jedino što je strašno je dugme za pretragu koje bi trebalo zamijeniti prelijepom ikonicom.
Korak 5 - finalizirajte obrazac, dodajte ikonu za pretraživanjeDa vas podsjetim da dio koda odgovoran za prikaz drugog gumba izgleda ovako:
Shodno tome, imamo prazan src atribut u koji treba da unesemo putanju do slike koja treba da postane dugme. Pošto sam sliku nazvao icon.png i stavio je u isti direktorij kao i html fajl, moj kod će biti ovakav:
I evo šta se desilo:
To znači da je mala stvar postaviti ikonu na pravo mjesto. Kako uraditi? Da, zapravo postoje različite opcije:
Odabrao sam drugi metod. dakle:
Sa .search input selektorom upućujem na dugme za sliku. Zapravo, u mom slučaju su mi baš takve margine odgovarale, ali svojstvo float: right čini blok plutajućim, pritiskajući ga na desnu ivicu roditeljskog bloka.
Opet, koristio sam debuger da postavim dugme na pravo mesto. Otvorio sam ga i u njemu sam odredio koje su margine potrebne da bi dugme bilo na pravom mestu. Da vidite stilove elementa u programu za otklanjanje grešaka, kliknite desnim tasterom miša na njega i izaberite Inspect Element.
U ovom tutorijalu želio bih podijeliti kako možete ukrasiti svoj obrazac za pretragu. Nećemo raditi ništa super komplikovano. Umjesto toga, pogledajmo četiri načina na koja možete ukrasiti svoj obrazac za pretraživanje pomoću CSS prijelaza
Ispod je kod za običan okvir za pretragu.Za početak, u vašoj HTML datoteci kreirajte ulazni element sa atributom type=search. Ako pogledate kod ispod, vidjet ćete 4 različita elementa: div element sa klasom .box, div element sa klasom .container-1, .icon i samu traku za pretraživanje.
Sva četiri primjera će, naravno, imati traku za pretraživanje i ikonu za pretraživanje. Svaki od četiri primjera bit će u zasebnom kontejneru tako da ih možemo modificirati neovisno jedan o drugom. Konačno, div je odgovoran za centriranje našeg kontejnera.
Dodavanje Font AwesomeFont Awesome je biblioteka ikona. Više o ovoj biblioteci možete saznati na njihovoj web stranici.
Isječak koda iznad pokazuje jedan primjer kako možete uključiti ikonu u svoju oznaku. Međutim, da bi ikona radila, potrebno je da navedete i vezu do Font Awesome biblioteke, kao što je napisano u nastavku. Dodajte ovu vezu u oznaku head vašeg dokumenta.
Početni stilovi
Sada ćemo dodati neke stilove u zasebnu datoteku (koju ćete također morati dodati u head tag vašeg dokumenta).
Body( pozadina: #343d46; ) .box( margina: 100px auto; širina: 300px; visina: 50px; )
U gornji CSS isječak, dodali smo neke osnovne stilove za stranicu. Polja za pretragu će biti stilizovana tamnoplavom, tako da pozadina tela ne mora biti potpuno bijela. Klasa kutije je također centrirana na stranici sa lekcijom.
Završetak okvira za pretraguOvaj vodič je o učenju kako prilagoditi svoje okvire za pretraživanje. Koristiću prvi primjer da detaljnije objasnim šta se dešava; Hajde da budemo sigurni da znate šta se tačno dešava. U ostala tri primjera, samo ću vam pokazati opcije prijelaza.
#1. Osvjetljavanje pozadinePrvi primjer koji ćemo riješiti je promjena pozadine unosa pretraživanja pri lebdenju. Dodaćemo prijelaz kako promjena ne bi bila nagla.
HTMLVeć ste vidjeli osnovni HTML kod. Ovo će biti jedan fragment za sve primjere.
CSS
Da bismo dodijelili stil, moramo definirati CSS stil samog okvira za pretraživanje. Dodajmo sva CSS pravila jedno po jedno tako da znate tačno šta se dešava.
Kontejner-1( širina: 300px; vertikalno poravnanje: sredina; razmak: nowrap; pozicija: relativna; )
Prvo, dizajnirajmo klasu kontejnera. Najvažnije svojstvo je možda pozicija: relativno. Ovo je namjerno kako bi se ikona mogla postaviti na vrh ulaza, kao što ćete vidjeti.
Container-1 input#search( širina: 300px; visina: 50px; pozadina: #2b303b; granica: nema; veličina fonta: 10pt; float: lijevo; boja: #63717f; padding-left: 45px; -webkit-border- radijus: 5px; -moz-border-radius: 5px; border-radius: 5px; )
UnosZatim ćemo stilizirati unos. Sve navedeno je za dekoraciju, jer radijus ivice ili boja pozadine ne utječu na funkcionalnost unosa. Obratite pažnju na svojstva lijevog uvlaka. Ovo je da se napravi prostor za ikonu tako da ne bude doslovno na vrhu teksta unutar unosa.
U nastavku imamo četiri različita pravila za boju čuvara mjesta teksta našeg primjera pretraživanja. Nažalost, pravila moraju biti odvojena za pojedinačne prefikse dobavljača i ne mogu se kombinirati u skraćeno pisano pravilo. Ovo je pomalo neugodno i ponovit će se u svakom primjeru!
Container-1 input#search::-webkit-input-placeholder (boja: #65737e; ) .container-1 input#search:-moz-placeholder ( /* Firefox 18- */ boja: #65737e; ) .container- 1 input#search::-moz-placeholder ( /* Firefox 19+ */ boja: #65737e; ) .container-1 input#search:-ms-input-placeholder ( boja: #65737e; )
IkonaKonačno, stil ikone. Glavna stvar je da bude na vrhu ulaza, pa mu dodjeljujemo poziciju: apsolutna . Margine pomažu u pozicioniranju ikone na gornjih 50% pozicije.
.container-1 .icon( pozicija: apsolutna; vrh: 50%; margin-left: 17px; margin-top: 17px; z-index: 1; boja: #4f5b66; ) Dodavanje efekata hoveraSljedeći skup pravila određuje šta će se dogoditi s poljem za pretraživanje kada se lebdi. U ovom primjeru želimo promijeniti boju pozadine. Da biste se riješili žutog ili plavog sjaja oko unosa (koji pretraživači ponekad dodaju), postavite outline: none .
Container-1 input#search:hover, .container-1 input#search:focus, .container-1 input#search:active(outline:none; background: #ffffff; )
Kreiranje tranzicijeDa bismo izvršili prijelaz, moramo dodati nekoliko linija koda. Vratimo se na pravilo gdje smo definirali unos style.container-1 input#search . Prije završnih zagrada dodajte sljedeće:
Webkit-transition: pozadinska .55s lakoća; -moz-transition: pozadinska .55s lakoća; -ms-transition: pozadina .55s lakoća; -o-transition: pozadinska .55s lakoća; prijelaz: pozadinski .55s lakoća;
Definiramo prečicu za svojstvo prijelaza, ali možemo definirati i ova tri parametra pojedinačno. Prvo, kažemo da bi tranzicija trebala utjecati samo na svojstvo pozadine. Zatim kažemo da će prijelaz trajati nešto više od pola sekunde. Na kraju, definiramo umjerenost efekta tranzicije. Lakoća nije jedini efekat koji bi ovdje mogao funkcionirati, mogli bismo koristiti linear ili ease-in na primjer. Izgledalo bi malo drugačije. Isprobajte da vidite šta vam se najviše sviđa.
Stil unosa bi sada trebao izgledati kao kod ispod.
Container-1 input#search( širina: 300px; visina: 50px; pozadina: #2b303b; granica: nema; veličina fonta: 10pt; float: lijevo; boja: #262626; padding-left: 45px; -webkit-border- radijus: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition: pozadinu .55 s lakoća; -moz-transition: pozadinu .55 s lakoća; -ms-transition: pozadinu .55 s lakoća; - o-prijelaz: pozadinski .55s lakoća; prijelaz: pozadinski .55s lakoća; )
Kako funkcionišu CSS tranzicije? #2. Proširite unos pri lebdenjuU ovom primjeru, pretraga će početi od ikone kontrolnog stakla. Kada zadržite pokazivač miša iznad ikone, pretraga će se proširiti, nakon čega možete unijeti svoj upit. Većina koda u ovom primjeru bit će vrlo sličan prethodnom.
HTML CSS .container-2( širina: 300px; vertikalno poravnanje: sredina; razmak: nowrap; pozicija: relativna; )Stil unosa za ovaj prijelaz je drugačiji. Ulaz je znatno manji, pa ikona može završiti iza trga. Sva ostala svojstva kao što su boja pozadine ili fonta će ostati, ne želimo potpuno mijenjati stil pretraživanja.
Container-2 input#search( širina: 50px; visina: 50px; pozadina: #2b303b; granica: nema; veličina fonta: 10pt; float: lijevo; boja: #262626; padding-left: 35px; -webkit-border- radijus: 5px; -moz-border-radius: 5px; border-radius: 5px; boja: #fff; -webkit-transition: širina .55s lakoća; -moz-transition: širina .55s lakoća; -ms-transition: širina .55s lakoća; -o-prijelaz: širina .55s lakoća; prijelaz: širina .55s lakoća; )
Kao što vidite, ja sam nadjačao svojstvo tranzicije da utiče samo na širinu. Zadržao sam isto vrijeme jer je dovoljno brzo da ne iritira korisnike, ali dovoljno dugo da stvori lijep efekat.
Ispod je kod za promjenu boje teksta čuvara mjesta.
Container-2 input#search::-webkit-input-placeholder (boja: #65737e; ) .container-2 input#search:-moz-placeholder ( /* Firefox 18- */ boja: #65737e; ) .container- 2 input#search::-moz-placeholder ( /* Firefox 19+ */ boja: #65737e; ) .container-2 input#search:-ms-input-placeholder ( boja: #65737e; )
Još jednom imamo CSS stil za ikonu. Ostaje isti kao u prethodnom primjeru.
Container-2 .icon( pozicija: apsolutna; vrh: 50%; margin-left: 17px; margin-top: 17px; z-index: 1; boja: #4f5b66; )
Dodavanje efekata lebdenjaPoslednja stvar koju treba da uradimo je da definišemo kako će izgledati čekanje. U sljedećem isječku koda, prvo pravilo osigurava da na obrascu nema sjaja izazvanog pretraživačem i da okvir za pretragu ostaje proširen dok kucate - dok kucate. Srednje pravilo jednostavno proširuje unos na punu širinu pri lebdenju.
Container-2 input#search:focus, .container-2 input#search:active(outline:none; width: 300px; ) .container-2:hover input#search( width: 300px; ) .container-2:hover . ikona( boja: #93a2ad; )
Poslednja stvar koja se dešava u gornjem kodu je da ikona menja boju kada se lebdi. Ovo je samo detalj da brzo pokažete korisniku da je okvir za pretragu aktivan, a ne neaktivan. Ova promjena nije implementirana za tranziciju.
#3. Povećajte veličinu ikone pri lebdenjuOd sva četiri primjera, ovaj je najsuptilniji, i sa kodne i sa vizuelne tačke gledišta. U tom slučaju, ikona prozora za gledanje će lagano lebdjeti i povećati se u veličini.
HTMLOpet, HTML oznaka za ikonu i okvir za pretraživanje je ista kao u prethodna dva primjera. Naravno, sa izuzetkom .container-3 .
CSS
Nema ništa posebno u pogledu CSS stila za ovaj primjer. Uglavnom, početak je vrlo sličan prvim primjerima, gdje se zadano stanje ne razlikuje. Ispod je kod za kontejner i unos. Imajte na umu da ovaj put nema prijelaza na unos.
Kontejner-3( širina: 300px; vertikalno poravnanje: sredina; razmak: sadarap; pozicija: relativna; ) .container-3 input#search( širina: 300px; visina: 50px; pozadina: #2b303b; granica: nema; font-size: 10pt; float: lijevo; boja: #262626; padding-left: 45px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; boja: #fff; )
Još jednom imamo pravila za čuvanje mjesta.
Container-3 input#search::-webkit-input-placeholder (boja: #65737e; ) .container-3 input#search:-moz-placeholder ( /* Firefox 18- */ boja: #65737e; ) .container- 3 input#search::-moz-placeholder ( /* Firefox 19+ */ boja: #65737e; ) .container-3 input#search:-ms-input-placeholder ( boja: #65737e; )
Po izgledu, ikona za ovaj primjer je ista. Ista pozicija, ista boja itd. Međutim, ja sam tome dodao prijelaz. Ovi prijelazi su dodijeljeni svim svojstvima, što je kraće od njihovog pojedinačnog navođenja.
Container-3 .icon( pozicija: apsolutna; vrh: 50%; margin-left: 17px; margin-top: 17px; z-index: 1; boja: #4f5b66; -webkit-transition: all .55s lakoća; -moz -transition: sve .55s lakoća; -ms-transition: sve .55s lakoća; -o-transition: sve .55s lakoća; prijelaz: sve .55s lakoća; )
Dodavanje efekata hovera .container-3 input#search:focus, .container-3 input#search:active( outline:none; ) .container-3:hover .icon( margin-top: 16px; boja: #93a2ad; -webkit -transform:scale(1.5); /* Safari i Chrome */ -moz-transform:scale(1.5); /* Firefox */ -ms-transform:scale(1.5); /* IE 9 */ -o-transform :scale(1.5); /* Opera */ transform:scale(1.5); )Postoji nekoliko stvari koje se dešavaju u gornjem kodu. Prvo smo promenili boju lebdenja ikone i pomerili je malo više tako da bude vertikalno centrirana kada je uvećana. Drugo, dodali smo transformaciju ikone pri lebdenju tako da postane 1,5 puta veća od svoje originalne veličine. Zato što je prethodno definirana tranzicija konfigurirana da utiče Sve svojstva, čini se da ikona raste pri lebdenju.
Pogledajmo još jednom kako bismo saznali više o transformaciji.
#4. Dugme za lebdenjeZa razliku od posljednja tri primjera, ovaj će biti složeniji. Prelazak miša iznad vrha unosa će kliknuti na dugme koje vam omogućava da nastavite - poput Pošalji ili Idi. Unutar dugmeta se nalazi ikona lupe.
HTMLOvaj HTML je malo drugačiji. Unos je još uvijek tu, naravno, ali ikona je sada unutar elementa gumba koji dolazi nakon unosa. Važno je da dugme dolazi nakon unosa jer ima veze sa načinom na koji će efekat čekanja biti kreiran u CSS-u.
CSSCSS je drugačiji u ovom primjeru, imajte na umu! Ispod je isječak stila kontejnera. Prvo, pozicija: nedostaje relativna; Ovo više nije važno jer se ikona ne oslanja na to da stane na vrh ulaza. Međutim, imamo overflow:hidden . Ovo sprečava da se dugme prikaže kada nije na čekanju. Tehnički, dugme koje se pojavljuje nalazi se desno od ulaza, ali zahvaljujući overflow:hidden ne pojavljuje se kada prelazi širinu kontejnera - kontejner i ulaz imaju istu širinu.
Kontejner-4( prelijevanje: skriveno; širina: 300px; vertikalno poravnanje: sredina; razmak: nowrap; )
Unos ispod nema prijelaz jer sada više nije element.
Container-4 input#search( širina: 300px; visina: 50px; pozadina: #2b303b; granica: nema; veličina fonta: 10pt; float: lijevo; boja: #fff; padding-left: 15px; -webkit-border- radijus: 5px; -moz-border-radius: 5px; border-radius: 5px; )
Sljedeći isječak služi za promjenu boje rezerviranih mjesta.
Container-4 input#search::-webkit-input-placeholder (boja: #65737e; ) .container-4 input#search:-moz-placeholder ( /* Firefox 18- */ boja: #65737e; ) .container- 4 input#search::-moz-placeholder ( /* Firefox 19+ */ boja: #65737e; ) .container-4 input#search:-ms-input-placeholder ( boja: #65737e; )
Ispod je kod za stilizovanje dugmeta pri lebdenju. Da biste ga prevarili da dođe sa strane, morate ga postaviti direktno iza ulaza i sakriti ga prije ciljanja. Dugme je element koji se mijenja - pomiče - tako da je ono što definira prijelaz. Kako bih olakšao stvari, definirao sam prijelaz koji će utjecati na sva svojstva.
Container-4 button.icon( -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius -bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; granica: nema; pozadina: #232833; visina: 50px; širina: 50px; boja: #4f5b66; neprozirnost: 0 ; font-size: 10pt; -webkit-transition: sve .55s jednostavnost; -moz-transition: sve .55s jednostavnost; -ms-transition: sve .55s jednostavnost; -o-transition: sve .55s jednostavnost; prijelaz: sve .55s lakoća ;)
Dodavanje efekata lebdenjaZa fading, dugme se mora postaviti na vrh ulaza. Ovo se radi kroz negativnu maržu. Prethodno smo postavili neprozirnost dugmeta na 0, tako da ga moramo resetovati na 1 da bi i dugme bilo vidljivo.
Posljednje pravilo mijenja pozadinu dugmeta samo kada pređete mišem preko dugmeta. Dobro je obavijestiti korisnika da je dugme aktivno i da može kliknuti na njega da podnese zahtjev; nema smisla imati dugme ako se čini neaktivnim.
Container-4:hover button.icon, .container-4:active button.icon, .container-4:focus button.icon( outline: nema; neprozirnost: 1; margin-left: -50px; ) .container-4: hover button.icon:hover( pozadina: bijela; )
ZaključakPa, došli smo do kraja naših CSS eksperimenata! Uzeli smo osnovni obrazac za unos pretraživanja i koristili mali skup efekata da promijenimo njegovo ponašanje. Kako drugačije možete promijeniti unos? Koje biste druge aspekte primijenili na CSS tranzicije ili transformacije? Obavijestite nas o tome u komentarima!
Pozdrav svim čitaocima i pretplatnicima sajta. Danas ću govoriti o tome kako kreirati elegantan HTML obrazac za pretraživanje za web stranicu.
Većina sajtova i blogova sa mnogo različitih informacija koristi takve forme. Omogućavaju posjetiocima da pronađu željeni članak koristeći ključne riječi, mislim da su ih svi vidjeli.
Sa stanovišta pretraživača, ovo su jednostavne HTML forme sa dva elementa: tekstualnim poljem i dugmetom koje šalje zahtev. Ponekad možda nema dugmeta, tada se obrazac šalje pritiskom na taster enter.
Kao primjer, uzeo sam jedan od radova sa premiumpixels.com. Evo linka do samog posta. Ova besplatna psd datoteka sa šest tipova dizajna oblika izgleda kao na slici ispod. Sam PSD možete preuzeti sa te stranice, jer se distribuira besplatno.
Ograničit ćemo se na kreiranje svijetle i tamne verzije, budući da je treća plava i vrlo slična svijetloj.
Šta ćemo na kraju dobiti, pogledajte u nastavku:
Dakle, kao što sam rekao, HTML kod je forma sa dva ulazna elementa. Radi lakšeg dizajna, umotao sam svaki od njih u div blok.
Za sve vrste dizajna, ovaj kod će biti isti.
Oni koji su radili sa Drupalom 7 mogu vidjeti da je ova struktura vrlo slična standardnom obrascu za pretragu u Drupalu 7. Jeste. Ako ugradite ovaj dizajn u svoju web lokaciju koristeći ovaj CMS, nećete morati ništa mijenjati u HTML izlazu (osim rezerviranog mjesta, pogledajte dolje).
Za polje za unos postavljamo atribut placeholdera. Vrijednost ovog atributa se prikazuje unutar polja za unos i nestaje kada polje dobije fokus. Vrlo povoljna nekretnina.
Podrazumevano, ceo ovaj formular za pretragu će izgledati drugačije u različitim pretraživačima, i ne baš svuda sa stilom. Na primjer, njegov izgled u Operi i Safariju prikazan je u nastavku:
Stoga ne možemo bez stilskih oznaka. Pogledajmo stilove za okruglu laganu verziju. Morate umetnuti sljedeći kod u CSS datoteku:
#search-block-form( width:248px; height:28px; border-radius:15px; border:#c9c9c9 solid 1px; background:url(images/searchBg.png) lijevo gore repeat-x; ) .focus-active( border-color:#aaa !important; background:#fff !important; ) #search-block-form input( padding:0; margin:0; display:block; border:none; outline:none; background:none; width:none; :100%; visina:100%; ) #search-block-form .form-actions( width:28px; height:28px; float:left; background:url(images/searchIcon.png) 5px 2px bez ponavljanja; ) #search-block-form .form-actions input:hover( cursor:pointer; ) #search-block-form .form-actions input( overflow:hidden; text-indent:-9999px; ) #search-block-form . form-item( width:210px; padding:0px 5px; float:right; height:28px; ) #search-block-form .form-item input( font:13px/16px "Trebuchet MS", Arial, Helvetica, sans- serif; color:#222; height:auto !important; padding:6px 0; ) .placeholder(color:#cbcbcb !important;)
Pogledajmo to redom i detaljnije. Prvo, postavljamo sam obrazac sa #search-block-form identifikatorom dimenzije, boju ivice i zaokruživanje uglova.
#search-block-form( width:248px; height:28px; border-radius:15px; border:#c9c9c9 solid 1px; background:url(images/searchBg.png) lijevo gore repeat-x; )
Svi unutrašnji elementi neće imati boju pozadine ili obrub, tako da ćemo nadjačati sva zadana svojstva na obje ulazne oznake.
#search-block-form input( padding:0; margin:0; display:block; border:none; outline:none; background:none; width:100%; height:100%; )
Ako je moguće, postavićemo dizajn divova u koje su elementi umotani, a ne samog diva.
Blok radnje obrasca će se držati na lijevoj strani, a blok stavki obrasca će se držati desne strane. Dugme za slanje obrasca ima tekst, ali nam nije potreban, pa ga uklanjamo na sljedeću dobro poznatu metodu.
#search-block-form .form-actions input( overflow:hidden; text-indent:-9999px; )
#search-block-form .form-item input( font:13px/16px "Trebuchet MS", Arial, Helvetica, sans-serif; boja:#222; visina:auto !important; padding:6px 0; )
Pogledajmo sada JavaScript kod.
/* Kopirajte kod ispod u vašu js datoteku. (JavaScript). */ $(document).ready(function(e) ( $("input").placeholder(); $("#search-block-form .form-item input").focus(function())( $ ( "#search-block-form").addClass("focus-active"); )).blur(function())( $("#search-block-form").removeClass("focus-active") ; ) ); )); /* Kraj */
Čini se, zašto je JavaScript potreban ovdje? To zapravo dodaje nekoliko korisnih stvari za upotrebljivost.
Prvo, svojstvo čuvara mjesta dolazi sa HTML5, a njegova podrška u starijim pretraživačima ostavlja mnogo da se poželi. Ali postoji jednostavno rješenje u obliku jQuery dodatka jQuery-Placeholder, koji će pružiti podršku za ovo svojstvo u svim pretraživačima (uključujući čak i IE6!).
Da biste to učinili, povežite samu datoteku i omogućite ovu funkciju:
$("input").placeholder();
Ako smo već povezali jQuery, onda možemo učiniti nešto drugo. Na primjer, pretpostavimo da kada obrazac dobije fokus, on se nekako mijenja.
Za to smo kreirali posebnu klasu focus-active. Kada dodate ovu klasu u obrazac, ona mijenja boju pozadine u bijelu, a boja ivice postaje malo tamnija. Obrazac će početi reagirati na radnje korisnika.
Fokus-aktivan( border-color:#aaa !important; background:#fff !important; )
Klasa.placeholder formatira tekst iz atributa placeholdera u starijim pretraživačima. Ova klasa se može koristiti samo ako koristimo isti jQuery dodatak.
Placeholder(color:#cbcbcb !important;)
To je sve. Napravili smo obrazac za pretraživanje koji se lako integrira u većinu web stranica.
Druge verzije se ne razlikuju mnogo, pogledajte izvorni kod demo stranica, postoje potrebni komentari.
To je sve za danas. Napišite u komentarima o čemu biste željeli čitati u novim objavama na blogu, a također se pretplatite na RSS i budite prvi koji će primati informacije o ažuriranjima stranice!
