Mai multe imagini de fundal. Alinierea elementelor cu poziția: fixată folosind funcția CSS calc()

De la autor: CSS poate face mult mai mult decât își dau seama mulți dezvoltatori web. În fiecare an, limbajul de marcare a stilului devine din ce în ce mai puternic, creând noi funcționalități în browsere care anterior puteau fi implementate doar prin JS. În acest articol, ne vom uita la 8 trucuri cu funcții CSS care nu necesită niciun JS.

Sfaturi instrumente folosind CSS pur

O mulțime de site-uri web încă folosesc JS pentru a crea sfaturi despre instrumente, dar în zilele noastre este mult mai ușor să le faci cu CSS. Cea mai simplă modalitate este să adăugați textul descrierii la atributul de date din codul HTML. De exemplu, data-tooltip="...". Pentru a afișa textul descrierii în interiorul funcției attr(), trebuie să adăugați următorul cod CSS la marcajul existent:

Tooltip::after ( conținut: attr(data-tooltip); )

Tooltip::după( conținut: attr (date - tooltip);

Nu este nevoie de explicații, nu? Desigur, trebuie să adăugați niște cod și să stilați corect balonul, dar nu vă faceți griji. Doar pentru aceste scopuri există o bibliotecă specială scrisă în CSS, Hint.css.

Folosind atribute de date personalizate și funcția attr().

Am folosit deja funcția attr() pentru a crea sfaturi, dar are alte utilizări. Folosind această funcție, împreună cu atributele de date, puteți crea previzualizări ale imaginii cu un titlu și o descriere. Și toate acestea se fac singur șir HTML cod:

< a class = "caption" href = "#" data - title = "Vultur" data - description = "..." > < img src = "img.jpg" alt = "Ilustrare" / > < / a >

Funcția attr() poate fi acum utilizată pentru a afișa titlul și descrierea:

Subtitrare::după ( conținut: attr(titlu-date); ... )

Legendă::după ( continut : attr (data - title ) ; . . .

Mai jos este un exemplu de imagine de previzualizare cu un titlu pop-up pe evenimentul de trecere cu mouse-ul:

Contoare CSS

Ceea ce putem face cu contoarele CSS este ca o magie. Această caracteristică nu este cea mai cunoscută și majoritatea oamenilor ar crede că este slab susținută. Cu toate acestea, toate browserele acceptă contoare CSS:

Nu ar trebui să utilizați contoare CSS pe liste numerotate (ol). Cu toate acestea, sunt grozave pentru navigarea în pagină sau pentru afișarea numerelor sub articolele din galerie. Puteți chiar număra numărul de elemente selectate, ceea ce este impresionant având în vedere codul mic din spatele acestuia (și fără JS deloc).

Contoarele CSS sunt, de asemenea, grozave pentru schimbarea dinamică a numerelor dintr-o listă de elemente care pot fi amestecate cu mouse-ul:

Ca și în exemplul anterior, rețineți că există probleme de accesibilitate cu conținutul generat.

Efect de sticlă mată folosind filtre CSS

CU Lansare iOS 7 Apple ne-a oferit efectul de sticlă mată - un element translucid, neclar, care arată ca sticla mată. Datorită Apple, acest efect a început să apară în multe locuri. Este destul de dificil să recreezi efectul. Înainte de apariția filtrelor CSS, efectul de sticlă mată a trebuit să fie simulat prin imagini neclare. În prezent, filtrele CSS sunt pe deplin acceptate în aproape toate browserele, făcând acest efect mult mai ușor de recreat.

În viitor, vom putea crea efecte similare folosind filtre de fundal și funcția filter(), care în prezent sunt acceptate doar în Safari.

Utilizarea etichetelor HTML ca imagini de fundal

De obicei, specificați ca imagine de fundal sau gradient fișiere JPEG sau PNG. Știați că puteți utiliza funcția element() pentru a specifica o imagine de fundal? etichetă div? În prezent, funcția element() este acceptată numai în Firefox:

Posibilitățile funcției sunt aproape nesfârșite, iată un exemplu de la MDN.

Rețele inteligente folosind calc()

Ochiuri lichide - un instrument grozav, cu toate acestea, există mai multe probleme serioase. De exemplu, nu puteți face separatoarele din partea de sus și de jos de aceeași dimensiune ca separatoarele din stânga și din dreapta. În plus, în funcție de sistemul de grilă utilizat, marcajele sunt pur și simplu aglomerate. Nici măcar nu-l poți numi flexbox cea mai bună soluție, cu toate acestea, cu funcția calc(), care poate fi folosită ca valoare în CSS, grilele pot deveni mult mai bune. În acest tutorial SitePoint, George Martzoukos arată mai multe exemple practice, inclusiv o grilă de galerie cu spațiere perfectă. Cu preprocesoarele CSS, crearea unui sistem de grilă poate fi incredibil de ușoară, iar grila în sine va fi foarte ușor de întreținut. Suportul pentru funcții este foarte bun, asigurați-vă că utilizați funcția calc().

Alinierea elementelor cu poziția: fixată folosind funcția CSS calc()

Un alt exemplu de utilizare funcții calc() – alinierea elementelor cu poziționare fixă. De exemplu, aveți un înveliș bloc pentru conținut cu umplutură fluidă în stânga și în dreapta și doriți să aliniați cu precizie un element fix în interiorul containerului. Ar trebui să petreceți mult timp calculând valorile exacte pentru proprietățile din dreapta sau din stânga. Cu toate acestea, cu calc() puteți combina relativ și valori absolute pentru o aliniere perfectă.

DESCARCĂ EXEMPLE

Dacă sunteți ca mine, când vedeți un exemplu impresionant de nouă funcționalitate CSS3, abia așteptați să începeți să o utilizați pe site-urile dvs. web. Desigur, atunci observați că este disponibil doar în unul sau două browsere majore (și niciodată IE printre ele), așa că de cele mai multe ori vă decideți să așteptați.

Am pentru tine Vești bune: ultimele versiuni browserele implementează câteva funcții interesante care sunt în sfârșit acceptate peste tot și puteți începe să le utilizați chiar acum!

Un cuvânt de precauție: majoritatea acestor funcții nu funcționează în versiunile mai vechi de IE (9 și mai jos). Dacă aceste browsere reprezintă un procent mare din vizitatorii dvs., mă tem că va trebui să utilizați soluții pentru a implementa aceste funcții. Ei bine, pentru restul, iată ce ne pot oferi browserele moderne:

1. Animație și tranziții folosind CSS

Animația folosind CSS este în sfârșit disponibilă în toate browserele majore, chiar și IE (începând cu versiunea 10). Există două moduri de a crea animații în CSS.

Primul este foarte simplu, se face prin animarea modificărilor proprietăților CSS folosind o declarație de tranziție. Cu tranziții, puteți crea efecte de trecere cu mouse-ul sau de clic pe mouse sau puteți declanșa o animație schimbând stilul elementului din folosind JavaScript. În exemplul de mai jos, tranziția se face prin trecerea mouse-ului peste planetă, acest lucru va forța racheta să se apropie.

A doua modalitate de a defini animația este puțin mai complicată - implică descrierea momentelor specifice ale animației folosind regula @keyframe. Acest lucru vă va permite să creați o animație care se repetă, care este independentă de acțiunile utilizatorului și nu este declanșată de Javascript.

HTML

CSS

Container( lățime: 300 px; înălțime: 300 px; margine: 0 automat; poziție: relativă; overflow: ascuns; ) .planet( poziție: absolut; sus: 0; stânga: 0; lățime: 100%; înălțime: 100%; fundal :url(http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/planet.png) centru centru fără repetare; ) .rocket( poziție: absolut ; sus:0; stânga:0; lățime:100%; înălțime:100%; fundal:url(http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets /img/rocket.png) no-repeat 50px center; /* Chrome necesită încă prefixul -webkit- */ -webkit-animation:orbit 2s linear infinit; animation:orbit 2s linear infinit; tranziție:background-position 0,8s; ) .container:hover .rocket( background-position:80px center; ) /* Definiți regulile de animație a cadrelor cheie */ @-webkit-keyframes orbita (de la ( -webkit-transform:rotate(0deg);) la ( -webkit-transform) :rotate(360deg); ) ) @keyframes orbita (de la ( transform:rotate(0deg); /* Proprietățile -webkit-transform sunt incluse aici deoarece Chrome poate începe să accepte cadre cheie fără prefix în viitor, dar nu este sigur că va suporta proprietăți de transformare fără prefix */ -webkit-transform:rotate(0deg);) to (transform:rotate(360deg); -webkit-transform:rotate(360deg); ) )

Puteți afla mult mai multe despre animație folosind CSS. Recomand sa incepi cu acest articol despre Mozilla Developer Network (MDN). Dacă sunteți interesat de suport pentru browser, consultați acest tabel de compatibilitate.

2. Calculați valorile folosind calc()

O altă caracteristică nouă excelentă CSS este funcția calc(). Vă permite să efectuați calcule aritmetice simple în CSS. Îl puteți folosi oriunde aveți nevoie de lungime sau dimensiune. Ce este și mai bine este că poți amesteca liber unități diferite, cum ar fi procente și pixeli. Acest lucru face ca multe dintre hackurile de marcare pe care le-ați folosit probabil în trecut. Nu este suficient pentru tine? Funcția funcționează în IE9 și mai sus, fără prefixe.

HTML

CSS

Container( /* Calculați lățimea */ lățime: calc(100% - 40px); background-color:#CDEBC4; color:#6D8B64; text-align:center; padding:25px 0; margin: 0 auto; )

Aflați mai multe despre funcția calc() aici sau urmăriți tabelul de compatibilitate.

3. Selectoare îmbunătățite

În prezent, dacă alocați ID-uri elementelor doar pentru a le aplica stiluri, probabil că ați procedat greșit. CSS 2.1 și CSS 3 au introdus câteva selectoare puternice care vă pot face marcajul mai curat și foile de stil mai cool.

Următoarele selectoare sunt acceptate de toate browserele majore, inclusiv IE9 și versiuni ulterioare.

HTML

Este un simplu paragraf de text cu un stil CSS3 cool aplicat...

/* Stiluri de elemente (nimic interesant aici) */ p( dimensiunea fontului: 16px; lățime: 420px; margine: 20px auto 0; text-align:center; ) .container( lățime: 420px; margine: 50px auto 0; overflow : ascuns; padding:5px; ) .elem( lățime:30px; înălțime:30px; margin:4px; background-color:#A0DFAC; float:left; ) .elem span( poziție:absolute; sus:5px; stânga:5px ; dreapta:5px; jos:5px; chenar:2px solid #fff; ) /* Selectoare care selectează prima literă și prima linie: */ p::first-letter( culoarea fundalului: #666; culoarea: #FFF; dimensiunea fontului: 24px; stilul fontului: normal; afișarea: bloc inline; umplutură: 0 5px; raza marginii: 3px; marginea dreapta: 2px; familia fonturilor: serif; ) p::first-line( font - dimensiune: 18px; text-transform: smallcaps; font-style: italic; text-decor: subliniat; ) /* Faceți primul și ultimul element violet */ .elem:first-child, .elem:last-child( fundal -color :#948bd8; ) /* Faceți fiecare element par rotund */ .elem:nth-child(odd)( border-radius:50%; ) /* Faceți al șaselea element roșu */ .elem:nth-child( 6)( culoarea de fundal:#cb6364; ) /* Aplicați stiluri elementelor care conțin un element span */ .elem:not(:empty)( background-color:#444; position:relative; -webkit-transform:rotate(25deg); transform:rotate(25deg); ) /* Selectați elemente după atribute */ .elem( background-color:#aaa; ) .elem( background-color:#d7cb89; ) /* Valoarea atributului trebuie să înceapă cu bar. Ambele elemente se potrivesc acestui */ .elem( lățime: 16px; înălțime: 16px; margine: 11px; ) /* Elementul care urmează elementului cu atributul data-foo="bar2" */ .elem + .elem( background- culoare:#78ccd2; )

Aflați mai multe despre acești selectoare aici sau aruncați o privire la ce browsere le acceptă.

4. Generare de conținut și contoare

Generarea de conținut- un instrument puternic în mâinile dezvoltatorilor - este disponibil datorită pseudo-elementelor ::before și::after. Această caracteristică vă permite să utilizați mai puțin cod HTML pentru a obține aceleași rezultate.

Acest lucru este util mai ales în cazurile în care aveți nevoie de umbre suplimentare sau altele elemente vizuale, care ar avea nevoie de elemente suplimentare span sau div. Rezultatul este HTML mai mic, corect din punct de vedere semantic.

CSS3 oferă, de asemenea, acces pseudo-elementelor la contoare, care pot fi incrementate folosind o regulă CSS. De asemenea, pot accesa atributele elementelor părinte care le conțin. Vezi codul exemplu de mai jos.

HTML

CSS

Container( /* Setați contorul cnt la 0 */ counter-reset: cnt; position:relative; text-align:center; padding:20px 0; width:420px; height: 160px; margin: 0 auto; ) /* Tu poate aplica stiluri pseudo-elementelor și poate seta conținutul acestora ca și cum ar fi elemente reale pe pagină */ .container::before( display: block; content:"Hover over these elements:"; font-size:18px; font- weight:bold; text-align:center; padding:15px; ) .container span( display:inline-block; padding:2px 6px; background-color:#78CCD2; color:#186C72; border-radius:4px; margin: 3px; cursor:default; ) /* Creați un contor de pseudo-element */ .container span::after( /* De fiecare dată când această regulă este executată, contorul este incrementat cu 1 */ counter-increment: cnt; /* Adăugarea o valoare de contor ca parte a conținutului */ conținut:" #" counter(cnt); display:inline-block; padding:4px; ) /* Pseudo-elementele pot accesa chiar și atributele elementelor lor părinte */ .container span: : inainte( pozitia:absolut; jos:0; stânga:0; latime:100%; content:attr(data-title); culoare:#666; opacitate:0; /* Animați tranzițiile */ -webkit-transition:opacity 0.4s; tranziție: opacitate 0,4s; ) .container span:hover::before( opacitate:1; )

Generarea de conținut este acceptată peste tot, inclusiv IE9 și versiuni ulterioare.

5. Gradiente

Gradientele oferă designerilor web posibilitatea de a crea tranziții fluide între culori fără a utiliza imagini. Gradienții CSS arată grozav și pe ecranele retină, deoarece sunt generați din mers.

Ele pot fi liniare sau radiale și pot fi, de asemenea, repetate. Gradienții sunt disponibile de ceva timp și, după câteva mici modificări de sintaxă în ultimele luni, sunt în sfârșit disponibile aproape peste tot, fără prefixe!

HTML

CSS

Container( text-align:center; padding:20px 0; width:450px; margin: 0 auto; ) .container div( width:100px; height:100px; display:inline-block; margin:2px; box-shadow: 0 0 1px rgba(0, 0, 0, 0.5) inset, 0 1px 1px #DDD; chenar-radius:2px; color:#666; vertical-align: top; line-height: 230px; font-size: 12px; ) #el1( fundal:gradient-liniar(în jos, #8dd2d9 , #58c0c7); ) #el2( fundal:gradient-radial(#77d19e,#46c17b); ) #el3( fundal:gradient-liniar-repetat(-45deg); , #de9dd4, #de9dd4 5px, alb 5px, alb 10px); ) #el4( background:repeating-radial-gradient(#b8e7bf, #b8e7bf 5px, alb 5px, alb 10px); )

Uite descriere detaliata aici și tabelul de compatibilitate aici.

6. Fonturi

Vă puteți imagina că a existat o perioadă în care eram limitați la doar o mână de fonturi „sigure pentru web” și nimic mai mult? Este greu de crezut, având în vedere că astăzi avem servicii precum Google Fonts sau typekit care vă permit să includeți fonturi frumoase prin simpla includere a unei foi de stil în codul paginii.

Există chiar și fonturi de pictograme, cum ar fi fontawesome, care conțin pictograme vectoriale drăguțe în loc de litere și numere. Totul este posibil datorită regulii @font-face, care vă permite să definiți numele, caracteristicile și fișierele de cod sursă ale fonturilor, la care vă puteți referi apoi în declarațiile dvs. de font/familie de fonturi.

HTML

Iată frumosul meu font web!

CSS

h1( /* Folosiți fontul inclus în codul HTML: */ font-family: Satisfy, cursive; font-weight: normal; font-size:24px; padding-top: 60px; )

Cu puține modificări, puteți face fonturile web să funcționeze chiar și în IE6. Cele două servicii de fonturi menționate mai sus se ocupă de această problemă, astfel încât să nu trebuie să faceți nimic în plus.

7. Dimensiunea blocului

Cea mai mare durere de cap pentru începătorii CSS este modelul cutie. Creatorii standardelor au avut probabil motivele lor, dar nu este clar intuitiv de ce lățimea și înălțimea unui element sunt afectate de căptușeală și chenare.

Această mică caracteristică (dăunătoare) întrerupe marcajul și face ravagii, dar există în sfârșit o modalitate de a restabili sănătatea mentală folosind regula de dimensionare a cutiei. Puteți seta o valoare în border-box, care va face ca elementele să se comporte exact așa cum ați dorit. Convinge-te singur:

HTML

CSS

Container( text-align:center; ) .container div( /* Setați proprietatea box-sizing: */ box-sizing:border-box; /* Firefox încă necesită prefixul -moz */ -moz-box-sizing: border -box; width:120px; height:120px; display:inline-block; vertical-align:top; ) /* Datorită box-sizing, putem seta orice umplutură și chenar dorim, iar elementele vor rămâne aceleași dimensiune */ # el1( culoare:#524480; culoarea fundal:#B2A4E0; ) #el2( padding:8px; border:10px solid #9ec551; background-color:#fff; ) #el3( padding:32px; fundal- culoare:#ccc ;)

Aflați mai multe despre regula dimensionării cutiei aici sau urmăriți tabelul de compatibilitate.

8. Borduri sub formă de imagini

Proprietatea border-image vă permite să afișați chenare personalizate în jurul elementelor. Marginile sunt conținute într-o singură imagine (sprite), unde fiecare regiune a imaginii corespunde unei anumite părți a graniței. Următorul exemplu folosește o imagine ca chenar.

HTML

Salutați chenarele frumoase de imagine!

CSS

p( text-align:center; padding:20px; width:340px; margin: 0 auto; /* Setați chenarul și proprietățile imaginii pentru chenar */ border:30px solid transparent; border-image:url(http:// demo. tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/border.png) 30 30 rundă; )

Pentru mai multe detalii, consultați pagina MDN și acest articol despre trucurile CSS. Chenarele imaginii sunt acceptate în toate browserele majoreși IE11.

9. Reguli de interogare media

Regulile de interogare media sunt absolut necesare dacă sunteți serios în ceea ce privește designul web. Sunt disponibile de ceva timp și merită menționat că au schimbat modul în care sunt construite site-urile web.

Anterior, trebuia să creați un site web obișnuit care să fie suficient de larg pentru a se potrivi rezoluția cea mai scăzută monitorul folosit la momentul respectiv; și o versiune mobilă separată. Site-urile pe care le creăm acum sunt responsive: se adaptează tipului de dispozitiv, orientării ecranului și rezoluției.

Regulile de interogare media sunt uimitor de ușor de utilizat - tot ce trebuie să faceți este să introduceți Stiluri CSSîntr-un bloc cu regula @media. Fiecare bloc @media este activat atunci când sunt îndeplinite una sau mai multe condiții. De exemplu, încercați să redimensionați această pagină. De asemenea, în exemplul de mai jos, încercați să eliminați blocul @media și vedeți ce se schimbă.

HTML

CSS

/* Stilează conținutul principal și blocul lateral */ .container( width:900px; margin: 0 auto; overflow:hidden; ) .main-section( background-color:#CDEBC4; color:#6D8B64; width:520px; float : stânga; înălțime:500px; ) .sidebar( culoarea fundalului:#ccc; lățime:350px; float:dreapta; înălțime:400px; ) .container p( padding-top:100px; text-align:center; ) .notă ( text-align:center; padding-top:60px; font-style:italic; ) /* Această regulă simplă de interogare media plasează coloanele una sub alta pe ecrane mici */ @media (max-width:900px)( .container( lățime:100%; ) .main-section, .sidebar( width:auto; margin-bottom:20px; float:none; ) )

Regulile de interogare media pot conține verificări pentru rezoluția și orientarea ecranului dispozitivului, adâncimea culorii, densitatea pixelilor și multe altele. Veți găsi detalii în acest articol și, de asemenea, veți vedea tabelul de compatibilitate.

10. Mai multe imagini de fundal

Folosind mai multe imagini de fundal, designerii pot obține niște efecte foarte interesante. Ele pot suprapune imagini diferite una peste alta ca fundal al aceluiași element.

Fiecare imagine (sau strat) individual poate fi mutată sau animată, așa cum este ilustrat în exemplul de mai jos (treceți mouse-ul peste imagine). Toate regulile CSS legate de fundal pot accepta acum o listă de proprietăți separate prin virgulă, fiecare pentru o anumită imagine de fundal:

HTML

CSS

Spațiu( /* Treci o listă de imagini de fundal separate prin virgulă: */ background:url("http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img /rocket_big. png") centru fără repetare 70px, url("http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/space.jpg") centru de jos fără repetare; lățime: 200 px; înălțime: 200 px; margine: 0 automat; border-radius: 3 px; /* Animați poziția ambelor imagini de fundal */ transition:background-position 1s; ) .space:hover( / * Același lucru este valabil și pentru proprietăți precum fundal-position și repetare */ background-position:35% 20px, sus dreapta; )

Mai multe informații despre mai multe imagini de fundal pot fi găsite aici. Această caracteristică este acceptată pe scară largă de browsere - toate versiunile noi o acceptă ( Vezi tabelul).

11. Coloane CSS

Aspectul coloanelor a fost notoriu dificil de implementat în CSS. De obicei, aceasta ar implica utilizarea JavaScript sau procesarea pe partea serverului pentru a separa conținutul în diferite elemente.

Acest proces este complicat inutil și îi ia dezvoltatorului timp valoros de la lucrurile care contează cu adevărat. Din fericire, acum există o modalitate de a evita acest lucru folosind regula coloanelor CSS:

HTML

CSS

Container( lățime: 500px; margine: 0 auto; ) /* Crearea coloanelor este acum la fel de ușoară: */ .container p( -moz-columns:3; -webkit-columns:3; coloane:3; )

Această regulă este susținut pe scară largă, deși încă necesită prefixe. Acolo unde conținutul este împărțit în coloane depinde de suportul browserului pentru anumite reguli de aspect și mai departe diferențe în procesarea browserului cazuri limită.

12. Transformare 3D folosind CSS

Nimic nu încântă ochiul ca o demonstrație 3D impresionantă folosind CSS. Deși este controversat să folosiți acest tip de transformare în afara demo-urilor sau a site-urilor de portofoliu, 3D CSS oferă funcționalități puternice pentru designeri și dezvoltatori care pot câștiga inimile utilizatorilor dacă este bine implementat.

Aruncă o privire la următorul exemplu de cod:

HTML

CSS

Container( /* Cât de pronunțate ar trebui să fie efectele 3D */ perspectiva: 800px; -webkit-perspective: 800px; fundal: radial-gradient(#e0e0e0, #aaa); width:480px; height:480px; margin:0 auto; border -radius:6px; position:relative; ) .iphone-front, .iphone-back( /* Activați transformarea 3D */ transform-style: preserve-3d; -webkit-transform-style: preserve-3d; /* Noi utilizați două elemente div separate pentru partea din față și din spate a telefonului Următorul cod ascunde div-ul atunci când este răsturnat pentru a afișa partea din spate: */ backface-visibility: hidden; -webkit-backface-visibility: hidden; width:200px; înălțime: 333px ; poziție: absolut; sus: 50%; stânga: 50%; margine: -166px 0 0 -100px; fundal:url(http://demo.tutorialzine.com/2013/10/css3-features-you -can- finally-use/assets/img/iphone.png) no-repeat centru stânga; /* Animație de tranziție */ transition:0.8s; ) .iphone-back( /* Panoul din spate este răsturnat la 180 de grade în mod implicit * / transform:rotateY (180deg); -webkit-transform:rotateY(180deg); fundal-poziție:centru dreapta; ) .container:hover .iphone-front( /* Când mouse-ul este peste container, răsturnați panoul frontal și ascundeți-l, ... */ transform:rotateY(180deg); -webkit-transform:rotateY(180deg) ; ) .container :hover .iphone-back( /* ... în timp ce face panoul din spate vizibil */ transform:rotateY(360deg); -webkit-transform:rotateY(360deg); )

Acest cod se bazează pe nostru Formulare de conectare în stil Apple. Dacă doriți să aflați mai multe despre transformările 3D în CSS, consultați aceasta instrucțiuni detaliate. Dacă nu aveți nevoie de suport pentru versiunile mai vechi de IE, restul suport pentru browsere este suficient de lat.

Alte metode care merită menționate

Există și alte caracteristici memorabile care merită menționate. Dacă nu ați făcut-o deja, puteți opri prefixarea proprietăților chenar-rază și casetă-umbră. De asemenea, acum puteți utiliza data-uris ca imagini de fundal în toate browserele. Opacitatea este, de asemenea, acceptată peste tot, la fel ca proprietatea foarte utilă a dimensiunii fundalului.

Va trebui să așteptăm puțin mai mult pentru suport pentru flexbox, @supports, filtre și măști CSS, dar cred că așteptarea va merita!

Traducerea articolului " 12 caracteristici CSS3 minunate pe care le poți începe în sfârșit să le folosești„a fost pregătit de echipa prietenoasă de proiect.

Rău Bun

O zi buna. Vreau să vă spun despre tendința funcțiilor din CSS 3 și despre cum poate și chiar uneori ar trebui să fie utilizat în proiecte.

Pentru a nu vă pierde timpul, vă voi descrie proprietățile despre care aș dori să vă spun:

• functia de contor
• funcția calc
• funcția attr
• funcția de comutare
• unitate de măsură - rem
• unitate de măsură - vw
• unitate de măsură - vh

Funcții în css 3

O mare bucurie a răsunat în legiunea de dezvoltatori când am primit una dintre primele funcții - media queries, care ne-a permis să acceptăm anumite stiluri în funcție de tot felul de factori externi. De fapt, a fost doar un mare plus față de ceea ce a fost standardizat versiuni css 2.1 funcționalitate.

Datorită apariției unor astfel de oportunități, lumea a devenit mai strălucitoare, site-urile au devenit mult mai convenabile atunci când sunt vizualizate de pe tot felul de gadget-uri și s-au născut concepte precum Responsive Web Design și Adaptive Web Design (de fapt, al doilea este un subset din primul).

W3c nu s-a oprit aici și recent am auzit despre o funcție precum suporturile sau CSS Feature Queries, care este acceptată doar în firefox începând cu versiunea 21, chrome începând cu versiunea 28 și în cea mai recentă opera (12.1).

Acestea sunt vedetele noastre, sunt în centrul atenției și toată lumea le iubește. Cu ei totul este destul de clar și evident. Acum să aruncăm o privire la funcțiile mai puțin semnificative.

Tejghea

Aceasta este o funcție de creștere în css, care, apropo, există încă din versiunea 2.1. Ce face ea, întrebi?! Și ea face următoarele:
Funcția de contor vă permite să porniți un contor cu un nume, să îl incrementați și să îl resetați la zero. Conținutul contorului poate fi afișat prin pseudoelementele după și înainte. În general, imitați listele dvs., deși nu am găsit niciun beneficiu în această funcție pentru mine.

Calc

Referitor la suport:

• Internet Explorer 9+
• Mozilla Firefox 19+
• Google Chrome 24+
• Safari 6+
• Operă nu suporta

Personal, îmi place foarte mult această funcție, deoarece îmi va permite să scurtez puțin codul atunci când, de exemplu, trebuie să centrez un element:

francose 25 aprilie 2014 la 07:04

CSS 3 Funcții de sincronizare și cu ce sunt folosite

• Dezvoltare site,
• CSS
• HTML

• Traducere

Oameni buni, puneți-vă centurile de siguranță și țineți-vă bine, pentru că acesta este un moment cu adevărat palpitant: trebuie să înțelegeți complexitatea vremurilor extrem de interesante. s x caracteristici CSS!

Bine, subiectul acestui articol probabil că nu îți va fierbe sângele, dar glumele deoparte: funcțiile temporare sunt un fel de bijuterie ascunsă când vine vorba de CSS și probabil vei fi surprins de cât de multe lucruri interesante poți face cu ei .

În primul rând, trebuie să înțelegem clar când funcțiile de sincronizare sunt utilizate în CSS. Deci, această funcționalitate este concepută pentru a funcționa cu animația CSS: tranziții și animație cadru cu cadru (cadre cheie).

Despre funcția de sincronizare în CSS

Această proprietate este una dintre cele mai neevidente din Animații CSS, în timp ce majoritatea proprietăților din această categorie sunt destul de explicite. Cu toate acestea, esența acesteia este controlul și modificarea vitezei animației: determină punctele de accelerare și decelerare într-o anumită perioadă de timp.

Folosind această proprietate, puteți obține diferite percepția utilizatorului asupra vitezei de animație, în timp ce durata reală a acesteia rămâne neschimbată. Așa că dacă încă nu te-ai hotărât să fugi fără să te uiți în urmă, să trecem mai departe, pentru că funcțiile temporare conțin lucruri mult mai interesante decât rezultă din specificația uscată.

Nota: proprietatea funcției de sincronizare nu există. Prin denumirea acestei proprietăți, vorbesc de fapt despre funcția de sincronizare a tranziției și funcția de sincronizare a animației.

Înainte de a merge mai departe, să ne familiarizăm cu sintaxa și să vedem cum se încadrează în întregul proces de definire a unei animații CSS. De dragul simplității, să folosim o tranziție CSS și să scriem toate proprietățile de tranziție separat:

Div (proprietate-tranziție: fundal; durată-tranziție: 1s; întârziere-tranziție: .5s; funcția de sincronizare-tranziție: liniar; ) /* Aceasta ar putea fi, desigur, scurtată la: */ div ( tranziție: fundal 1s .5s liniar; )
Notația scurtă pentru tranziție nu are o ordine strictă a valorilor, dar necesită ca valoarea tranziției-întârziere să apară după valoarea tranziției-durată (nu neapărat imediat după). În plus, valoarea tranziției-durată este singura necesară pentru a defini o funcție. Și, deoarece valorile implicite pentru restul parametrilor sunt destul de acceptabile, rareori veți avea nevoie de mai mult de:

Div ( tranziție: 1s; ) /* La fel ca: */ div ( tranziție: toate 1s 0s ease; )

Dar e plictisitor. În timp ce valorile implicite sunt bune pentru unele deplasări de bază, atunci când lucrați la ceva mai substanțial, funcțiile de sincronizare se dovedesc a fi un instrument serios pentru reglarea fină a animațiilor!

Acum că știi Ceîndeplini funcții temporare, este timpul să afli Cum ei o fac.

Să aruncăm o privire sub capotă

Mulți dintre voi probabil nu v-ați concentrat atenția asupra valorilor valide ale proprietății funcție de sincronizare. Deci, există cinci dintre ele: ușurință (implicit), ease-in, ease-out, ease-in-out și liniar. Mai mult, aceste valori sunt doar o scurtă notație a definiției unei curbe Bezier.

Uh, ce?!

Poate că nu sunteți familiarizat cu acest termen, dar pun pariu că de fapt ați văzut o curbă Bezier. La naiba dacă ai folosit vreuna pachet grafic, atunci probabil chiar l-au creat singuri! Așa este, pentru că atunci când utilizați instrumentul Pen sau Path pentru a crea o curbă netedă, ceea ce obțineți este o curbă Bezier! În cazul nostru, este „magia” funcției timp, care descrie tipul de accelerație pe grafic.

Această curbă Bezier corespunde valorii ușurinței (credit imagine: Smashing Magazine)

Dacă reacția ta la a vedea o curbă Bezier pentru prima dată a fost similară cu a mea, probabil că ai o întrebare: cum poate fi construită o astfel de curbă din patru puncte dintr-un grafic?! Este puțin probabil să vă pot explica asta în cuvinte, dar am un gif fantastic care mă va ajuta cu asta:

Desenarea unei curbe Bezier (imagine preluată de pe Wikipedia)

Deoarece această curbă este construită din patru puncte, o numim curbă Bezier cubică, spre deosebire de o curbă pătratică (trei puncte) și o curbă de ordinul al patrulea (cuartică, cinci puncte).

funcția cubic-bezier().

Dar acum va deveni și mai interesant pentru tine, pentru că îți voi spune că poți defini o curbă cubică folosind funcția cubic-bezier(), folosind-o în locul valorilor cheie ale proprietății funcție de sincronizare. Cred că ai nevoie de ceva timp pentru a-ți stăpâni entuziasmul.

Cu funcția cubic-bezier(), puteți manipula curba după cum doriți, setând în același timp absolut orice parametri de accelerație pentru animația dvs.! Deci, să aruncăm o privire la modul în care funcționează această funcție și cum vă permite să vă creați propriile curbe Bezier.

În primul rând, știm deja că o curbă cubică este construită folosind patru puncte: 0, 1, 2, 3. În al doilea rând, este important să ne amintim că primul și ultimul punct (0 și 3) sunt deja definite pe grafic, unde punctul 0 are întotdeauna valoarea 0;0 (stânga jos), iar punctul 3 are valoarea 1;1 (dreapta sus).

Această condiție ne lasă doar două puncte care trebuie plasate pe diagramă, iar acest lucru se poate face folosind funcția cubic-bezier()! Este nevoie de patru argumente: primele două sunt coordonatele x, y ale primului punct; secundele două sunt coordonatele x, y ale celui de-al doilea punct.

Funcție-temporizare-tranziție: cubic-bezier(x1, y1, x2, y2);
Pentru a vă ajuta să înțelegeți sintaxa și modul în care această funcție creează o curbă, precum și efectul ei fizic asupra animației, vă voi arăta cele cinci valori cheie ale proprietății funcție de sincronizare, echivalentul lor cubic-beizer(), și efectul de animație rezultat.

Ușurință de intrare-ieșire

Să începem cu această valoare cheie, deoarece atât logica construcției curbei, cât și a transpunerii acesteia în animație este probabil cea mai ușor de înțeles acum.

/* Echivalent cu valoarea cheii ease-in-out */ transition-timing-function: cubic-bezier(.42, 0, .58, 1);

O curbă Bezier perfect simetrică, ceea ce înseamnă că animația va accelera și încetini în același ritm (credit imagine: Smashing Magazine)

Punctul 1 este situat la 0,42 pe axa x și 0 pe axa y, în timp ce punctul 2 este situat la 0,58 și, respectiv, 1. Rezultatul este o curbă Bezier perfect simetrică: animația va accelera și încetini cu aceeași viteză. De aici și numele cuvântului cheie.

Priviți demo și veți vedea efectul fizic al valorii ease-in-out, comparați-l cu alte valori.

Animație sursă pe Codepen

UŞURA

Această valoare cheie este valoarea implicită a proprietății funcție de sincronizare. De fapt, este foarte asemănător cu cel precedent, deși animația accelerează mai repede și animația încetinește mai treptat.

/* Echivalent cu valoarea cheii de ușurință */ transition-timing-function: cubic-bezier(.25, .1, .25, 1);

Curba de ușurință are un început abrupt și o continuare mult mai lină (imaginea oferită de Smashing Magazine)

Observați cum curba are o pantă mai accentuată la început, în timp ce sfârșitul este mai alungit - acest lucru are un efect fizic direct al funcției de sincronizare asupra animației. Odată ce ați parcurs toate exemplele, asigurați-vă că reveniți la demonstrația de la început pentru a compara efectele.

EASE IN ȘI EASE-OUT

După cum ați putea ghici, datele valori cheie au sensul opus. ease-in accelerează fără probleme animația la viteza maximă spre sfârșit, în timp ce ease-out reduce ușor viteza maximă inițială înainte ca animația să se încheie. Urmând logica, valoarea cheii ease-in-out la care ne-am uitat mai devreme este o combinație excelentă a acestor două curbe Bezier.

/* Echivalent cu ease-in */ transition-timing-function: cubic-bezier(.42, 0, 1, 1); /* Echivalent cu ease-out */ transition-timing-function: cubic-bezier(0, 0, .58, 1);


Curbele Bezier: ease-in pe stânga, ease-out pe dreapta (credit imagine: Smashing Magazine)

LINIAR

Ultima valoare cheie, care de fapt nu se aplică curbelor. După cum sugerează și numele, proprietatea funcției de sincronizare liniară stabilește ca viteza să fie aceeași pe toată durata animației, ceea ce înseamnă că în loc de o curbă Bezier, obținem o linie dreaptă. Adică în în acest caz, Nu există un model de accelerație disponibil pentru imaginea grafică.

/* Echivalent cu liniar */ transition-timing-function: cubic-bezier(0, 0, 1, 1);

Liniar înseamnă aceeași viteză pe tot parcursul animației (credit imagine: Smashing Magazine)

Dacă vizionați din nou demo la început, probabil veți observa că, în ciuda aceleiași durate generale, unele dintre animații par mai lente decât altele. De ce se întâmplă asta? Ei bine, de exemplu, cu ease-in-out, începutul și sfârșitul animației sunt întârziate. Prin urmare, pentru a se menține în durata dată, în cea mai mare parte viteza de animație este semnificativ mai mare. Datorită acestui comportament, îl percepem ca fiind mai scurt și mai rapid, în timp ce, de exemplu, animația liniară pare lungă și atrasă pentru noi.

Până acum s-ar putea să simți că acest articol este puțin lent pentru a ajunge la subiect, așa că haideți să trecem direct la funcția cubic-bezier() și să vă cream propriile funcții de sincronizare cu ea.

Creați-vă propriile modele de accelerație folosind funcția cubic-bezier().

Acum că am învățat valorile cheie ale proprietății funcției de sincronizare și curbele Bezier corespunzătoare și am văzut efectul lor asupra animației, să învățăm cum să ne creăm propriile modele de accelerație folosind manipularea curbei.

Până acum, presupunem că știți deja cum să plasați punctele 1 și 2 pe un grafic folosind funcția cubic-bezier() și aveți o înțelegere clară a modului în care acest lucru afectează animația. Deși, dacă faci asta „orb”, nu este de mirare că această activitate poate deveni plictisitoare foarte repede.

Din fericire, există oameni ca Lea Verou pe Pământ care probabil nu se vor odihni până când codarea CSS nu devine și mai ușoară! Lee a dezvoltat aplicația Cubic Bezier pentru a vă crea propriile curbe Bezier și a le compara cu cele standard. Deci, în loc să rulați numere înainte și înapoi în cubic-bezier() , mergeți la Cubic Bézier , jucați cu curba și priviți rezultatul. Asta e mult mai misto!

Captură de ecran a paginii site-ului Cubic Bézier (credit imagine: Smashing Magazine)

În etapa inițială, curbele de funcție de timp standard sunt ceea ce aveți nevoie, dar diferențele dintre ele nu sunt atât de evidente. Dar odată ce începeți să vă creați propriile curbe Bezier, veți simți cât de puternic poate fi impactul lor asupra animației rezultate.

Aruncați o privire la următoarele exemple și observați diferența semnificativă dintre animații atunci când au aceeași durată totală.

Animație sursă pe Codepen

Ei bine, acum să ne uităm la primul dintre exemplele de mai sus și să încercăm să înțelegem cum efectul a fost atât de diferit de restul.

/* valorile cubic-bezier() pentru primul exemplu din demo */ funcția de sincronizare-tranziție: cubic-bezier(.1, .9, .9, .1);

Exemplu de curbă Bezier personalizată (credit imagine: Smashing Magazine)

Principala diferență între această funcție de timp și valorile implicite este abaterea bruscă a curbei de la scara „progresie” (de-a lungul axei y). Aceasta determină pornire rapidă iar animația se termină, dar există o pauză lungă în mijloc (în punctul în care curba se aplatizează). Acest model este în contrast puternic cu ceea ce ne-am obișnuit cu funcțiile de sincronizare convenționale, care adoptă o abordare opusă, încetinind animația la început și la sfârșit, mai degrabă decât la mijloc.

Acum să fim creativi

Așa este: curbele Bezier au devenit mai interesante! Și cine ar fi crezut? Între timp, granițele imaginației sunt extinse odată cu descoperirea că doar scara de timp (de-a lungul axei x) este limitată pe grafic de intervalul de la zero la unu, în timp ce scara de progresie (de-a lungul axei y) se poate extinde. dincolo de ea atat dedesubt cat si de sus .

Scara de progres este exact ceea ce crezi că este: capătul de jos (0) reprezintă începutul animației, iar partea de sus (1) sfârșitul. De obicei, o curbă Bezier cubică va urma întotdeauna o scară dată de jos în sus la intensități diferite până când ajunge la punctul final al animației. Cu toate acestea, capacitatea de a plasa punctele 1 și 2 în afara decalajului 0-1 permite curbei să se extindă dincolo de acesta, provocând mișcare în direcție inversă! Ca de obicei, cel mai bun mod de a înțelege acest lucru este să te uiți la:

Curba Bezier cu valori în afara 0-1 (credit imagine: Smashing Magazine)

Punctul 2 este situat în afara intervalului obișnuit 0-1 cu -0,5, care, la rândul său, trage curba în jos. Urmăriți următoarea demonstrație și veți vedea un efect de „săritură” în mijlocul animației.

Animație sursă pe Codepen

Dimpotrivă, puteți plasa această „mișcare înapoi” la începutul animației și, de asemenea, să faceți curba să „se epuizeze” ușor dincolo de punctul final prevăzut. Imaginați-vă că faceți câțiva pași înapoi pentru a începe să alergați; apoi, la sfârșit, te repezi pe lângă linia de sosire, forțându-te să dai puțin înapoi pentru a verifica ora indicată de cronometru. Consultați exemplul pentru a înțelege cu adevărat despre ce vorbim. despre care vorbim. De asemenea, învață curba Bezier care creează acest efect.

Animație sursă pe Codepen

Curba Bezier cu valori în afara 0-1 (credit imagine: Smashing Magazine)

Acum ar trebui să aveți o idee destul de bună despre cum valorile cubic-bezier() dincolo de 0-1 pot afecta fizic comportamentul animației. Putem, desigur, să ne uităm la cuburi în mișcare toată ziua, dar să încheiem această secțiune cu un exemplu care arată clar abordarea inventiva a utilizării funcției timp.

Animație sursă pe Codepen

Așa este: animam un balon! Ce?... Este ceea ce ți-ai dorit întotdeauna să faci cu CSS?

Esența animației este să „umflați” mingea făcând clic pe ea, astfel încât să zboare până la „tavan” și să sară ușor de pe ea, la fel ca în realitate. Valoarea lui cubic-bezier() dincolo de limita 0-1 este instrumentul care ne va permite să creăm acest efect de „sărire”, replicând comportamentul realist. Fragmentul de cod prezentat arată coordonatele setate în funcția cubic-bezier(), iar apoi este afișată curba rezultată.

/* Valorile cubic-bezier() pentru balonul care sări */ transition-timing-function: cubic-bezier(.65, 1.95, .03, .32);

Curba Bezier emulând o minge care sărită (credit imagine: Smashing Magazine)

Acest exemplu arată perfect cum se transformă curba în animația finală, deoarece curba o reflectă aproape perfect. În primul rând, curba trece de la începutul scalei de progresie în linie dreaptă, determinând mingea să se miște de la începutul până la sfârșit cu aceeași viteză. Apoi, ca o minge care încetinește, curba se îndoaie brusc în direcția opusă înainte de a începe treptat să revină în vârf. De fapt, totul este foarte simplu!

Așa că, odată ce stăpânești curba și arta de a o manipula, vei fi inteligent!

Funcții de sincronizare și animație CSS cadru cu cadru

Înainte de a merge mai departe, merită menționat comportamentul funcțiilor de sincronizare atunci când sunt utilizate în animația cadru cu cadru. Sensul general la fel (comparativ cu tranzițiile), totuși există o excepție care merită reținută: atunci când aplicați o funcție temporară mai multor cadre, aceasta se execută pe fiecare cadru decât pe parcursul întregii animații.

Adică, dacă aveți patru cadre care mută un pătrat dintr-un colț în altul în interiorul unui container și aplicați o funcție temporară cu un „sărit” (la fel ca și noi la minge), fiecare dintre cele patru mișcări va fi supus acestei „sărituri” ” decât toată animația. Să vedem acest comportament în acțiune și în cod.

Animație originală pe Codepen (gif-ul s-a dovedit strâmb)

@keyframes pătrat ( 25% ( sus:200px; stânga:0; ) 50% (sus:200px; stânga:400px; ) 75% (sus:0; stânga:400px; ) ) div ( animație: pătrat 8s infinit cubic- bezier(.65, 1.95, .03, .32); sus: 0; stânga: 0; /* Alte stiluri */ )
Rețineți că atunci când cadrul este 100% nedefinit, elementul revine pur și simplu la starea inițială. În acest caz, de asta avem nevoie, așa că nu vom defini acest cadru. Din exemplu, puteți vedea clar funcționarea funcției timp pe toate cele patru cadre prin modul în care pătratul de pe fiecare dintre ele sare pe pereții cadrului.

Dacă trebuie să definiți propria funcție de sincronizare pentru un anumit cadru, atunci definiți-o direct în codul pentru acel cadru, așa cum se arată în exemplul următor:

@keyframes pătrat ( 50% (sus: 200px; stânga: 400px; animație-funcție de sincronizare: ease-in-out; ) )

Pași temporari ai funcției()

Credeai că acesta este sfârșitul aventurilor noastre? Indiferent cum ar fi! V-am spus deja că CSS nu se limitează la funcțiile de sincronizare încorporate!

În această secțiune, vom explora conceptul de funcții „pas” și vom înlocui curbele cu linii drepte folosind funcția de timp pași.

Această funcție este foarte utilă, în ciuda specificității sale. Vă permite să împărțiți animația în segmente, ceea ce o va distinge de mișcarea animată obișnuită. De exemplu, dacă trebuie să mutăm un pătrat cu 400 de pixeli la dreapta în 4 pași în 4 secunde, atunci, în loc să ne mișcăm lin, va „sări” 100 de pixeli în fiecare secundă. Acum să aruncăm o privire la codul pentru acest exemplu. El trebuie să fie doar o gură de prospețime după ce s-a scufundat în subtilitățile funcției cubic-bezier()!

Animație sursă pe Codepen

Div ( tranziție: pași de 4 s(4); ) div:țintă ( stânga: 400px; )
După cum puteți vedea, totul este despre determinarea numărului de segmente de animație. Dar rețineți că nu poate fi negativ sau zecimal. Există, de asemenea, un al doilea argument, opțional, ale cărui valori posibile sunt începutul și sfârșitul (cea din urmă este valoarea implicită).

Tranziție-funcție de sincronizare: pași(4, start); funcția de cronometrare a tranziției: pași(4, sfârșit);
Valoarea de început începe animația la începutul fiecărui pas, iar sfârșitul începe animația la sfârșit. În legătură cu „pătratul în mișcare”, această imagine va ajuta la explicarea mai bună a diferenței dintre aceste două semnificații.

Diferența dintre valorile de început și de sfârșit ale funcției steps() (imaginea oferită de Smashing Magazine)

După cum puteți vedea, cu valoarea de început animația începe imediat, iar cu valoarea finală începe cu o întârziere de o (în acest caz) secundă.

Ei bine, de dragul unei mai mari comprehensivă, rețineți că funcția step() are două argumente predefinite: step-start și step-end , echivalent cu steps(1, start) și, respectiv, steps(1, end).

Abordare inventiva a functiilor "pas cu pas".

Probabil din sarcini zilnice Probabil că nu veți putea anima foarte des un pătrat în mișcare, dar puteți face o mulțime de alte lucruri interesante cu funcția steps(). Să presupunem că dacă aveți mai mulți sprites de desene animate la dispoziție, atunci puteți folosi tehnica pe care ați învățat-o deja pentru a crea animație folosind doar câteva Proprietăți CSS! Să ne uităm la demo și cod.

Animație sursă pe Codepen

Div ( lățime: 125 px; înălțime: 150 px; fundal: url(images/sprite.jpg) stânga; tranziție: 2s pași(16); /* Numărul de pași = numărul de cadre din desenul animat */ ) div:target ( fundal-poziție: -2000px 0; )
Deci avem un dreptunghi lat de 125px cu o imagine de fundal de 2000px care conține 16 cadre. Inițial, această imagine este situată pe marginea din stânga a dreptunghiului și tot ce trebuie să facem este să o mutăm spre stânga, astfel încât toate cele 16 cadre să treacă prin „fereastra” mică a dreptunghiului nostru. Cu o animație „normală”, cadrele ar trece pur și simplu, dar cu funcția steps(), imaginea de fundal este deplasată la stânga în exact 16 pași, arătând suficient fiecare cadru al imaginii. Așa am realizat un mini-desen animat folosind doar animații CSS!

Demonstrație despre cum să mutați o imagine de fundal, astfel încât fiecare cadru să treacă printr-o „fereastră” mică (credit imagine: Smashing Magazine)

Am găsit o altă utilizare distractivă a funcției steps() datorită Leah Weru (cine altcineva?), care a venit cu o animație de tastare pe computer foarte interesantă. Îți voi spune despre asta acum.

Animație sursă pe Codepen

În primul rând, ai nevoie de ceva text. Și de asemenea, din păcate, trebuie să știi câte caractere conține, pentru că va trebui să folosești acest număr în CSS. O altă condiție: fontul trebuie să fie monospațiat astfel încât toate caracterele să aibă aceeasi latime.

smashingmag

.text ( lățime: 6.6em; lățime: 11ch; /* Număr de caractere */ chenar-dreapta: .1em solid; font: 5em monospace; )
Textul nostru este format din 11 caractere. Vom indica lungimea șirului folosind unitatea ch, iar pentru browserele care nu o acceptă, vom scrie o altă valoare. În continuare partea dreapta linii vom pune un cadru negru, care va deveni cursor. Și acum că totul este la locul lui, tot ce trebuie să facem este să animam textul, ceea ce este extrem de ușor.

Vom avea nevoie de două animații separate: una pentru cursor și una pentru imprimare. Pentru a face un cursor, trebuie doar să faceți pâlpâirea cadrului negru.

@keyframes cursor ( 50% (border-color: transparent; ) ) .text ( /* stiluri existente */ animație: cursor 1s step-end infinit; )
După cum era de așteptat, cadrul își schimbă pur și simplu culoarea de la negru la transparent și înapoi. În acest caz, funcția steps() are un anumit sens: eliminați-o, iar cursorul, în loc să „clipească”, va apărea și va dispărea fără probleme.

În cele din urmă, animația de tastare este la fel de simplă. Tot ce trebuie să facem este să reducem lungimea șirului la zero și apoi să o creștem treptat în 11 pași (în funcție de numărul de caractere).

@keyframes typing (de la ( lățime: 0; ) .text ( /* stiluri existente */ animație: tastare 8s pași(11), cursor 1s step-end infinit; )
Textul se va „extinde” câte o literă timp de opt secunde, în timp ce „cursorul” (chenar-dreapta) va clipi constant. Tehnica este pe cât de simplă, pe atât de eficientă.

Acum putem extinde acest exemplu grozav încercând efectul opus - ștergerea textului. Pentru a face acest lucru, trebuie să schimbați cuvântul cheie cadru de la la la la și apoi să adăugați un parametru animație-fill-mode cu valoarea înainte pentru a vă asigura că atunci când textul este „șters” (adică când animația se termină), acesta rămâne "îndepărtat". Uită-te la demo.

Animație sursă pe Codepen

Tastarea @-webkit-keyframes ( la ( lățime: 0; ) ) Tastare @keyframes ( la ( lățime: 0; ) ) Cursor @-webkit-keyframes ( 50% ( culoarea marginii: transparent; ) ) Cursor @keyframes ( 50 % ( chenar-culoare: transparent; ) .text ( lățime: 6,6 em; lățime: 11ch; /* Număr de caractere */ chenar-dreapta: .1em solid; overflow: ascuns; font: 5em monospace; margin-top: 50px ; -webkit-animation: cursor 1s step-end infinit; animație: cursor 1s step-end infinit; ) #go:target .text ( -webkit-animation: tastarea 4s pasi(11) înainte, cursorul 1s step-end infinit ; animație: tastând 4s pași(11) înainte, cursorul 1s pas-sfârșit infinit; )

Dezavantajul ambelor exemple prezentate în această secțiune este faptul că trebuie să cunoașteți în prealabil numărul de cadre sau caractere pentru a specifica numărul corect de pași de animație. Dacă numărul lor se schimbă, va trebui să schimbați codul. În ciuda acestui fapt, puterea funcției steps() este clară cu ochiul liber, la fel ca și funcționalitatea cu adevărat fantastică a funcțiilor de sincronizare CSS în general.

Suport pentru browser

Evident, nu veți putea folosi funcțiile de sincronizare CSS dacă browserul dvs. nu acceptă tranzițiile CSS și animația cadru cu cadru. Din fericire, suportul este destul de bun în aceste zile.

SUPORT CSS TRANZIȚII

Browser	Cu prefix	Fără prefix
Internet Explorer	Nu	10+
Firefox	4+ (-moz-)	16+
Crom	4+ (-webkit-)	26+
Safari	3.1+ (-webkit-)	6.1+
Operă	10,5+ (-o- prefix)	12.1+

În ciuda faptului că totul ultimele versiuni browserele au eliminat prefixele pentru tranziții; totuși, nu ar fi de prisos să se înregistreze suplimentar proprietăți cu prefixul -webkit- pentru a suporta browserele mobile învechite. Totodata, din punct de vedere al imbunatatirii progresive, cred ca necesitatea folosirii prefixelor -moz- si -o- deja a trecut.

SUPORT PENTRU FUNCȚII CSS TEMPORARE

Deși unora le-a luat mai mult timp pentru a susține capabilitățile complete ale funcțiilor temporare, este ușor de observat că în timp dat această funcționalitate este implementată în toate browserele moderne.

Concluzie

Deci, ce am învățat despre funcțiile de sincronizare CSS? Să rezumam.

1. Ele determină când animația accelerează și încetinește
2. Sunt mult mai cool decât un set de valori predefinite
3. Puteți crea un efect de „săritură” cu valori cubic-bezier() în afara intervalului 0-1
4. Puteți împărți animația în mai multe pași/segmente
5. Suportul pentru browser este excelent și doar se îmbunătățește

Și în ciuda naturii multiplatforme a tehnologiilor descrise, acesta nu ar fi un articol despre tehnicile CSS 3 dacă nu aș menționa îmbunătățirea progresivă. Treceți întotdeauna de la simplu la complex: asigurați-vă că munca dvs. este accesibilă pe dispozitive și browsere care nu acceptă funcționalitatea înainte de a crea efecte pentru browserele care le pot gestiona.

Acum, înainte! Pași și contorsionări fericiți!

Etichete:

• css 3
• animații css
• tranziții css
• cadre cheie css
• bezier
• curbele bezier

Adaugă etichete

O zi buna. Vreau să vă spun despre tendința funcțiilor din CSS 3 și despre cum poate și chiar uneori ar trebui să fie utilizat în proiecte.

Pentru a nu vă pierde timpul, vă voi descrie proprietățile despre care aș dori să vă spun:

• functia de contor
• funcția calc
• funcția attr
• funcția de comutare
• unitate de măsură - rem
• unitate de măsură - vw
• unitate de măsură - vh

Funcții în css 3

O mare bucurie a răsunat în legiunea de dezvoltatori când am primit una dintre primele funcții - media queries, care ne-a permis să acceptăm anumite stiluri în funcție de tot felul de factori externi. De fapt, a fost doar un mare plus față de funcționalitatea care a fost standardizată în versiunea CSS 2.1.

Datorită apariției unor astfel de oportunități, lumea a devenit mai strălucitoare, site-urile au devenit mult mai convenabile atunci când sunt vizualizate de pe tot felul de gadget-uri și s-au născut concepte precum Responsive Web Design și Adaptive Web Design (de fapt, al doilea este un subset din primul).

W3c nu s-a oprit aici și recent am auzit despre o funcție precum suporturile sau CSS Feature Queries, care este acceptată doar în firefox începând cu versiunea 21, chrome începând cu versiunea 28 și în cea mai recentă opera (12.1).

Acestea sunt vedetele noastre, sunt în centrul atenției și toată lumea le iubește. Cu ei totul este destul de clar și evident. Acum să aruncăm o privire la funcțiile mai puțin semnificative.

Tejghea

Aceasta este o funcție de creștere în css, care, apropo, există încă din versiunea 2.1. Ce face ea, întrebi?! Și ea face următoarele:
Funcția de contor vă permite să porniți un contor cu un nume, să îl incrementați și să îl resetați la zero. Conținutul contorului poate fi afișat prin pseudoelementele după și înainte. În general, imitați listele dvs., deși nu am găsit niciun beneficiu în această funcție pentru mine.

Calc

Referitor la suport:

• Internet Explorer 9+
• Mozilla Firefox 19+
• Chrome 24+
• Safari 6+
• Operă nu suporta

Pentru mine personal această funcțieÎmi place foarte mult, pentru că îmi va permite să scurtez puțin codul atunci când, de exemplu, trebuie să centrez un element:

Casetă (poziție: absolut; lățime: 400px; stânga: calc(50% - 200px); )

Comutare

Funcția de comutare vă permite să acceptați anumite stiluri în funcție de stilurile elementului părinte.

Parent ( font-style: italic; ) .child ( font-style: toggle(italic, normal); )

Ca rezultat, avem următoarea logică: Dacă proprietatea tip font a părintelui are valoarea italic, atunci se aplică normal elementului copil, dar dacă părintele are o valoare diferită de italic, atunci elementul fiu va fi italic.

Nu am găsit informații despre suportul pentru această metodă, dar rezultatele testelor m-au făcut să cred că nimeni nu o susține încă. Ei bine, nu sunt supărat, nu folosesc deloc o cascadă, așa că nu am nevoie de astfel de capacități și, în general, sunt cu profil îngust.

attr

Cred că mulți oameni sunt, de asemenea, familiarizați cu funcția attr.

.new ( /* unele stiluri */ ) .new::after ( conținut: attr(data-price); )

Funcția vă permite să afișați valoarea oricărui atribut prin pseudoelementele de după și înainte. Funcția, apropo, există și din versiunea css 2.1, dar a primit o actualizare în versiunea 3. Acest atribut vă va permite să scrieți lucruri precum:

stoc > * ( afișare: bloc; lățime: attr(lungime em); /* implicit 0 */ înălțime: 1 em; chenar: solid subțire; margine: 0,5 em; )

În prezent, nu există suport pentru această îmbunătățire nicăieri.

Din păcate, acest material este în statutul de Recomandare Candidat și nu se știe încă dacă bunătățile de mai sus vor funcționa în viitorul apropiat. Documentul conține, de asemenea, următorul rând:

Următoarele caracteristici sunt expuse riscului și pot fi renunțate în timpul perioadei CR: „calc()”, „toggle()”, „attr()”.

Deci s-ar putea să nu vedem toate aceste delicii.

Concluzie

Personal, îmi place că css introduce funcții și vă permite să faceți lucruri care au fost făcute anterior și cred că este grozav. Acolo am terminat de vorbit despre funcții.

Rem, vw și vh

Valoarea rem este analogă cu em, cu singura diferență că se uită întotdeauna la valoarea html și nu la părinte ca în cazul ems obișnuit. De aici și numele root em => rem.

rem este acceptat de toate browserele moderne, inclusiv 9 și 10 Internet Explorer. Dacă acceptați versiunea 8 a ie, atunci, din păcate, nu veți putea folosi rem.

vw și vh

În spatele acestor abrevieri, care sunt de neînțeles la prima vedere, se află unități de măsură foarte clare și utile.

1 unitate vh sau vw este egală cu 1% din lățimea sau înălțimea ferestrei de vizualizare a utilizatorului. Prin urmare, 100wh va fi egal cu 100% din lățimea ferestrei browser, ceea ce în unele cazuri poate fi util, deoarece atunci când setați o valoare, de exemplu, lățimea, porniți nu de la lățimea părinte, ci de la fereastra de vizualizare, care nu te-ai putea descurca cu %.

A sustine:

• Internet Explorer 9+
• Mozilla Firefox 19+
• Chrome 24+
• Safari 6+
• Operă nu suporta

Vă mulțumim pentru atenție, sper că acest lucru vă va fi de folos în sarcina noastră uneori dificilă.