10 incredibili trucchi CSS per trasformare i tuoi layout web

Stai cercando di trasformare i tuoi layout web con i CSS? Sei nel posto giusto.

Chiunque abbia esperienza nel web design, sia che tu abbia utilizzato costruttori di siti Web fai-da-te o creato un sito da zero, probabilmente avrà 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 tu stesso.

Manipolazione delle immagini CSS

Il primo passo che dobbiamo compiere per costruire la nostra sezione di intestazione è aggiungere immagini alla pagina. Puoi utilizzare diversi 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 background-image è l'ideale. Per prima cosa 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 impostando la sua altezza su 100vh e la sua larghezza su 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 il suo overflow impostato su nascosto e i suoi margini impostati su 0px.

Una volta installato il contenitore, possiamo aggiungere un'immagine di sfondo e sono necessarie tre diverse regole CSS per raggiungere questo obiettivo. Il primo, background-image, necessita di un URL che funga da fonte dell'immagine di sfondo e per questo abbiamo utilizzato il pratico catalogo Unsplash. Dobbiamo anche impostare la dimensione dello sfondo da coprire e la posizione dello sfondo in basso, ma potresti voler sperimentare queste opzioni per ottenere i migliori risultati.

2. Modalità di fusione dello sfondo CSS

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 le modalità di fusione con la nostra immagine di sfondo, impostiamo il colore di sfondo su bianco semitrasparente prima di aggiungere la modalità di fusione che volevamo utilizzare.

Successivamente, 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, utilizzeremo una regola chiamata clip-path. Quando utilizzi 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 potresti anche utilizzare un'app che genera SVG per creare un design più intricato.

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

Per creare i nostri tre triangoli, abbiamo utilizzato lo stesso percorso di clip poligonale 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 per il percorso di ritaglio possono essere visualizzate di seguito.

4. Opacità CSS

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

Testo e immagini reattivi CSS

Abbiamo già esplorato l'arte di creare straordinari siti web reattivi utilizzando HTML, CSS e JavaScript in passato, ma possiamo basarci sui principi che già comprendi 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à alla stessa dimensione indipendentemente dalla larghezza e dall'altezza della finestra che occupano. Le unità relative sono diverse e producono altezze e lunghezze relative ad altre misurazioni, come la finestra del browser o un elemento principale. Le unità relative riportate di seguito sono comunemente utilizzate ed essenziali per il responsive web design.

em: questa unità viene solitamente utilizzata con il testo. È relativo alla dimensione del carattere dell'elemento corrente, rendendo 4em 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 alla dimensione del viewport, 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 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 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 abbia le dimensioni appropriate per qualsiasi viewport.

Abbiamo aggiunto due tag di intestazione al nostro HTML, permettendoci di aggiungere testo al progetto. Una è un'intestazione principale di grandi dimensioni, mentre l'altra è un sottointestazione ed entrambe utilizzano unità relative.

Correlato: 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 essi 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 utilizzato 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 utilizzato anche unità assolute per le nostre tre immagini. Vale la pena esplorare e sperimentare le unità di larghezza e altezza CSS, con opzioni come "eredita" che forniscono i mezzi per adottare le dimensioni di un elemento genitore, e ci sono molti altri trucchi come questo che puoi usare.

4. Modalità Mix-Blend CSS

La modalità mix-blend CSS è molto simile alla modalità background-blend, solo che può essere applicata a qualsiasi elemento, anziché essere utilizzata esclusivamente per gli sfondi. Abbiamo utilizzato questa proprietà sulla nostra intestazione H1 per aggiungere texture e rendere il progetto più interessante. Abbiamo iniziato impostando il colore del testo su nero, quindi impostando la modalità mix-blend su overlay.

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

5. Trasformazione del testo CSS

La trasformazione del testo CSS è 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 impostato la trasformazione del testo in maiuscolo sulla nostra intestazione H1, rendendo ogni lettera maiuscola indipendentemente da come la inseriamo nel nostro HTML.

Proprietà di overflow CSS

L'HTML può spesso sembrare una struttura rigida che stabilisce limiti rigidi per il contenuto dei tuoi siti Web, ma questo non è il caso quando vengono utilizzate le 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 solo l'overflow per questo progetto (lo abbiamo utilizzato per limitare la dimensione del corpo della nostra pagina), ma puoi leggere informazioni sull'overflow del testo sul sito Web W3Schools.

Utilizzo dei CSS per i tuoi layout Web

I CSS sono uno strumento incredibilmente potente che consente ai web designer e agli sviluppatori di creare siti Web straordinari utilizzando il codice. Ti invitiamo a dare un'occhiata al CodePen che abbiamo fornito all'inizio dell'articolo, poiché ti fornirà una visione ancora più approfondita di come funzionano tutti questi strumenti. Inoltre, puoi giocare con l'intestazione che abbiamo creato per aggiungere il tuo tocco finale.