Top 20 de tutoriale CSS3 pentru a vă îmbunătăți abilitățile de dezvoltare web

Foaie de stil în cascadă (CSS) devine mai mult decât un limbaj pentru stilizarea internetului. Se dezvoltă încet într-un limbaj complet capabil, care poate gestiona aspecte de design dinamic. În multe moduri, CSS poate înlocui HTML și JavaScript tradiționale pentru a obține interactivitate și autonomie din bibliotecile 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ă, rămâne la curent cu lucrurile este mai important ca niciodată. Browserele web au redat CSS, la fel ca HTML, ceea ce uneori poate însemna că browserele mai vechi nu sunt capabile să accepte funcții noi.

Noțiuni de bază cu dezvoltarea web front-end și designul web au devenit cu siguranță mai ușoare în ultimii ani. Vedem mult mai multe tutoriale, ghiduri și cursuri pentru a vă înscrie. Dar, în cele din urmă, ceea ce se rezumă este disponibilitatea 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 scriptare care necesită ca utilizatorul să utilizeze modele și opțiuni de aspect specifice pentru a se aplica unor limbi precum JavaScript și HTML. Când construiți un nou site web cu HTML și CSS, cel mai bine este să lucrați pas cu pas pentru a aplica pe deplin ceea ce se învață.

Scopul nostru de astăzi este de a acoperi cele mai proeminente și moderne tutoriale CSS3 de la principalii dezvoltatori și designeri front-end. Toate tutorialele de aici se bazează pe cele mai noi standarde pentru a vă ajuta să deveniți un design web mai bun. La sfârșitul postării, vom menționa, de asemenea, câteva resurse de învățare CSS3 pentru o învățare ulterioară. Ca orice limbaj de programare, pentru a înțelege mai bine ceva, cel mai bine este să ne permitem să facem niște coduri repetitive, fie printr-o platformă online dinamică, fie în cadrul propriilor editori de coduri personale.

Editarea imaginilor în CSS

Folosirea imaginilor în designul web are un sens total, dar povestea devine mai tehnică decât atât. Deși este distractiv să folosiți fotografii pe placul dvs. în design-urile dvs. web, uneori există lucruri pe care trebuie să le luăm în considerare. Este dimensiunea fișierului de imagine adecvată proiectului nostru? Putem adăuga filtre mai degrabă prin CSS decât prin aplicații externe precum Photoshop? Ce putem face cu adevărat 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 oferă o discuție despre editarea imaginilor CSS și despre modul în care putem transforma CSS pentru a acționa mai mult ca o platformă software de editare a imaginilor, mai degrabă decât un mod de a manipula aspectele de proiectare.

Utilizarea CSS-ului modern pentru a construi o grilă de imagine receptivă

Continuând cu subiectul imaginilor, aici îl avem pe George Martsoukos. El ne prezintă un tutorial simplu și ușor despre cum să utilizați funcțiile CSS3 moderne pentru a construi grile de imagine receptive. Grilele de imagini (sau uneori numite galerii) vizează afișarea conținutului vizual în contextul unei grile. Acest tip de grile devin utile celor care își împărtășesc fotografia sau utilizează o grilă de imagini ca modalitate de a-și extinde articolele din portofoliu. În acest tutorial, George ne vorbește prin procesul de a ne asigura că rețelele pe care le creăm vor fi la fel de receptive la aplicațiile desktop și mobile.

Aflați aspectul CSS

Proiectările web reprezintă totul despre aspect. Creăm un aspect și apoi folosim alte elemente și funcții disponibile pentru a-l stiliza, pentru a construi pe acesta. Și este un fapt cunoscut că o mare parte din aspectele de design web depind în totalitate de CSS. Învățarea CSS ne permite să aflăm mai multe despre aspectele site-urilor web și cum funcționează acestea. Dar dacă nu aveți deja cunoștințe, Mikito Takada a scris o carte online care este împărțită în 5 capitole diferite despre cum să creați în mod corespunzător machete cu CSS3. Vorbește despre poziționare și, de asemenea, alinierea diferitelor elemente de cutie pentru a începe crearea elementelor de grilă, el aprofundează acum poziționarea și caracteristicile disponibile. El dedică ultimele două capitole Flexbox (funcția CSS). Există, de asemenea, o scriere despre cele mai bune sfaturi și trucuri de stil CSS din propria călătorie de a fi designer de web.

