Kategorie: Developer

In diesem Beitrag zeige ich, wie man Checkboxen selektiert und stylen kann. Ich werde die System-Schaltflächen ausblenden und mit CSS selbst gestaltete hinzufügen.

• HTML Code
• Selektor und ausblenden
• einfaches Viereck erstellen
• Statuswechsel anzeigen
• erweitertes Styling
• checked mit Bildern
• Checkbox wie ein Switch

HTML Code

Vorab erstmal den HTML Code für eine Checkbox und das Label

<input id="confirm" type="checkbox" /><label for="confirm">Label content</label>

einfaches Viereck erstellen

Zum einfügen des Vierecks verwende ich das ::before Statement, es fügt vor dem ausgewählten HTML Objekt ein Element hinzu.

[type="checkbox"] + label {
  position: absolute;
}
[type="checkbox"] {
  position: relative;
  left: 15px;
  top: -4px;
  z-index: 0;
  -webkit-appearance: none;
}
[type="checkbox"] + label::before {
  width: 15px;
  height: 15px;
  background-color: #000;
  display: block;
  content: "";
  float: left;
  margin-right: 5px;
  z-index: 5;
  position: relative;
}

Subscribe to newsletter?

Statuswechsel anzeigen

Damit für den Benutzer die Änderung sichtbar wird, soll die Farbe auf Rot wechseln, wenn die Checkbox angeklickt wird.

input[type="checkbox"]:checked+label::before {
  background-color: #c72f2f;
}

Subscribe to newsletter?

erweitertes Styling

Mit ein par weiteren CSS Eigenschaften kann man mit CSS sich schöne Buttons erstellen.

[type="checkbox"] {
  position: relative;
  left: 15px;
  top: -4px;
  z-index: 0;
  -webkit-appearance: none;
}
[type="checkbox"] + label {
  position: absolute;
}
[type="checkbox"] + label::before {
  width: 15px;
  height: 15px;
  border-radius: 5px;
  border: 2px solid #8cad2d;
  background-color: #fff;
  display: block;
  content: "";
  float: left;
  margin-right: 5px;
  z-index: 5;
  position: relative;
}
[type="checkbox"]:checked+label::before {
  box-shadow: inset 0px 0px 0px 3px #fff;
  background-color: #8cad2d;
}

Subscribe to newsletter?

checked mit Bildern

Es ist auch möglich ein Bild zu verwenden, das Bild als background-image setzen und schon wird es verwendet.

[type="checkbox"] + label {
  position: absolute;
}
[type="checkbox"] {
  position: relative;
  left: 15px;
  top: -4px;
  z-index: 0;
  -webkit-appearance: none;
}
[type="checkbox"] + label::before {
  width: 22px;
  height: 18px;
  background-image: url("unchecked.png");
  display: block;
  content: "";
  float: left;
  margin-right: 5px;
  z-index: 5;
  position: relative;
}
[type="checkbox"]:checked+label::before {
  background-image: url("checked.png");
}

Subscribe to newsletter?

Checkbox wie ein Switch

[type="checkbox"] {
  position: relative;
  left: 30px;
  top: 0px;
  z-index: 0;
  -webkit-appearance: none;
}
[type="checkbox"] + label {
  position: relative;
  display: block;
  cursor: pointer;
  font-family: sans-serif;
  font-size: 24px;
  line-height: 1.3;
  padding-left:70px;
  position: relative;
  margin-top: -30px;
}
[type="checkbox"] + label:before {
  width: 60px;
  height: 30px;
  border-radius: 30px;
  border: 2px solid #ddd;
  background-color: #EEE;
  content: "";
  margin-right: 15px;
  transition: background-color 0.5s linear;
  z-index: 5;
  position: absolute;
  left: 0px;
}
[type="checkbox"] + label:after {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background-color: #fff;
  content: "";
  transition: margin 0.1s linear;
  box-shadow: 0px 0px 5px #aaa;
  position: absolute;
  left: 2px;
  top: 2px;
  z-index: 10;
}
[type="checkbox"]:checked + label:before {
  background-color: #2b8718;
}
[type="checkbox"]:checked + label:after {
  margin: 0 0 0 30px;
}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

CSS Tutorial

Voriger Schritt: CSS mehrere Transition versetzt starten

Zur Turtorial-Reihe: CSS Tutorial

Nächster Schritt: CSS Übungsaufgaben [Animation & Verlauf]

Ich habe ein paar CSS Fingerübungen geschrieben, hier kannst du diese nachmachen und dein CSS Wissen erweitern bzw. abfragen.

Animiertes Burger Menü

