Ombra sui triangoli in CSS

Probabilmente sai già che puoi realizzare dei triangoli con il CSS. Ma se tu volessi metterci un'ombra? Analizziamo un paio di tecniche che ti consentiranno di farlo.
Ombra sui triangoli in CSS

Specifiche sulla traduzione

Di seguito la traduzione dell’articolo “Triangle With Shadow” di Chris Coyier.

Probabilmente sai già che puoi realizzare dei triangoli con il CSS. Ma se tu volessi metterci un’ombra dietro? Sfortunatamente il classico trucchetto del bordo non modifica la forma dell’elemento, è soltanto un trucchetto visivo. Analizziamo un paio di soluzioni alternative.

Usa semplicemente Unicode

Ci sono caratteri a forma di triangolo in unicode. Come: ▲▼◀▶ E altri ancora.

Se usi questo metodo per realizzare un triangolo, puoi “selezionarlo” e applicargli tutti i tipi di decorazione.

<span class="triangle">▲</span>
.triangle {
   color: #BADA55;
   text-shadow: 0 0 20px black;
}

Colore, ombreggiature, dimensioni, qualunque cosa. Puoi persino avere più fantasia. Se il triangolo non è della forma esatta che desideri o non punta nel modo giusto, puoi
usare gli strumenti di trasformazione di CSS3 per modificarne le dimensioni o ruotarlo. Qui trovi una demo.

Mi piace questa tecnica, ma ci sono alcune questioni ovvie. Una è che fare affidamento sui CSS Transform non ti fa ottenere un grande retro compatibilità. Sicuramente non funzionerà su IE8. Ma d’altronde questo articolo parla di shadow, quindi si tratta comunque di CSS3. Perfino browser più vecchi di quello possono avere problemi con le unicode icon. Quindi attenzione.

Il metodo “Double-box”

Supponendo che non abbiamo problemi con CSS3, un metodo sarebbe di avere un elemento container con overflow hidden e un altro elemento figlio ruotato e sporgente rispetto al primo. La parte ancora visibile formerebbe un triangolo. A questo punto puoi usare un box-shadow su entrambi gli elementi per realizzare l’ombra.

<div class="triangle-with-shadow"></div>
.triangle-with-shadow {
   width: 100px;
   height: 100px;
   position: relative;
   overflow: hidden;
   box-shadow: 0 16px 10px -17px rgba(0,0,0,0.5);
}
.triangle-with-shadow:after {
   content: "";
   position: absolute;
   width: 50px;
   height: 50px;
   background: #999;
   transform: rotate(45deg); /* Prefixes... */
   top: 75px;
   left: 25px;
   box-shadow: -1px -1px 10px -2px rgba(0,0,0,0.5);
}

Nota che sul contenitore, il valore della “diffusione” è negativo. Questo per ottenere l’ombra su un solo lato. Ecco una demo.

Usa semplicemente un’immagine

Non sono un grande fan di questo metodo, perché comporta una richiesta HTTP extra ed è un’altro elemento da dover gestire nel tuo sprite. Dovrai gestire le immagini per il responsive (che non risulteranno ben definite su schermi ad alta densità di pixel a meno che tu non abbia versioni multiple di quella stessa immagine già pronte). Le altre tecniche consistono nel disegnarli in vettoriale e quindi andranno bene per qualsiasi ambiente.

Ma, sai, nessuno morirà e avrai garantito una buona retro compatibilità.

Il futuro

Tu sarai capace di usare filter:drop-shadow() per aggiungere facilmente un’ombra a qualsiasi elemento. A questo link c’è un articolo al riguardo.

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github