Top 20 de tutoriale CSS3 pentru a-ți îmbunătăți abilitățile de dezvoltare web
Publicat: 2022-05-06Cascading Style Sheets (CSS) devine mai mult decât un simplu limbaj pentru stilarea web. Se dezvoltă încet într-un limbaj pe deplin capabil, care poate gestiona aspectele dinamice ale designului. În multe feluri, CSS poate înlocui HTML și JavaScript tradițional pentru a obține interactivitate și autodependență de biblioteci externe și fragmente de cod. Toate stilurile pe care le vedem astăzi pe web sunt direct prin CSS. Pe măsură ce standardul continuă să crească și să se îmbunătățească, a rămâne la curent cu lucrurile este mai important ca niciodată. Browserele web au redat CSS, la fel ca HTML, ceea ce poate însemna uneori că browserele mai vechi nu sunt capabile să accepte funcții noi.
În ultimii ani, începerea cu dezvoltarea web front-end și designul web a devenit mai ușoară. Vedem mult mai multe tutoriale, ghiduri și cursuri la care să vă înscrieți. Dar, în cele din urmă, ceea ce se rezumă la este dorința de a lucra cu abilități nou învățate și de a le aplica în proiecte din viața reală. CSS este unul dintre acele limbaje de scripting care solicită utilizatorului să utilizeze anumite modele și opțiuni de aspect pentru a se aplica limbilor precum JavaScript și HTML. Când construiți un site web nou cu HTML și CSS, cel mai bine este să lucrați pas cu pas pentru a aplica pe deplin ceea ce este învățat.
Astăzi, scopul nostru este să acoperim cele mai proeminente și moderne tutoriale CSS3 de la cei mai importanți dezvoltatori și designeri front-end. Toate tutorialele de aici se bazează pe cele mai recente standarde pentru a vă ajuta să deveniți un design web mai bun. La sfârșitul postării, vom menționa și câteva resurse de învățare CSS3 pentru învățare ulterioară. Ca orice limbaj de programare, pentru a înțelege mai bine ceva, ar trebui să ne permitem să facem niște codări repetitive, fie printr-o platformă online dinamică, fie în editorii noștri de coduri personale.
Editarea imaginilor în CSS
Folosirea imaginilor în design web are sens total, dar povestea devine mai tehnică decât atât. Deși este distractiv să folosiți fotografiile care vă plac în design-urile dvs. web, uneori există lucruri de care trebuie să ținem cont. Este dimensiunea fișierului imagine adecvată pentru proiectul nostru? Putem adăuga filtre prin CSS mai degrabă decât prin aplicații externe precum Photoshop? Ce putem face cu CSS pentru a ne ajuta fotografiile să arate mai bine? Una Kravets ne duce într-o călătorie de 15 minute. În ea, ea vorbește despre editarea imaginilor CSS și despre cum putem transforma CSS pentru a acționa mai mult ca o platformă software de editare a imaginilor de sine stătătoare, mai degrabă decât o simplă modalitate de a manipula aspectele de design.
Folosind CSS modern pentru a construi o grilă de imagine receptivă
Continuând cu tema imaginilor, iată-l pe George Martsoukos. El prezintă un tutorial simplu și ușor despre cum să utilizați funcțiile CSS3 moderne pentru a construi grile de imagini receptive. Grilele de imagini (sau uneori numite galerii) se referă la afișarea conținutului vizual în contextul unei grile. Aceste tipuri de grile devin utile celor care își partajează fotografiile sau folosesc o grilă de imagini pentru a-și extinde articolele din portofoliu. În acest tutorial, George ne prezintă procesul de a ne asigura că grilele pe care le creăm vor răspunde în mod egal la aplicațiile desktop și mobile.
Note de reîmprospătare CSS
Notele și ghidurile de stil sunt forța motrice pentru mulți dintre designerii de web. Trebuie să ne amintim să lăsăm deoparte resursele noastre de note preferate pentru o referire mai ușoară în viitor. Și în ceea ce privește CSS3, CSS Refresh Notes este printre favoritele comunității GitHub; sute de stele și o mulțime de contribuții ale comunității despre cum să extindeți această resursă pentru a fi cea mai bună. CSS Refresh Notes se concentrează pe cele mai importante aspecte ale dezvoltării CSS3. De asemenea, le permite designerilor să acceseze rapid notele de referință pentru majoritatea funcțiilor CSS3. Fie că este vorba despre poziționare sau selectoare cu care aveți nevoie de ajutor, poate interogări media pentru design receptiv sau cum să utilizați cel mai bine SVG în modelele dvs. de design CSS3 - aceste note vă vor fi utile chiar dacă nu vă simțiți așa.
Variabile: coloana vertebrală a arhitecturii CSS
În ultimii ani, preprocesoarele au decolat, cadre simple și seturi de instrumente care permit designerilor să extindă funcționalitatea de bază CSS3 cu mixuri, funcții și variabile. De obicei, v-ați aștepta să vedeți tipul de caracteristici într-un limbaj de programare hardcoded, cum ar fi JavaScript. Se poate spune că toată lumea ar trebui să cunoască CSS3 pentru a codifica fără a utiliza fără probleme preprocesoare. Totuși, lucruri precum timpul de dezvoltare rămân importante. Variabilele ajută la utilizarea CSS3 într-un mediu mai dinamic. De aceea, Karen Menezes a alcătuit una dintre cele mai extinse piese de conținut pe această temă pe care le veți găsi vreodată.
Proiectarea unui aspect al paginii de produs cu Flexbox
Flexbox este un nou mod de aspect CSS3 menit să ajute designerii să-și optimizeze cel mai bine design-urile pentru diferite dispozitive. Noua funcție este încă destul de nouă și străină pentru mulți, dar utilizarea Flexbox devine din ce în ce mai populară în domenii precum comerțul electronic. Acest tutorial CSS3 vine de la echipa Shopify, unde raportează despre cum au reușit să creeze unul dintre cele mai noi șabloane Shopify cu ajutorul Flexbox, cum a durat procesul și cum a arătat rezultatul final. Cunoscând reputația Shopify pe piața de comerț electronic și răsfățându-ne noi înșine cu tutorialul, acesta ar putea fi unul dintre cele mai utile ghiduri pentru a vă ajuta să înțelegeți mai multe despre Flexbox și despre cum puteți începe să-l utilizați în propriile design-uri web.
Cea mai simplă prezentare de diapozitive CSS
O prezentare de diapozitive cu CSS3? Trebuie să fie imposibil! Astfel de concepte sunt de obicei destinate limbilor precum JavaScript sau jQuery. Aceste limbi facilitează crearea de conținut dinamic din mers. Dar ce zici de CSS3? Jonathan Snook nu ne promite nimic nou, ci ne oferă un exemplu despre cum putem folosi efectele de animație CSS3 pentru a crea experiențe de prezentare de diapozitive fără a fi nevoie să folosim resurse externe, cum ar fi JavaScript, de exemplu. Micul său tutorial introductiv la animațiile CSS3 este exemplul perfect al modului în care creativitatea învinge îndoiala.
Module CSS — Rezolvarea provocărilor CSS la scară
CSS va crește inevitabil dincolo de limitările actuale, la fel ca JavaScript. Privind înapoi la trecutul foarte vechi al CSS, am parcurs un drum lung de a putea manipula culorile și aspectul elementelor, în zilele noastre CSS oferă o cutie de instrumente mult mai complexă pentru dezvoltatorii care doresc să locuiască într-o singură limbă pentru a-și face toate activitățile. sarcini de dezvoltare. Modulele CSS sunt pentru a ajuta dezvoltatorii să-și alinieze mai bine codul CSS, care poate fi apoi scalat atunci când aplicația sau proiectul începe să scape de sub control. În acest tutorial magnific, Tom Cornilliac explică cum putem combina diferite foi de stil și să le folosim ca module pentru proiectele noastre pe care le lansăm prin cadre precum React. Cine știa că importarea foilor de stil și accesarea funcțiilor lor predefinite ar fi ușor.
Animarea elementelor tăiate în SVG
Animațiile SVG și CSS3 sunt printre cele mai trending subiecte în dezvoltarea web. Acest lucru se datorează faptului că începem să ne îndepărtăm de nevoia de a folosi imagini grele și fișiere de animație pentru a ne afișa conținutul și, în schimb, designerii învață cum să imite acele animații exacte folosind limbi native în browser. Dennis Gaebel Jr ne oferă o scurtă prezentare a utilizării decupării CSS pentru a obține efecte de animație uimitoare și a utilizării imaginilor vectoriale uimitoare.
CSS expresiv
Expresiv a fost un termen inventat în comunitatea dezvoltatorilor de ceva timp. Este un termen împrumutat vag de la conceptul de expresivitate în limbajele de programare. Un limbaj de programare este în general considerat expresiv dacă vă permite să vă exprimați în mod natural gândurile într-un cod ușor de înțeles. În general, „expresiv” nu este ceva nou. Dezvoltatorii au vorbit despre asta cu ani în urmă. Totuși, de fiecare dată când o nouă caracteristică este lansată în sălbăticie, dezvoltatorilor și mai ales designerilor le este nevoie de câteva ori să se adapteze la fluxul lor de lucru expresiv, așa că uneori proiectele pot deveni dezordonate și prinse în prea multe funcții care încearcă să funcționeze simultan. Expresivă este abordarea ușoară a scrierii codului care funcționează bine, arată bine și este ușor de întreținut. Folosiți-l ca ghid de stil și nu uitați să vă exprimați recunoștința față de autor; John Polacek.
Animație în Responsive Design
După cum am învățat deja de-a lungul articolului, animațiile și responsive sunt două subiecte foarte fierbinți pentru designeri, iar combinarea celor două devine din ce în ce mai interesantă pentru cei care doresc să testeze cu adevărat limitele abilităților moderne de dezvoltare web. Val Head a publicat un articol foarte perspicace despre utilizarea animațiilor CSS3 în design-urile web responsive și despre cum să prezinte cel mai bine aceste animații acolo unde nu își pierd valoarea. Ocupă articolul cu mai multe demonstrații de pe alte site-uri web de succes care și-au stabilit animațiile pe desktop și dispozitive mobile.
De ce sunt entuziasmat de variabilele CSS native
Proprietăți personalizate CSS, cunoscute și sub numele de Variabile, ajutând dezvoltatorii CSS3 să accelereze procesul de dezvoltare CSS3 prin activarea funcționalității dinamice. Preprocesoarele fac asta de ceva vreme. Mulți s-au adaptat deja la ideea de a folosi un preprocesor permanent. Totuși, în mod inevitabil, toate aceste funcții (disponibile în standard) își vor găsi drumul în browserele moderne. Nimic nu este mai bun decât dezvoltarea în mediul nativ, fără să vă faceți griji cu privire la întreținerea și fiabilitatea software-ului extern. Un inginer Google, Philip Walton și-a luat timpul prețios pentru a pune la punct o lucrare foarte perspicace despre noua caracteristică CSS și de ce comunitatea ar trebui să accepte o astfel de schimbare și să nu-și facă griji cu privire la lucruri stupide precum aspectul sintaxei.
Animația inimii Twitter în CSS complet
Twitter a fost peste toate știrile și din multe motive întemeiate. Unul dintre aceste motive a fost că Twitter a decis să schimbe butonul „Favorit” cu o pictogramă „Iubire”. Este o mișcare îndrăzneață, dar necesară pentru a stabili un sentiment mai orientat spre comunitate în jurul site-ului. Anunțul a fost făcut pe unul dintre conturile oficiale Twitter, printr-o imagine GIF animată. A prezentat o animație grozavă de „stropire a inimii” însoțită de text. Nicolas Escoffier, un designer, a fost interesat să vadă dacă ar fi capabil să pirateze o animație similară folosind doar CSS3 pur și ghiciți ce - a reușit, iar comunitatea nu ar putea fi mai fericită!
Serios, folosește fonturi pentru pictograme
SVG face web-ul un loc mai bun. Chiar dacă dezvoltatorii trebuie să ia în considerare faptul că mulți încă navighează pe web din versiuni învechite ale sistemelor de operare mobile, iar o astfel de perspectivă necesită dezvoltatorului să muncească din greu pentru ca lucrurile să funcționeze. Alții încă învață fonturi pentru pictograme. Dar, această caracteristică devine foarte populară pe piețele moderne de dezvoltatori, unde dezvoltatorii doresc să creeze experiențe perfecte și plăcute cu care să lucreze.
Mărire produs CSS - fără JavaScript
În comerțul electronic, mărirea și mărirea permit clienților să se apropie de produs și să exploreze aspectele mai puțin vizibile ale acestuia. Este un efect grozav de avut, dar pentru mulți este esențial pentru succesul afacerii lor. Michael Weaver este un hacker CSS3 care a venit cu o idee de a crea un widget de mărire fără a utiliza niciun cod JavaScript, o ispravă pe care a realizat-o. Acum oricine își poate răsfoi codul și poate crea widget-uri similare pe site-urile lor.
Tabele cu adevărat receptive folosind CSS3 Flexbox
Tabelele ne ajută să ne aliniem informațiile într-un mod mai prietenos. Uneori, un element de masă bine stilat nici măcar nu apare ca unul. Dar, cu extensibilitatea jQuery, HTML5 și JavaScript, putem face ca tabelele noastre să acționeze mai mult ca documente Excel decât orice altceva. Vasan Subramanian a publicat un tutorial profund despre utilizarea caracteristicii Flexbox a CSS3 pentru a crea tabele uimitoare și receptive pentru următorul site web sau proiect de aplicație.
Optimizați livrarea CSS
Ultimul tutorial CSS3 va fi despre viteză și despre cum să ne codificăm mai bine foile de stil pentru a garanta măcar o creștere a vitezei dincolo de obișnuit. Optimize CSS Delivery este un ghid de stil tehnic care arată cum să scrieți codul CSS nativ fără a compromite nicio resurse. Scrierea CSS ar trebui să fie distractivă, despre ce este vorba în acest tutorial.
Resurse de învățare pentru CSS3 modern
Fără o bază adecvată, învățarea din tutoriale poate fi uneori destul de descurajantă. Are sens, un tutorial poate acoperi doar atât de mult pentru un anumit subiect înainte de a se epuiza, tutorialele sunt pentru cei care au construit ceva înainte și doresc să extindă acele proiecte cu noi caracteristici, concepte interesante și alte posibilități inspirate. de către comunitate. Și pentru a vă ajuta să înțelegeți mai bine tutorialele CSS3 despre care am vorbit în postare, vom enumera câteva resurse cu adevărat grozave și gratuite pentru a învăța CSS3 (de asemenea, modern) online.
Tutorial complet CSS3
Din nou, subliniem necesitatea de a prezenta resurse tutoriale care vă vor ajuta să învățați totul despre CSS. Această resursă este un tutorial complet CSS3 care vorbește despre caracteristicile CSS3 și despre utilizările lor în lumea reală. Acest tutorial a discutat pe deplin despre selectoare, selectoare avansate, modele de casete, texte și fonturi și alte caracteristici, cu o mulțime de exemple cu care să începeți să vă jucați. Oricine începe dezvoltarea CSS își va putea realiza rapid progresul din doar câteva proiecte simple.
Tutorial CSS
W3Schools este casa dezvoltării front-end pentru începători. Această resursă a ajutat milioane și milioane de dezvoltatori să înțeleagă mai bine anumite părți ale HTML și CSS. De asemenea, oferă conținut de învățare gratuit pe care nu îl veți găsi în altă parte. W3Schools este locul perfect de învățare CSS pentru cei care nu au cu adevărat experiență cu web-ul și doresc să se învețe destul de repede.
HTML și CSS
Nu poți să înveți CSS3 sau HTML5 de la început și să nu încerci Codecademy. Chiar și secțiunea de mărturii este plină de recenzii despre modul în care oamenii au reușit să găsească locuri de muncă grozave și bine plătite după ce și-au terminat studiile cu Codecademy. Multe dintre site-urile de tutoriale predau sintaxa directă prin exemple de cod. Pe de altă parte, Codecademy te „forțează” să te joci cu codul. Acest lucru se realizează prin sarcini directe și interactive atribuite de oamenii din spatele fiecărui curs de învățare. Astfel de platforme au devenit foarte populare și sunt acum disponibile pentru aproape orice limbaj de programare. Un mod foarte eficient de a învăța, fără îndoială.
Aflați aspectul CSS
Am aflat deja în această postare mai devreme că aspectul este baza CSS3. Dar acum, este timpul să luăm acest concept la plimbare. Să accesăm un exemplu futurist al modului în care funcționează proprietățile de aspect CSS3 și ce putem face cu ele. Alocați-vă câteva zile pentru a finaliza acest tutorial. După aceea, veți fi la un nivel intermediar solid de înțelegere a proprietăților aspectului și a utilizării acestora.
CSS – Învățare pe web
Mozilla Developer Network rămâne una dintre principalele surse pentru toate lucrurile HTML5, CSS3 și JavaScript. Complet condus de comunitate, MDN oferă ghiduri de stil pentru toate limbile menționate, într-un mod care este cel mai potrivit pentru ritmul dvs. de învățare și înțelegerea generală a CSS3 în primul rând.