Aufgabe: Es soll ein animiertes Burger Menü-Icon erstellt werden. In diesem Beispiel bei einem hover Event ausgelöst werden.
Hamburger Menü Animation Lösung

Wiederholung Menu Animation

Aufgabe: Ein Burger Menu, soll zu einem Pfeil transformieren.
CSS Burger Arrow Menu Lösung

Animiertes Input-Text-Feld mit Validation

E-Mail

Aufgabe: Es soll ein Inputfeld erstellt werden, wenn man drauf klickt, soll das Label nach oben sliden und die Farbe bei der Validierung ändern.
Textinput Animation Lösung

Text mit Verlauf

The quick brown fox jumps over the lazy dog

Aufgabe: Es soll ein Text mit einem Verlauf gefüllt werden.
CSS Verlauf im Text Lösung

Warnsignal Animation

Aufgabe: Animiere ein Farb- Transparent- Verlauf so, dass es wie ein Alarm aussieht.
CSS animieter Alarm Lösung

Kombination aus den letzten beiden Übungen

The quick brown fox jumps over the lazy dog

Aufgabe: Animiere einen Text so, dass es so aussieht, als ob ein Scan durchgeführt wird.
CSS Scan-Text Animation Lösung

SVG Animation

Dem zu animierenden Objekt im SVG eine ID geben und diese mit CSS animieren.

<path id="cat_head" d="M244.4,0l-21.2,12.2l-10.9,6.3c-3.8-1.2-7.8-1.9-12-1.9c-5.3,0-10.3,1-14.8,2.9l-8.3-4.8L156,2.5l3.9,24.1l3.9,23.8
           c0.1,18.5,16.4,33.4,36.5,33.4c20.2,0,36.5-15.1,36.5-33.6c0-1-0.1-1.9-0.1-2.9l3.8-23.2L244.4,0z M183,48c-5.3,0-9.5-3.2-9.5-7.1
           c0-3.9,4.3-7.1,9.5-7.1s9.5,3.2,9.5,7.1C192.5,44.8,188.3,48,183,48z M216,46.9c-5.3,0-9.5-3.2-9.5-7.1s4.3-7.1,9.5-7.1
           s9.5,3.2,9.5,7.1S221.3,46.9,216,46.9z"/>

#cat_head{
  animation: headbang 2s ease infinite alternate;
}
@keyframes headbang {
  0% {
    transform: rotate(5deg);
    transform-origin: 90% 30%;
  }
  100% {
    transform: rotate(-5deg);
    transform-origin: 70% 30%;
  }
}

CSS Tutorial

Voriger Schritt: CSS: Checkbox styling

Zur Turtorial-Reihe: CSS Tutorial

Nächster Schritt: responsive Navigation mit Burgermenü

In dieser Tutorial-Reihe erkläre ich dir, das Basiswissen von CSS. Von Typografie bis zum Layout bekommst du hier, das Basiswissen, vermittelt.

Was ist CSS?

CSS ist eine Gastaltungs und Formatierungssprache, mit dieser Sprache kann man HTML Elemente stylen. Mit CSS kannst du Schrift, Farbe und Form einer Website definieren. CSS wird von allen Browser unterstützt und ist somit ein Web-Standart, den Standart definiert die World Wide Web Consortium. Der große Vorteil von CSS ist, es kann der Inhalt vom gestalterischen getrennt werden. Dadurch gewinnt man bei einer Website eine übersichtlichkeit und kann eine klare Struktur aufbauen.

CSS Tutorials

Styles definieren

Übersicht, wie du Styles auf HTML-Elemente anwendest. Von der Klasse bis zum hover Effekt. CSS Styles definieren

Kombinationsmöglichkeiten in CSS

Anleitung, wie du verschiedene Selektoren miteinander verknüpfst. Des weiteren eine Übung, wie du ein Teaser-Element baust. CSS Klassen kombinieren.

das Flexbox System

Mit Flexbox kannst du die Website designen und gestalten. Mit diesem System ist es möglich ein dynamisches Design zu erstellen, sprich es passt sich der Bildschirmgröße an. CSS Flexbox Tutorial.

Transitions versetzt starten

Mit transitions kannst du einfache Animationen, mit CSS, erstellen. In diesem Tutorial, zeige ich dir, wie du diese verketten kannst und mehrere Effekte aneinander reihst CSS mehrere Transition versetzt starten.

Checkbox stylen

Formelemente mit CSS zu stylen ist nicht gerade einfach, da dies Systemschaltflächen sind. Deswegen am Beispiel der Schwersten Schaltfläche ein Tutorial, wie du das Design änderst CSS: Checkbox styling.

