Quando si parla di web design, una grafica accattivante può fare la differenza. Le immagini giocano un ruolo fondamentale nel creare un’esperienza utente coinvolgente e memorabile.
Ma come si fa a trasformare le immagini da ordinarie a straordinarie? È qui che entra in gioco lo styling delle immagini. Con la potenza dei CSS a portata di mano, potrete liberare la vostra creatività e trasformare le immagini in elementi visivi accattivanti che lasciano un’impressione duratura.
In questo articolo ci immergeremo nel mondo dello stile delle immagini CSS, esplorando molte tecniche e proprietà che porteranno le vostre capacità di web design a nuovi livelli.
Come aggiungere immagini in HTML
Prima di poter modellare un’immagine, è necessario aggiungerla al proprio documento HTML. Per farlo, potete utilizzare il tag <img>. Il tag <img> è un tag auto-chiudente (non richiede un tag di chiusura). Ha un attributo src che specifica l’URL o il percorso del file dell’immagine che volete visualizzare.
<img src="image.jpg" alt="Description of the image">Potete anche fornire un URL assoluto o un percorso di file relativo all’immagine.
<img src="https://source.unsplash.com/tMHAmxLyzvA" alt="Boston city skyline">L’attributo alt indica un testo alternativo ed è essenziale per l’accessibilità. Il tag <img> prevede anche due attributi opzionali: width e height. Questi attributi permettono di specificare le dimensioni dell’immagine in pixel.
<img src="image.jpg" alt="Description of the image" width="300" height="200">Tuttavia, in genere si consiglia di evitare di utilizzare gli attributi width e height a meno che non sia necessario mantenere dimensioni specifiche dell’immagine. Al contrario, si possono utilizzare i CSS per controllare le dimensioni dell’immagine, ottenendo una maggiore flessibilità nel design reattivo.
img {
height: 200px;
width: 700px;
}Responsive Image Styling
L’applicazione di valori specifici per gli attributi width e height a un’immagine può portare a conseguenze indesiderate, come la compressione o la distorsione dell’immagine. Questo è particolarmente vero se le dimensioni specificate non corrispondono al rapporto d’aspetto originale dell’immagine.
Per evitare questi problemi e mantenere le giuste proporzioni dell’immagine, entra in gioco il responsive image styling, o stile reattivo dell’immagine. Il responsive image styling assicura che le immagini si adattino alle diverse dimensioni dello schermo, il che è fondamentale per il web design reattivo.
Potete ottenere questo risultato utilizzando la proprietà max-width, che limita la larghezza massima di un’immagine.
img {
max-width: 100%;
height: auto;
}
È anche possibile utilizzare le media queries per modificare lo stile dell’immagine in base ai diversi breakpoint del dispositivo. Le media queries permettono di applicare regole CSS specifiche in base alle dimensioni dello schermo, all’orientamento e ad altre caratteristiche del dispositivo. Ad esempio:
@media screen and (max-width: 600px) {
.my-image {
max-width: 50%;
}
}Usare Object-Fit per mantenere il rapporto d’aspetto ed evitare il rimpicciolimento
A volte, ci sono scenari in cui è necessario specificare una larghezza e un’altezza specifiche per un’immagine. In questi casi, si può utilizzare la proprietà CSS object-fit per controllare il comportamento dell’immagine all’interno delle dimensioni specificate.
La proprietà object-fit permette di specificare come un’immagine debba adattarsi al suo contenitore mantenendo il suo rapporto di aspetto. Può assumere diversi valori, come ad esempio:
- fill: Questo valore allunga o schiaccia l’immagine per adattarla esattamente al suo contenitore, causando potenzialmente una distorsione.
- contain: Questo valore ridimensiona l’immagine in modo proporzionale per adattarla al contenitore senza ritagliarla, mantenendo il rapporto d’aspetto. Assicura che l’intera immagine sia visibile all’interno del contenitore, con possibili spazi vuoti.
- cover: Questo valore ridimensiona l’immagine in modo proporzionale per coprire il contenitore mantenendo il rapporto d’aspetto. Potrebbe comportare il ritaglio dei bordi dell’immagine per garantire il riempimento dell’intero contenitore.
- none: Questo valore non applica alcun ridimensionamento o ritaglio e l’immagine manterrà le sue dimensioni originali, potenzialmente riempiendo il contenitore.
Ecco un esempio di utilizzo della proprietà object-fit:
img {
width: 300px;
height: 300px;
object-fit: cover;
}Creare immagini con angoli arrotondati con i CSS
L’aggiunta di angoli arrotondati alle immagini può conferire loro un aspetto più morbido e gradevole alla vista.
Con i CSS si può ottenere facilmente questo effetto applicando la proprietà border-radius all’immagine.
Ecco come creare immagini con angoli arrotondati:
img {
border-radius: 10px;
}Nell’esempio precedente, abbiamo impostato la proprietà border-radius su 10px. Regolate il valore a vostro piacimento per controllare la rotondità degli angoli. Questo valore può utilizzare le unità di misura che preferite come rem, percentuale, ecc.
Creare immagini circolari con i CSS
Per rendere le immagini perfettamente circolari, combinate la proprietà border-radius con dimensioni uguali di larghezza e altezza.
Ecco come creare immagini circolari:
img {
border-radius: 50%;
width: 200px;
height: 200px;
}Nell’esempio precedente, la proprietà border-radius è impostata su 50%, che crea un cerchio rendendo la curva del bordo pari alla metà della larghezza o dell’altezza dell’immagine.
Potete anche utilizzare la proprietà clip-path. Questa proprietà permette di definire un percorso di ritaglio per un elemento, creando forme uniche.
Ecco un esempio di immagine ritagliata in un cerchio:
img {
clip-path: circle(50%);
width: 200px;
height: 200px;
}Centrare le immagini con i CSS
Allineare le immagini al centro del loro contenitore è una pratica comune nel web design. Ci sono molti modi per ottenere questo risultato; uno è quello di impostare la proprietà display dell’immagine a block e applicare margin: 0 auto, che centra orizzontalmente l’immagine nel suo contenitore.
img {
display: block;
margin: 0 auto;
width: 700px;
}
Creare immagini trasparenti
È possibile utilizzare i CSS per applicare l’effetto di trasparenza desiderato e rendere un’immagine trasparente. La proprietà opacity permette di controllare il livello di trasparenza di un elemento, comprese le immagini.
Un valore di 1 rappresenta la completa opacità (completamente visibile), mentre 0 rappresenta la completa trasparenza (completamente invisibile).
img {
opacity: 0.5;
}Nel codice sopra riportato, l’opacità dell’immagine è impostata su 0.5, ottenendo così un effetto di semitrasparenza. Potete regolare il valore di opacità per ottenere il livello di trasparenza desiderato.
Inserire il testo nelle immagini
L’inserimento di testo sulle immagini può creare design visivamente accattivanti e informativi. Per posizionare il testo sopra un’immagine, si può utilizzare una combinazione di posizionamento CSS e z-index.
Ecco un esempio:
// HTML
<div class="image-container">
<img src="https://source.unsplash.com/tMHAmxLyzvA" alt="Boston city skyline" >
<div class="image-text">Welcome to Kinsta</div>
</div>
// CSS
.image-container {
position: relative;
}
.image-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
color: white;
font-size: 20px;
font-weight: bold;
}Nel codice qui sopra, image-container div funge da contenitore sia per l’immagine che per la sovrapposizione del testo. La proprietà position: relative viene applicata al contenitore per stabilire un contesto di posizionamento. La classe image-text viene poi utilizzata per posizionare il testo in modo assoluto all’interno del contenitore utilizzando position: absolute e le proprietà top, left e transform per centrarlo. La proprietà z-index assicura che il testo appaia sopra l’immagine ed è possibile personalizzare ulteriormente l’aspetto del testo con il colore, la dimensione e il peso del carattere.
Tenete presente che i valori specifici di posizionamento e lo stile possono essere modificati in base alle vostre preferenze e ai vostri requisiti di progettazione.
Capovolgere le immagini: Creare effetti speculari
Capovolgere le immagini può aggiungere un interessante elemento visivo al vostro web design. Sia che vogliate creare un effetto speculare o capovolgere un’immagine in verticale o in orizzontale, i CSS forniscono semplici tecniche per ottenere questo effetto.
Capovolgimento orizzontale
Per capovolgere orizzontalmente un’immagine, si può utilizzare la proprietà transform con la funzione scaleX(). Il valore scaleX(-1) capovolge l’immagine lungo l’asse orizzontale.
img {
transform: scaleX(-1);
}Capovolgimento verticale
Per capovolgere verticalmente un’immagine, potete utilizzare la proprietà transform con la funzione scaleY(). Il valore scaleY(-1) capovolge l’immagine lungo l’asse verticale.
img {
transform: scaleY(-1);
}Capovolgimento diagonale
Per creare un effetto di capovolgimento diagonale, combinate le funzioni scaleX() e scaleY() all’interno della proprietà transform.
img {
transform: scaleX(-1) scaleY(-1);
}Nel codice qui sopra, l’immagine verrà specchiata orizzontalmente e verticalmente, ottenendo un effetto di capovolgimento diagonale.
Aggiungere filtri alle immagini: Migliorare gli effetti visivi
I filtri possono trasformare l’aspetto e la resa delle immagini, permettendovi di creare effetti visivi unici. I CSS offrono una serie di proprietà di filtro che possono essere applicate alle immagini, consentendovi di regolare la luminosità, il contrasto, la saturazione e altro ancora.
Potete utilizzare la proprietà filter per applicare un filtro a un’immagine. Questa proprietà accetta diverse funzioni di filtro, ognuna delle quali altera diversi aspetti dell’immagine.
img {
filter: brightness(150%);
}Nel codice qui sopra, la funzione brightness(150%) viene applicata all’immagine. Questo aumenta la luminosità dell’immagine del 150%.
Funzioni di filtro comunemente utilizzate
Ecco alcune funzioni di filtro comunemente utilizzate:
brightness(): Regola la luminosità dell’immagine.contrast(): Modifica il contrasto dell’immagine.saturate(): Modifica il livello di saturazione dell’immagine.grayscale(): Converte l’immagine in scala di grigi.blur(): Applica un effetto di sfocatura all’immagine.sepia(): Applica un effetto seppia all’immagine.
Potete sperimentare diverse funzioni e valori dei filtri per ottenere gli effetti visivi desiderati. La combinazione di più filtri può anche produrre trasformazioni più complesse.
Creare sovrapposizioni Hover sulle immagini
Le sovrapposizioni Hover sulle immagini possono portare interattività e un certo interesse per il sito web. Quando l’utente passa il mouse su un’immagine, è possibile applicare un effetto di sovrapposizione, ad esempio un colore o una didascalia di testo.
I CSS offrono diverse tecniche per ottenere la sovrapposizione dei colori; un modo è quello di utilizzare le transizioni CSS. Grazie alla transizione di proprietà specifiche di un elemento, potrete animare in modo fluido gli effetti quando si passa il mouse su un’immagine.
// HTML
<div class="image-container">
<img src="image.jpg" alt="Description of the image">
<div class="overlay"></div>
</div>
// CSS
.image-container {
position: relative;
display: inline-block;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.3s ease;
}
.image-container:hover .overlay {
opacity: 1;
}Nel codice qui sopra, un elemento .image-container avvolge l’immagine e un elemento .overlay. La sovrapposizione è inizialmente trasparente (opacity: 0) e copre l’intera immagine. Quando si passa il mouse sull’elemento .image-container, l’opacità di .overlay passa a 1, rivelando la sovrapposizione di colori.
Per ottenere l’effetto visivo desiderato, potete personalizzare la sovrapposizione regolando le proprietà background-color e l’opacità.
Riepilogo
Lo styling delle immagini con i CSS apre un mondo di possibilità creative, permettendovi di migliorare l’aspetto visivo e l’interattività delle vostre pagine web.
Quando modificate lo stile delle immagini con i CSS, tenete sempre presente l’accessibilità, la reattività e le prestazioni.
Qual è lo stile di immagine CSS che usate di più? Qual è quello che vi interessa di più? Fatecelo sapere nei commenti.
Lascia un commento