tools : mediafant

CSS - Breakpoints

Desktop first

css


// desktop-first

// Standard bzw. XXL - alles über 1400px | alles über 87.5rem
//container-width: 1320px ist 82.5rem

// XL - 1200px bis 1399px | 75rem bis 87.4999rem
//container-width: 1140px ist 71.25rem
@media only screen and (max-width: 87.5rem) { // max 1400px
    // container-width: 71.25rem
}

// LG - 992px bis 1199px | 62rem bis 74.999rem
//container-width: 960px ist 60rem
@media only screen and (max-width: 75rem) { // max 1200px
    // container-width: 60rem
}

// MD - 768px bis 991px | 48rem bis 61.999rem
//container-width: 720px ist 45rem
@media only screen and (max-width: 62rem) { // max 992px
    // container-width: 45rem
}

// SM - 576px bis 767px | 36rem bis 47.999rem
//container-width: 540px ist 33.75rem
@media only screen and (max-width: 48rem) { // max 768px
    // container-width: 33.75rem
}

// XS - 0 bis 575px | 0 bis 35.999rem
// max-width: 100%
@media only screen and (max-width: 36rem) { // 576px
    // container-width: max-width: 100%
}

Mobile first

css


// XS - 0 bis 575px | 0 bis 35.999rem (bei 16px Standardfont)
//container-max-width: 100%

// SM - 576px bis 767px | 36rem bis 47.999rem
//container-width: 540px ist 33,75rem
@media only screen and (min-width: 36rem) { // 576px
    // container-width: 33.75rem
}

// MD - 768px bis 991px | 48rem bis 61.999rem
//container-width: 720px ist 45rem
@media only screen and (min-width: 48rem) { // 768px
    // container-width: 45rem
}

// LG - 992px bis 1199px | 62rem bis 74.999rem
//container-width: 960px ist 60rem
@media only screen and (min-width: 62rem) { // 992px
    // container-width: 60rem
}

// XL - 1200px bis 1399px | 75rem bis 87.4999rem
//container-width: 1140px ist 71.25rem
@media only screen and (min-width: 75rem) { // 1200px
    // container-width: 71.25rem
}

// XXL - alles über 1400px | alles über 87.5rem
//container-width: 1320px ist 82.5rem
@media only screen and (min-width: 87.5rem) { // 1400px
}

CSS Grid-Layouts

Grid Container Definieren: Zuerst definierst du ein Element als Grid Container. Dies ermöglicht es dir, das Grid Layout auf alle direkten Kinderelemente dieses Containers anzuwenden.

css

.container {
  display: grid;
}

Spalten und Zeilen Definieren: Definiere die Größe der Spalten und Zeilen mit grid-template-columns und grid-template-rows.

css

.container {
  display: grid;
  grid-template-columns: 100px 200px auto;
  grid-template-rows: 50px auto;
}

Dieser Code erstellt ein Grid mit drei Spalten (100px, 200px und der Rest ist auto) und zwei Zeilen (50px und der Rest ist auto).

Grid Items Platzieren: Platziere die Grid Items innerhalb des Containers. Du kannst bestimmen, wo die Items platziert werden sollen, indem du die grid-column und grid-row Eigenschaften verwendest.

css

.item1 {
  grid-column: 1 / 3;
  grid-row: 1;
}

.item2 {
  grid-column: 3;
  grid-row: 1 / 3;
}

item1 wird in den Spalten 1 bis 2 und in der ersten Zeile platziert. item2 wird in der dritten Spalte und von der ersten bis zur zweiten Zeile platziert.

Gap: Du kannst Abstände zwischen den Grid Items definieren mit gap, row-gap und column-gap.

css

.container {
  display: grid;
  grid-template-columns: 100px 200px auto;
  grid-template-rows: 50px auto;
  gap: 10px 20px; /* Abstand zwischen den Items - cols / rows */
}

Responsive Grids: Mache dein Grid responsive, indem du relative Einheiten (wie %, fr, oder vw und vh) und Media Queries benutzt.

css

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }
}

In diesem Beispiel wird das Grid auf drei Spalten in voller Breite aufgeteilt, wenn der Bildschirm größer als 600px ist, und auf eine einzelne Spalte, wenn er kleiner ist.

CSS - Flexbox

