Css: la Funzione Calc()

by admin admin Date: 13-10-2015 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)

 
by admin admin Date: 13-10-2015 css3 html5 design funzioni visite : 1763  
 
 
 
 

Articoli correlati

    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  

    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…

    Realizzare banner animati con CSS3

    Avete dei clienti esigenti che "ancora" vi chiedono movimentati, sbrilluccicanti banner in flash? Se siete stanchi di rispondere che ormai il flash è andato in pensione potete proporre una soluzione…

    I 10 migliori generatori di gradienti CSS

    Difficilmente si potrà creare il gradiente perfetto affidandoci alla pura e semplice scrittura di codice CSS. Avere un riferimento visivo in fase di creazione è fondamentale. Ecco perché tra i tool…

    15 effetti di testo avanzati con CSS3

    Le nuove proprietà CSS3 sono senza dubbio un grande vantaggio per poter modellare a piacimento tutti gli elementi di una pagina web senza dover ricorrere all'utilizzo del codice javascript. Una delle…