10 trucuri CSS incredibile pentru a vă transforma aspectul web

Oricine are experiență în design web, indiferent dacă ați folosit creatori de site-uri DIY sau ați creat un site de la zero, este probabil să fi auzit de CSS înainte. Acest instrument incredibil de puternic poate fi folosit pentru a vă transforma aspectul web, oferindu-vă puterea de a prelua controlul asupra site-ului dvs. și de a vă realiza viziunea creativă. Dar cum poți folosi foile de stil în cascadă pentru a debloca potențialul următorului tău site web?

Acest ghid va detalia doar o serie de proprietăți CSS care au fost toate folosite pentru a crea antetul pe care îl puteți vedea în imaginea de mai sus. Puteți găsi acest proiect aici pe CodePen, oferindu-ți șansa de a-l încerca singur.

Manipularea imaginilor CSS

Primul pas pe care trebuie să-l facem pentru a construi secțiunea antet este adăugarea de imagini pe pagină. Puteți folosi o serie de metode pentru a atinge acest obiectiv, așa că am acoperit cele mai populare, împreună cu câteva trucuri pentru a vă ajuta să vă manipulați imaginile.

1. Imagine de fundal CSS

Dorim să avem o imagine de fundal pe ecran complet pentru antetul nostru, iar proprietatea CSS imagine de fundal este ideală. În primul rând, trebuie să creăm un container pentru imaginea noastră (și restul elementelor din antet).

Am început prin adăugarea unei etichete div cu „header” ca clasă, urmată de setarea acesteia înălțime până la 100vh si este latime la 100vw; acest lucru ne oferă o cutie care are exact aceeași dimensiune ca și fereastra. Am adăugat și o regulă CSS pentru corpul paginii, cu ea preaplin setat la ascuns si este marginile setate la 0px.

Cu containerul la loc, putem adăuga o imagine de fundal și există trei reguli CSS diferite de care avem nevoie pentru a atinge acest obiectiv. Prima, imaginea de fundal, are nevoie de o adresă URL pentru a acționa ca sursă a imaginii de fundal și am folosit catalogul Unsplash la îndemână pentru aceasta. De asemenea, trebuie să setăm dimensiunea fundalului de acoperit si poziția de fundal în jos, dar poate doriți să experimentați cu acestea pentru cele mai bune rezultate.

2. CSS Fundal-Mod-Blend

Modurile de amestecare CSS fac posibilă combinarea imaginilor și a textului, la fel ca funcția de amestecare din software precum Adobe Photoshop. Pentru ca modurile de amestecare să funcționeze cu imaginea de fundal, am setat culoare de fundal până la alb semi-transparent înainte de a adăuga modul de amestec pe care doream să-l folosim.

În urma acesteia, background-blend-mode a fost setat la lumină slabă, permițându-ne să atenuăm imaginea.

3. CSS Clip-Trath

Pentru următorul nostru truc, vom folosi o regulă numită clip-path. Când utilizați etichete HTML img, puteți seta o cale care va ascunde părți din imaginile cu care lucrați. Puteți alege să utilizați forme generale pentru aceasta, dar puteți utiliza și o aplicație generatoare de SVG pentru a crea un design mai complicat.

Am adăugat o etichetă div cu „flex_image_box” pentru a acționa ca un container pentru trei imagini, folosind proprietatea display CSS pentru a o transforma într-o flexbox (vom vorbi despre asta mai târziu). Au fost adăugate trei etichete img în interiorul etichetei div, cu ID-urile setate ca „img1”, „img2” și „img3”. Setarea lățimea fiecărei imagini la 600px, putem să lăsați necompletat proprietatea înălțime fără a modifica raportul de aspect al imaginilor; acum este timpul să adăugăm traseul nostru clip!

Pentru a crea cele trei triunghiuri ale noastre, am folosit același traseu poligon pentru img1 și img3, cu o versiune inversată pentru img2. De asemenea, a trebuit să ne jucăm cu poziționarea containerului nostru flex-box pentru a ne asigura că imaginile stau în poziția corectă pe ecran. Regulile noastre de clip-path pot fi văzute mai jos.

4. Opacitatea CSS

Opacitatea stabilește nivelul de transparență al oricărui element HTML. Am stabilit opacitatea imaginilor noastre la 90%, făcându-le ușor opace, astfel încât să se îmbine frumos cu fundalul.

Text și imagini CSS responsive

Am explorat deja arta crearea de site-uri web responsive uimitoare folosind HTML, CSS și JavaScript în trecut, dar ne putem baza pe principiile pe care le înțelegeți deja, oferind o perspectivă mai profundă asupra abilităților de care aveți nevoie pentru a vă stăpâni aspectul site-ului.

1. Unități de răspuns/relative CSS

Unitățile CSS precum px, pt și cm sunt unități absolute, iar acest lucru înseamnă că un browser web le va reda la aceeași dimensiune, indiferent de lățimea și înălțimea ferestrei pe care o ocupă. Unitățile relative sunt diferite, producând înălțimi și lungimi care sunt relativ la alte măsurători, cum ar fi fereastra browserului sau un element părinte. Unitățile relative de mai jos sunt utilizate în mod obișnuit și esențiale pentru designul web receptiv.

