Aspect formular de căutare. Dezvoltarea unui formular de căutare frumos în CSS3 Formular de căutare css3
Am fost criticat, spunând că aspectul este nasol, dar există HTML5 și CSS3 modern.
Desigur, am înțeles, cele mai recente standarde sunt cool și toate astea. Dar adevărul este că eu, de regulă, fac machete la comandă, iar în majoritatea cazurilor este importantă identitatea completă în diferite browsere, ceea ce nu permite utilizarea celor mai noi tehnologii. Prin urmare, mă concentrez în primul rând pe compatibilitatea între browsere și, din obișnuință, am așezat formularul de căutare „în mod vechi”.
În general, prin această postare corectez situația (de dragul celor nemulțumiți de articolul anterior =) și ofer propria mea versiune a aspectului aceluiași formular de căutare, dar folosind tehnologii HTML5 și CSS3.
Un exemplu despre ceea ce se va întâmpla ca urmare este disponibil.
Ce pierdem atunci când proiectăm acest formular folosind HTML5 și CSS3?
- IE9 și mai jos - nu vom vedea textul implicit (atribut substituent).
- IE8 și mai jos - nu vom vedea colțuri rotunjite și umbre interioare.
- IE7 - trebuie să specificați o lățime diferită a formularului, deoarece... nu acceptă proprietatea de dimensionare a casetei.
- IE6 - dar nu luăm în considerare deloc =)
În alte browsere moderne, totul este bine. Consider că deficiențele de mai sus nu sunt critice, așa că pentru site-ul meu aș folosi în siguranță un formular conceput folosind cele mai noi tehnologii.
Codul HTML din formularul de căutare
Arata cam asa:
În comparație cu formularul din articolul anterior, s-au făcut următoarele modificări în conformitate cu tehnologia HTML5:
- Atributul type="text" a fost înlocuit cu type="search" .
- Scriptul inline a fost înlocuit cu placeholder="search" .!}
Cod CSS
Iată toate stilurile necesare cu comentarii:
Caută ( /* setează lățimea necesară a formularului în funcție de design ** formularul se întinde fără probleme */ lățime: 35%; /* vom poziționa butonul de trimitere absolut, ** de aceea această proprietate este necesară */ poziție: relativ; ) .search input ( /* dezactivează chenarele pentru intrări */ border: none; ) /* stiluri pentru câmpul de intrare */ .search .input ( /* întinde câmpul de introducere pe toată lățimea formularului */ width : 100% /* datorită căptușelii interioare de sus (8px) și de jos (9px) ** ajustați înălțimea formularului ** faceți căptușeala interioară din dreapta (37px) mai mare decât cea din stânga, ** butonul de trimitere va fi plasat acolo */ padding: 8px 37px 9px 15px /* astfel încât lățimea câmpului de introducere (100%) include padding-ul interior */ -moz-box-sizing: border-box-sizing: border; -box; /* adaugă umbre interioare */ box-shadow: inset 0 0 5px rgba(0,0 ,0,0.1), inset 0 1px 2px rgba(0,0,0,0.3); / border-radius: 20px font: 13px Tahoma, Arial, culoare sans-serif: #555;
contur: niciunul; ) /* schimbă designul câmpului de intrare când este focalizat */ .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 ); fundal: #E8E8E8; culoare: #333 ) /* proiectează butonul de trimitere */ .search .submit ( /* poziționează butonul absolut din partea dreaptă a formularului */ poziție: absolut: 0; dreapta: 0; lățime: 37px /* întinde butonul la înălțimea completă a formularului */ înălțime: 50% nu se repetă */ opacitate; ; ) /* când treceți cursorul, modificați transparența butonului de trimitere */ .search .submit:hover ( opacitate: 0.8; ) /* această proprietate este necesară pentru ca în browsere ** Chrome și Safari să puteți stila intrările */ intrare ( -webkit-aspect: niciunul; )
Și stiluri pentru IE sub versiunea 9:
/* setați stiluri separate pentru browserele IE sub versiunea 9 */ *+html .search ( /* pentru IE7 ajustează lățimea la alte browsere și adaugă o umplutură ** dreapta, astfel încât butonul de trimitere să fie la locul lor */ lățime: 28 % ; padding: 0 52px 0 0; .search .input ( chenar: 1px solid #DFDFDF; margine-top: 1px solid #B3B3B3; padding-top: 7px; padding-bottom: 8px; ) .search .input ( border: 1px solid #CFCFCF; border-top: 1px solid #999; .search .submit (filtru: alpha(opacity=50); )search .submit:hover (filter: alpha(opacity=80); ) Mulțumim criticilor pentru comentariile lor la articolul anterior! Datorită ție, mi s-au blocat câteva puncte noi de aspect.
Unul dintre elementele cele mai frecvent utilizate ale oricărui site web este formularul de căutare. Dacă doriți să creșteți nivelul de ușurință de utilizare pe site-ul dvs. și să facilitați foarte mult procesul de găsire a materialului potrivit, atunci ar trebui să începeți serios să dezvoltați un formular de căutare.
Așadar, astăzi vrem să vă spunem despre proiectarea unui formular de căutare folosind proprietăți CSS3.
În trecut, probabil că ați găsit deja tutoriale despre cum să proiectați un formular de căutare în CSS3, dar astăzi vrem să vă oferim o opțiune puțin diferită - un formular de căutare cu efect 3D implementat folosind parametrul box-shadow.
Marcare
Mai jos puteți vedea codul HTML folosit pentru a dezvolta acest formular. Vă rugăm să rețineți că umplerea noastră a fost dezvoltată folosind HTML5 și am folosit toate atributele necesare.
La început am vrut să folosim tipul="search" introdus în HTML5, dar apoi ne-am răzgândit din cauza incompatibilității cu multe browsere moderne. Acum va trebui să adăugăm câteva rânduri suplimentare de cod CSS pentru a suprascrie valorile originale.
Cod CSS
Să ne uităm la stilurile minimale folosite pentru a crea formă frumoasă cauta in CSS3:
Form-wrapper(
latime: 450px;
umplutură: 8px;
marja: 100px automat;
preaplin: ascuns;
lățime chenar: 1px;
chenar-stil: solid;
border-color: #dedede #bababa #aaa #bababa;
-moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
chenar-rază: 10px;
culoare de fundal: #f6f6f6;
imagine de fundal: -webkit-gradient(liniar, stânga sus, stânga jos, de la (#f6f6f6), la (#eae8e8));
imagine de fundal: -webkit-linear-gradient(sus, #f6f6f6, #eae8e8);
imagine de fundal: -moz-linear-gradient(sus, #f6f6f6, #eae8e8);
imagine de fundal: -ms-linear-gradient(sus, #f6f6f6, #eae8e8);
imagine de fundal: -o-linear-gradient(sus, #f6f6f6, #eae8e8);
imagine de fundal: gradient liniar (sus, #f6f6f6, #eae8e8);
}
Form-wrapper #search (
latime: 330px;
înălțime: 20px;
umplutură: 10px 5px;
plutire: stânga;
font: bold 16px "lucida sans", "trebuchet MS", "Tahoma";
chenar: 1px solid #ccc;
-moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
chenar-rază: 3px;
}
Form-wrapper #search:focus (
contur: 0;
culoare-chenar: #aaa;
-moz-box-shadow: 0 1px 1px #bbb inset;
-webkit-box-shadow: 0 1px 1px #bbb inset;
box-shadow: 0 1px 1px #bbb inset;
}
Form-wrapper #search::-webkit-input-placeholder (
culoare: #999;
greutatea fontului: normal;
}
Form-wrapper #search:-moz-placeholder (
culoare: #999;
greutatea fontului: normal;
}
Form-wrapper #search:-ms-input-placeholder (
culoare: #999;
greutatea fontului: normal;
}
Form-wrapper #submit (
plutire: dreapta;
chenar: 1px solid #00748f;
înălțime: 42px;
lățime: 100px;
umplutură: 0;
cursor: pointer;
font: bold 15px Arial, Helvetica;
culoare: #fafafa;
text-transform: majuscule;
culoare de fundal: #0483a0;
imagine de fundal: -webkit-gradient(liniar, stânga sus, stânga jos, de la (#31b2c3), la (#0483a0));
imagine de fundal: -webkit-linear-gradient(sus, #31b2c3, #0483a0);
imagine-de-fond: -moz-linear-gradient(sus, #31b2c3, #0483a0);
imagine de fundal: -ms-linear-gradient(sus, #31b2c3, #0483a0);
imagine de fundal: -o-linear-gradient(sus, #31b2c3, #0483a0);
imagine de fundal: gradient liniar (sus, #31b2c3, #0483a0);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
chenar-rază: 3px;
text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
}
Form-wrapper #submit:hover,
.form-wrapper #submit:focus (
culoare de fundal: #31b2c3;
imagine-de-fond: -webkit-gradient(liniar, stânga sus, stânga jos, de la (#0483a0), la (#31b2c3));
imagine de fundal: -webkit-linear-gradient(sus, #0483a0, #31b2c3);
imagine de fundal: -moz-linear-gradient(sus, #0483a0, #31b2c3);
imagine de fundal: -ms-linear-gradient(sus, #0483a0, #31b2c3);
imagine-de-fond: -o-linear-gradient(sus, #0483a0, #31b2c3);
imagine de fundal: gradient liniar (sus, #0483a0, #31b2c3);
}
Form-wrapper #submit:activ (
contur: 0;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
Form-wrapper #submit::-moz-focus-inner (
chenar: 0;
}
Suport pentru browser
Mai jos puteți vedea câteva capturi de ecran care arată formularul nostru de căutare. Trebuie să rețineți că se comportă bine și dacă pagina este deschisă într-o versiune mai veche a browserului. De asemenea, aș dori să adaug că acest formular de căutare CSS3 este complet gata de utilizare.
Browsere moderne Chrome, Firefox, Safari, Opera, IE10:
Vă rugăm să rețineți că Opera acceptă în prezent atributul substituent în HTML5, dar nu poate fi modificat.
Vestea bună este că IE10 acceptă și umplerea HTML5.
Versiunile anterioare de IE (6/7/8):
*
În concluzie
Dacă ați citit articolele noastre anterioare, atunci probabil știți că aici dezvoltăm aplicații de lucru (cu și fără versiuni rollback) pentru toate browserele. Și acest exemplu nu face excepție.
Pe lângă utilizarea unui formular CSS3 pentru a crea un bloc de căutare, îl puteți adapta cu ușurință pentru a crea un formular de autorizare sau un formular de abonare.
Două opțiuni pentru formularele de căutare care vă permit să economisiți spațiu pe site-ul dvs. Când se face clic, formularul se extinde pentru a permite introducerea textului. Folosit doar CSS3.
HTML
Formă simplă cu html5 etichetă:
CSS
Mai întâi să repornim stilurile pentru webkit browsere care tind să se adauge la motoarele de căutare intrare etichete cadru, pictograma de închidere. Deci, să eliminăm toate aceste lucruri inutile:
Intrare ( outline: none; ) input ( -webkit-appearance: textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 100%; ) input::-webkit-search-decoration , input::-webkit-search-cancel-button (afișare: niciunul; /* eliminați pictograma de căutare și anulare */ )
Să creăm un formular de căutare:
Nu ne vom opri asupra tuturor proprietăților, vom observa doar că lățimea intrării de căutare contează mai întâi 55px, și se va extinde la 130pxîn momentul focalizării :concentrare. Proprietate tranziţie vă permite să animați această modificare a lățimii. Folosit pentru strălucire cutie-umbră:
Introducere ( fundal: #ededed url(search-icon.png) fără repetare 9px centru; chenar: solid 1px #ccc; umplutură: 9px 10px 9px 32px; lățime: 55px; -webkit-border-radius: 10em; -moz- border-radius: 10em; .5); -moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
ÎN demonstrație 2 intrare Câmpul de căutare este și mai compact - va fi afișată doar pictograma. Când faceți clic pe el, se va modifica și lățimea câmpului de introducere.
#demo-b input (lățime: 18px; padding-left: 10px; culoare: transparent; cursor: pointer; ) #demo-b input:hover (culoare fundal: #fff; ) #demo-b input:focus ( lățime : 130px; padding-stânga: 32px;
Și textul a fost făcut transparent:
#demo-b input:-moz-placeholder ( culoare: transparent; ) #demo-b input::-webkit-input-placeholder (culoare: transparent; )
Formularul funcționează în toate browserele moderne Chrome, Firefox, Safari, Și IE8+.
Câmpul de căutare este probabil unul dintre cele mai comune elemente ale interfeței cu utilizatorul. Când lucrați la nivelul de confort al interfeței, de foarte multe ori există dorința de a adăuga un câmp de căutare elegant. ÎN această lecție vom crea un astfel de element popular folosind pseudo elemente.
Marcaj HTML
Pentru a pregăti un astfel de câmp, marcarea va fi minimă.
Substituentul special HTML5 și atributele obligatorii sunt folosite aici:
- substituent- acest atribut specifică faptul că textul este afișat în câmp înainte ca câmpul să primească focus de intrare, apoi textul este ascuns.
- necesar- acest atribut specifică condiție prealabilă disponibilitatea informațiilor în câmpul de introducere înainte de trimiterea formularului.
HTML5 are, de asemenea, o nouă semnificație pentru atributul type: type="search" . Dar este slab acceptat în browsere, așa că nu îl vom folosi deocamdată.
Elementele HTML, cum ar fi img și input, nu au conținut. Prin urmare, un pseudo-element precum:before nu va afișa nicio săgeată pentru buton.
Soluția la această problemă în cazul nostru este să folosim butonul type="submit" în loc de input type="submit" . Astfel păstrăm formularul folosind tasta ENTER.
CSS
Mai jos sunt stilurile necesare pentru demonstrația noastră:
Anulați împachetarea textului
Cf:before, .cf:after( continut:""; display:table; ) .cf:after( clear:both; ) .cf( zoom:1; )
Elemente de formă
Prefixele browserului nu sunt afișate în cod pentru o mai bună claritate. Puteți vedea codul complet în textul sursă.
/* Stiluri pentru containerul formular */ .form-wrapper ( lățime: 450px; padding: 15px; margine: 150px auto 50px automat; fundal: #444; fundal: rgba(0,0,0,.2); chenar- rază: 10px; box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2) /* Stiluri de introducere a textului */ .form-wrapper input ( lățime: 330px; ; padding: 10px 5px: bold 15px "trebuchet MS": 3px 0 3px .form-wrapper: focus: 0 0 2px rgba(0,0,0,.8) inset; .form-wrapper input::-webkit -input-placeholder (color: #999; font-weight: normal; font-style: italic; ) . intrare form-wrapper:-moz-placeholder (culoare: #999; greutate font: normal; stil font: cursiv ; ) .form-wrapper input:-ms-input-placeholder (culoare: #999; greutate font: normal; font-style: italic ) /* Buton de trimitere formular */ .form-wrapper button ( overflow: vizibil; poziție: float relativ: dreapta; chenar: 0; umplutură: 0;
