Newsgroup: it.comp.www.html
Titolo: Div con angoli smussati, ok e le immagini come si smussano?

Ho trovato un codice per smussare gli angoli di un div
#myElement {
    background: #EEE;
    padding: 2em;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
}
Ora se voglio mettere una foto in questo div come faccio a far si che anche
gli angoli della foto siano smussati (provato con un div esistente con
dentro una foto ma non funziona, il div si vede smussato - infatti ha un
bordo che scompare dietro gli angoli della foto - ma la foto è sempre
rettangolare)
grazie
--
Newsgroup robomoderato - gli articoli vengono approvati automaticamente


Lo smusso è css3 e non tutti i browser lo supportano.
leo


11/02/11 
17.02l...@libero.it
[IND][ART]

Ma il codice di cui sopra smussa solo il div o anche l'immagine in esso
contenuta?
Se nel div metto l'immagine desiderata come sfondo come faccio poi a creare
un link ad un effetto tipo lightbox per far ingrandire l'immagine?
grazie


 l'immagine?
Ci metti un <a> con display:block, width e height 100%.
Bye.



No no, che bye, asp�, spiegami meglio 'sta cosa, io ho gi� il div con dentro
l'immagine (
www.caprileisure.com/indexita.html
 � una pagina di prova, non
badarci), ora ci clicco e parte l'effetto lightbox, se invece tolgo
l'immagine, la metto come sfondo del div (no repeat etc) con bordo
arrotondato (sempre che poi gli angoli non escano dal bordo del div), come
faccio ad ottenere l'effetto lightbox?
Ciao e grazie


 come faccio ad ottenere l'effetto lightbox?
Se ti interessa solo il lightbox, non ti serve nemmeno l'a, ti basta
<div style="width: x; height: y; background-image: blabla/small.jpg;">
</div>
e poi metti un onclick sul div.
Se vuoi che funzioni anche senza js, e` quasi lo stesso:
<div style="width: x; height: y; background-image: blabla/small.jpg;">
 <a style="display:block; width:100%; height: 100%;" href="big.jpg"> </a>
</div>
In questo modo l'a occupa tutto il div e quando lo clicchi vai 
sull'immagine grande.
Ma ripeto: non ho mai provato a smussare le immagini, quindi YMMV. ;)
Bye.


 Bye.
Allora Alessandro, approfitto della tua pazienza e disponibilità per cui ti
chiedo, se possibile, un'ulteriore aiuto.
Il css è un file separato, ho fatto come dicevo sopra, ho messo la miniatura
come sfondo del div
<div id="giovanni"></div>
Le regole applicate al div sono le seguenti
#giovanni {
 
float: left;
 
height: 160px;
 
width: 120px;
 
background-image: url(../Immagini/giovanni.jpg);
background-repeat: no-repeat;
background-position: center center;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
margin-right: 8px;
margin-left: 8px;
 
border-radius: 15px;
E il risultato è questo
http://caprileisure.com/indexita.html
Ora, se voglio applicare di nuovo l'effetto lightbox cliccando sull'immagine
che fa da sfondo al div come faccio?
Scusa la lungaggine e grazie mille
Giovanni


 sull'immagine che fa da sfondo al div come faccio?
Intanto complimenti per il sito, mi piace lo stile minimal.
Solo che io ridurrei un po' l'altezza dell'header, allargherei il sito a 
900-960 pixel e aumenterei di un paio di pixel le dimensioni dei font.
Per fare il lightbox ti serve un lightbox. Non e` una cosa "standard" di 
HTML e CSS.
Per esempio, se usi jQuery, puoi usare questo:
http://leandrovieira.com/projects/jquery/lightbox/
Bye.


 900-960 pixel e aumenterei di un paio di pixel le dimensioni dei font.
Completamente OT ma ricordati di aggiungere la P.Iva in home page ;-)


 Newsgroup robomoderato - gli articoli vengono approvati automaticamente
Grazie mille per i suggerimenti e per gli apprezzamenti
Giovanni


 Completamente OT ma ricordati di aggiungere la P.Iva in home page ;-)
Ok, ce la aggiungerò, se riesco ad ottenere un layout come descritto qui
http://www.webdesignerwall.com/tutorials/how-to-css-large-background/
Tolgo quella cornice che scorre in basso e ai due lati e rendo il footer più
leggibile inserendoci anche la partita IVA
Grazie per l'apprezzamento e per il suggerimento!
Ah, il sito me lo sono fatto da solo, un'amica aveva bisogno di creare una
semplice pagina per la sua attività, le suggerii siti con esempi e layout da
imitare e lei ne scelse uno per niente facile da replicare, insomma, dal suo
poi presi spunto per il mio, niente di originale quindi ma mi sono
applicato, partendo da zero, per cercare di ottenere un risultato decente ma
la strada è ancora lunga...