responsive Tabelle

Simpler Hack wie man mit CSS und einem Wrapper eine Tabelle responsive macht (auf mobilen ‚Geräten horizontal scroll). CSS: responsive Tabellen

Übungsaufgaben

Ich habe ein paar CSS Fingerübungen geschrieben, hier kannst du diese nachmachen und dein CSS Wissen erweitern bzw. abfragen. CSS Übungsaufgaben [Animation & Verlauf]

responsive Navigation mit Burgermenü

Mit diesem Tutorial lernst du, wie du mit HTML/CSS eine responsive Navigation baust. Zum ein- und ausklappen der mobilen Navigation hast du ein Burger-Icon. responsive Navigation mit Burgermenü

geplante Tutorials 2021

• CSS in HTML einbinden
• das Grid Stystem
• Animationen mit CSS
• Formelemente stylen
• Pseudoklassen
• Typografie/Schrift definieren
• Farben und Verläufe
• CSS Debuggen

Flexbox ist der moderne Weg eine Seite zu layouten. Anhand von Beispielen zeige ich dir, wie du dynamische Element-Größen erstellst. Die Idee hinter Flexbox ist das dynamische Ändern von Größen der Unterelemente, damit die beste Größe benutzt wird. Der Flex Container passt sich dem verfügbaren Platz an und vergrößert bzw. verkleinert die Unterelemente.

Ich zeige dir Anhand von Design, Produktübersicht und Gallery wie du mit Flexbox arbeiten kannst. Des weiteren erhälst du noch eine Übersicht aller Flexbox Eigenschaften und den Beschreibungen.

Übersicht

1. Basics
2. Produktübersicht Beispiel
3. Eigenschaften Container
   1. flex
   2. flex-direction
   3. flex-wrap
   4. justify-content
   5. align-items

Basics

Flex setzt sich aus einem Container und den Elementen zusammen. Dabei ist zu beachten, dass der Flex-Container nur eine Ebene unter sich selbst wirksam ist. Wenn du ein Container hast, werden nur die direkten Unterelemente davon etwas mitbekommen, die Elemente die in den Elementen sind bekommen nichts von Flex mit.

<div class="flex-container">
  <div class="flex-element"></div>
  <div class="flex-element"></div>
  <div class="flex-element"></div>
</div>

Produktübersicht Beispiel

In diesem Beispiel sollen 10 Produkte angezeigt werden. Die Kacheln sollen alle gleich Groß sein und den selben Abstand zwischen den Kacheln und dem Rand haben.

Schritt 1 – die HTML Struktur

Zuerst brauchen wir die HTML Struktur, die ein Container aufweist und 10 Produkt Kacheln.

  <div class="flex-container">
    <div class="product-tile">
      <img src="zucker.jpg" alt="Karotten">
      <h2>Zucker</h2>
      <span>1,10 €</span>
    </div>
    <div class="product-tile">
      <img src="milch.jpg" alt="Karotten">
      <h2>Milch</h2>
      <span>1,00 €</span>
    </div>
    <div class="product-tile">
      <img src="mandeln.jpg" alt="Karotten">
      <h2>Mandeln</h2>
      <span>4,00 €</span>
    </div>
    <div class="product-tile">
      <img src="käse.jpg" alt="Karotten">
      <h2>Käse</h2>
      <span>2,50 €</span>
    </div>
    <div class="product-tile">
      <img src="karotten.jpg" alt="Karotten">
      <h2>Karotten</h2>
      <span>2,00 €</span>
    </div>
    <div class="product-tile">
      <img src="fleisch.jpg" alt="Karotten">
      <h2>Fleisch</h2>
      <span>6,00 €</span>
    </div>
    <div class="product-tile">
      <img src="erdbeeren.jpg" alt="Karotten">
      <h2>Erdbeeren</h2>
      <span>3,10 €</span>
    </div>
    <div class="product-tile">
      <img src="eier.jpg" alt="Karotten">
      <h2>Eier</h2>
      <span>1,80 €</span>
    </div>
    <div class="product-tile">
      <img src="brot.jpg" alt="Karotten">
      <h2>Brot</h2>
      <span>2,40 €</span>
    </div>
  </div>

Das sieht dann im Browser wie folgt aus:

Schritt 2 – CSS Magic

Jetzt stylen wir die Kacheln und den Container so, dass er nach einer ordentlichen Produktübersicht aussieht.

    .flex-container {
      display: flex;
      justify-content: space-between;
      flex-flow: row wrap;
      align-content: stretch;
      align-items: stretch;
    }
    .product-tile {
      border: 2px solid black;
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 150px;
      margin: 0 12px 24px;
      flex-flow: row wrap;
      align-content: flex-start;
    }
    img {
      width: 100%;
    }

