Come si fa?? :D
vorrei semplicemente smussare gli angoli dei div senza usare immagini..
Printable View
Come si fa?? :D
vorrei semplicemente smussare gli angoli dei div senza usare immagini..
con le immagini: http://css.html.it/articoli/leggi/28...ati-con-i-css/
senza immagini con o senza javascript: http://webdesign.html.it/articoli/le...enza-immagini/
C'è anche la soluzione puramente CSS. Però, per adesso, funziona solo su Firefox, Safari e Chrome:
Codice:.miaclasse {
-moz-border-radius: 3px; /* Per firefox */
-webkit- border-radius: 3px; /* Safari e Chrome*/
border-radius: 3px; /* Standard CSS */
}
Solo CSS ci sono quelle proprietà, mentre puoi fare con delle immagini leggere leggere:
CSS:
Immagini:Codice:.corner_post_top {
background: #fff url(images/white/corners/post_top.gif) repeat-x top center;
}
.corner_post_bottom {
background: url(images/white/corners/post_bottom.gif) repeat-x bottom center;
}
.corner_post_right {
background: url(images/white/corners/post_right.gif) repeat-y top right;
}
.corner_post_left {
background: url(images/white/corners/post_left.gif) repeat-y top left;
}
.corner_post_top_right {
background: url(images/white/corners/post_top_right.gif) no-repeat top right;
}
.corner_post_top_left {
background: url(images/white/corners/post_top_left.gif) no-repeat top left;
}
.corner_post_bottom_left {
background: url(images/white/corners/post_bottom_left.gif) no-repeat bottom left;
}
.corner_post_bottom_right {
background: url(images/white/corners/post_bottom_right.gif) no-repeat bottom right;
padding: 15px;
}
http://rapidshare.com/files/216609733/corners.rar.html
Codice per utilizzarli:
Io ho questi angoli, nel caso puoi cambiarli con le immagini che vuoi :wink:Codice HTML:<div class="corner_post_top">
<div class="corner_post_bottom">
<div class="corner_post_right">
<div class="corner_post_left">
<div class="corner_post_top_right">
<div class="corner_post_top_left">
<div class="corner_post_bottom_left">
<div class="corner_post_bottom_right">
<!-- CONTENUTO -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>