Note de reîmprospătare CSS

Note și ghiduri de stil sunt forța motrice pentru mulți dintre designerii de pagini web. Este esențial să ne amintim să lăsăm deoparte propriile resurse de note preferate pentru o referință mai ușoară în viitor. Și în ceea ce privește CSS3, CSS Refresh Notes este printre preferatele comunității GitHub; sute de stele și o mulțime de contribuții ale comunității cu privire la modul de extindere a acestei resurse pentru a fi cea mai bună. CSS Refresh Notes se concentrează pe cele mai importante aspecte ale dezvoltării CSS3. De asemenea, permite designerilor să acceseze rapid notele de referință pentru majoritatea funcțiilor CSS3. Indiferent dacă este vorba de poziționare sau de selectoare cu care aveți nevoie de ajutor, poate de interogări media pentru un 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 imediat.

Variabile: coloana vertebrală a arhitecturii CSS

Preprocesoarele au decolat cu adevărat în ultimii ani, cadre simple și seturi de instrumente care permit designerilor să extindă funcționalitatea CSS3 de bază cu lucruri cum ar fi mixins, funcții și variabile. Tipul de caracteristici pe care v-ați aștepta de obicei să le vedeți într-un limbaj de programare codificat ca JavaScript. Probabil că toată lumea ar trebui să fie competentă în CSS3 pentru a putea codifica fără probleme fără a utiliza preprocesoare. Totuși, lucruri precum timpul dezvoltării rămân importante. Variabilele ajută la utilizarea CSS3 într-un mediu mai dinamic. De aceea Karen Menezes a reunit una dintre cele mai extinse piese de conținut pe acest subiect pe care le veți găsi vreodată.

Proiectarea unui aspect de pagină de produs cu Flexbox

Flexbox este un nou mod de aspect CSS3 menit să ajute designerii să-și optimizeze cel mai bine proiectele pentru diferite dispozitive. Noua funcție este destul de nouă și străină de mulți, dar utilizarea Flexbox devine din ce în ce mai populară în domenii precum comerțul electronic. Acest tutorial CSS3 provine de la echipa de la Shopify, unde realizează un raport 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 lui Shopify pe piața comerțului electronic și după ce ne-am dedicat noi înșine tutorialului, acesta ar putea fi unul dintre cele mai la îndemână ghiduri pentru a vă ajuta să înțelegeți mai multe despre Flexbox și cum puteți începe să îl utilizați în propriile designuri web.

Tot ce știu despre tipografia web receptivă cu CSS

Când oamenii se gândesc la designul web receptiv, de cele mai multe ori se gândesc să transforme un site web standard în ceva care să funcționeze bine cu dispozitivele mobile. Nu este o înțelegere falsă, dar cu siguranță mai sunt multe. Zell Liew a scris o scriere strălucitoare despre cum să lucrați cu tipografie web receptivă și despre ce presupune stabilirea unei baze solide pentru tiparele dvs. de tipografie pe toate tipurile de dispozitive. Inutil să spun că secțiunea de comentarii tutoriale a devenit, de asemenea, de un ajutor imens. Acest lucru se datorează contribuțiilor suplimentare din partea colegilor web designeri ai comunității.

Cel mai simplu diapozitiv CSS

Un slideshow cu CSS3? Asta trebuie să fie imposibil! Astfel de concepte vizează de obicei limbi precum JavaScript sau jQuery. Aceste limbi facilitează crearea de conținut dinamic în deplasare. Dar ce zici de CSS3? Jonathan Snook nu ne promite nimic nou, ci ne oferă un exemplu despre modul în care putem folosi efectele de animație CSS3 pentru a crea experiențe de prezentare 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 depășește îndoielile.

Module CSS - Rezolvarea provocărilor CSS la scară largă

