Prima di arrivare all’articolo, voglio solo condividere che sto costruendo un prodotto, e mi piacerebbe raccogliere alcuni dati su come servire meglio gli sviluppatori web. Ho creato un breve questionario per verificare prima o dopo aver letto questo articolo. Si prega di controllare – grazie! E ora, torniamo alla nostra normale programmazione programmata.
Il blog che costruiremo. Preferisci il video? Clicca qui per aprire in Scrimba
Se sei come me, sei interessato al web e alla sua travolgente portata, ma sei anche inondato dal caos di informazioni che sta imparando HTML e CSS. Il fatto è che questi linguaggi sono diversi da altri domini, come Word Processor e linguaggi di programmazione. Il web è un altro mondo, e non è la cosa più bella in circolazione.
Avendo imparato un po ‘di web, sono qui per dare una leggera spinta di incoraggiamento, perché, con un po’ di guida, questi domini possono essere molto più facili di quanto immagini. Continua a leggere, e costruiremo un bel blog da zero. Impareremo anche alcuni Griglia CSS, Flexbox, e Responsive Design.
L’obiettivo è fare per te ciò che ho fatto per me stesso; imparare HTML e CSS dai primi principi.
Preferisci il video? Clicca qui per aprire in Scrimba
Ho anche insegnato un corso HTML/CSS gratuito su Scrimba dove insegno come costruire un bellissimo blog da *zero*. Clicca qui per iscriverti! ?
Scrimba.com è una piattaforma front-end interattiva in cui i siti web vengono registrati come eventi – non video-e possono essere modificati! ?
Quindi da dove viene l’HTML?
HTML è un discendente del primo meta o linguaggio di markup: GML. I lettori Millennial stanno ora lavorando che GML sta per Generalized Markup Language, ma non è tutto ciò che rappresenta. E ‘ stato Charles Goldfarb, Edward Mosher, e Raymond Lorie che ha creato quello che ora conosciamo come un meta o markup language presso IBM. E nel 1996, Charles Goldfarb ha scritto:
“Ho dato a GML il suo nome attuale in modo che le nostre iniziali dimostrassero sempre dove aveva avuto origine. Una delle brutte verità del trasferimento tecnologico è che gli sviluppatori tendono ad essere grati per il lavoro di ricerca quando ricevuti per la prima volta, e praticamente ignari di esso entro la fine di un lungo ciclo di sviluppo” ”
— Charles Goldfarb, nel 1996
GML in seguito divenne Standardizzato, diventando così SGML. Quindi, Tim Berners-Lee che ha lavorato al CERN ha preso in prestito il ML da SGML (no, non machine learning, o qualunque cosa lo chiamino gli hipster) per creare HTML, dove HT sta per IpertEsto.
Whoa, bella parola. E come ho capito, ha radici da un ambiente di authoring interattivo chiamato HyperCard, da Bill Atkinson che ha lavorato presso Apple. Per un’esplorazione più approfondita, invio i seguenti video:
Fare clic per saperne di più
Quindi, ricapitoliamo. HTML non ha solo conquistato il mondo. In effetti, c’era un mondo intero prima dell’HTML. WUT? Lo so, sto tremando in stato di shock—ma non ero nato—quindi, non c’era un mondo.
E, HTML deve molto ai suoi predecessori. Come tutti noi ai nostri genitori. Tuttavia, è come facciamo il codice dal testo. Ora, in quattro lezioni di un minuto, insegnerò le basi di HTML, CSS e Responsive Design.
HTML e CSS in 4 minuti
Primo minuto: un sito web può essere meglio inteso come webtree
<html> <head></head> <body></body></html>
Tutti i siti web iniziano la loro vita come tali. Tuttavia-e questo è terribile-non c’è contenuto. Tuttavia, iniziamo qui perché dobbiamo prima capire cos’è un sito web. Pensate a come un albero-un albero a testa in giù* – un webtree. L’elemento html è la radice, mentre head e body sono i primi rami del nostro webtree:
html <- root / \head body <- branches
L’elemento head (o tag—stessa cosa) è per i metadati o le informazioni sul nostro sito web. L’elemento body, d’altra parte, è per il contenuto del nostro sito web. E poiché il CSS è lo stile del nostro sito web, va nell’elemento head, mentre i contenuti, come paragrafi, video cat ( ≧ ∇ ≦ ) e così via, vanno nell’elemento body.
Secondo minuto: gli elementi o i tag hanno più apparizioni
Il primo elemento è un elemento di chiusura automatica, in cui comunichiamo qualcosa al browser, ma non ha anche un valore. Un esempio di questo è l’elemento <br>, che inserisce un’interruzione di linea.
Il secondo elemento è un elemento comune, in cui comunichiamo un valore come appartenente a qualche elemento. Ad esempio <p>hello, worl d!< / p> è il valore ” ciao, mondo!”come appartenente all’elemento paragrafo.
Infine, abbiamo un elemento con un attributo. E un attributo è ciò che sembra—dannazione, è un attributo! Dà un elemento più contesto o significato. Gli attributi possono avere più valori e gli elementi possono avere più attributi. Attributo-ception.
Ora-devo menzionare-non creiamo i nomi dei nostri elementi HTML. Li prendiamo in prestito da un elenco di oltre 100 elementi predefiniti. Naturalmente, questo rende alcune cose più facili, e alcune cose molto, molto più difficile, come la memorizzazione!
Il !DOCTYPE html specifica che stiamo scrivendo HTML5 – come supposto per tutte le altre versioni di HTML che vogliamo evitare. E dato l’elemento di chiusura automatica meta con l’attributo charset e il valore UTF-8, il nostro testo è codificato in Unicode. UTF – 8 sta per Unicode Transformation Format… 8. Ora possiamo scrivere ????! Una volta, papà ha deciso di testo in solo emoji.
\_(()_/
Abbiamo anche aggiunto un elemento style che è uno dei punti di ingresso disponibili per CSS. Dove selector seleziona un elemento e applica un property ad esso con un corrispondente value. Esploreremo questo e altro nel prossimo minuto.
Ancora una volta—devo menzionare-non creiamo i nomi delle nostre proprietà CSS. Li prendiamo in prestito da un elenco di alcune centinaia di proprietà predefinite. Naturalmente, questo rende alcune cose più facili, e alcune cose molto, molto più difficile, come ad esempio ____________!
Non è più il nostro sito terribile! Quello che abbiamo è ” ciao, mondo!”nel testo verde, e se la larghezza del nostro sito web fosse ridimensionata a 8,5 pollici o meno, leggerebbe in blu, e a 5 pollici o meno, rosso. Qui, abbiamo usato media query per sovrascrivere CSS in qualche circostanza, come la larghezza del nostro sito web.
Che cos’è un CSS Reset e Debugger?
Preferisci il video? Clicca qui per aprire in Scrimba
Utilizziamo un reset per garantire che il nostro design sia coerente e un debugger per esporre le incongruenze.
Abbiamo bisogno del nostro reset, perché i browser sono supponenti e impostano alcune proprietà CSS per noi che vogliamo annullare. Esistono reset CSS popolari, ma faremo il nostro. E abbiamo bisogno del nostro debugger per mantenere il design del nostro sito web con facilità.
Possiamo creare una cartella denominata styles per ospitare il nostro reset e debugger:
styles/ reset.css debug.css
E per collegare i nostri nuovi file CSS al nostro index.html, aggiungiamo link elementi:
Ignora riga 1. per ora—iniziamo con body, body * { … } dove selezioniamo body e tutti gli elementi di body con un *. L’asterisco significa selezionare tutti i bambini. Ricordate il nostro webtree?
html / \head body <- selected / \ \… … p <- selected
body, body * { … } sta selezionando body e—a , denota e—pperché è uno dei figli di body. Questa è nota come relazione genitore-figlio, dove body è il genitore e p è il figlio. E diciamo quegli elementi a unset proprietà comuni. Le proprietà che ho scelto sono solo una shortlist. Ecco un esempio di uno dei reset CSS più famosi:
Accidenti! Torniamo al nostro reset. Nella parte superiore abbiamo :root { font: 20px/1.2 sans-serif; }. Che cosa è :root? Ricordate il nostro webtree? È la radice, in altre parole, l’elemento html. Questo pseudo-elemento appartiene a una classe speciale di elementi nota come psuedo-classes, che può essere utilizzata per organizzare e comprendere meglio il nostro CSS.
WAAAIT! Non abbiamo bisogno di un * per selezionare tutti gli elementi figli, quindi le loro proprietà font sono impostate? Bene-grande domanda-alcune proprietà, come le proprietà del testo ereditano dai loro genitori e font lo fa. Quindi, invece, possiamo impostare font una volta in :root, che si propaga a tutti i suoi figli. Proprietà-ception.
Il nostro Debugger CSS
Un debugger enfatizza il contenuto e il bordo degli elementi:
Guardate! In sole tre righe, il nostro debugger. Questa tecnica intelligente sovrascrive tre proprietà comuni: color, background e outline. I nostri colori sono costituiti da valori hsla(), che è l’abbreviazione di tonalità, saturazione, luminanza e alfa. Per abilitare il nostro debugger, colleghiamo il file.
Se vogliamo disabilitare il nostro debugger, possiamo digitare erroneamente il nome del file in modo da nasconderlo dal filesystem del nostro computer, ad esempio:
<link rel="stylesheet" href="styles/-debug.css">
O semplicemente eliminare la linea. ٩ (^^ ^ )
Il nostro debugger utilizza valori esilaranti !important in modo da affermare che in nessuna condizione queste proprietà possono essere sovrascritte. Ricordate media query?
p { color: green !important; }
@media (max-width: 8.5in) { p { color: blue; } }@media (max-width: 5.0in) { p { color: red ; } }
Se avessimo specificato che il nostro colore p è !important, le nostre query sui media sarebbero inerti, a causa della loro minore importanza.
Incontra CSS Grid e Flexbox
Preferisci il video? Clicca qui per aprire in Scrimba
Direi che prima di CSS Grid e Flexbox, progettare per il web era il viaggio di un eroe.
Il fatto è che il web design era un giocoleria di hack in cui ingannavamo il browser per rendere i nostri progetti. Questo sta diventando meno vero con il tempo. Non sono religioso, ma grazie a Dio!- o, grazie ingegneri del browser!- pertanto ora possiamo appoggiarci a CSS Grid e Flexbox per avviare il nostro design.
Se non sei a conoscenza, CSS Grid e Flexbox sono nuove tecnologie cotte nei browser moderni che portano il viaggio dell’eroe fuori dal web design. E CSS Grid e Flexbox sono amici-li useremo insieme per creare una griglia e flex elementi nella nostra griglia.
La nostra prima griglia: HTML
… <body> <article> <p>ARTICLE</p> </article>
<article> <p>ARTICLE</p> </article> </body> …
Ricordate il nostro webtree?
body / \article article / \ p p
Stiamo creando un blog, quindi ogni post può essere pensato come un article. E i nostri article contengono un p di ARTICLE che è un altro trucco intelligente che possiamo usare. Usando il nome dell’elemento come valore dell’elemento per aiutarci a capire dove e cosa sono le cose. Valore-ception.
Inserisci Griglia CSS. Innanzitutto, abbiamo selezionato l’articolo e applicato tre proprietà: display definisce l’elemento come una griglia, grid-template-columns templates columns e height simula ogni article come avente l’altezza di una pagina. Tuttavia, height è un codice colla e verrà eliminato.
Innanzitutto, se avessimo impostato grid-template-columns su 1fr 1fr 1fr, dove fr è l’abbreviazione di fraction-unit, le nostre tre colonne sarebbero divise in terzi. Eppure la nostra colonna centrale ha una larghezza minmax, il che significa che è reattiva. A o inferiore a 8.5in, la nostra colonna centrale viene visualizzata a 100% larghezza e le nostre colonne sinistra e destra scompaiono, poiché non vi è alcun resto.
Barra laterale: si noti che il design reattivo non è limitato alle query multimediali. Questo è un esempio di dove il nostro design è implicitamente reattivo, al contrario di esplicitamente reattivo. Questo è il miglior tipo di design reattivo, perché non è hard-coded. E questo è uno dei motivi per cui CSS Grid e Flexbox sono così potenti.
In secondo luogo, per comunicare che i figli di article appartengono alla colonna centrale, o iniziano dalla seconda colonna e terminano dalla terza, impostiamo grid-columnsu 2 / 3. Si noti la sottile differenza tra grid-template-column e grid-column, per le colonne del modello o per le colonne di span.
La griglia CSS è fantastica—e lo è—ma ora ci appoggeremo a Flexbox per centrare il nostro testo ARTICLE. Quello che stiamo per fare è creare una classe di utilità, ed è un altro paradigma per scrivere CSS. Qui, usiamo il fatto che gli elementi possono avere attributi per lo stile in linea all’elemento p :
<p class="debug-center">ARTICLE</p>
CSS in HTML?!
(╯°□°）╯︵ ┻━┻
Ecco cosa sta succedendo: gli elementi hanno un attributo di classe. E possiamo usare questo attributo non solo per scrivere CSS su elementi, ma su un tipo di elemento o classe di elemento. Ciò significa che possiamo riutilizzare le classi su più elementi, indipendentemente dalla loro somiglianza. Ahimè-non è cambiato nulla – dobbiamo anche creare una classe .debug-center da qualche parte nel nostro CSS. Che ne dici del nostro debugger:
Nota usiamo un prefisso . per differenziare le classi dagli elementi.
Ora, ovunque un elemento sia attribuito alla nostra classe debug-center, il suo testo sarà centrale. Innanzitutto, impostiamo display a flex rendendo qualsiasi elemento un elemento Flexbox in contrapposizione a un elemento griglia CSS. Quindi impostiamo justify-content su center per centrare orizzontalmente e align-items su center per centrare verticalmente. Aaagh!
Immagina questo: usiamo Grid per impaginare il design del nostro sito web e Flexbox per flettere gli elementi nella nostra griglia in una posizione desiderata.
Iterando la nostra griglia
Preferisci il video? Clicca qui per aprire in Scrimba
Abbiamo un problema: senza .debug-centerARTICLE abbraccia le pareti sinistra e destra. Ciò di cui abbiamo bisogno sono grondaie verticali e orizzontali in modo che il nostro contenuto possa respirare. Ah! Altrimenti la lettura diventerebbe frustrante e porterebbe a una scarsa esperienza utente. ヾ (•д*;) ﾉ
Per imbottitura verticale:
article { padding: 0.5in 0; …}
E per il padding orizzontale, potremmo usare il padding, e funzionerebbe:
padding: 0.5in 0.5in;padding: 0.5in;
Tuttavia, vogliamo che le nostre grondaie siano reattive, quindi useremo la griglia CSS:
Qui, abbiamo fatto tre cose: 1. abbiamo definito le nostre grondaie orizzontali per essere 0.5in (queste diventeranno reattive-lo prometto!). 2. la nostra colonna di contenuti è passata da 8.5in a 7.5in, la somma è ancora 8.5in e 3. identificatori start e end per nominare l’inizio e la fine della nostra colonna di contenuti.
Quando abbiamo aggiunto nuove colonne, avevamo bisogno di aggiornare anche article *:
article * { grid-column: 3 / 4; }
Ma contare le colonne non è l’ideale. Invece-usiamo i nostri identificatori inventati:
article * { grid-column: start / end; }
Abbiamo aggiornato la nostra griglia senza interrompere il flusso di contenuti, a patto che continuiamo a utilizzare gli identificatori start e end che abbiamo creato. ◉ ◉ ◉ ◉
Ultimo—come promesso—abbiamo bisogno delle nostre grondaie per essere reattivi. minmax() per un motivo o per un altro non funziona qui, quindi useremo le query multimediali:
Ora a o meno di 8.5in, article userà % invece di in per dividere le nostre colonne, e le colonne di sinistra e di destra scompariranno perché—di nuovo—non c’è resto. Nonostante tutto questo, avremmo potuto impostare padding a 0.5in 5% per ottenere lo stesso effetto, quindi cosa dà? Continua a leggere!
Iterando la nostra griglia, di nuovo
Preferisci il video? Clicca qui per aprire in Scrimba
Per capire la nostra griglia, usiamo le immagini per estendere le colonne, da 100% a 8.5in a 7.5in sul desktop e da 100% a 90% sul cellulare. Tuttavia, per l’ultima immagine, quella a sinistra in basso, dobbiamo aggiungere anche poche altre colonne alla nostra griglia. AF) UBQWF*VBQPWIFB, ho ragione?
Non farti intimidire—la griglia CSS è fantastica. Aggiungiamo altre due colonne:
Abbiamo suddiviso la nostra colonna di contenuti in tre colonne: 1.25in 5in 1.25in. Abbiamo anche aggiunto percentuali proporzionali per la nostra query multimediale: 15% 60% 15%. Il piano prevede che il testo si estenda sulla nostra colonna contenuto originale 7.5in e che le piccole immagini si estendano sulla nostra nuova colonna 5in.
Per aggiungere immagini, usiamo l’elemento img e il suo attributo src —source:
Questi sono locali, cioè sono sul nostro computer. Ed erano remoti, cioè su un server:
<img src="https://website.com/images/cosmos.jpg">
Si noti che ogni img ha una delle quattro classi: size-*. E poiché vorremo più delle immagini, come i video, per coprire la griglia del nostro sito web, è preferibile utilizzare le classi in modo da poter riutilizzare il CSS. Queste classi size-* sono anche classi di utilità, quindi cambiare la dimensione che vogliamo è semplice.
Facciamo in modo che le nostre classi size-* si estendano su diversi set di colonne:
Poiché img s esegue il rendering alla loro dimensione effettiva, ad esempio, un rendering di immagini 400 × 400 a 400px, avevamo bisogno di sovrascrivere quel comportamento con il nostro: width: 100%. Pertanto, quando un’immagine viene attribuita con una classe size-*, può ridimensionare a qualsiasi colonna sia estesa. Nota che non è necessario impostare height.
Aggiunta di elementi di testo
Preferisci il video? Clicca qui per aprire in Scrimba
Sito Web e contenuti link
Ora che stiamo facendo sul serio con il nostro article, facciamo le cose formali:
… <article></article> …
Ora ogni articolo è collegabile. Collegabile? Bene-i siti web sono link:
https://website.com/index.html
E anche i contenuti del nostro sito web, ad esempio articles, possono essere collegati:
https://website.com/index.html#article
Qui article è il valore di un attributo id, analogo al collegamento di un timestamp in un video di YouTube (ad esempio, questo). Meglio che suggerire “inizia a 4 minuti e 7 secondi “o” leggi dal secondo articolo”, possiamo collegare i contenuti nel nostro sito Web, come un timestamp in un video.
Per collegare un sito web o un contenuto, utilizziamo l’elemento a e l’attributo href :
Il testo “Il cosmo” ora collega l’inizio dell’articolo: #the-cosmos.
Questa idea di collegamento (collegamento di siti web e contenuti in siti web) è uno dei punti di HTML. HyperCard padroneggiava questo, ma invece di collegare siti Web e contenuti, era interessato a idee e associazioni. A quel tempo, era il 1987 e HTML è stato proposto per la prima volta nel 1989. Guarda un paio di secondi dal video che ho postato in precedenza—qui ho collegato un timestamp:
elementi di Testo
andiamo ad aggiungere intestazioni, una pubblicazione-data, forte e sottolineato il testo e link:
<article>
<h1><a href="#the-cosmos">The Cosmos is all there is</a></h1> <h2>Or ever was, or ever will be</h2>
<time datetime="03-09-2014">MAR. 9, 2014</time> <p><em>A generation ago</em>, the astronomer <a href="https://en.wikipedia.org/wiki/carl_sagan">Carl Sagan</a> stood here and launched hundreds of millions of us on a great adventure the exploration of the universe revealed by science. It's time to get going again. We're about to begin a journey that will take us from the infinitesimal to the infinite, from the dawn of time to the distant future. We'll explore galaxies and suns and worlds, surf the gravity waves of space-time, encounter beings that live in fire and ice, explore the planets of stars that never die, discover atoms as massive as suns and universes smaller than atoms. </p>
<img class="size-4" src="images/cosmos.jpg">
<h3>COSMOS IS ALSO A STORY ABOUT US</h3> <p>It's the saga of how wandering bands of hunters and gatherers found their way to the stars, one adventure with many heroes. To make this journey, we'll need imagination. But imagination alone is not enough because the reality of nature is far more wondrous than anything we can imagine. This adventure is made possible by generations of searchers strictly adhering to a simple set of rules test ideas by experiment and observation, build on those ideas that pass the test, reject the ones that fail, follow the evidence wherever it leads and question everything. <strong>Accept these terms, and the cosmos is yours.</strong> </p>
</article>
Queste sono le prime righe del nostro personale, astrofisico dell’ — Neil deGrasse Tyson — 2014 Cosmos: A Spacetime Odyssey, una reinvenzione di Carl Sagan originale del 1980 Cosmos: A Personal Voyage. E ‘ fantascienza senza il-fi. E si sta rinnovando nel 2019!
Sopra abbiamo introdotto alcuni elementi: h1, h2, h3, time, strong, e em.
h1–h6 gli elementi sono titoli.
L’elemento time timestamp del nostro articolo. Possiamo mettere quello che vogliamo per il valore dell’elemento, perché i computer leggono il valore dell’attributo datetime, che dovrebbe essere leggibile dalla macchina.
L’elemento strong è per testo forte e l’elemento em è per testo sottolineato. Inoltre, gli elementi h* sono forti.
Si noti che gli elementi h* e p si interrompono da una riga all’altra o bloccano, mentre gli elementi time, strong e em non lo fanno. Questo perché i browser impostano gli elementi h* e pdisplay su block e time, strong e em elemento display a inline.
Rems e ems
Quando non è sufficiente bloccare elementi da una riga all’altra, usiamo interruzioni di riga in modo che sia più facile differenziare gli elementi l’uno dall’altro, non diversamente da padding o grondaie. Potremmo usare br elementi qui, ma è preferibile utilizzare CSS estranei rispetto a HTML estranei.
Ecco come spingere il contenuto a due interruzioni di riga, seguendo gli elementi h2 e p :
h2, p { margin-bottom: 2.4rem; }
2.4 rem?
Ricordate il nostro reset? Abbiamo impostato font a 20px/1.2 sans-serif. Non l’ho spiegato in quel momento—e vergogna su di me—ma 2.4 sono interruzioni di due righe a 1.2 altezza della linea, ad esempio, testo a spaziatura singola. Il testo più leggibile potrebbe essere 1.5e il testo a spaziatura doppia potrebbe essere 2.
*Ahem* Che cosa sono le rems?
* Ahem ahem* E cosa sono gli ems?
rem è root em ed entrambi sono moltiplicatori. 1rem è 20px e 1emè il genitore font-size. Se avessimo definito le nostre interruzioni di riga in ems, non rems, e impostato h2 e psu diversi font-size, le loro interruzioni di riga sarebbero diverse! Pertanto, le interruzioni di riga coerenti usano rem s e quelle incoerenti usano em s.
E questo è un potente CSS di scrittura di idee in modo tale che il design sia collegato. Data questa illuminazione, sento che è molto più saggio pensare ai CSS non nelle regole ma nelle relazioni. Quindi, se facciamo un cambiamento da qualche parte, possiamo fare un cambiamento ovunque.
make fai un cambiamento da qualche parte
everywhere fai un cambiamento ovunque…
Una vera emoji di Apple. Aveva un comunicato stampa
Responsive responsive design
Cosa succede se scriviamo CSS in rems e ems e usiamo le query multimediali per cambiare :root‘s font-size? Quindi tutto-e intendo tutto-si ridimensionerà proporzionalmente. Possiamo fare un ulteriore passo avanti e avere più query multimediali per più larghezze:
La cosa sorprendente di questo è che non stiamo solo sovrascrivendo una proprietà, stiamo sovrascrivendo la proprietà per rems e em s. Ora possiamo scrivere CSS che non è solo reattivo ma reattivo al nostro design reattivo. Questa è forse la frase più importante in questo intero post:
Possiamo scrivere CSS che non è solo reattivo ma reattivo al nostro design reattivo.
Questo non è solo bello, è come dovremmo scrivere CSS. I siti Web tendono ad essere terribili, e penso che possa essere ridotto a questo: quando scriviamo CSS, dovremmo scrivere nei sistemi di progettazione e non nel codice silo. Quando usiamo rems e em s in tandem con le query multimediali, questo è un sistema di progettazione e il codice non viene silosato.
Le proprietà possono avere stenografie come abbiamo visto prima; padding: 0.5in, equivalente a padding: 0.5in 0.5in. E qui, usiamo font per combinare font-weight, font-sizee line-height. Dopo font, abbiamo color con hsl valori, come hsla valori nel nostro debugger.
Un problema non indirizzato è il nostro elemento a. Nel nostro reset, abbiamo unset color e text-decoration rendendo i collegamenti indiscriminati dal testo. Abbiamo disattivato queste proprietà perché text-decoration: underline è troppo sottile. Quindi ecco come possiamo dare loro una forte sottolineatura:
a { box-shadow: inset 0 -0.25em hsl(55, 100%, 75%); }
Invertiamo box-shadow per creare una sottolineatura che si trova all’interno dell’elemento. Se avessimo impostato inset senza un valore negativo, la nostra sottolineatura sarebbe una overline. Usiamo anche em quindi la sottolineatura scala con il suo font-size. Questo è un esempio di quando vogliamo un ridimensionamento incoerente, come supposto per le nostre interruzioni di riga.
C’è molto di più in box-shadow di questo: clicca per saperne di più.
Ultimo passaggio: gradienti
Preferisci il video? Clicca qui per aprire in Scrimba
Wohoo! Tutto ciò di cui abbiamo bisogno è uno spunto per i nostri lettori su dove inizia e finisce un article. Senza questo, le estremità di ogni article si sentiranno come una continuazione infinita, che porta a una scarsa esperienza utente. Quindi dobbiamo dare ai nostri lettori un suggerimento… (◔◔)
Quello che propongo è semplice: un gradiente che si estende dalla parte superiore di ogni elemento article alla parte inferiore del suo elemento h2. E possiamo scrivere il nostro gradiente in ems in modo che man mano che il nostro sito web si ridimensiona, anche il nostro gradiente:
article { … background: linear-gradient(hsl(55, 100%, 96%), white 6.83em);}
Qui abbiamo definito un gradiente da colore a bianco e usato 6.83em quindi il nostro gradiente non estende l’intero article ma termina all’equivalente del fondo del nostro elemento h2. Tuttavia, il valore esatto dipende.
Puoi fare matematica per determinare la dimensione, ad esempio 6.83em, ma un’altra tecnica è quella di impostare una dimensione sul colore superiore, ad esempio hsl(55, 100%, 96%) 6.83em. Una volta che è uguale o maggiore della dimensione del colore di fondo, apparirà come una linea e non un gradiente, rendendolo intuitivo su cosa cambiarlo.
Congratulazioni ?
Il blog che abbiamo costruito! Preferisci il video? Clicca qui per aprire in Scrimba
Congratulazioni! ٩(˘.) ‘ve Hai fatto un passo in un mondo in disperato bisogno di migliori progettisti e ingegneri. E con CSS Grid, Flexbox, Responsive Design e debugger a livello di browser, lo sviluppo per il web non è mai stato più accessibile.
Non dimenticare che c’è un corso gratuito su Scrimba dove insegno come creare lo stesso sito web da *zero*. Clicca qui per iscriverti!