Layout-Modell in CSS, das speziell für das Design eindimensionaler Layouts entwickelt wurde.

Flex Container Definieren: Zuerst definierst du ein Element als Flex Container. Dies ermöglicht es dir, das Flexbox Layout auf alle direkten Kinderelemente anzuwenden.

css

.container {
  display: flex;
}

Ausrichtung der Items: Mit Flexbox kannst du die Ausrichtung der Kinder (Items) horizontal und vertikal steuern.

Horizontale Ausrichtung: justify-content kontrolliert die horizontale Ausrichtung der Kinder (z.B. flex-start, flex-end, center, space-between, space-around).

css

.container {
  display: flex;
  justify-content: center; /* Zentriert die Kinder horizontal */
}

Vertikale Ausrichtung: align-items kontrolliert die vertikale Ausrichtung der Kinder (z.B. flex-start, flex-end, center, stretch, baseline).

css

.container {
  display: flex;
  align-items: center; /* Zentriert die Kinder vertikal */
}

Flex-Direction: Mit flex-direction kannst du die Richtung der Items innerhalb des Containers festlegen (z.B. row, column).

css

.container {
  display: flex;
  flex-direction: column; /* Stapelt die Kinder vertikal */
}

Flex Wrap: flex-wrap erlaubt den Items, in neue Zeilen oder Spalten umzubrechen, wenn nicht genügend Platz vorhanden ist.

css

.container {
  display: flex;
  flex-wrap: wrap; /* Erlaubt den Items, in eine neue Zeile zu umzubrechen */
}

Flex-Item Einstellungen: Du kannst die Flex-Item Eigenschaften verwenden, um das Verhalten einzelner Items anzupassen.

flex-grow: Definiert, wie viel ein Item wachsen kann relativ zu den anderen Items.
flex-shrink: Definiert, wie ein Item schrumpfen kann.
flex-basis: Definiert die Standardgröße eines Items, bevor der verbleibende Platz verteilt wird.

css

.item {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 100px;
}

Responsive Design: Ähnlich wie bei Grid kannst du Flexbox mit Media Queries verwenden, um responsive Layouts zu erstellen.

css

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

@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

In diesem Beispiel sind die Items nebeneinander (row), wenn der Bildschirm breiter als 600px ist, und übereinander (column), wenn er schmaler ist.

Flexbox ist besonders nützlich für kleinere Komponenten und einfache Layouts, während CSS Grid besser für komplexere Layouts geeignet ist. Beide Tools haben ihre eigenen Stärken, und oft werden sie in Kombination verwendet, um responsive und flexible Webseiten zu erstellen.

CSS - Transition

CSS-Transitions bieten eine Möglichkeit, Änderungen an CSS-Eigenschaften über einen bestimmten Zeitraum hinweg zu animieren. So kannst du sanfte Übergänge zwischen zwei Zuständen eines Elements erstellen. Hier ist ein einfaches Tutorial zur Verwendung von CSS-Transitions:

Transition Property Definieren: Zuerst musst du angeben, welche Eigenschaft(en) animiert werden sollen. Du kannst eine spezifische Eigenschaft nennen (wie background-color) oder all verwenden, um alle änderbaren Eigenschaften zu animieren.

css

.element {
  transition-property: background-color;
}

Transition Duration Festlegen: Definiere, wie lange die Transition dauern soll. Dies wird normalerweise in Sekunden (s) oder Millisekunden (ms) angegeben.

css

.element {
  transition-property: background-color;
  transition-duration: 2s; /* Die Transition dauert 2 Sekunden */
}

Transition Timing Function Bestimmen: Diese Funktion steuert, wie die Zwischenwerte während der Transition berechnet werden, was die Beschleunigung der Animation beeinflusst. Einige Beispiele sind linear, ease, ease-in, ease-out und ease-in-out.

css

.element {
  transition-property: background-color;
  transition-duration: 2s;
  transition-timing-function: ease-in-out;
}

Transition Delay Hinzufügen: Optional kannst du eine Verzögerung definieren, bevor die Transition beginnt.

css

.element {
  transition-property: background-color;
  transition-duration: 2s;
  transition-timing-function: ease-in-out;
  transition-delay: 1s; /* Startet die Transition nach einer Verzögerung von 1 Sekunde */
}

