10 incredibili trucchi CSS per trasformare i tuoi layout web

Chiunque abbia esperienza nel web design, indipendentemente dal fatto che tu abbia utilizzato costruttori di siti Web fai-da-te o creato un sito da zero, è probabile che abbia già sentito parlare di CSS. Questo strumento incredibilmente potente può essere utilizzato per trasformare i tuoi layout web, dandoti il ​​potere di prendere il controllo del tuo sito web e realizzare la tua visione creativa. Ma come puoi utilizzare i fogli di stile a cascata per sbloccare il potenziale del tuo prossimo sito web?

Questa guida descriverà in dettaglio solo una serie di proprietà CSS che sono state tutte utilizzate per creare l'intestazione che puoi vedere nell'immagine sopra. Puoi trovare questo progetto qui su CodePen, dandoti la possibilità di provarlo di persona.

Manipolazione di immagini CSS

Il primo passo che dobbiamo compiere per costruire la nostra sezione di intestazione è aggiungere immagini alla pagina. Puoi utilizzare una serie di metodi per raggiungere questo obiettivo, quindi abbiamo trattato i più popolari, insieme a un paio di trucchi per aiutarti a manipolare le tue immagini.

1. Immagine di sfondo CSS

Vogliamo avere un'immagine di sfondo a schermo intero per la nostra intestazione e la proprietà CSS dell'immagine di sfondo è l'ideale. Innanzitutto, dobbiamo creare un contenitore per la nostra immagine (e il resto degli elementi all'interno dell'intestazione).

Abbiamo iniziato aggiungendo un tag div con "header" come classe, quindi impostandolo altezza a 100vh e il suo larghezza a 100vw; questo ci dà una scatola che ha esattamente le stesse dimensioni del viewport. Abbiamo anche aggiunto una regola CSS per il corpo della pagina, con i suoi overflow impostato su nascosto e il suo margini impostati su 0px.

Con il contenitore in atto, possiamo aggiungere un'immagine di sfondo e ci sono tre diverse regole CSS di cui abbiamo bisogno per raggiungere questo obiettivo. La prima, l'immagine di sfondo, ha bisogno di un URL che funga da origine dell'immagine di sfondo e per questo abbiamo utilizzato il pratico catalogo Unsplash. Dobbiamo anche impostare il dimensione dello sfondo da coprire e il posizione dello sfondo verso il basso, ma potresti voler sperimentare con questi per ottenere i migliori risultati.

2. CSS Background-Blend-Mode

Le modalità di fusione CSS consentono di fondere immagini e testo, proprio come la funzione di fusione in software come Adobe Photoshop. Per far funzionare i metodi di fusione con la nostra immagine di sfondo, impostiamo il colore di sfondo al bianco semitrasparente prima di aggiungere la modalità di fusione che volevamo utilizzare.

Seguendo questo, la modalità di fusione dello sfondo è stata impostata su luce soffusa, permettendoci di ammorbidire l'immagine.

3. Percorso clip CSS

Per il nostro prossimo trucco, useremo una regola chiamata clip-path. Quando usi i tag HTML img, puoi impostare un percorso che nasconderà parti delle immagini con cui stai lavorando. Puoi scegliere di utilizzare forme generali per questo, ma puoi anche utilizzare un'app che genera SVG per creare un design più complesso.

Abbiamo aggiunto un tag div con "flex_image_box" per fungere da contenitore per tre immagini, utilizzando la proprietà display CSS per trasformarlo in un flexbox (ne parleremo più avanti). Sono stati aggiunti tre tag img all'interno del tag div, con ID impostati come "img1", "img2" e "img3". Impostazione del larghezza di ogni immagine a 600px, siamo in grado di lasciare vuota la proprietà height senza modificare le proporzioni delle immagini; ora è il momento di aggiungere il nostro percorso di clip!

Per creare i nostri tre triangoli, abbiamo utilizzato lo stesso percorso di clip del poligono per img1 e img3, con una versione invertita per img2. Abbiamo anche dovuto giocare con il posizionamento del nostro contenitore flex-box per assicurarci che le immagini si trovassero nella giusta posizione sullo schermo. Le nostre regole del percorso di clip possono essere visualizzate di seguito.

4. Opacità CSS

L'opacità imposta il livello di trasparenza di qualsiasi elemento HTML. Impostiamo il opacità delle nostre immagini al 90%, rendendoli leggermente opachi in modo che si fondano bene con lo sfondo.

Testo e immagini reattivi CSS

Abbiamo già esplorato l'arte di creazione di straordinari siti Web reattivi utilizzando HTML, CSS e JavaScript in passato, ma possiamo basarci sui principi che già conosci fornendo una visione più approfondita delle competenze necessarie per padroneggiare i layout del tuo sito web.

1. Unità reattive/relative CSS

Le unità CSS come px, pt e cm sono unità assolute e ciò significa che un browser Web le renderà della stessa dimensione, indipendentemente dalla larghezza e dall'altezza della finestra che occupano. Le unità relative sono diverse, producendo altezze e lunghezze relative ad altre misurazioni, come la finestra del browser o un elemento padre. Le unità relative seguenti sono comunemente usate ed essenziali per il web design reattivo.