Este inevitabil ca CSS să crească dincolo de limitele sale actuale, la fel cum a făcut JavaScript. Privind în urmă la trecutul foarte vechi al CSS, am parcurs un drum lung de la a putea manipula culorile și aparițiile elementelor, în aceste zile CSS oferă o cutie de instrumente mult mai complexă pentru dezvoltatorii care doresc să locuiască într-o singură limbă pentru a-și face toate 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 magnific tutorial, Tom Cornilliac ne explică cum putem combina diferite foi de stil și le putem folosi ca module pentru proiectele noastre pe care le lansăm prin cadre precum React. Cine știa că importul foilor de stil și accesarea funcțiilor lor predefinite ar fi atât de ușor.

Modele de afișare a conținutului

Conținutul este totul. Chiar și acele site-uri cărora le lipsesc abilitățile adecvate de prezentare a site-ului web și sunt în continuare capabile să mențină o înaltă calitate a conținutului, sunt de obicei cele la care se vor referi cel mai mult oamenii. Exemple bune pentru acest lucru sunt site-uri precum Reddit și Hacker News - site-uri cu conținut ridicat, fără aplicări reale în proiectarea site-urilor web. Modelele de afișare a conținutului nu sunt despre modele de afișare, ci modul în care designul general al elementului de conținut funcționează împreună pentru a oferi o experiență de navigare care se integrează pe deplin între afișarea conținutului și conținutul real. Acest tutorial de la Dan Mall este unul dintre cele mai concise ghiduri cu privire la tiparele de afișare a conținutului, iar raportul său de experiență vorbește de la sine - după ce a lucrat cu proiecte de reproiectare pentru site-uri precum TechCrunch și chiar trebuie să recunoaștem că noul design TechCrunch este destul de elegant!

Animarea elementelor tăiate în SVG

Animațiile SVG și CSS3 sunt printre cele mai populare subiecte în dezvoltarea web în acest moment. 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 aceste animații exacte folosind limbile native în browser. Dennis Gaebel Jr ne oferă o simplă utilizare a decupării CSS pentru a obține efecte de animație uimitoare, pe lângă utilizarea unor imagini vectoriale uimitoare.

CSS expresiv

Expressive a fost un termen inventat în comunitatea dezvoltatorilor de ceva timp. Este un termen slab împrumutat de la conceptul de expresivitate în limbaje 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, iar dezvoltatorii au vorbit despre acest lucru cu ani în urmă, dar de fiecare dată când o nouă caracteristică este lansată în sălbăticie, este nevoie de câteva ori pentru ca dezvoltatorii și mai ales designerii să se adapteze la fluxul lor de lucru expresiv, deci uneori proiectele pot deveni toate dezordonate și prinse în prea multe funcții, încercând să funcționeze simultan. Expresiv este abordarea ușoară de a scrie cod care funcționează bine, arată bine și este ușor de întreținut. Folosiți acest lucru ca ghid de stil și nu uitați să vă exprimați recunoștința față de autor; John Polacek.

Animație în design responsiv

După cum am aflat deja în articol, animațiile și sensibilitatea sunt două subiecte foarte fierbinți pentru designeri, iar combinarea celor două este 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 cadrul proiectelor web responsive și despre modul de prezentare a acestor animații cel mai bine acolo unde nu își pierd valoarea. Ocupă articolul cu mai multe demonstrații de prezentare de pe alte site-uri web de succes care și-au stabilit animațiile atât pe desktop, cât și pe dispozitive mobile.

De ce sunt emoționat 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 acest lucru de ceva vreme și mulți s-au adaptat deja la ideea de a utiliza permanent un preprocesator, dar inevitabil toate aceste caracteristici (disponibile în standard) își vor găsi drumul în browserele moderne, deoarece nimic nu este mai bun decât să se dezvolte în mediu nativ, nu trebuie să vă faceți griji cu privire la întreținerea și fiabilitatea software-ului extern. Inginer Google, Philip Walton și-a luat timpul prețios pentru a pune la punct o lucrare foarte inteligentă despre noua caracteristică CSS și de ce comunitatea ar trebui să îmbrățișeze o astfel de schimbare și să nu se îngrijoreze de lucruri stupide, cum ar fi aspectul sintaxei.

Animația inimii Twitter în CSS complet

