Imagini rotunde cu CSS3 – avatar sau thumbnail rotund

CSS3 este acum recunoscut de toate browserele de ultimă generație. De ce să nu aplici efecte de design, CSS3 precum imagini rotunde sau altele? Efectul pentru imagini rotunde chiar îl consider o inovaţie. Am vazut implementat efectul pe siteuri din exterior, nu am mai văzut pe site-uri românești şi nici nu cred că voi vedea prea curând. Bine, dar hai să vedem cum putem face imagini rotunde sau un thumbnail rotund.

În primul rând vezi cum îţi generezi thumbnail-ul. Eu personal folosesc plugin-ul wordpress Get The Image, dar desigur mai sunt şi alte opţiuni pentru a genera un thumbnail, o imagine descriptivă pentru articol, din articol! În acest articol nu te pot lămuri cu generatul de astfel de imagini tip thumbnail.

Realizează efect imagini rotunde cu CSS3 în 2 pași

thumbnail-rotundPasul 1 – Adaugi un class nou la viitoarea ta imagine rotunda. Poți folosi un class deja existent și în style.css îi adaugi atributele noi, precum în exemplul de mai jos.

Pasul 2 – Editezi style.css și adaugi atributele și valorile pentru efectul CSS3 imagini rotunde.

.rotund {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}

Pentru a înțelege efectul îți spun că atributul este pentru radius la margini. Punând 50% și nu valoare în px sau altfel, benefiziezi de o generalizare de 50% ce crează efectul de cerc (daca toate colțurile sunt rotunjite 50%, înseamnă că elementul devine cerc).

Dacă nu ai un class unic la toate imaginile, și ca să nu efitezi prea mult adăugând un class nou la tiate imaginile, poți aplica efectul imagine rotundă la mai multe class-uri, precum în exemplu de mai jos:

.rotund, .thumbnail, .imagine-rotunda {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}

Să-mi lași URL la site-ul tău să văd cum arată efectul imagini rotunde aplicat la tine.

Articol etichetat cu:

Ganduri si impresii pentru "Imagini rotunde cu CSS3 – avatar sau thumbnail rotund":

  1. Bogdan Cristescu XYZ

Care este gandul tau?