CSS  »  Articoli  »  Effetti con CSS 

Spesso si ha la necessita di accompagnare un'immagine da un testo descrittivo e ci si trova davanti al dilemma della scelta implementativa. Di recente si sta diffondendo la tendenza a usare didascalie semitrasparenti che si sovrappongono alla parte inferiore dell'immagine. Ecco una piccola anteprima di uno degli esempi realizzati.

Figura 1 - Screenshot dell'esempio

Ottenere un'effetto simile è piuttosto facile grazie ai CSS e alle PNG semitrasparenti. Vedremo in questo articolo due esempi per immagine singola e uno per le gallerie di immagini. Cominciamo.

Didascalie semitrasparenti su immagini singole

Il nostro primo esempio rappresenta un link con una singola immagine e didascalia semitrasparente. Anzitutto, vediamo il codice HTML:

In sostanza, all'interno del div con classe "captionbox" viene inserito il link, che contiene l'immagine e uno span con la descrizione. Prima di procedere con il CSS, ecco l'unica immagine che viene usata come sfondo per la didascalia.

Figura 2 - Immagine PNG semitrasparente per la didascalia

È un'immagine PNG semitrasparente alta 250px e larga 20, dal peso veramente ridotto (solo 291 bytes!). È costituita da cinque bande orizzontali alte 50 pixel ciascuna con due toni di grigio, due di azzurro e uno di bianco. L'utilizzo di un'immagine simile, presa in prestito da Yahoo!, consente di ottenere didascalie semitrasparenti di 5 diversi colori, oltre che un bell'effetto rollover solo intervenendo sulla posizione dello sfondo.

Procediamo ora con il CSS. Per prima cosa il div esterno verrà reso float per far sì che assuma una larghezza adatta al suo contenuto; verranno regolati i margini e assegnato un bordo fine.

Il link verrà reso float anch'esso e posizionato relativamente per permettere i posizionamenti assoluti al suo interno, mentre l'immagine sarà resa block-level.

Lo span, ovvero la parte più importante dell'esempio, verrà posizionato assolutamente all'interno del link al fondo dello stesso e avrà una larghezza pari al 100%. Verrà poi assegnata l'immagine di sfondo da ripetere orizzontalmente, mostrando la porzione tonale che ci interessa. In fase :hover del link tale porzione potrà essere cambiata così da consentire un rollover grafico solo intervenendo sul background-position.

Queste le parti essenziali del CSS dell'esempio, che ora possiamo vedere per intero:

Tutto qui. Cinque semplici regole che consentono un effetto molto accattivante e funzionale.

Altri articoli

Altre guide

Altre newsletter