CSS: la funzione Calc()

by Janeth Kent Date: 28-10-2021 css3 html5 design funzioni

Nella progettazione di un sito web responsive, dobbiamo tener conto della ormai grande varietà di dispositivi sui quali sarà visualizzato il nostro lavoro e delle rispettive variazioni di risoluzioni alle quali dovrà adattarsi.

Calc() è una di quelle proprietà css che semplificano il nostro lavoro e che ci permettono di evitare di usare JavaScript, consentendoci di effettuare calcoli direttamente nel foglio di stile, utilizzando diverse unità di misura. 

I calcoli che è possibile svolgere prevedono l’uso dei quattro principali operatori: +, -, *, / .

A livello sintattico bisogna tener conto di due i fattori:

1. È possibile, utilizzare unità di misura diverse. Non solo px con px, dunque, ma anche px con em, % e così via.

2. Il segno dell’operazione va sempre circondato da uno spazio bianco.

Si scrive dunque così

width: calc(100% - 300px)

Fatte le dovute premesse, vediamo ora alcuni esempi.

 

Allineamento verticale centrato

 

Se si conosce l'altezza dell'elemento, CSS Calc ci permette di ottenere un allineamento verticale al centro.

calc( 50vh – 1/2 altezza dell'elemento)

50vh è sempre la metà dell'altezza della finestra: in questo modo posizioniamo l'elemento a metà strada, verso il basso rispetto allo schermo, ma non rappresenta il centro assoluto perchè non abbiamo preso in conto l'altezza dell'oggetto.

Occorre rimuovere la metà dell'altezza dell'oggetto per ottenere il risultato finale.

Vedi su CodePen Calc() - Vertical Centre by Vincent Pickering (@vipickering)

 

Griglia fluida rispetto ad un elemento a larghezza fissa

 

Questo è il caso tipico che ci si presenta nella progettazione di un sito con colonna laterale a larghezza fissa.

La dimensione dell'elemento principale, ossia il nostro contenitore fluido, sarà calcolata in base alla formula:

calc( 100% - larghezza elemento 2)

Vedi su CodePen Calc() - 100% Width & fixed width elements by Vincent Pickering (@vipickering)

 

Posizionamento dello sfondo dall'angolo in basso a destra

 

A volte si ha la necessità di posizionare un'immagine di sfondo vicino all'angolo in basso a destra di un contenitore, ma non eccessivamente...

Calc() anche in questo caso viene in nostro aiuto, permettendoci di risolvere il nostro problema senza l'utilizzo di contenitori aggiuntivi (come avveniva in passato).

calc(100% - padding desiderato)

Usiamo calc per posizionare l'immagine completamente a destra quindi rimuoviamo il padding desiderato.

Vedi su CodePen CSS Calc - Background positioning from the right

 

Contenitore al 100% con dei sotto box equamente distribuiti

 

Una decisione abbastanza comune è quella di avere più contenitori/box all'interno di un contenitore padre.

La larghezza dei contenitori interni sarà calcolata in percentuale a quella del contenitore padre, e saranno posizionati in maniera equidistante tra di loro.

Per raggiugere tale scopo, di solito basta assegnare uno width al 33%.

Ció che possiamo ottenere con Calc() è una flessibilità extra per i contenitori interni. Se, ad esempio si volessero aggiungere dei bordi ad ogni box, la funzione Calc() ci viene incontro.

width: calc(100% / numero di box – dimensione totale del margine);

I contenitori saranno tutti equidistanti all'interno del loro contenitore padre, e sono predisposti all'aggiunta di ulteriori modifiche come bordi o margini.

Vedi su CodePen CSS Calc - boxes always a %age of their container

 

Contenitore al 100% e margini negativi

 

Alziamo il livello e complichiamoci la vita: un elemento figlio con larghezza al 100% rispetto ad un  contenitore padre che ha un margine negativo.

Anche qui, Calc() fa al caso nostro.

width: calc(100% + margin width);

Qui aumentiamo semplicemente la larghezza del contenitore per tenere conto del valore negativo.

Vedi su CodePen Calc() - Flud Width, with negative margins

 

Rapido Layout a griglia (solo per demo...)

 

Si tratta di una tecnica che di certo non è consigliabile per un sistema live, ma se aveste bisogno di una demo veloce, con  calc si può realizzare molto rapidamente un sistema di griglia rudimentale in poche righe.

width:calc(100% / numero totale di colonne in una riga*)

dobbiamo semplicemente aggiungere:

.col-1 { width:calc(100% /5*1); }

.col-2 { width:calc(100% /5*2); }

.col-3 { width:calc(100% /5*3); }

Ecc..



 

Vedi su Code Pen Calc() - Quick and Dirty Grid System






Image by 200 Degrees from Pixabay
 
by Janeth Kent Date: 28-10-2021 css3 html5 design funzioni visite : 6906  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.

 
 
 

Articoli correlati

Introduzione alle CSS Container Queries

Il responsive web design è una componente essenziale dello sviluppo web. Come sviluppatori front-end, dobbiamo preoccuparci continuamente della moltitudine di nuove risoluzioni e dispositivi. Va da se che creare una versione…

Flexbox, breve guida pratica

In questo articolo impareremo a gestire gli elementi del nostro sito web in modo più efficiente ed efficace, grazie alla proprietà Flexbox. Ma attenzione, non stiamo parlando di una semplice proprietà…

Java Design Pattern: Prototype Pattern

Andremo ora a parlare di un pattern creazionale che ci permette di "copiare con classe". Sì, anche se sembra strano, il compito fondamentale di questo pattern è copiare. Sto parlando…

Java Design Pattern: Builder Pattern

Andiamo oggi a parlare di un pattern creazionale che in molte situazioni può rappresentare una valida alternativa alla costruzione di oggetti mediante costruttori: il Builder Pattern. La necessità di introdurre meccanismi…

Java Design Pattern: Factory Pattern

Continuando il discorso sui design pattern iniziato precedentemente, andiamo oggi a vedere un altro pattern molto utilizzato: il Factory Method Pattern. Il GoF (Gang of Four Design Patterns) lo definisce così: Definisce…

Java: Introduzione ai design pattern: Singleton

Chiunque abbia anche una minima esperienza di programmazione, si sarà reso conto di come i problemi sianoricorrenti. Infatti troviamo spesso problemi con uno stesso pattern ma con contesti differenti. Ad esempio, un…

Paesaggi Parallax costruiti interamente con CSS e HTML

Il CSS3 ha messo finalmente fine alle nostre frustrazioni: con delle semplici proprietà si aprono infatti infinite soluzioni. Una tra tante, la possibilità di inserire uno sfondo animato in una pagina…

Introduzione all'animazione dei poligoni con css

Per lungo tempo noi sviluppatori web, abbiamo dovuto rassegnarci alle strutture geometriche fondamentali: i blocchi rettangolari. Cosí, quando è stato introdoto il clipping nei css, abbiamo gioito. Dite la verità... Ma cos'è…

Flat UI Design - 8 siti ai quali ispirarsi

In questo post vi proproniamo una collezione di flat template professionali, perfetti per realizzare siti dal design semplice, pulito ma al tempo stesso accattivante. Brewery O come fare bella figura con un amico invitandolo a…

HTML5: l'elemento track

L'elemento Track di HTML5 consente di aggiungere del testo ai file in riproduzione multimediale e visualizzarlo nel lettore video HTML5, senza necessità di script o software aggiuntivo. Il testo può includere…

Google I/O 2014: le novità

2 giorni, 6 mila sviluppatori: l'evento Google più atteso dell'anno, il Google I/O, non ha tradito le attese della vigilia, che anticipavano, come portate principali, il varo di  Android 5.0…

16 siti per scaricare immagini vettoriali gratuite

Le immagini vettoriali, sono fondamentali per chi si occupa di grafica e web design.   La caratteristica che contraddistingue un’immagine vettoriale, da una normale, come ad esempio una fotografia, è che…

Clicky