Bio sam kritiziran, rekavši da je izgled sranje, ali postoje moderni HTML5 i CSS3.
Naravno, razumijem, najnoviji standardi su cool i sve to. Ali činjenica je da ja, u pravilu, postavljam po narudžbi, au većini slučajeva bitan je potpuni identitet različitim preglednicima, koji ne dopušta korištenje najnovijih tehnologija. Stoga se prvenstveno fokusiram na kompatibilnost s više preglednika i, iz navike, postavio sam obrazac za pretraživanje "na stari način".
Općenito, ovim postom ispravljam situaciju (za dobrobit onih koji su bili nezadovoljni prethodnim člankom =) i nudim svoju verziju izgleda istog obrazac za pretraživanje, ali koristeći HTML5 i CSS3 tehnologije.
Dostupan je primjer onoga što će se dogoditi kao rezultat.
Što gubimo kada dizajniramo ovaj obrazac koristeći HTML5 i CSS3?U ostalom moderni preglednici sve je odlično. Vjerujem da gore navedeni nedostaci nisu kritični, pa bih za svoju stranicu sigurno koristio obrazac dizajniran pomoću najnovijih tehnologija.
HTML kod obrasca za pretraživanjeOvako izgleda:
U odnosu na obrazac iz prethodnog članka, u skladu s HTML5 tehnologijom napravljene su sljedeće izmjene:
Ovdje su svi potrebni stilovi s komentarima:
Pretraživanje ( /* postavite potrebnu širinu obrasca ovisno o dizajnu ** obrazac se rasteže bez problema */ širina: 35%; /* apsolutno ćemo postaviti gumb za slanje, ** stoga je ovo svojstvo neophodno */ pozicija: relativno; ) .search input ( /* onemogući granice za unose */ border: none; ) /* stilovi za polje za unos */ .search .input ( /* rastezanje polja za unos na cijelu širinu obrasca */ širina : 100% /* zbog gornjeg (8px) i donjeg (9px) unutarnjeg ispuna ** podešavanje visine obrasca **; podstava s desne strane (37px) učinimo je većom od lijeve, ** jer tamo će se nalaziti gumb za slanje */ padding: 8px 37px 9px 15px; /* tako da širina polja za unos (100%) uključuje ispunu */ -moz-box-sizing: border-box; veličina okvira: border-box; /* dodaj unutarnje sjene */ box-shadow: umetnuto 0 0 5px rgba(0,0,0,0.1), umetnuto 0 1px 2px rgba(0,0,0,0.3); /* okrugli kutovi */ border-radius: 20px; pozadina: #EEE; font: 13px Tahoma, Arial, sans-serif; boja: #555; obris: nema; ) /* promijenite dizajn polja za unos kada je fokus */ .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; 0; desno: 37px; /* razvući gumb do pune visine: 100%; /* dodati prozirnost gumbu za slanje: 0,5 ; ) /* kada lebdite kursorom, promijenite prozirnost gumba za slanje */ .search .submit:hover ( neprozirnost: 0,8; ) /* ovo svojstvo potrebno kako bi u preglednicima ** Chrome i Safari bilo moguće stilizirati unose */ input ( -webkit-appearance: none; )
I stilovi za IE ispod verzije 9:
/* postavite zasebne stilove za IE preglednike ispod verzije 9 */ *+html .search ( /* za IE7 prilagodite širinu drugim preglednicima i dodajte desno ** ispunjavanje tako da gumb za slanje bude na mjestu */ širina: 28 % ; padding: 0 52px 0 0; ) .search .input ( border: 1px solid #DFDFDF; border-top: 1px solid #B3B3B3; padding-bottom: 8px; ) .search .input: fokus ( 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 točke rasporeda su mi ostale u glavi.
ZadatakPostavite gumb za slanje obrasca unutar okvira za unos teksta.
RiješenjeMorate razumjeti da ne možete izravno dodati gumb unutar polja obrasca. Stoga sve metode samo oponašaju ovaj učinak. Da biste stvorili ovu iluziju, uklonite izvorni obrub oko polja za pretraživanje i dodajte ga elementu koji sadrži polje i gumb. Ova metoda Najbolje funkcionira kada sve naše veličine imaju fiksne vrijednosti. U primjeru 1, ukupna širina obrasca postavljena je na 300 piksela, polje je široko 274 piksela, a gumb je širok 20 piksela. Širina polja odabire se uzimajući u obzir da u obrascu nema crtica, što će negativno utjecati na cjelokupni izgled.
Bit će potrebni neki dodaci CSS kodu Safari preglednici i Chrome. Kada se postigne fokus, polja obrasca su istaknuta okvirom u boji, što razbija našu iluziju o jednom polju. Kako biste spriječili da se to dogodi, dodajte obris u stil polja za pretraživanje s vrijednošću none, to će blokirati pojavljivanje okvira u navedeni preglednici. Oko polja za pretraživanje ( ) će ostati u svakom slučaju tanki okvir, može se ukloniti pomoću specifičnog svojstva -webkit-appearance, opet s vrijednošću none .
Primjer 1. Obrazac za pretraživanje
HTML5 CSS 2.1 IE Cr Op Sa Fx
Obrazac za pretraživanje .search ( width: 300px; /* Širina polja s gumbom */ border: 1px solid #000; /* Parametri okvira */ min-height: 20px; /* Minimalna visina */ ) input ( border: none; /* Ukloni okvir */ outline: none; /* Ukloni sjaj u Chromeu i Safariju */ -webkit-appearance: none /* Ukloni okvir u Chromeu i Safariju */ width: 274px /* Field width * / vertical-align : middle; /* Poravnaj u sredini */ ) input ( width: 20px; /* Button width */ height: 20px; /* Button height */ border: none; /* Remove the border */ background : url(images/video .png) no-repeat 50% 50%; /* Pozadinski parametri */ )
Rezultat primjera prikazan je na sl. 1.
Riža. 1. Prikaz polja za pretraživanje pomoću gumba
Sam gumb se može dodati na različite načine. Na primjer, napravite ga obični gumb s natpisom, kroz ili, kao u gornjem primjeru, u obliku gumba s pozadinskom slikom.
Danas predlažem da napravite prekrasan obrazac za pretraživanje koristeći CSS. Slažem se, standardni dizajn obrazaca u html-u nije impresivan, ali danas ćemo napraviti obrazac za slatkiše. Ovo sam pronašao za ovaj članak:
Pokazat ću vam korak po korak, od A do Ž, kako napraviti takav obrazac. Preuzmite psd izglede ovog i još dva lijepi oblici možete ga rezati ovdje kasnije potrebne slike.
https://ideasplayer.com/2011/12/free-custom-search-boxes-psd/
Prvo, kreirajmo samu formu. Sastojat će se od dva polja - uobičajenog polja za unos teksta i gumba sa slikom, koji ćemo kasnije postaviti.
Za sada sve izgleda jako tužno:
Za izradu oblika izrezat ću 2 slike.
Prvo je polje za unos i sam gumb. Da biste to učinili, isključite slojeve s tekstom i ikonom za pretraživanje, ostalo se može odabrati i spremiti za web, samo pazite da bude u png-24 formatu kako biste sačuvali transparentnost.
Sad gasim sve osim ikone za pretragu i spremam. Ovo je slika koju sam dobio. Slike sam nazvao btn.png i icon.png i smjestio ih u mapu s html i css datotekama. Sada možete raditi dalje.
Vrijeme je da počnemo pisati css kod. Počnimo s pravilima za sam popis polja:
Pretraživanje (pozadina: url(btn.png) bez ponavljanja lijevo gore; širina: 268px; visina: 57px; stil popisa: ništa; )
Zasad izgleda užasno, zar ne? Ali u redu je, sada ćemo to učiniti normalno.
Korak 4 - stilizirajte polje za unos tekstaI odmah predstavljam kôd koji sam napisao za stiliziranje polja za unos teksta.
Unos pretraživanja (obrub: nijedan; 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. Kako 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 upisati izravno u njega, sve se lijepo prikazuje:
Sada ću objasniti ovaj kod:
Također, osim što sam osigurao da se ne pojavi plavi obris kada polje dobije fokus, dodao sam sljedeće stilove.
Search input:focus( border: none; outline: none; box-shadow: none; )
Pseudo-class:focus odgovoran je za stiliziranje polja kada dobiju fokus.
Super, jedino što je ostalo strašno je tipka za pretraživanje koju bi trebala zamijeniti lijepa ikona.
Korak 5 - dovršite obrazac, dodajte ikonu za pretraživanjeDopustite mi da vas podsjetim da dio koda odgovoran za prikaz drugog gumba izgleda ovako:
Sukladno tome, imamo prazan atribut src, gdje trebamo unijeti putanju do slike, koja bi trebala postati gumb. Budući da sam sliku nazvao icon.png i smjestio je u isti direktorij kao i html datoteka, moj će kôd biti ovakav:
I evo što se dogodilo:
Dakle, jedino što treba učiniti je pozicionirati ikonu pravo mjesto. Kako to učiniti? Da, zapravo postoje različite opcije:
Izabrao sam drugu metodu. Tako:
S biračem unosa .search upućujem na gumb slike. Zapravo, u mom slučaju to su bile marže koje su mi odgovarale, ali plutajuće svojstvo: desno i čini blok da pluta, gurajući ga do desnog ruba nadređenog bloka.
Ponovno sam upotrijebio program za ispravljanje pogrešaka kako bih gumb smjestio na pravo mjesto. Otvorio sam ga i u njemu odredio koje su margine potrebne da gumb bude na pravom mjestu. Da biste vidjeli stilove elementa u programu za ispravljanje pogrešaka, kliknite na njega desni klik i odaberite Istraži stavku.
U ovom vodiču želio bih podijeliti s vama kako možete ukrasiti svoj obrazac za pretraživanje. Nećemo raditi ništa super komplicirano. Umjesto toga, pogledajmo četiri načina na koje možete ukrasiti obrazac za pretraživanje koristeći CSS prijelazi
Ispod je kod za uobičajeni okvir za pretraživanje.Za početak, u vašem HTML datoteka kreirajte ulazni element s atributom type=search. Ako pogledate kod ispod, vidjet ćete 4 drugačiji element: div element s class .box, div element s class .container-1, .icon i sama traka 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 spremniku kako bismo ih mogli mijenjati neovisno jedan o drugom. Konačno, div blok odgovoran za održavanje našeg spremnika u središtu.
Dodavanje fonta AwesomeFont Awesome je biblioteka ikona. Više o ovoj knjižnici možete saznati na njihovim stranicama.
Gornji isječak koda pokazuje jedan primjer kako možete uključiti ikonu u svoju oznaku. Međutim, da bi ikona radila, također morate dati vezu na biblioteku Font Awesome, kao što je napisano u nastavku. Dodajte ovu vezu oznaci zaglavlja vašeg dokumenta.
Početni stilovi
Sada ćemo dodati neke stilove zasebna datoteka(koje ćete također morati dodati oznaci zaglavlja vašeg dokumenta).
Body( background: #343d46; ) .box( margin: 100px auto; width: 300px; height: 50px; )
U gornji CSS isječak koda dodali smo neke osnovni stilovi za stranicu. Polja za pretraživanje bit će tamnoplava, tako da pozadina tijela ne mora biti potpuno bijela. Okvirna klasa također je u središtu stranice lekcije.
Završetak okvira za pretraživanjeOvaj vodič govori o tome kako prilagoditi svoje okvire za pretraživanje. Koristit ću prvi primjer da detaljnije objasnim što se događa; Pobrinimo se da točno znaš što se događa. U ostala tri primjera samo ću vam pokazati mogućnosti prijelaza.
#1. Osvjetljavanje pozadinePrvi primjer koji ćemo riješiti je promjena pozadine unosa pretraživanja pri lebdenju. Dodat ćemo prijelaz kako promjena ne bi bila nagla.
HTMLJeste li već vidjeli HTML kod? osnovno označavanje. Ovo će biti jedan fragment za sve primjere.
CSS
Da bismo dodijelili stil, moramo definirati CSS stil samog okvira za pretraživanje. Dodajmo sve CSS pravila jedan za drugim kako biste točno znali što se događa.
Spremnik-1 (širina: 300 px; okomito poravnanje: sredina; razmak: nowrap; pozicija: relativno; )
Prvo, dizajnirajmo klasu spremnika. Najvažnije svojstvo je možda position: relative . Ovo je namjerno kako bi se ikona mogla postaviti na vrh unosa, kao što ćete vidjeti.
Container-1 input#search( width: 300px; height: 50px; background: #2b303b; border: none; font-size: 10pt; float: left; color: #63717f; padding-left: 45px; -webkit-border- radijus: 5px; -moz-border-radius: 5px;
UlazniZatim ćemo stilizirati unos. Sve navedeno je za ukras, jer radijus obruba ili boja pozadine ne utječu na funkcionalnost unosa. Obratite pozornost na svojstva lijeve uvlake. Ovo je kako bi se napravilo mjesta za ikonu kako ne bi bila doslovno na vrhu teksta unutar unosa.
U nastavku imamo četiri različita pravila za boju rezerviranog 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 malo neugodno i ponavljat ć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 treba biti na vrhu unosa, pa mu dodijelimo poziciju: absolute. Margine pomažu u pozicioniranju ikone najviši položaj za 50%.
.container-1 .icon( position: absolute; top: 50%; margin-left: 17px; margin-top: 17px; z-index: 1; color: #4f5b66; ) Dodavanje Efekti lebdenjaSljedeći skup pravila određuje što će se dogoditi s poljem za pretraživanje nakon prelaska mišem. U ovom primjeru želimo promijeniti boju pozadine. Da biste se riješili žutog ili plavog sjaja oko unosa (koji preglednici ponekad dodaju), postavite outline: none .
Container-1 input#search:hover, .container-1 input#search:focus, .container-1 input#search:active( outline:none; background: #ffffff; )
Stvaranje prijelazaDa bismo izvršili prijelaz, moramo dodati nekoliko redaka koda. Vratimo se pravilu gdje smo definirali stil unosa.container-1 input#search . Prije završne zagrade dodajte sljedeće:
Webkit-tranzicija: pozadina .55s jednostavnost; -moz-prijelaz: pozadina .55s lakoća; -ms-prijelaz: pozadina .55s lakoća; -o-prijelaz: pozadina .55s lakoća; prijelaz: pozadina .55s lakoća;
Definiramo prečac za svojstvo prijelaza, ali također možemo definirati ova tri parametra pojedinačno. Prvo, kažemo da prijelaz treba utjecati samo na svojstvo pozadine. Zatim kažemo da će prijelaz trajati nešto više od pola sekunde. Konačno, definiramo umjerenost prijelaznog učinka. lakoća nije jedini učinak koji bi ovdje mogao funkcionirati, mogli bismo upotrijebiti linearno ili lagano uvlačenje na primjer. Izgledalo bi malo drugačije. Isprobajte da vidite što vam se najviše sviđa.
Stil unosa sada bi trebao izgledati kao kod u nastavku.
Container-1 input#search( width: 300px; height: 50px; background: #2b303b; border: none; font-size: 10pt; float: left; color: #262626; padding-left: 45px; -webkit-border- radijus: -moz-border-radius: -webkit-transition: background .55s ease; o-transition: background .55s ease)
Kako funkcioniraju CSS prijelazi? #2. Proširi unos pri lebdenjuU ovom primjeru, pretraga će započeti od ikone vidnog stakla. Kada prijeđete mišem iznad ikone, pretraga će se proširiti, nakon čega možete unijeti svoj upit. Većina koda u ovom primjeru bit će vrlo slična prethodnom.
HTML CSS .container-2( width: 300px; vertical-align: middle; white-space: nowrap; position: relative; )Stil unosa za ovaj prijelaz je drugačiji. Ulaz je puno manji, pa ikona može završiti iza trga. Sva ostala svojstva kao što su boja pozadine ili fonta ostat će, ne želimo potpuno promijeniti stil pretraživanja.
Container-2 input#search( width: 50px; height: 50px; background: #2b303b; border: none; font-size: 10pt; float: left; color: #262626; padding-left: 35px; -webkit-border- radijus: -moz-border: 5px; -webkit-transition: width .55s ease; -o-transition: width .55s ease)
Kao što vidite, nadjačao sam svojstvo prijelaza da utječe samo na širinu. Zadržao sam vrijeme isto jer je dovoljno brzo da ne iritira korisnike, ali dovoljno dugo da stvori lijep učinak.
Ispod je kôd za promjenu boje teksta rezerviranog 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 isto kao u prethodnom primjeru.
Container-2 .icon( pozicija: apsolutna; vrh: 50%; margin-lijevo: 17px; margin-top: 17px; z-index: 1; boja: #4f5b66; )
Dodavanje efekata lebdenjaPosljednje što trebamo učiniti je definirati kako će izgledati traženje čekanja. U sljedećem isječku koda, prvo pravilo osigurava da na obrascu nema sjaja izazvanog preglednikom i da okvir za pretraživanje ostaje proširen dok upisujete - dok upisujete. Srednje pravilo jednostavno proširuje unos na punu širinu kada lebdite.
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; )
Posljednja stvar koja se događa u gornjem kodu je da ikona mijenja boju kada lebdi. Ovo je samo detalj koji brzo pokazuje korisniku da je okvir za pretraživanje aktivan, a ne u stanju mirovanja. Ova promjena nije primijenjena za prijelaz.
#3. Povećaj veličinu ikone pri lebdenjuOd sva četiri primjera, ovaj je najsuptilniji, kako s kodne tako i s vizualne točke gledišta. U tom će slučaju ikona prozora za gledanje lagano lebdjeti i povećati se.
HTMLOpet HTML označavanje ikona i okvir za pretraživanje isti su kao u prethodna dva primjera. Naravno, s izuzetkom .container-3 .
CSS
U CSS stil ništa posebno za ovaj primjer. Većinom je početak vrlo sličan prvim primjerima, gdje se zadano stanje ne razlikuje. Ispod je kod za spremnik i unos. Imajte na umu da ovaj put nema prijelaza na unos.
Container-3( width: 300px; vertical-align: middle; white-space: nowrap; position: relative; ) .container-3 input#search( width: 300px; height: 50px; background: #2b303b; border: none; veličina fonta: 10pt; boja: #262626; -webkit-border-radius: 5px )
Još jednom imamo pravila rezerviranog 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 izgled, ikona za ovaj primjer je ista. Ista pozicija, ista boja itd. Međutim, dodao sam mu prijelaz. Ti su prijelazi dodijeljeni svim svojstvima, što je kraće od pojedinačnog navođenja.
Container-3 .icon( position: absolute; top: 50%; margin-left: 17px; margin-top: 17px; z-index: 1; color: #4f5b66; -webkit-transition: all .55s ease; -moz -prijelaz: sve .55s lakoća; -ms-prijelaz: sve .55s lakoća;
Dodavanje efekata lebdenja .container-3 input#search:focus, .container-3 input#search:active( outline:none; ) .container-3:hover .icon( margin-top: 16px; color: #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);Nekoliko se stvari događa u gornjem kodu. Prvo smo promijenili boju lebdeće ikone i pomaknuli je malo više tako da je okomito centrirana kada se poveća. Drugo, dodali smo transformaciju ikone dok lebdimo tako da postaje 1,5 puta veća od izvorne veličine. Budući da je prethodno definirani prijelaz konfiguriran da utječe svi svojstva, čini se da ikona raste dok lebdite.
Pogledajmo još jednom kako bismo saznali više o transformaciji.
#4. Gumb za lebdenjeZa razliku od potonjeg tri primjera, ovaj će biti teži. Kada je kursor uključen gornji dio unosa, pritisnut će se gumb koji vam omogućuje nastavak - poput Pošalji ili Idi . Unutar gumba nalazi se ikona povećala.
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 gumb dolazi nakon unosa jer ima veze s time kako će se efekt čekanja stvoriti u CSS-u.
CSSCSS je drugačiji u ovom primjeru, imajte na umu! Ispod je isječak stila spremnika. Prvo, pozicija: relativna nedostaje; Ovo više nije važno jer se ikona ne oslanja na to da stane na vrh unosa. Međutim, imamo overflow:hidden . Ovo sprječava da se gumb prikaže kada nije na čekanju. Tehnički, gumb koji se pojavljuje nalazi se desno od unosa, ali zahvaljujući overflow:hidden ne pojavljuje se kada prelazi širinu spremnika - spremnik i unos imaju istu širinu.
Container-4( overflow: hidden; width: 300px; vertical-align: middle; white-space: nowrap; )
Donji unos nema prijelaz jer sada više nije element.
Container-4 input#search( width: 300px; height: 50px; background: #2b303b; border: none; font-size: 10pt; float: left; color: #fff; padding-left: 15px; -webkit-border- radijus: 5px; -moz-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 kôd za stiliziranje gumba pri lebdenju. Da biste ga prevarili da dođe sa strane, morate ga postaviti izravno iza ulaza i sakriti prije ciljanja. Gumb je element koji se mijenja - pomiče - tako da je ono što definira prijelaz. Kako bih olakšao stvari, definirao sam prijelaz koji utječe 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; pozadina: 50px; -webkit-transition: all .55s ease ; .55s lakoća)
Dodavanje efekata lebdenjaZa blijeđenje, gumb mora biti postavljen na vrh ulaza. Ovo se radi putem negativna margina. Prethodno smo postavili neprozirnost gumba na 0, pa je moramo resetirati na 1 kako bi i gumb bio vidljiv.
Posljednje pravilo mijenja pozadinu gumba samo kada prijeđete pokazivačem iznad gumba. Dobro je obavijestiti korisnika da je gumb aktivan i da može kliknuti na njega kako bi podnio zahtjev; nema smisla imati gumb ako se čini neaktivnim.
Container-4:hover button.icon, .container-4:active button.icon, .container-4:focus button.icon( outline: none; neprozirnost: 1; margin-left: -50px; ) .container-4: lebdi gumb. ikona: lebdi( pozadina: bijela; )
ZaključakPa, došli smo do kraja naših CSS eksperimenata! Uzeli smo glavni obrazac za unos pretraživanje i upotrijebio mali skup učinaka za promjenu ponašanja. Kako drugačije možete promijeniti unos? Koje biste druge aspekte primijenili na CSS prijelaze ili transformacije? Obavijestite nas o tome u komentarima!
Pozdrav svim čitateljima i pretplatnicima stranice. Danas ću govoriti o tome kako stvoriti moderan HTML obrazac za pretraživanje za web stranicu.
Na većini stranica i blogova sa veliki iznos Takvi se obrasci koriste za razne informacije. Omogućuju posjetiteljima pronalaženje željenog artikla ključne riječi, mislim da su ih svi vidjeli.
Sa stajališta preglednika, to je jednostavno HTML obrasci, s dva elementa: tekstualno polje i gumb za slanje zahtjeva. Ponekad možda nema gumba, tada se obrazac šalje pritiskom na tipku enter.
Kao primjer uzeo sam jedan od radova s premiumpixels.com. Ovdje je poveznica na sam post. Ovaj besplatni psd datoteka s dizajnom šest vrsta obrazaca izgleda kao što je prikazano na slici ispod. Sam PSD možete preuzeti s te stranice jer se distribuira besplatno.
Ograničit ćemo se na stvaranje svijetle i tamne verzije, budući da je treća plave boje vrlo sličan onom svjetlu.
Što na kraju dobijemo pogledajte u nastavku:
Dakle, kao što sam rekao, HTML kod je obrazac s dva ulazni elementi. Radi lakšeg dizajna, zamotao sam svaki od njih u div blok.
Za sve vrste dizajna, ovaj kod će biti isti.
Oni koji su radili s Drupalom 7 mogu vidjeti da je ova struktura vrlo slična standardna forma pretražite u Drupalu 7. Tako je. Ako ugradite ovaj dizajn u svoje web mjesto pomoću ovog CMS-a, nećete morati ništa mijenjati u HTML izlazu (osim rezerviranog mjesta, pogledajte dolje).
Za polje za unos postavljamo atribut rezerviranog mjesta. Vrijednost ovog atributa prikazana je unutar polja za unos i nestaje kada polje dobije fokus. Vrlo povoljna nekretnina.
Prema zadanim postavkama, cijeli će ovaj obrazac za pretraživanje izgledati drugačije u različitim preglednicima i ne baš stilski posvuda. Na primjer, njegov izgled u Operi i Safariju prikazan je u nastavku:
Stoga ne možemo bez stilskih oznaka. Pogledajmo stilove za okruglu svijetlu verziju. U CSS datoteka treba umetnuti sljedeći kod:
#search-block-form( width:248px; height:28px; border-radius:15px; border:#c9c9c9 solid 1px; background:url(images/searchBg.png) left top repeat-x; ) .focus-active( border-color:#aaa !important; background:#fff !important; ) #search-block-form input( padding:0; margin:0; display:none; outline:none; background:none; width :100%; visina:100%;) #search-block-form .form-actions( width:28px; float:left; background:url(images/searchIcon.png) 5px 2px no-repeat; ) #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; visina: auto !important;
Pogledajmo to redom i detaljnije. Prvo postavljamo sam obrazac pomoću #search-block-form identifikatora dimenzija, boje obruba i zaokruživanja kutova.
#search-block-form( width:248px; height:28px; border-radius:15px; border:#c9c9c9 solid 1px; background:url(images/searchBg.png) left top repeat-x; )
Svi unutarnji 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, postavit ćemo dizajn divova u koje su elementi omotani, a ne samog diva.
Blok radnji obrasca zalijepit će se za lijevu stranu, a blok stavki obrasca zalijepiti će se za desnu stranu. Gumb za slanje obrasca ima tekst, ali on nam nije potreban, pa ga uklanjamo koristeći 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; )
Sada pogledajmo JavaScript kôd.
/* Kopirajte donji kod u svoju 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 ovdje potreban JavaScript? Zapravo dodaje nekoliko korisnih stvari upotrebljivosti.
Prvo, svojstvo rezerviranog mjesta došlo je s HTML5, a njegova podrška u starijim preglednicima ostavlja mnogo za poželjeti. Ali postoji jednostavno rješenje jQuery jQuery-Placeholder dodatak, koji će pružiti podršku za ovo svojstvo u svim preglednicima (uključujući čak i IE6!).
Da biste to učinili, povežite samu datoteku i omogućite ovu funkciju:
$("unos").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 promijeni.
Za to smo stvorili posebnu klasu focus-active. Kada dodate ovu klasu u obrazac, ona mijenja boju pozadine u bijelu, a boja obruba postaje malo tamnija. Obrazac će izgledati kao da reagira na radnje korisnika.
Focus-active( border-color:#aaa !important; background:#fff !important; )
Class.placeholder oblikuje tekst iz atribut rezerviranog mjesta u starijim preglednicima. Ova se klasa može koristiti samo ako koristimo isti jQuery dodatak.
Rezervirano mjesto (boja:#cbcbcb !važno;)
To je sve. Napravili smo obrazac za pretraživanje koji se lako integrira u većinu web stranica.
Druge verzije se ne razlikuju mnogo, vidite izvor demo stranice, postoje potrebni komentari.
To je sve za danas. Napišite u komentarima o čemu biste željeli čitati u novim postovima na blogu, a također se pretplatite na RSS i budite prvi koji će primati informacije o ažuriranjima web stranice!