• ei: Această unitate este de obicei folosită cu text. Este relativ la dimensiunea fontului elementului curent, făcând 4em de patru ori mai mare decât dimensiunea fontului care este setată.
• rem: La fel ca em, rem este relativ la dimensiunea fontului unui element; elementul rădăcină dintr-o ierarhie este utilizat pentru a defini dimensiunea de ieșire.
• vw/vh: Determinând lățimea și înălțimea în funcție de dimensiunea ferestrei de vizualizare, 2vw este egal cu 2% din lățimea browserului, în timp ce 2vh este egal cu 2% din înălțimea browserului.
• %: unitatea % calculează dimensiunile pe baza dimensiunii părintelui unui element.
• vmin/vmax: Aceste unități produc dimensiuni relativ la 1% din cele mai mici sau mai mari dimensiuni ale ferestrei de vizualizare, oferind elementelor mijloacele de a răspunde direct la dimensiunea unei ferestre de browser.

2. Dimensiunea fontului CSS

Această proprietate poate fi setată folosind valori implicite care sunt predefinite fie de foaia de stil principală a site-ului web, fie de browserul web al utilizatorului. Aceste valori includ mediu, xx-mic, x-mic, mic, mare, x-mari și xx-mari, mediu fiind setat ca implicit pentru orice text care nu are o etichetă CSS de dimensiunea fontului. Alternativ, valorile relative pot fi folosite atunci când se utilizează proprietatea CSS font-size, iar aceasta este metoda pe care am folosit-o pentru a ne asigura că textul din secțiunea antet este dimensionat corespunzător pentru orice fereastra de vizualizare.

Am adăugat două etichete de titlu la HTML-ul nostru, permițându-ne să adăugăm text la proiect. Unul este un antet mare principal, în timp ce celălalt este un subtitlu și ambele folosesc unități relative.

Legate de: Cum se schimbă dimensiunea fontului HTML în CSS

3. Lățimea și înălțimea CSS

Toate elementele HTML vin cu dimensiuni de înălțime și lățime, indiferent dacă sunt div, img, a sau orice alt tip de etichetă. Aceste dimensiuni pot fi setate automat la valorile implicite, dar pot fi dictate și de designerii web folosind regulile corecte; am folosit ambele metode pentru acest antet.

Au fost folosite unități de răspuns pentru imaginea de fundal, cu înălțimea setată la 100vh și lățimea setată la 100vw, dar am folosit și unități absolute pentru cele trei imagini ale noastre. Merită să explorați și să experimentați cu unitățile de lățime și înălțime CSS, cu opțiuni precum „moștenire” care oferă înseamnă să adoptați dimensiunile unui element părinte și există o mulțime de alte trucuri ca acesta pe care le puteți folosi.

4. CSS Mix-Blend-Mode

Modul de amestecare CSS este foarte asemănător cu modul de amestecare de fundal, doar că poate fi aplicat oricărui element, mai degrabă decât să fie exclusiv pentru fundaluri. Am folosit această proprietate pe titlul nostru H1 pentru a adăuga textura și a face proiectul mai interesant. Am început prin a seta culoarea textului în negru, urmat de setarea modul de amestecare pentru a suprapune.

Merită să explorați diferitele opțiuni de amestecare pe care le aveți atunci când aveți de-a face cu text, deoarece fundalurile cu profiluri de culoare unice vor răspunde diferit la setările pe care le utilizați.

5. CSS Text-Transform

CSS text-transform este o proprietate inteligentă care le permite designerilor să schimbe majusculele textului de pe site-urile lor web, fără a afecta modul în care motoarele de căutare îl citesc. De exemplu, avem setați text-transform la majuscule pe titlul nostru H1, făcând fiecare literă majusculă, indiferent de modul în care o introducem în HTML.

Proprietăți CSS Overflow

HTML poate părea adesea ca un cadru rigid care stabilește limite stricte pentru conținutul de pe site-urile dvs. web, dar acest lucru nu este cazul când sunt utilizate proprietăți de overflow.

CSS Overflow și Text-Overflow

Overflow și text-overflow sunt proprietăți CSS foarte asemănătoare. Overflow poate fi aplicat oricărui element, oferindu-vă control asupra conținutului care poate scăpa de limitele acestuia. Text-overflow este similar, deși se aplică doar textului și vă oferă posibilitatea de a adăuga parametri suplimentari regulilor dvs. Am folosit doar overflow pentru acest proiect (l-am folosit pentru a restricționa dimensiunea corpului paginii noastre), dar puteți citi despre text-overflow pe pagina W3Schools site-ul web.

Utilizarea CSS pentru aspectul dvs. web

CSS este un instrument incredibil de puternic, care le permite designerilor și dezvoltatorilor web să creeze site-uri web uimitoare folosind cod. Vă încurajăm să aruncați o privire la CodePen-ul pe care l-am oferit la începutul articolului, deoarece acesta vă va oferi o perspectivă și mai profundă asupra modului în care funcționează toate aceste instrumente. În plus, vă puteți juca cu antetul pe care l-am creat pentru a adăuga propriile voastre finisaje.

8 sfaturi și trucuri esențiale CSS pe care fiecare dezvoltator ar trebui să le cunoască

Folosiți aceste metode cheie CSS pentru un flux de lucru rapid și un design web frumos?

Citiți în continuare

Despre autor