Cum să construiești un card profesional cu bare de progres în HTML și CSS

Publicat pe: 29 Jul 2025 | 392 vizualizări | ~3 min. lectură

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-box pentru 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