Lezione gratuita dal corso Web Development
Finora abbiamo visto la proprietà Color e abbiamo assegnato il valore Red Blue Green.
Ma come funzionano i colori nel mondo del CSS? Ci sono diversi modi per inserire i colori, appunto nel foglio di stile uno è quello più più base più semplice che abbiamo già visto, che è il nome del colore.
Ce ne sono tantissimi definiti dal browser e sono dei colori di default.
Se però, come spesso accade, abbiamo bisogno di colori personalizzati che nella maggior parte dei casi chiaramente quando ci arrivano ad esempio le grafiche dei designer, dobbiamo utilizzare quello specifico colore, quella specifica tonalità.
Quindi abbiamo diverse opzioni è una di queste è utilizzare la regola RGB.
Quindi questo è un modo per rappresentare i colori dividendo le componenti rosso Red G sta per green, quindi verde baby blues.
Quindi in questo modo possiamo suddividere le componenti del colore che vogliamo visualizzare rappresentando la quantità di rosso, la quantità di verde e la quantità di blu.
Perché rosso, verde, blu? Perché sono chiaramente i colori che che hanno i pixel del nostro monitor? No, ogni pixel è suddiviso in componenti rossa, componente verde componente blu.
Quindi in base a quanto rosso quanto verde quanto blu vogliamo.
Si creano poi tutti i colori dello spettro è alla componente rgb possiamo aggiungere la componente alpha che è la possibilità di gestire la trasparenza, quindi è un un canale aggiuntivo che possiamo dare al colore rgb di base per andare a identificare un colore più trasparente o completamente opaco.
Quindi questo è un valore che varia da zero a uno, mentre per tutti gli altri valori della componente rossa la componente verde, la componente blu devo inserire un valore che va da zero a duecento cinquantacinque c'è poi un altro modo più semplice da scrivere piu' più corto anche come numero di caratteri che è la notazione esadecimale.
Questa chiaramente si può convertire direttamente dalla rgb perché è formata da sei o numeri o caratteri è che penso che vanno da zero a la lettera f quindi è proprio il l'annotazione la base esadecimale, quindi da zero a nove e poi alle lettere dalla a alla f.
Quindi facendo la conversione da buzz buzz dieci zero due cinquantacinque fino alla base esadecimale da zero a f utilizzando due cifre per ogni canale rosso, verde, blu ottengo chiaramente lo stesso colore eh? Ci sono delle piccole, piccole differenze tra le conversioni di colore tra tra una tra uno spazio di colore e l'altro, quindi non è sempre esattamente identico, però chiaramente ci va molto vicino.
Chiaramente dipende da quanto è puntiglioso il nostro designer.
Vediamo degli esempi, riprendiamo la nostra pagina di prima, ripuliamo un po' html e teniamo solamente un paragrafo.
Quindi prima abbiamo visto il selettore per tag rugby color red.
Se al posto di red volessimo utilizzare ad esempio la funzione rgb rgb abbiamo detto che sta per red green e blue.
Il numero che va da zero a cinquantacinque sta per quanto di quella tonalità voglio quindi zero chiaramente è completamente spento, mentre due cinquantacinque completamente acceso.
Quindi se io voglio il rosso fuoco metto due cinque cinque che è il primo la prima componente rossa, poi zero e di nuovo zero.
Posso usare anche gli spazi per separare i numeri sempre per migliorare la leggibilità.
Chiaramente anche in questo caso al browser non fa alcuna differenza se vado a capo, se metto degli spazi o se metto tutto appiccicato, ma è sempre meglio usare negli spazi.
Quindi questo colore è esattamente il colore rosso però espresso con l'annotazione esadecimale e l'annotazione rgb espresso con l'annotazione RGB, quindi vediamo che il nostro paragrafo compare sempre in rosso, andando a vedere anche le regole di stile che vengono applicate.
Trovo proprio la mia regola due cinque cinque zero zero.
La notazione esadecimale sarebbe molto, molto simile, quindi andiamo a inserire una nuova proprietà.
Possiamo anche commentare la riga di prima per commentare un'istruzione all'interno del nostro foglio di stile.
Utilizziamo la sintassi barra asterisco e dove vogliamo completare il nostro commento è asterisco barra quindi quello che inseriamo all'interno di questi questi simboli bar asterisco asterisco barra non verrà più letto interpretato dal browser.
Infatti vediamo che anche avviso studio godercelo visualizza in grigio e addirittura in corsivo che è proprio codice che non viene più interpretato.
Quindi se vogliamo utilizzare la notazione esadecimale, dobbiamo utilizzare il simbolo del cancelletto.
É di nuovo andare a inserire delle coppie di cifre o lettere da zero alla lettera F che vanno a identificare sempre il rosso, il verde e il blu.
Quindi se io voglio il massimo del rosso, in questo caso F F poi non voglio verde e non voglio blu.
Quindi zero zero zero zero salvo aggiorno la pagina e chiaramente vedo la stessa cosa, quindi vedo sempre il testo in rosso all'interno delle mie ispezioni.
Elemento Vedo che la mia regola P non ha più la proprietà color con la funzione RGB.
Difatti questa è sbarrata e non cela checkbox mentre è visualizzata correttamente color con la notazione esadecimale.
Quindi, attivando e disattivando queste proprietà posso anche visualizzare nel browser in diretta le modifiche, quindi potrei anche andare a fare una modifica al volo.
Quindi se ad esempio non la volessi più rossa, ma la volessi blu per fare una prova potrei fare zero zero zero zero F F, quindi chiaramente questo non va a modificare il mio file, quindi questo mi serve solo per vedere come verrebbe fuori.
Quando io sono contenta del risultato, lo riporto nel mio foglio di stile, quindi ho visto che il blu ci sta bene.
Quindi metto zero zero zero zero f salvo e poi posso aggiornare la pagina
Learnn è la piattaforma online che ti aiuta a 360 gradi a crescere nel digitale. Sviluppa competenze con oltre 220 corsi, condividi i tuoi risultati, fai networking con otre 120.000 professionisti/e e oltre 300 aziende.
Vogliamo cambiare l’Italia, una persona alla volta.
Per farlo ci proponiamo di democratizzare l’apprendimento e accelerare la crescita di persone, idee e aziende attraverso strumenti tecnologici a supporto di qualsiasi professionista.
Learnn prevede un piano totalmente gratuito (Free) che ti permette di iniziare qualsiasi corso che abbiamo su Learnn.
Per chi volesse finire i corsi, ottenere certificazioni e connettersi con professionisti e aziende, Learnn Pro permette di avere accesso illimitato a tutto questo. Il corso di Learnn Pro è 9.99 euro / mese e puoi disdire quando vuoi.
Per i team di aziende abbiamo anche un Piano Team con oltre 300 clienti aziendali.
Potrai seguire i contenuti da computer, tablet e smartphone.
Scarica l’App iOS/Android Learnn e segui i contenuti in modalità video, audio e testo.
Learnn ha un piano gratuito che ti permette di accedere all 40% di ogni corso in maniera gratuita e solo con la tua email.
Learnn offre sia un piano gratuito con accesso limitato ai contenuti, sia un piano PRO del costo di soli 9.99 euro al mese con cui potrai avere accesso a tutti i nostri contenuti senza limiti o sorprese.
Una volta completata l’iscrizione sarà possibile gestire i propri dati e disdire in qualsiasi momento e in completa autonomia.
No, non offriamo certificazioni, facciamo di meglio.
Man mano che completi corsi potrai verificare le tue competenze e condividerle sul tuo profilo LinkedIn o CV.
Inoltre abbiamo sviluppato una feature chiamata Profile attraverso il quale otterrai un link personale per mostrare in tempo reale tutti i contenuti da te completati e molto altro.
Immagine personale, username, badge, link esterni e molto altro.
Crea una vera e propria sales page dove il prodotto in vendita sono le tue competenze.
Se avessi altre domande puoi usare la live chat qui di fianco.
Per partnership compila questo form
La nostra vision è rendere l'Italia famosa nel mondo per l'esecuzione.
La missione di Learnn
è accelerare la crescita di ogni individuo rendendo accessibili conoscenza, opportunità e tecnologia per avere un impatto positivo sul mondo e sugli altri.
Tutto incluso (come Netflix), IVA inclusa, nessuna sorpresa o addebito indesiderato.
Disdici quando vuoi, in 1 click.
Scegli di migliorare ogni giorno per 12 mesi senza interruzioni scegliendo il piano annuale.
In un unico pagamento annuale
Disdici quando vuoi, in 1 click.
Con l’abbonamento otterrai:
Consuma i +200 corsi e webinar di Learnn da webapp o app iOS e Android, in formato video, audio o testo.
Con l'abbonamento a Learnn hai accesso a tutto (proprio tutto) ciò che contiene la piattaforma.
Ogni mese registriamo nuovi corsi su tutto cio di cui potresti avere bisogno nel mondo digitale.
Con l'app Learnn trasformi ogni momento di vuoto in un'occasione di apprendimento.
Scarica tutto il materiale che ti serve e utilizza i moduli riassuntivi per fissare i concetti.
Ogni settimana nuove offerte di lavoro da parte di tantissime aziende che operano nel mondo digitale.