CSS  »  Articoli  »  Effetti con CSS 

Questa è la traduzione dell'articolo 3 Easy and Fast CSS Techniques for Faux Image Cropping di Alen Grakalic pubblicato originariamente su CSS Globe il 7 Settembre 2009. La traduzione viene qui presentata con il consenso dell'editore e dell'autore.

Questo articolo presenta la sintesi di tre tecniche facili e veloci che consentono di mostrare solo una porzione di un'immagine nel contesto dei vostri contenuti. Tutte le tecniche possono essere implementate con poche righe di CSS. Tuttavia, non si tratta di cropping nel senso vero della parola, non si taglia un'immagine a certe dimensioni (con i CSS non si può fare). Semplicemente nascondiamo la parte che non ci serve dell'immagine per mostrare solo quella che ci interessa.

Ecco perché preferisco parlare di falso cropping di immagini. Queste tecniche possono essere molto utili se avete bisogno di mantenere un'immagine a dimensioni fisse o prefissate (per esempio per le classiche miniature). Usare solo i CSS per ottenere questo risultato e scegliere quale porzione dell'immagine mostrare può essere un grande bonus in certe circostanze.

Tecnica 1 - Usare i margini negativi

Con questa tecnica l'immagine ha bisogno di essere posizionata all'interno di un elemento parente, nel nostro caso un paragrafo. Il paragrafo deve essere un elemento float (o impostato ad una certa dimensione in larghezza tramite width). Questa tecnica non funziona su elementi blocco a larghezza piena.

Figura 1 - margini negativi

Impostiamo i margini negativi per tutti i quattro lati: top, right, bottom e left. I margini negativi definiscono come e quanto l'immagine sarà portata in ciascuna direzione lasciando solo una parte all'interno dell'elemento parente. Quando impostiamo la proprietà overflow per l'elemento parente sul valore hidden, nascondiamo l'area che è esterna all'elemento parent e otteniamo il risultato desiderato. Per ottenere in maniera precisa l'effetto desiderato sarà necessario giocare un po' con i valori dei margini.

Questo il codice HTML:

<p class="crop"><a href="http://templatica.com" title="Css Templates"><img src="img.jpg" alt="css template" /></a></p>

E questo il codice CSS:

.crop{
	float:left;
	margin:.5em 10px .5em 0;
	overflow:hidden; /* this is important */
	border:1px solid #ccc;
	}
	/* input values to crop the image: top, right, bottom, left */
.crop img{
	margin:-20px -15px -40px -55px;
	}

Potete vedere tutto in azione in questa demo.

Altri articoli

Altre guide

Altre newsletter