Snippets

Browser Back-Button simulieren

Html + CSS:
<button 
    style="font-size: 2rem;
    padding: 0.5rem 1rem;
    background-color: red;"
    onclick="history.back()">
    Go Back
</button>

CSS Transform

Achtung: Die Elemente nehmen keine Rücksicht auf ihre Umgebung. Auf ausreichenden Platz achten.

transform: translate verschiebt ein Element auf den beiden Achsen.

transform: scale() macht ein Element grösser oder kleiner.

transform: skew verschrägt ein Element auf den beiden Achsen.

transform: rotate verdreht ein Element um die z-Achse.

flex-und-grid

Html:
<div class="beispiel-transform-translate"></div>

CSS:
.beispiel-transform {
    width: 100px;
    height: 200px;
    border: 2px solid #000;
    background-color: #00d8ff;
}

transform: translate:

transform: scale():

Achtung: Nachstehend sehen Sie transform: scale(0);. Das Element verschwindet,- wie bei display: none; :-). Es nimmt aber immer noch seinen nun reservierten Platz ein

transform: skew():

transform: rotate():

Gedankenstütze:

Kriterien:

Kontrast Ratio:

Hier testen:

Farbenblindheit:

Hier testen: https://www.toptal.com/designers/colorfilter

Testergebnis für Greyscale/achromatopsia: https://www.toptal.com/designers/colorfilter?orig_uri=https://the-hook-inc.de/html/layout-bestuecken/layout3-bilder.html&process_type=grey

Links mit Icons (Sprites). (mit Farbe bei hover):

Sprites sind längliche Bilderstreifen für Backgroundbilder, welche eine Serie von kleineren Bildern enthalten. Also ein Bild mit verschiedenen Bildern darin.

Das spart Ladezeit um viele kleine Einzelbildern zu laden. Die gewünschten Einzelbilder werden mit ihrer Positionierung im Gesamtbild dann ausgewählt.

Farben mit hsl und hsl"a" (mit 0 bis 360deg Regenbogenfarbreihe und Opacity "a" 1):

Boxen mit gleichen Höhen und float: funktioniert nicht!

Boxen mit gleichen Höhen und flex: funktioniert

Ein H2-Element responsiv mit Grid stylen:

Media-Objekt stylen:

Media Object

This is a media object. There’s an image and also some content.

In this case, the content is a heading followed by two paragraphs of text.

Media Object

This is a media object. There’s an image and also some content.

In this case, the content is a heading followed by two paragraphs of text.

Golden Ratio

Wichtige Designregel

Golden Ratio:
61,73% + 38,27% = 100% Gesamtlänge

Experimente mit details:

Experimente mit dem "details"-Element

A paragraph

• List item 1
• List item 2
• List item 3

This is a Link to nowhere.

Länderauswahl mit "select"

Timeline:

lazy-loading für Bilder und Videos:

<img src="../../images/unsplash/flaschenregal-1920x1277.jpg" loading="lazy" alt="Flaschenregal in einer Bar"> 

Flexibles Layout ohne Breakpoints (Flex)

Button mit 3D-Effekt

Anchor (Link) mit Background-Animation:

Button mit Background-scale:

Die Schriftgrösse bleibt davon unberührt!:

"Box-shadow-perfect" vor der jeweiligen Hintergrundfarbe:

HTML:
<div class="box-shadow-perfect">
    <div class="black box">Too grey</div>
    <div class="darker box">Too bright</div>
    <div class="goldilocks box">Just right</div>
</div>

CSS:
.box-shadow-perfect {background-color: hsl(220deg 100% 80%);}

.black.box {box-shadow: 1px 2px 8px hsl(0deg 0% 0% / 0.5);}

.darker.box {box-shadow: 1px 2px 8px hsl(220deg 100% 50%);}

.goldilocks.box {box-shadow: 1px 2px 8px hsl(220deg 60% 50%);}

Transition: Mondumlauf simulieren:

HTML:
<div class="transition-moon">
    <div class="planet"></div>
    <div class="moon"></div>
</div>

CSS:
.transition-moon{position: relative;}

.planet {
    width: 80px;
    height: 80px;
    background: dodgerblue;
    border-radius: 50%;
}

.moon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 20px;
    height: 20px;
    background: silver;
    border-radius: 50%;
}

@keyframes orbit {
    from { transform: rotate(0deg) translateX(80px); }
    to { transform: rotate(360deg) translateX(80px); }
  }
  
  @media (prefers-reduced-motion: no-preference) {
    .moon { animation: orbit 12000ms linear infinite; }
  }

Eine Variable in einem H3-Element in CSS erzeugen:

CSS:
h3 { --highlight-color: yellow; } /* Variable erzeugen*/
em { background: var(--highlight-color); } /* gilt dann nur in einem em in h3! */

<h3>Diese H3 Überschrift hat einen <em>extra hervorgehobenen Textabschnitt</em></h3>

Ordered List mit: counter und counters:

1. Obst
   1. Äpfel
   2. Orangen
   3. Birnen
2. Fleischwaren
   1. Schweinekotlet
   2. Salami
   3. Schwartenmagen

2 Artikel nebeneinander anordnen:

Hier 2 normale Artikel:

2 normale Artikel mit columns: 2;

Artikel 1 schwappt in die zweite Spalte!

2 normale Artikel mit columns: 2;

Artikel "entschwappen" mit break-inside: avoid;

Untermenü transition:

• Parent Link
  • Child Link
  • Child Link
  • Child Link
  • Child Link

flex-und-grid min() und max()

Die mathematische Funktion min() erwartet eine kommaseparierte Liste von Längenangaben
Die kürzeste Länge wird dann ausgewählt.

div {
width: min(600px, 400px, 900px);
}
/* width = 400px wird ausgewählt*/
Obige Angaben machen eigentlich keinen Sinn.

div {
  width: min(100%, 800px);
}
/* maximal 800px, falls weniger dann 100% */

Eine andere Schreibweise wäre:
div {
    width: 100%;
    max-width: 800px;
}

div {
width: max(600px, 400px, 900px);
}
/* width = 900px wird ausgewählt*/
Bei kleiner 900px läuft das div über. Macht also wenig Sinn.

div {
 width: max(300px, 50vw);
}
/* mindestens 300px oder 50% der gesamten Bildschirmbreite */

Overscroll Verhalten

Ohne Overscoll: overscroll-behavior: none;

Mit Overscoll: overscroll-behavior: none;

Platzhalter

some Text..