Cum să construiești un card profesional cu bare de progres în HTML și CSS
Un card interactiv cu abilități și bare de progres este o componentă excelentă pentru portofolii, CV-uri digitale sau dashboard-uri personale. Cu ajutorul HTML și CSS, putem crea o structură clară, responsivă și vizuală ce arată competențele într-un mod profesionist.
Structura HTML a cardului
Markup-ul HTML se bazează pe o serie de elemente grupate logic:
- Un container principal ce definește cardul cu clasa
.ib-card - Un header pentru titlul secțiunii, cu elementul
h4.ib-card-title - O listă de abilități (
ul.ib-skill-list), fiecare conținând un nume și o bară de progres - Procentul este afișat vizual printr-un tag (
span) cu lățimea dinamică și o etichetă numerică
HTML-ul este simplu și semantic, iar fiecare element are o clasă dedicată pentru stilizare ulterioară.
Fundamentele CSS: stilizare generală
Fișierul CSS pornește de la o structură de bază:
- Resetarea marginilor cu
box-sizing: border-boxpentru consistență - Un font generic și fundal gri pentru pagina web
- Coloane responsive ce se ajustează în funcție de dimensiunea ecranului (cu media queries)
Această abordare asigură o compatibilitate bună pe dispozitive mobile, tablete și desktop.
Designul cardului și al conținutului
Cardul este stilizat cu:
- Un fundal alb și colțuri rotunjite pentru aspect modern
- O umbră subtilă care creează profunzime
- Paddings echilibrate pentru spațiere internă
Secțiunea .ib-card-header conține titlul, iar .ib-card-body lista de skill-uri stilizate cu spațiu și aliniere verticală.
Bare de progres și etichete
Structura vizuală
Bara de progres are o înălțime redusă și o culoare de fundal discretă. În interior, .ib-progress este elementul care se extinde pe orizontală în funcție de procent. Stilul include:
- Colțuri rotunjite și tranziție lină la schimbarea dimensiunii
- Etichetă poziționată absolut deasupra cu procentul (
.ib-progress-label)
Culori personalizabile
Există clase CSS dedicate pentru culori: .bg-primary, .bg-warning, .bg-info, etc. Acestea sunt folosite atât pentru culoarea barei, cât și pentru etichetă și vârful triunghiului decorativ generat cu ::after.
Aspecte responsive și reutilizare
Clasa .ib-col-lg-4 oferă flexibilitate la scalarea cardului, iar stilurile media fac componenta adaptabilă în layouturi grid sau flex. În plus, structura permite reutilizarea în diverse contexte: dashboard, profil personal, CV interactiv, etc.
Sugestii pentru extindere
- Adaugă animații la încărcarea cardului cu
fade-in - Integrează un dark mode prin toggle
- Activează tooltips pentru detalii extra despre skill
- Folosește JavaScript pentru a genera skill-uri dinamic din JSON
Aceste îmbunătățiri transformă un simplu card într-o componentă interactivă și sofisticată.
Concluzie
Cardul profesional cu bare de progres este o soluție elegantă și funcțională pentru afișarea competențelor. Cu HTML simplu și CSS modular, designul poate fi ușor adaptat și extins. Este ideal pentru orice dezvoltator sau designer care dorește să creeze un portofoliu atractiv și informativ. Descarcă arhiva
Fii primul care comenteaza!