Arcobaleno e variabili nei CSS

pubblicato in: Stile | 0

Usiamoli Tutti!!!!

Pride Flag

Per questo sito ho fatto una scelta.

Tutta la vita è fatta di scelte e questa voleva essere una scelta coraggiosa e fuori dagli schemi.

Volevo che il mio sito rappresentasse non solo il mio lavoro ma anche il mio stile ed il mio modo di vivere, di sentire e di amare.

Lo volevo pulito, elegante ma anche allegro. Leggero, perchè no?

Assolutamente non volevo fare il classico sito di “tecnologia” moderno, visto e rivisto.

La bandiera del PRIDE LGBT non solo mi rappresenta umanamente, la trovo molto interessante dal punto di vista stilistico.

Sapevo che una palette così mi avrebbe di giocare con i colori come volevo, ed io voglio divertirmi. Sopratutto quando lavoro a quello che da più di 15 anni è una vera e propria passione!

Sapevo anche che questa scelta avrebbe avuto delle difficoltà: Cosa avrei fatto se mi fossi accorto a sito mezzo ultimato che, ad esempi il giallo era troppo chiaro?

All’inizio ho pensato di affidarmi al mitico Sublime Text 3 che ha molte funzioni avanzate per editare il codice tra cui la possibilita di cambiare simultaneamente selezioni multiple…

Poi mi sono imbattuto in un articolo su css-tricks.com che mi ha dato l’idea.

Se invece che scrivere ogni singola volta l’esadecimale del colore avessi usato delle variabili? Non solo le avrei potute nominare in modo facile da ricordare, in caso di necessità avrei potuto cambiare tutto il codice editandone una sola linea!!!

/* VARIABILI GLOBALI LGBT FLAG */
:root {
	--viola: #a800ff;
	--blu: #0079ff;
	--verde: #00f11d;
	--giallo: #f5e400; 
	--arancio: #ff7f00;
	--rosso: #ff0900;
	--jeans: #366592;
}

E poi ho scoperto che queste erano visibili ed editabili al volo anche dallo strumento di ispezione di Chrome!

Una vera svolta, potevo e potro seguitare a cercare il colore migliore con pochissimo sforzo, guardando un’anteprima reala prima di implementarlo definitivamente nel foglio di stile che tema.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *