arrotondamento fotografie con css

laboo

arrotondamento fotografie con css

Ciao a tutti
esiste un modo per arrotondare gli angoli di un'immagine con css.
Ovvero: caricare una foto quadrata e renderne gli angoli arrotondati con css?

ho cercato e ricercato, ma senza successo

grazie

gennyx

Ciao laboo non credo che ci siano css che ti arrotondano le foto

karedas

Si più o meno esiste un metodo ma chiariamoci:

le foto dovranno essere posizionate su uno sfondo a tinta unita.
Devi disegnarti gli angoli arrotondati.

**Come fare:
**1) apri un programma come photoshop o fireworks della macromedia (o altri se ne hai e possono fare cosa ti elenco).
Crei 4 angoli arrotondati dello stesso colore dello sfondo su cui vai a posizionare le tue foto. Dagli 4 nomi diversi come "ang_tl" , "ang_tr" (angolo top left, angolo top right ecc") in modo da distinguerli e richiamarli.
Ricordati che questi quattro angoli devono avere una zona TRASPARENTE (alpha) la dove l'angolo della foto si deve visualizzare , quindi al salvataggio imposta il canale alpha.
Dagli una dimensione width e height identica (nel nostro esempio è di 13px * 13px).

Salvali in .png tutti e 4.

Adesso l' html è questo:

[html]<div class="foto">
<div class="f_topleft"></div>
<div class="f_topright"></div>
<img src="pathfoto/foto.jpg" alt="" />
<div class="f_botleft"></div>
<div class="f_botright"></div>
</div>
[/html]*** all'attributo "src" del tag "img" nonchè della tua foto, ci dovrà andare appunto il path della tua foto***
Il css invece è questo, ricordati di richiamarlo nell'html tra i tag "head":

[html]
<style type="text/css">
.foto{position:relative;float:left;}
.foto img{float:left}

.f_topleft,.f_topright,.f_botleft,.f_botright{
    position:absolute;
    width:13px;
    height:13px;
    
}
.f_topleft{top:0px;left:0; background: url('path1') no-repeat;}
.f_topright{top:0;right:0; background: url('path2') no-repeat;}
.f_botleft{bottom:0;left:0; background: url('path3') no-repeat;}
.f_botright{bottom:0;right:0;background: url('path4') no-repeat; }

</style>
[/html]Al posto di "path1,path2,path3,path4" dovrai mettere i percorsi dei 4 angoli , uno per ogni sua zona.

Ora l'ultimo passo anche se non sono sicuro della sua funzionalità.
Essendo il canale alpha non supportato gradevolmente da internet explorer versione precedente alla 7, devi inseruire un javascript anch'esso richiamato tra il tag "head":

lo script è questo, preso non ricordo dove =P :

function correctPNG() 
   {
   for(var i=0; i<document.images.length; i++)
      {
      var img = document.images*
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
         {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText 
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle        
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
         + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
         + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
         img.outerHTML = strNewHTML
         i = i-1
         }
      }
   }
window.attachEvent("onload", correctPNG);
```Ricordati e stai attento all'inserimento e al richiamo del css e del javascript sennò naturalmente nn funzionerà niente.

Non l'ho provato cn le immagini pgn, il resto mi funziona.
Per il resto sono stato piuttosto rapido nella descrizione , nn ho in questo momento molto tempo. 

Quindi auguri! :vaiii:

laboo

Ciao
ottimo codice, ma in ie 6, al di la delle png (si possono usare anche gif), vengono posizionati erroneamente gli angoli e il sistema salta..

karedas

Aggiungi la proprietà "overflow:hidden" al css in questa dichiarazione: ".f_topleft,.f_topright,.f_botleft,.f_botright{} e funziona perfettamente anche in IE6. L'ho provato su tutti i browser disponibili e nn da problemi.
Certo che si può usare la gif , ma essendo questo un formato datato 1987 sfrutta una tecnologia vecchiotta basata su una qualità di risoluzione e di colore abbastanza drammatica (solo 256 colori) il che potrebbe rendere i tuoi angoli poco delimitati. Puoi usare il diterhing però rischi di creare un effetto ancor peggiore.

misterwo

fossi in te userei img già con angoli tondi...te le tagli e te le impagini...

karedas

La dinamicità e versatilità delle cose deve permettere anche a utenti che non vogliono mettere mano sul codice di usufruire di certi accorgimenti senza fatica.
Se devi vendere un prodotto ad un cliente che vuole ad esempio avere un cms con le immagini che si arrotondano da sole, attraverso questi piccoli accorgimenti puoi dargli la possibilità di farlo.

Anche perchè un conto sono 3 foto, non sto nemmeno io a perderci tempo, un conto sono decine e decine di foto.

Poi per esempio, non tutti sono abili nell'uso di maschere e quant'altro su photoshop

misterwo