• em: Questa unità viene solitamente utilizzata con il testo. È relativo alla dimensione del carattere dell'elemento corrente, rendendo 4 em quattro volte più grande della dimensione del carattere impostata.
• rem: Come em, rem è relativo alla dimensione del carattere di un elemento; l'elemento radice in una gerarchia viene utilizzato per definire la dimensione dell'output.
• vw/vh: determinando larghezza e altezza in base alle dimensioni della finestra, 2vw equivale al 2% della larghezza del browser mentre 2vh equivale al 2% dell'altezza del browser.
• %: L'unità % calcola le dimensioni in base alla dimensione del genitore di un elemento.
• vmin/vmax: queste unità producono dimensioni relative all'1% delle dimensioni più piccole o più grandi del viewport, fornendo agli elementi i mezzi per rispondere direttamente alle dimensioni di una finestra del browser.

2. Dimensione carattere CSS

Questa proprietà può essere impostata utilizzando valori predefiniti che sono predefiniti dal foglio di stile principale del sito Web o dal browser Web dell'utente. Questi valori includono medio, xx-piccolo, x-piccolo, piccolo, grande, x-grande e xx-grande, con medio impostato come predefinito per qualsiasi testo privo di un tag CSS della dimensione del carattere. In alternativa, è possibile utilizzare valori relativi quando si utilizza la proprietà CSS font-size, e questo è il metodo che abbiamo utilizzato per garantire che il testo nella nostra sezione di intestazione sia dimensionato in modo appropriato per qualsiasi vista.

Abbiamo aggiunto due tag di intestazione al nostro HTML, consentendoci di aggiungere testo al progetto. Uno è un'intestazione grande principale, mentre l'altro è un sottotitolo ed entrambi usano unità relative.

Imparentato: Come modificare la dimensione del carattere HTML nei CSS

3. Larghezza e altezza CSS

Tutti gli elementi HTML sono dotati di dimensioni di altezza e larghezza, siano esse div, img, a o qualsiasi altro tipo di tag. Queste dimensioni possono essere impostate automaticamente su valori predefiniti, ma possono anche essere dettate dai web designer utilizzando le regole corrette; abbiamo usato entrambi questi metodi per questa intestazione.

Per l'immagine di sfondo sono state utilizzate unità reattive, con l'altezza impostata su 100vh e la larghezza impostata su 100vw, ma abbiamo anche utilizzato unità assolute per le nostre tre immagini. Vale la pena esplorare e sperimentare con le unità di larghezza e altezza CSS, con opzioni come "eredita" che forniscono il significa adottare le dimensioni di un elemento genitore e ci sono molti altri trucchi come questo che puoi usare.

4. CSS Mix-Blend-Mode

La modalità mix-blend CSS è molto simile alla modalità background-blend, solo che può essere applicata a qualsiasi elemento, invece di essere esclusivamente per gli sfondi. Abbiamo utilizzato questa proprietà nella nostra intestazione H1 per aggiungere texture e rendere il progetto più interessante. Abbiamo iniziato impostando il nostro colore del testo al nero, seguito dall'impostazione di mix-blend-mode da sovrapporre.

Vale la pena esplorare le diverse opzioni di fusione che hai quando hai a che fare con il testo, poiché gli sfondi con profili colore unici risponderanno in modo diverso alle impostazioni che utilizzi.

5. CSS Text-Transform

CSS text-transform è una proprietà intelligente che consente ai designer di modificare le maiuscole e minuscole del testo sui loro siti Web senza influire sul modo in cui i motori di ricerca lo leggono. Ad esempio, abbiamo imposta la trasformazione del testo in maiuscolo sulla nostra intestazione H1, rendendo ogni lettera una maiuscola indipendentemente da come la inseriamo nel nostro HTML.

Proprietà di overflow CSS

L'HTML può spesso sembrare un quadro rigido che stabilisce limiti rigorosi per il contenuto dei tuoi siti Web, ma questo non è il caso quando vengono utilizzate proprietà di overflow.

Overflow CSS e overflow del testo

Overflow e text-overflow sono proprietà CSS molto simili. L'overflow può essere applicato a qualsiasi elemento, dandoti il ​​controllo sul contenuto che è in grado di sfuggire ai suoi confini. L'overflow del testo è simile, sebbene si applichi solo al testo e ti dia la possibilità di aggiungere parametri aggiuntivi alle tue regole. Abbiamo utilizzato l'overflow solo per questo progetto (l'abbiamo usato per limitare le dimensioni del corpo della nostra pagina), ma puoi leggere l'overflow del testo sul Scuole W3 sito web.

Utilizzo dei CSS per i tuoi layout web

CSS è uno strumento incredibilmente potente, che consente a web designer e sviluppatori di creare siti Web straordinari utilizzando il codice. Ti invitiamo a dare un'occhiata al CodePen che abbiamo fornito all'inizio dell'articolo, in quanto ciò ti darà una visione ancora più approfondita di come funzionano tutti questi strumenti. Inoltre, puoi giocare con l'intestazione che abbiamo creato per aggiungere i tuoi ritocchi finali.

8 suggerimenti e trucchi CSS essenziali che ogni sviluppatore dovrebbe conoscere

Stai usando questi metodi CSS chiave per un flusso di lavoro rapido e un bel web design?

Leggi Avanti

Circa l'autore