Immagini con angoli arrotondati

[Fello]

Ciao a tutti, posso tramite i css ottenere imagini con i bordi arrotondati?

Io pensavo ad esempio di usare i livelli con opportuni z-index:
al livello più basso potrei mettere la classica immagine rettangolare, e sopra un livello che mi consenta di coprire gli angoli.

E' una cosa che si può fare?
Potete darmi una mano?

[Mich_]

E` una domanda cui hanno risposto fior-fiore di persone.

La soluzione verra` con i CSS3, ma per intanto ci sono due tipi di soluzione: div innestati e nifty corners. Fai una ricerca in questo forum con "angoli arrotondati" o sul sito di HTML.it con "nifty corners"

[GreyFox86]

Concordo appieno con la tua soluzione per i Nifty Corners. E' js estremamente potente e versatile.

Nifty Corners (articolo su html.it)

[The knight]

Guarda questo thread http://forum.html.it/forum/showthrea...hreadid=972972
credo che vuoi ottenere lo stesso effetto che voglio io, dacci un occhio, così ne discutiamo

[Fello]

io ho risolto in questo modo:
nell'HTML:

<div id="contenitore">
<div id="immagine">[img]images/cielo.gif[/img]</div>
<div id="angoli">[img]images/arrotondati.gif[/img]</div>
</div>

nel CSS:

body
{
background-color:#FFD904;
}

#contenitore
{
position:relative;
width:300;
height:180px;
}

#immagine
{
z-index:1;
position:absolute;
left:0px;
top:0px;
width:300;
height:180px;
}

#angoli
{
z-index:2;
position:absolute;
left:0px;
top:0px;
width:300;
height:180px;
}

dove il div immagine contiene la foto vera e propria e il div angoli contine una gif con gli angoli arrotondati dello stesso solore dello sfondo e il centro trasparente, in questo modo ottengo l'effetto voluto!

[The knight]

Originariamente inviato da Fello
io ho risolto in questo modo:
nell'HTML:

<div id="contenitore">
<div id="immagine">[img]images/cielo.gif[/img]</div>
<div id="angoli">[img]images/arrotondati.gif[/img]</div>
</div>

nel CSS:

body
{
background-color:#FFD904;
}

#contenitore
{
position:relative;
width:300;
height:180px;
}

#immagine
{
z-index:1;
position:absolute;
left:0px;
top:0px;
width:300;
height:180px;
}

#angoli
{
z-index:2;
position:absolute;
left:0px;
top:0px;
width:300;
height:180px;
}

dove il div immagine contiene la foto vera e propria e il div angoli contine una gif con gli angoli arrotondati dello stesso solore dello sfondo e il centro trasparente, in questo modo ottengo l'effetto voluto!

quello che vorrei fare anchio, solo che non posso utilizzare il posizionamento assoluto ma quello relativo, che funzionerebbe se l'immagine non si ripetesse....la tua è un'immagine statica immagino ?

[Fello]

Ciao The knight, io in effetti uso un'immagine statica delle stesse dimensioni della foto vera e propria.

Tu invece da quanto mi ricordo di averletto nella discussione che mi hai segnalato non puoi usare i livelli assoluti perchè non conosci a priori la lunghezza del testo che conterrà....giusto?

[The knight]

Originariamente inviato da Fello
Ciao The knight, io in effetti uso un'immagine statica delle stesse dimensioni della foto vera e propria.

Tu invece da quanto mi ricordo di averletto nella discussione che mi hai segnalato non puoi usare i livelli assoluti perchè non conosci a priori la lunghezza del testo che conterrà....giusto?

Non per questo, perchè potrei usare immagini tutte uguali, il problema è che essendo un blog ho un sacco di immagini che si ripetono tutte ad altezze diverse, infatti il posizionamento relativo andrebbe bene, solo che si crea uno spazio tra un'immagine e l'altra delle dimensioni del layer che uso per i bordi....quindi se ho un'immagine di 300 px in altezza, tra un immagine e l'altra avrai 300 px di spazio

[Fello]

puoi postare qui o in PVT un link, in modo tale che io possa focalizzare meglio la tua situazione?