cadru css reimprospata memoria

Pentru a crea colțuri rotunjite pot fi aplicate nu numai CSS3, dar CSS «vechiul om», puteți face figuri arbitrare arată. Este adevărat că, în trecut, înainte de deschiderea acestor tehnici în ture demonstrative sau săgeată-indicii ar putea recurge la utilizarea de imagini de fundal absolut poziționate. Din fericire - cel puțin, așa cum am fericiti mai departe de Photoshop - acest lucru nu este cazul.

Tu, probabil, familiarizat cu utilizarea obișnuită a cadrelor.

Codul de mai sus folosește cadrul elementului pentru 1px. Simplu și ușor, dar puteți modifica sintaxa un pic.

În plus față de transferul de anumite valori de frontieră lățime poate fi folosit ca o alternativă la cele trei cuvinte cheie: subțire, mediu și gros.

HTML5 și CSS3 practica de la zero la rezultatul!

Deși inițial utilizarea literelor convenționale nu poate părea necesitate, există multe cazuri în care acesta este un avantaj, de exemplu, atunci când este necesar să se modifice unele aspecte ale cadrelor atunci când are loc un anumit eveniment.

Poate aveți nevoie pentru a schimba culoarea cadrului în timpul unui utilizator al mouse-ului peste un anumit element. Formularele de cerere de scriere stenografiat de valori ale pixelilor necesită repetitivă.

O abordare mai elegantă și pe scurt - este direcționat pentru a finaliza proprietatea border-color.

În plus, după cum veți descoperi în curând, această înregistrare tehnică normală este utilă atunci când creați cu CSS forme personalizate arbitrare.

Border-radius

border-radius - iubit CSS3 copil - prima caracteristică nouă este larg răspândită în comunitate. Tradus, acest lucru înseamnă că, în plus față de Internet Explorer 8 și versiunile anterioare, toate browserele pot afișa colturi rotunjite.

Până acum era necesar să se utilizeze prefixe producătorului pentru Webkit și Mozilla, pentru a aplica în mod corespunzător stiluri.

Cu toate acestea, acum puteți, fără frică, să renunțe la opțiunile producătorului versiunea furnizor și pur și simplu recurg la forma acceptată de: border-radius.

După cum s-ar putea aștepta, puteți defini, de asemenea, valori personalizate pentru fiecare parte a blocului.

În codul de mai sus setarea border-top-dreapta-rază și de frontieră de jos-stânga-rază va fi de prisos la zero, cu excepția cazului în elementul nu moștenește valori care ar trebui să fie executați din nou.

Ceea ce este foarte similar cu marja sau padding, aceste setări pot fi comprimate, dacă este necesar, într-o singură proprietate.

Ca un exemplu (și cât de des se face de web designeri) forma de lamaie pot fi redate folosind CSS și proprietățile border-radius, ca aceasta:

Mai sus de referință

Mulți designeri sunt fericiți să dețină cunoștințele prezentate în această secțiune; dar există mai multe moduri de a lărgi orizonturile mele!

mai multe cadre

Există mai multe tehnici care pot fi accesate cu formularea problemei pentru un element de mai multe cadre.

Border-Style

În timp ce solide, punctată și punctată - valoarea cea mai utilizată a proprietății de frontieră stil, există mai multe altele, inclusiv o canelură și o creastă, care pot fi utile.

Sau sub forma unei înregistrări convenționale:

Cu toate că acest lucru este, fără îndoială, convenabil, de fapt, efectele nervuri sau caneluri nu sunt mai multe cadre.

Cea mai populară tehnică pentru crearea a două cadre - este de a profita de proprietățile de contur.

Deși această metodă funcționează bine, este limitată la două cadre. Dacă doriți să creați un, gradient de efect stratificat, aceasta necesită o abordare diferită.

pseudo

Atunci când conturul metodei nu este suficient, abordarea alternativă - pentru a profita de: înainte și: după, și se aplică la conținutul creat cu orice cadre suplimentare necesare.

Acest lucru nu poate fi abordarea cea mai elegantă, dar funcționează cu siguranță. Singura problemă - foarte ușor să confunde ordinea în care culorile sunt aplicate cadru. Adesea, utilizarea combinației drept necesită un anumit nivel de „presupuneri și verificări.“

Box-Shadow

mod „inteligent“ pentru a crea un număr infinit de cadre - folosesc răspândirea opțiune în CSS3 proprietate box-shadow.

În acest caz, este înțelept să folosească box-shadow într-un mod care nu înseamnă neapărat la scrierea inițială a caietului de sarcini.

Prin instalarea componentelor x, y, și pentru a încețoșa la 0, poate fi folosit pentru a crea o valoare de răspândire de cadre în locurile potrivite de încredere. Deoarece box-umbra poate fi adăugată prin utilizarea unei virgulă într-o stivă, numărul de niveluri posibile pe termen nelimitat.

Aceasta tehnica arata destul de frumos în versiunile anterioare. În browserele mai vechi, care nu recunosc proprietatea box-umbra, ea pur și simplu descrie un singur cadru roșu la 5px.

Amintiți-vă: desenul sau modelul nu trebuie să fie aceeași în toate browserele. Scrie CSS în cele mai multe browsere moderne, iar apoi furnizează în consecință, o alternativă adecvată.

Schimbarea unghiurilor

În plus față de transferul unei valori la frontieră razei, pot fi furnizate ca o alternativă la două - separate prin slash / - pentru a determina valorile unice pentru razele orizontale și verticale. De exemplu, ...

