Calculatie berekenen calc() CSS optellen aftrekken delen

In HTML en WordPress kun je een bullet lijst maken met <-ul-> (bolletjes) of <-ol-> (ordered / genummerd). Je gebruikt voor elk item <-li-><-/li-> .

Logo cursus traing wordpress

Calculatie berekenen calc() CSS optellen aftrekken delen

calculaties en berekeningen maken met calc()

Alle CSS Preprocessors hebben wiskunde functies en ze zijn behoorlijk nuttig. Maar ze zijn niet zo krachtig als native wiskunde. De meest nuttige eigenschap van calc() is de mogelijkheid om eenheden te mixen, zoals percentages en pixels. Geen enkele Preprocessor zal dat ooit kunnen. Het is iets dat moet gebeuren tijdens het renderen. Dit is een handleiding met .

Met CSS optellen aftrekken vermenigvuldigen delen

calc() is een native CSS manier om eenvoudige wiskunde direct in CSS te doen als vervanging voor elke lengte-waarde (of zowat elke getalwaarde). Het heeft vier eenvoudige wiskunde operatoren:

  • optellen (+)
  • aftrekken (-)
  • vermenigvuldigen (*)
  • delen (/)

Voorbeelden calculaties en berekeningen maken met calc()

Aantal pixels van rechter onderhoek berekenen

We kunnen -afbeelding gemakkelijk X pixels van de linkerbovenhoek plaatsen.

background-image: url(hond.png); background-position: 50px 20px;

Dat zou de hond 50px van links en 20px van boven in het elementenvak zetten. Maar wat als je hem 50px van rechts en 20px van onder wilt hebben? Niet mogelijk met alleen rechte lengte waarden. Maar calc() maakt het mogelijk!

background-image: url(hond.png); background-position: calc(100% - 50px) calc(100% - 20px);

Kolombreedte berekenen

Kolombreedte berekenen doe je zo heel nauwkeurig:

.column-1-7{width: calc(100% / 7);} .column-2-7{width: calc(100% / 7 * 2);} .column-3-7{width: calc(100% / 7 * 3);}

Padding links rechts berekenen met calculatie

Je kan padding links rechts berekenen met calculatie. Dit ziet er zo uit in CSS

padding-left: calc((100vw - 1200px) / 2); 

vw wil zeggen viewport-width, zeg maar schermbreedte.
Dit betekent dit:

  • calc((100%-breedte-scherm – containerbreedte) / gedeeld-door-2);

In je CSS kan het totaal er dus zo uit komen te zien:

@media (min-width: 1201px) {
	.jouw-div-of-kader {
padding-left: calc((100vw - 1200px) / 2); 
padding-right: calc((100vw - 1200px) / 2);
} 
}

Lees hieronder meer over de vw-waarde:


Links en inspiratie voor berekeningen maken:

https://developer.mozilla.org/en-US/docs/Web/CSS/calc()
Tips calculaties voor kolommen in CSS

center-left-margin-but-right-margin-100-of-viewport-to-the-end

A Couple of Use Cases for Calc()

Meer informatie over Calculatie berekenen calc() CSS optellen aftrekken delenof info?

Wil je meer weten? Veel web-designers met interesse in Calculatie berekenen calc() CSS optellen aftrekken delen bekeken ook de onderstaande veel gelezen handleidingen:


Training of cursus CSS en html

Snel CSS en html leren

Leer hoe je je WordPress site beter en kan maken en beheren in de html-css training op maat:
CSS en HTML-cursus voor WordPress

WP Bootcamp spoedopleiding

Leer hoe je je website sneller kan maken en ontwerpen in de WP Bootcamp spoedopleiding:
WordPress Bootcamp spoedopleiding

Info over Calculatie berekenen calc() CSS optellen aftrekken delen?

Neem contact op met Arthur als je nog vragen hebt over ontwerp, Calculatie berekenen calc() CSS optellen aftrekken delen en WordPress web-development.

WP developer

Arthur Wentzel, web-designer

06 20 83 05 83

Scroll naar boven