Twitter a fost peste tot în știri și din multe motive întemeiate. Unul dintre aceste motive s-a încheiat deoarece Twitter a decis să comute butonul „Favorite” cu pictograma „Dragoste”. Este o mișcare îndrăzneață, dar necesară, pentru a stabili o atmosferă mai orientată către 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 rece „inimă” însoțită de text. Nicolas Escoffier, un designer, a fost interesat să vadă dacă va fi capabil să pirateze împreună o animație similară folosind doar CSS3 pur și să ghicească ce - a reușit, iar comunitatea nu ar putea fi mai fericită!

Serios, utilizați fonturi de pictograme

SVG face webul un loc mai bun. Chiar dacă până în prezent dezvoltatorii trebuie să țină cont de faptul că mulți navighează în continuare pe web din versiuni învechite ale sistemelor de operare mobile, iar o astfel de perspectivă impune dezvoltatorului să lucreze din greu pentru ca lucrurile să funcționeze. Tipurile de pictograme sunt încă învățate de alții. Însă, această caracteristică devine foarte populară pe piețele moderne de dezvoltatori, unde dezvoltatorii doresc să creeze experiențe fără probleme și plăcute de lucrat.

Mărirea produsului CSS - fără JavaScript

În comerțul electronic este zoom-in, dar și mărire care permite clienților să meargă mai aproape de produs și să exploreze aspectele sale mai puțin vizibile. Este cu siguranță un efect interesant, dar pentru mulți este esențial pentru succesul afacerii lor. Michael Weaver este un hacker CSS3 căruia i-a venit o idee să creeze un widget de mărire fără a utiliza niciun cod JavaScript, o faptă pe care a realizat-o cu succes, iar acum oricine își poate răsfoi codul și poate crea widgeturi similare pe site-urile lor.

Tabelele cu adevărat receptive utilizând CSS3 Flexbox

Tabelele ne ajută să ne aliniez 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 cum să utilizați caracteristica Flexbox a CSS3 pentru a crea tabele uimitoare și receptive pentru următorul dvs. site web sau proiect de aplicație.

Optimizați livrarea CSS

Ultimul tutorial CSS3 va fi despre viteză și despre cum să codificăm mai bine foile de stil pentru a garanta cel puțin o creștere a vitezei dincolo de obișnuit. Optimize CSS Delivery este un ghid tehnic de stil care arată cum să scrieți cod CSS nativ fără a compromite resursele. Scrierea CSS ar trebui să fie distractivă, despre care este vorba despre acest tutorial.

Resurse de învățare pentru CSS3 modern

Fără o bază adecvată, învățarea din tutoriale se poate simți uneori destul de descurajantă. Are sens, un tutorial poate acoperi 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ă se extindă asupra acelor proiecte cu caracteristici noi, 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 foarte bune și gratuite pentru învățarea CSS3 (și modernă) online.

Tutorialul CSS3 complet

Din nou, subliniem necesitatea de a prezenta resurse tutoriale care vă vor ajuta să aflați totul despre CSS. Această resursă este un tutorial CSS3 complet 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 cutii, 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 gratuit de învățare pe care nu îl veți găsi nicăieri altundeva. W3Schools este locul perfect de învățare CSS pentru cei care sunt cu adevărat lipsiți de experiență pe web și doresc să se ridice la viteză destul de repede.

HTML și CSS

Nu poți să înveți CSS3 sau HTML5 de la capăt și să nu încerci Codecademy. Chiar și secțiunea testiomoniale este plină de recenzii despre modul în care oamenii au putut găsi locuri de muncă grozave și bine plătite după ce au terminat învățarea cu Codecademy. Multe dintre site-urile tutoriale învață sintaxa directă prin mostre de cod. Pe de altă parte, Codecademy te „obligă” să te joci cu codul. Acest lucru se realizează prin sarcini directe și interactive, așa cum sunt atribuite de oamenii care se află în 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 acest post mai devreme că aspectul este fundamentul CSS3. Dar acum, este timpul să luăm cu adevărat acest concept. 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ățarea web

Rețeaua de dezvoltatori Mozilla rămâne una dintre sursele principale pentru toate lucrurile HTML5, CSS3 și JavaScript. Complet condus de comunitate, MDN oferă ghiduri de stil pentru toate limbile menționate, într-un mod cel mai potrivit pentru ritmul dvs. de învățare și înțelegerea generală a CSS3 în primul rând.