Kombinierte Transition Syntax: Du kannst die Transition-Eigenschaften auch in einer verkürzten Syntax kombinieren:

css

.element {
  transition: background-color 2s ease-in-out 1s;
}

Auslösen der Transition: Die Transition wird ausgelöst, wenn sich der Wert der animierten Eigenschaft ändert. Dies kann durch Pseudoklassen wie :hover oder durch JavaScript-Interaktionen geschehen.

css

.element {
  transition: background-color 2s ease-in-out;
}

.element:hover {
  background-color: blue; /* Dies löst die Transition zum blauen Hintergrund aus */
}

Beispiel in Aktion: Wenn du nun mit dem Mauszeiger über das Element fährst, ändert sich die Hintergrundfarbe über einen Zeitraum von 2 Sekunden von ihrer ursprünglichen Farbe zu Blau.

Mit CSS-Transitions kannst du einfache Animationen erstellen, ohne auf JavaScript angewiesen zu sein. Sie sind besonders nützlich für interaktive Elemente, bei denen eine visuelle Rückmeldung über eine sanfte, zeitlich gesteuerte Veränderung gewünscht ist.

Events beim Eintritt in den Sichtbereich auslösen

Um ein Event auszulösen, wenn eine Box (ein HTML-Element) in den sichtbaren Bereich gescrollt wird, kannst du den Intersection Observer API verwenden. Dies ist eine effiziente und performante Möglichkeit, um zu überwachen, ob ein Element in den sichtbaren Bereich des Browsers eintritt oder ihn verlässt.

Hier ist ein einfaches Beispiel, wie du den Intersection Observer nutzen kannst:

HTML-Element definieren: Zuerst definierst du das Element in deinem HTML, das du beobachten möchtest.

html

<div id="beobachteteBox">Beobachte mich!</div>

JavaScript für den Intersection Observer: Dann erstellst du einen Intersection Observer in deinem JavaScript, der eine Callback-Funktion ausführt, wenn das beobachtete Element in den Viewport ein- oder austritt.

javascript


// Callback-Funktion, die ausgeführt wird, wenn die Beobachtungskriterien erfüllt sind
let callback: IntersectionObserverCallback = (entries, observer) => {
  entries.forEach(entry => {
    // Prüft, ob das Element sichtbar ist
    if (entry.isIntersecting) {
      console.log('Ein Element ist jetzt sichtbar!');

      // Suche nach einem Image-Tag im sichtbaren Element
      const img: HTMLImageElement | null = entry.target.querySelector('img');
      
      // Wenn ein Image-Tag gefunden wurde und ein data-src Attribut vorhanden ist
      if (img && img.hasAttribute('data-src')) {
        // Setze den Wert von data-src als src des Image-Tags
        img.src = img.getAttribute('data-src') || '';
        // Entferne das data-src Attribut, um doppeltes Laden zu verhindern
        img.removeAttribute('data-src');
      }

      // Optional: Beobachtung beenden, wenn das Element sichtbar wurde
      observer.unobserve(entry.target);
    }
  });
};

// Optionen für den Intersection Observer
const options: IntersectionObserverInit = {
  root: null,
  rootMargin: '0px',
  threshold: 0.1
};

// Erstellen des Intersection Observers mit der Callback-Funktion und Optionen
let observer: IntersectionObserver = new IntersectionObserver(callback, options);

// Elemente, die beobachtet werden sollen
let targets: NodeListOf = document.querySelectorAll('.beobachteteKlasse');

targets.forEach(target => {
  observer.observe(target); // Beginnt mit der Beobachtung jedes Elements
});

In diesem Beispiel wird die callback-Funktion aufgerufen, sobald 10% der #beobachteteBox sichtbar sind. Du kannst threshold anpassen, um den Prozentsatz des sichtbaren Bereichs zu ändern, der erforderlich ist, um die Callback-Funktion auszulösen.

Diese Methode ist besonders nützlich für Lazy Loading von Bildern, die Auslösung von Animationen beim Scrollen oder das Tracking von Benutzerinteraktionen mit bestimmten Elementen auf einer Seite.

mediafant-Tools

Ihre IP:

Ihr System:

System und Browser:

Bildschirm- und Brwowsergröße: