CSS, HTML und Javascript mit {stil}

CSS calc

Rechnen mit CSS calc und Variablen{ }

CSS calc führt Berechnungen auf gemischten Werten aus, für die wir ansonsten Javascript oder einen CSS Preprozessor einsetzen müssten: z.B. den verbleibenden Platz, wenn wir eine feste Breite von einer relativen Breite abziehen.

calc berechnet width, height, margin und weitere Größen – einfacher als Javascript, denn ein Script müsste die Werte bei jedem resize des Browserfensters permanent neu berechnen.

.right { 
   width: calc(100% - 150px);
}
.left { 
   width: 150px; 
}

Die + und - Operatoren müssen immer von Weißraum (Blanks, Leerzeichen) umgeben sein: So wird z.B. der Operand von calc(50% -8px) als Prozentanteil gefolgt von einer negativen Länge geparst – ein invalider Ausdruck. Hingegen ist der Operand von calc(50% - 8px) ein Prozentanteil gefolgt von einem Minuszeichen und einer Länge.

.header {
   width: calc(50% - 8px);
}

* und / Operatoren brauchen keinen Weißraum oder Blanks um sich hierum, aber Leerzeichen sind der Konsistenz zuliebe erlaubt und in diesem Sinne auch empfehlenswert.

Komplexe Berechnungen mit calc

.complex {
   width: calc(100% - 50%/3);
   padding: 5px calc(3% - 2px);
   margin-left: calc(10% + 10px);
}

Bilder mit CSS calc zentrieren

Responsive Slideshow mit CSS – Bild und Text zentriert. Auf kleinen Monitoren wird das Bild nicht einfach zur Briefmarke verkleinert, sondern passt sich nur der verfügbaren Breite an.

simply an A
kaktus
Rote Uhr
Umschlag und Stempel
Schwarze Box

Schlichtes HTML:

<div id="slider">  <!-- Slider container -->
   <div id="onframe">  <!-- onframe -->
      <div class="wrap">
          <figure class="animate1">
             <img src="img/a.jpg" width="680" height="360" alt="simply an A">
          </figure>
         <figure class="animate5">
            <img src="img/pack.jpg" width="680" height="360" alt="Schwarze Box">
         </figure>
      </div>
   </div>  <!-- End onframe -->
</div>  <!-- End Slider Container -->

Damit das Bild immer in der Mitte des Sliders sitzt:

#slider figure {
   width: 680px;  /* Breite des Bildes */
   height: 360px; /* Höhe des Bildes */
   position: absolute;
   left: calc(50% - 340px); /* Setzt Bild in die Mitte des sichtbaren Ausschnitts */
                      |
                      +--> 1/2 von 680px Breite
}

CSS calc mit Variablen

calc operiert auch auf CSS Variablen.

HTML
<div class="wrap">
   <div class="radius"> … </div>
   <div class="circle"> … </div>
</div>
CSS
:root {
   --me-width: 300px;
   --me-marge: 50px;
}
.wrap { 
   width: calc(var(--me-width) + var(--me-marge)); 
   height: calc(var(--me-width) + var(--me-marge));
}
.circle {
   width: var(--me-width); 
   height: var(--me-width);
   top: calc(var(--me-marge) / 2);
   left: calc(var(--me-width) / 2);
}
0153045607590105120135150165180195210225240255270285300315330345
300

Um die Größe und Position der Elemente zu ändern, muss nur eine Variable geändert werden.

Nur wenige Zeilen Javascript:

<script>
var range = document.querySelector(".range input");
var root = document.querySelector(':root');
var val;
range.onchange = function () {
   val = this.value;
   root.setAttribute("style", "--me-width: " + val + "px;");
}
</script>

Beispiel aus Online-HSL-Farbwähler für Webdesigner

Variationen und Alternativen zum Ändern von CSS-Variablen mit Javascript auf Stackoverflow