Colțurile rotunjite au reprezentat multă vreme o provocare în web design, în special în cazul imaginilor. Cu ajutorul proprietăților CSS moderne, poți rotunji colțurile rapid și elegant, fără bătăi de cap.
Avem următorul cod HTML:
[html]
<span class="coltrotund" style="background-image: url(imagine.jpg)">
<img src="imagine.jpg" alt="Imagine">
</span>
[/html]
Și următorul cod CSS asociat:
[css]
.coltrotund {
float: left;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: #000 0 2px 10px;
-moz-box-shadow: #000 0 2px 10px;
box-shadow: #000 0 2px 10px;
}
.colrotund img {
opacity: 0;
}
[/css]
Gata! În acest fel obții imagini cu colțuri rotunjite, aplicabile simplu în orice pagină web.
