Se avete delle belle immagini da inserire nei post, è anche bello inserirle con un effetto tipicamente Web 2.0 come quello dropshadow, ovvero l’ ombra che vedete sui lati inferiore e destro di tutte le immagini di questo blog. Ottenere questo effetto è davvero molto semplice. Tutto quello di cui c’è bisogno è qualche riga di css e l’ immagine ombra.
Scaricate questa immagine: ombra e sistematela nella cartella image del vostro tema.
Poi aprite il file style.css del vostro tema e aggiungete:
.entry img {
background: url(images/shadow.gif) no-repeat right bottom;
padding: 4px 10px 10px 4px;
border-top: #eee 1px solid;
border-left: #eee 1px solid;
}
Già fatto! Semplice e veloce questo trucchetto per aggiungere un bell’ effetto alle vostre immagini!
Altri articoli che potrebbero interessarti:
Effetto Page Peel – Come arricciare la pagina
Loading ...
Marco (11 comments)
L’immagine non si riesce a scaricare (shadows.gif). Poi una domanda: che plugin utilizzi per far ingrandire le immagini in quel modo? grazie!
nemoprincess (186 comments)
@Marco – Grazie Marco per la segnalazione, effettivamente l’ immagine si apriva ma non si riusciva poi a salvarla, ora è compressa in un file rar e si scarica senza problemi.
Il plugin che uso per le immagini è Lightbox2
Albachiara (2 comments)
.entry img {
background: url(images/shadow.gif) no-repeat right bottom;
Messo in fondo non funziona !
Albachiara (2 comments)
Chiedo scusa il mio URL url(images/shadow.gif) no-repeat right bottom; era diverso !
Grazie per l’effetto
nemoprincess (186 comments)
Figurati Albachiara, l’ importante è che tu abbia risolto!
Ignazio (3 comments)
Ciao
post interessante sai dirmi dove posizionare lo script nel foglio di stile?
Ho provato ma senza successo
nemoprincess (186 comments)
Ciao Ignazio, il codice puoi metterlo dove vuoi all’ interno del foglio di stile.
Può darsi che il tuo tema non identifichi l’ immagine con la classe “entry”, devi quindi controllare qual è la classe delle immagini dei post e sostituirne il nome, o nel tema o nel codice.
Spero di essere stata più chiara…
Ignazio (3 comments)
Ciao
sempre gentile,nel tema che utilizzo le sezioni entry sono:
.entry p a:visited
.entry ol
.entry ol li
.postmetadata ul,
.postmetadata li
Le ho provate tutte ha sostituire il nome sia al codice,che al tema ma senza successo, forse e il tema che non lo riconosce oppure sbaglio io, comunque tante grazie
nemoprincess (186 comments)
Ciao Ignazio,
fai così allora, guarda il codice sorgente di una pagina che contiene un’ immagine in un post e identifica la classe a cui è associata, ci sarà qualcosa del tipo:
< img class oppure id="questo è il nome della classe o del div che puoi sostituire nel foglio di stile">
Fammi sapere poi…
Ignazio (3 comments)
Ho provato diverse volte ma senza successo,
questo:< img class oppure id=" lo trovo nelle immagini dei post ma non nel foglio di stile
forse e´ il tema che non lo ha boh.Sara´ cosi?
Ti ringrazio ugualmente.