Css: la Funzione Calc()

by Janeth Kent Date: 13-06-2020 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 by Vincent Pickering (@vipickering)

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 by Vincent Pickering (@vipickering)

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 by Vincent Pickering (@vipickering)

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 by Vincent Pickering (@vipickering)

Image by 200 Degrees from Pixabay
 
by Janeth Kent Date: 13-06-2020 css3 html5 design funzioni visite : 3429  
 
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 END DEVELOPMENT.

 
 
 

Articoli correlati

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…

Cuixot - prosciutti e salumi mallorchini

Progetto: Cuixot de Porc Negre Mallorquí grafica web development SEO PHP/MYSQL, HTML, AJAX, Javascript, CSS  frontend/backoffice Pcore CMS Link al sito: Cuixot - Productos de la raza de cerdos negros de Mallorca

Menu Elegante Soul Restaurant

Menu elegante ristorante Soul, Can Pastilla, Maiorca studio grafico design cre​atività  

Promo Soul Restaurant - Cicli Clementi

Promo ristorante Soul, Can Pastilla, Mallorca studio grafico design creatività  

Arianna Mazzetta logo

Arianna Mazzetta  logo case Study in Photoshop / Illustrator

Arianna Mazzetta

Sito per la dott.essa Arianna Mazzetta, biologa nutrizionista grafica sviluppo web piattafrma blog sito dinamico CMS personalizzato SEO PHP/MYSQL, HTML, AJAX, Javascript, CSS, Responsive design Link a Arianna Mazzetta, biologa nutrizionista http://ariannamazzetta.it/    

Mediterrani Events

Progetto: Mediterrani Events - Rosa Miranda grafica web sviluppo web  SEO PHP/MYSQL, HTML, AJAX, Javascript, CSS area frontend/backoffice Pcore CMS Link a Mediterrani Events - Agencia de eventos, comunicación y azafatas  

Utilizziamo i nostri cookie e quelli di terzi per migliorare i nostri servizi, compilare informazioni statistiche e analizzare le vostre abitudini di navigazione. Questo ci permette di personalizzare i contenuti che offriamo e di mostrarvi le pubblicità relative alle vostre preferenze. Cliccando su "Accetta tutto" acconsentite alla memorizzazione dei cookie sul vostro dispositivo per migliorare la navigazione del sito web, analizzare il traffico e assistere le nostre attività di marketing. Potete anche selezionare "Solo cookies di sistema" per accettare solo i cookies necessari al funzionamento del sito web, oppure potete selezionare i cookies che desiderate attivare cliccando su "Impostazioni". Tradotto con www.DeepL.com/Translator (versione gratuita)" o "Rifiuta".

Accetta tutti Solo cookies del sistema Configurazione