HTML5 și CSS3 practica de la zero la rezultatul!

Această metodă este deosebit de utilă atunci când aveți nevoie pentru a simula lumina, a continuat răsuci în loc de un colț rotunjit comun. De exemplu, următorul cod ne permite să devieze ușor de la forma patrata pentru a obține un vartej, „hârtie“ efect.

cifre CSS

Poate cadrul de aplicare cele mai precise - atunci când sunt aplicate în mod inteligent la elementele cu lățime zero și înălțime. Derutant, nu-i așa? Să vedem în mod clar.

Pentru a face mai multe din următoarele exemple următorul marcaj ...

... și următoarele stiluri de bază:

Demonstrat cel mai adesea atunci când prezintă un exemplu al modului în care unitatea poate fi utilizată obligatoriu săgeată indicator în proiect figura CSS-.

Pentru a înțelege modul de utilizare săgeată CSS în formă, pentru a atribui unic pentru fiecare frontieră culoare lateral (cadru de culoare), și apoi se reduce valoarea lățimii și înălțimii containerului la 0 ° C.

Să presupunem că div săgeată clasa cu containerul:

După cum se arată la începutul acestei secțiuni, o sintaxă mai curat ai atunci când nu utilizați o versiune prescurtare a atotcuprinzător:

Puteți să-l reducă și mai mult prin gruparea valorilor culorilor.

Este interesant, nu? Dacă te duci înapoi, atunci există bunul simț perfect. Acesta este singurul mod posibil de a uniformiza culoarea, permițând lățimea și înălțimea containerului egal cu zero. Ce se întâmplă dacă acum vom instala toate culorile ramei, în plus față de partea de albastru, clar?

Excelent! Dar crearea div .arrow doar pentru a adăuga la pagina de săgeată nu pare a fi o idee bună semantic. În loc de pseudo poate fi folosit pentru a aplica săgeata-pointer, înainte sau după elementul asociat.

Crearea unui „balon verbal“

Pentru a crea un „balon cuvânt“ de 100% CSS începe cu marcaj.

În continuare, trebuie să aplicați câteva stiluri de bază.

Arrow cursorul va fi aplicat prin intermediul pseudo după.

pseudo-elementele: înainte și: după poate fi utilizat pentru a insera un conținut generat fie înainte sau după conținutul unui element.

În această etapă, este doar o chestiune de joc săgeată și plasându-l în locul potrivit. Vom începe cu poziționarea absolută a conținutului, re-setarea lățimea și înălțimea, dar și aplicați culoarea cadrului.

Din moment ce știm că săgeata îndreptată în jos, la imaginea de mai sus observăm că toate cadrele cu excepția roșu (sau de sus) trebuie să fie omise fie, fie setat la transparență.

Când creați cifre CSS datorită faptului că nu putem folosi proprietatea lățime pentru a determina lățimea săgeată-pointer, acesta ar trebui să fie utilizat în locul proprietății de frontieră lățime. În acest caz, săgeata ar trebui să fie un pic mai mult; astfel încât de frontieră lățime ar trebui să fie crescută la 15px. De asemenea, vom posta pe săgeata în centrul părții inferioare a containerului, utilizând proprietățile de sus și, respectiv spre stânga.

Aproape gata; în etapa finală, este necesar să se modifice culoarea săgeții pentru a face același lucru ca fundal al containerului. De asemenea, este necesar să se modifice aranjamentul pentru a permite lățimea cadrului (15px). Și în timp ce suntem aici, este, de asemenea, se aplică ușor border-radius, că containerul privit mai mult ca un „balon“.

Nu-i rău, nu-i asa? Abstractizare codul în mai multe clase de mai multe aplicații, și sunteți pregătit pentru toate proiectele viitoare.

Bonus: Cea mai bună centrare pe verticală

Dezavantajul utilizării liniei pe înălțime pentru alinierea verticală a textului este că sunt limitate la o singură linie. Dacă doriți două sau mai multe rânduri, înălțimea fiecărui este prea mare pentru text. Smart Solution - este setat pentru afișarea pe masa de „cuvântul bubble“, iar ecranul pentru masă celula din paragraful, ambalajul de text. Acest lucru ne permite apoi să se alinieze textul la mijloc, respectiv.

În continuare, un CSS modificat.

În cazul în care link-uri pentru a afișa: tabel reinvie amintiri rele de machete de modă veche, bazate pe tabele, nu vă faceți griji. Aceste proprietăți aparțin în întregime stilul în care ar trebui să fie afișat elementul.

Noi nu sunt limitate de triunghiuri; CSS este capabil de a produce toate tipurile de forme - inimi, și chiar simbolul Biohazard!

scurt rezumat

Deși este adevărat că sintaxa de frontieră obișnuite: 1px solid negru a parcurs un drum lung de parcurs, dacă suntem inteligente, putem crea o varietate de efecte benefice, icoane si forme. Cine ar fi crezut că acest cadru va fi un astfel de instrument puternic? Principalul lucru - amintiți-vă că stilurile de forme comune sau „cuvânt bule“ ar trebui să fie creată o singură dată și apoi la abstract la clase practice pentru o utilizare viitoare.

Revizie: Echipa webformyself.

HTML5 și CSS3 practica de la zero la rezultatul!

Cele mai multe știri IT si dezvoltare web pe canalul nostru-Telegram