Categoria:

Space Invaders in CSS

19/01/2014 18:15 Pubblicato da
Share on FacebookTweet about this on TwitterGoogle+Share on Reddit

Space Invaders
Oggi parlerò di una proprietà molto utilizzata del linguaggio CSS, la box-shadow. La box-shadow consente di descrivere uno o più effetti d’ombra separati dalla virgola. Proprio questa caratteristica ci consente di definire i “pixel” di immagini anche molto complesse sfruttando un solo tag HTML.

Demo CodePen Download

Iniziamo dall’HTML, inseriamo un tag DIV che rappresenterà il nostro alieno nemico.

La nostra classe .d-test ha un margine superiore e inferiore pari a 100px e dei margini laterali di 600px. Per specificare la dimensione di un singolo pixel utilizzeremo le proprietà width e height. Il border-radius ci consente di arrotondare i bordi di ogni pixel mentre il box-shadow permette la creazione di un effetto ombra. Da come si può notare dal codice, la proprietà box-shadow presenta insiemi di valori separati da virgola. Ogni gruppo di valori è composto da un valore numerico che specifica la distanza orizzontale, uno valore numerico che rappresenta la distanza verticale ed infine il colore.

L’ultima parte del blocco di dichiarazione della classe .d-test associa un’animazione che farà traslare l’immagine orizzontalmente. La durata dell’intera animazione sarà pari a cinque secondi, l’animation-direction sarà di tipo alternate (ovvero verrà alternata la direzione – da 0% a 100% e successivamente da 100% a 0%), la timing-function settata su step-start ci permette di spostare l’immagine a scatti lungo l’asse delle ascisse.
La proprietà transform riduce l’immagine del 50%;

Demo CodePen Download

21/07/2017 10:14

Leave a Reply

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