Nach dem übertragen der CSS Attribute sieht dann unsere Produktübersicht wie folgt aus:

Schritt 3 – leere Kacheln

Das ist aber noch nicht das Ergebnis das wir haben wollen, es sollen alle Kacheln gleich groß sein und sollen den gleichen Abstand zu einander haben. Dafür werden leere Kacheln benötigt, am besten so viele wie Kacheln selbst vorhanden sind, aber ich rechne immer mit 2000px / Kachelbreite (Flex Basis). Sprich unsere Kachelbasis ist 150px deswegen brauchen wir jetzt 2000/150 = 13,3 Kacheln… sicher ist sicher also lieber 14.

    <div class="product-tile">
      <img src="brot.jpg" alt="Karotten">
      <h2>Brot</h2>
      <span>2,40 €</span>
    </div>
    <div class="product-tile"></div>
    <div class="product-tile"></div>
    <div class="product-tile"></div>
    <div class="product-tile"></div>
    <div class="product-tile"></div>
    <div class="product-tile"></div>
    <div class="product-tile"></div>
    <div class="product-tile"></div>
    <div class="product-tile"></div>
    <div class="product-tile"></div>
    <div class="product-tile"></div>
    <div class="product-tile"></div>
    <div class="product-tile"></div>
    <div class="product-tile"></div>

Jetzt müssen die leeren Kacheln noch unsichtbar werden.

.product-tile:empty {
  order: 999999999999999999999;
  height: 0;
  border: 0;
}

Demo öffnen

Eigenschaften Container

Display Flex

Definiert den Container als Flex

.container {
  display: flex;
}

Alternativ kann auch flex-inline verwendet werden. Wenn es als Layout verwendet werden soll, nimmt man flex. Wenn es z.B. in einem Artikel oder Navigation verwendet wird, nimmt man flex-inline.

.container {
  display: flex-inline;
}

flex-direction

Mit flex-direction gibt man die Flußweise an, z.B bei row fließen die Elmente von links nach rechts, bei row-reverse von rechts nach links, bei column von oben nach unten und bei column-reverse von unten nach oben.

flex-direction: row

    .flex-container {
      display: flex;
      flex-direction: row;
    }

flex-direction: row-reverse

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

flex-direction: column

.flex-container {
  display: flex;
  flex-direction: column;
}

flex-direction: column-reverse

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

flex-wrap

Flex Wrap gibt ann wie die Elemente umbrechen. Sprich bei nowrap werden alle Elemente in einer Zeile angezeigt und werden gequetscht. Bei wrap werden die Elemente umgebrochen, wenn sie die Breite erreicht haben fängt eine neue Zeile an. wrap-reverse macht das gleiche wie wrap, bloß die Elemente werden invertiert, sprich das letzte Element wird als erstes Angezeigt und die Zeilen werden von unten nach oben aufgefüllt.

flex-wrap: nowrap

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

flex-wrap: wrap

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

flex-wrap: wrap-reverse

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

justify-content

Justify Content definiert den Platz zwischen den Elementen. Sprich es berechnet die dynamischen Abstände zwischen den Elementen wenn diese an der Hauptachse ausgerichtet sind.

justify-content: flex-start

.flex-container {
  display: flex;
  justify-content: flex-start;
}

justify-content: flex-end

.flex-container {
  display: flex;
  justify-content: flex-end;
}

justify-content: center

.flex-container {
  display: flex;
  justify-content: center;
}

justify-content: space-between

.flex-container {
  display: flex;
  justify-content: space-between;
}

justify-content: space-around

.flex-container {
  display: flex;
  justify-content: space-around;
}

justify-content: space-evenly

.flex-container {
  display: flex;
  justify-content: space-evenly;
}

align-items

Align-Items ist die horizontale Version von Justify Content, es richtted die Elemente an der Horizontalen Line aus.

align-items: stretch

.flex-container {
  display: flex;
  align-items: strech;
}

align-items: flex-start

.flex-container {
  display: flex;
  align-items: flex-start;
}

align-items: flex-end

.flex-container {
  display: flex;
  align-items: flex-end;
}

align-items: center

.flex-container {
  display: flex;
  align-items: center;
}

align-items: baseline

.flex-container {
  display: flex;
  align-items: baseline;
}

CSS Tutorial

Voriger Schritt: CSS Klassen kombinieren

Zur Turtorial-Reihe: CSS Tutorial

Nächster Schritt: CSS mehrere Transition versetzt starten