Categoria:

Effetto Zig-Zag in CSS

23/04/2014 21:46 Pubblicato da
Share on FacebookTweet about this on TwitterGoogle+Share on Reddit


ZigZag_CSS_BORDERS_TOP_BOTTOM

Un effetto molto interessante, che si può ottenere tramite le proprietà di CSS, è l’effetto Zig-Zag. Si può disegnare un percorso ad angoli alternati sfruttando la funzione linear-gradient(), la quale crea un’immagine che rappresenta un gradiente lineare di colori.

Demo CodePen Download

Partendo dal codice HTML, si può osservare che per ottenere l’effetto zigzag sul bordo superiore, inferiore o su entrambi i bordi basta utilizzare rispettivamente le classi .zig-zag-top, .zig-zag-bottom o ambedue.

Per ogni elemento del DOM, azzeriamo il valore del padding e del margin e definiamo il background-color del tag body. Il colore dello sfondo del body trasparirà anche nei tag identificati dalla classe .sep.
Attenzione! Evitare di utilizzare il selettore * (star) per due motivi:

  1. il suo utilizzo comporta rallentamenti (l’insieme delle proprietà del blocco di dichiarazione viene applicato a tutti gli elementi del DOM)
  2. può causare effetti imprevisti (si immagini di aver messo incoscientemente fra le varie proprietà del selettore * anche border:0, il browser web eliminerebbe anche i bordi dei buttons)
I tag DIV con classe .sep, ossia i tag intermedi, avranno un’altezza minima di 200px e un padding superiore ed inferiore pari a 32px.

Nel seguente frammento di codice definiamo il bordo zigzagato superiore. Ciò è possibile tramite l’utilizzo della funzione linear-gradient(angolo, colore1 dimensione1, colore2 dimensione2)(documentazione completa) della proprietà background. Con background-repeat: repeat-x; indichiamo che il background dovrà essere ripetuto in orizzontale. Il bordo avrà un’altezza totale di 32px ed un’altezza pari al 100% del box che lo contiene. Il valore relative della proprietà position ci permette di posizionare il bordo 64px più in alto del blocco .zig-zag-top.

Nel seguente blocco di dichiarazioni indichiamo che ogni discendente diretto di un qualsiasi tag DIV(quindi la prima generazione) dovrà avere un margine destro e sinistro equivalente a 40px.

Definiamo alcune proprietà di .zig-zag-bottom e .zig-zag-top.

Definiamo lo stile del testo.

Il bordo inferiore è molto simile a quello superiore. Prestare particolare attenzione alla pseudo-classe (per il bordo superiore abbiamo utilizzato la pseudo-classe :before)

Demo CodePen Download

21/07/2017 10:14

Leave a Reply

Your email address will not be published. Required fields are marked *