Heiße neue CSS-Regeln, die Sie jetzt ausprobieren sollten

Seite 3 von 4: Hintergrundwiederholung, Seitenverhältnis, Mischmodus

Hintergrundwiederholung (Rund und Leerzeichen)

Hintergrund Wiederholung ist seit einer scheinbaren Ewigkeit ein stabiler Bestandteil von CSS, aber es gibt zwei weniger bekannte Optionen - Round und Space. Beide Optionen stellen sicher, dass 100 Prozent des deklarierten Hintergrundbilds wiederholt und jederzeit sichtbar sind. Sie arbeiten auf leicht unterschiedliche Weise und beeinflussen die Darstellung von Bildern auf subtile Weise.

Die runde Option passt die Größe Ihres Bildes an



Das runden Mit dieser Option wird die Größe Ihres Bildes angepasst

Hintergrundwiederholung: rund; Wiederholt Ihr Hintergrundbild, ohne das Bild jemals zuzuschneiden. Stattdessen wird die Größe des Bilds gleichmäßig geändert, bis genügend Platz für eine zusätzliche Kachel vorhanden ist.



Die Option

Das Raum Option schafft zusätzlichen Platz zwischen Ihren Kacheln

Hintergrundwiederholung: Raum; Kachelt das Bild in beide Richtungen. Es ähnelt Round, außer dass die Größe des Bilds geändert wird, bis mehr Platz für die Anzeige einer weiteren Kachel vorhanden ist. Stattdessen wird ein weißer Raum zwischen den Kacheln erstellt, bis eine weitere Zeile oder Spalte angezeigt werden kann.



Keine dieser Optionen ist so neu, aber sie geben Ihnen ein wenig zusätzliche Kontrolle darüber, wie Kacheln über verschiedene Ansichtsfenstergrößen erfolgen. Was an diesen Optionen auch sehr nützlich ist, ist, dass sie von jedem Browser unterstützt werden.

Medienabfragen mit Seitenverhältnis

Die Einführung von Medienabfragen hat die Art und Weise, wie wir Websites erstellen, verändert. Wir hatten die Möglichkeit, unsere Layouts abhängig von der Art und Weise zu erstellen, wie der Benutzer die Seite betrachtete. Meistens basiert dies nur auf der Breite oder Höhe des Ansichtsfensters, aber kürzlich wurde eine neue Option hinzugefügt.

Welche Kameras verwenden professionelle Fotografen?

Jetzt können Sie CSS basierend auf dem Ansichtsfenster der Seite über eine Medienabfrage anwenden, die das Seitenverhältnis des Fensters ermittelt, mit dem Sie surfen. Sie können auch feststellen, ob das Fenster einem maximalen oder minimalen Seitenverhältnis entspricht.



Klicken Sie auf das Symbol oben rechts, um das Bild zu vergrößern

Klicken Sie auf das Symbol oben rechts, um das Bild zu vergrößern

Der dafür zu verwendende Code ist ziemlich einfach. Es entspricht der Konvention, die mit jeder anderen Deklaration für Medienabfragen verwendet wird - etwa:

@media screen and (aspect-ratio: 16/9) { Your CSS } @media screen and (min-aspect-ratio: 16/9) { Your CSS }

Es gibt nur wenige Szenarien, in denen Seitenverhältnis Medienabfragen wären nützlich. Wenn Sie etwas speziell für mobile Geräte erstellen, können Sie das verwenden Min / Max-Seitenverhältnis um festzulegen, ob der Benutzer im Quer- oder Hochformat surft (obwohl diese Verwendung auch mit einer Orientierungsmedienabfrage behandelt werden könnte).

Jedoch, Seitenverhältnis wird von allen gängigen Browsern unterstützt, wobei die Internet Explorer-Unterstützung bis in Version 9 zurückreicht.

Mischmodus

Das Anwenden von Hintergrundbildern ist normalerweise ein stabiler Bestandteil jedes Projektaufbaus. Aber manchmal ist es gut, mit unseren Hintergrundbildern etwas kreativer zu sein Mischmodus kommt herein.

Anstatt nur den Hintergrund über die Hintergrundfarbe zu legen, Mischmodus kombiniert das Hintergrundbild mit der Hintergrundfarbe in einem definierten Stil. Die Optionen, die Sie verwenden können, sind Normal, Multiplizieren, Bildschirm, Überlagern, Abdunkeln, Aufhellen, Ausweichen von Farben, Sättigung, Farbe und Leuchtkraft.

Im Uhrzeigersinn von oben links: Überlagerung, Differenz, verkettete Effekte, Leuchtkraft (klicken Sie auf das Symbol oben rechts, um das Bild zu vergrößern)

wie man realistische Reben in Photoshop macht
Im Uhrzeigersinn von oben links: Überlagerung, Differenz, verkettete Effekte, Leuchtkraft (klicken Sie auf das Symbol oben rechts, um das Bild zu vergrößern)

Schauen wir uns einige der Optionen an. Im obigen Bild haben wir:

Überlagerung (oben links)
Mischt sowohl das Hintergrundbild als auch die Farbe miteinander, um die Dunkelheit oder Helligkeit des Hintergrundbereichs wiederzugeben.

Unterschied (oben rechts)
Subtrahiert die dunkleren Farben vom Hintergrundbild / die Farbe von den hellsten Schattierungen, um einen sehr kontrastreichen Effekt zu erzielen.

wie man einen Vergnügungspark gestaltet

Helligkeit (unten links)
Erhält die obere Farbe beim Verblassen des Farbtons und der Sättigung des Hintergrunds, um einen verwaschenen, alten Foto-Look zu erzielen.

Der Code zum Überblenden Ihres Hintergrunds ist recht einfach. Sie benötigen lediglich eine Zeile CSS, um das Hintergrundbild mit der Hintergrundfarbe zusammenzuführen:

background-blend-mode: *blending-option*;

Wenn Sie Mischungen auf Ihr Hintergrundbild anwenden möchten, müssen Sie nicht nur einen Modus verwenden. Sie können mehrere Mischmodi miteinander verketten, um einen einzigartigeren Effekt zu erzielen (siehe unten rechts im Bild oben), indem Sie etwas verwenden, das dem folgenden Code ähnelt:

background-blend-mode: multiply, darken;

Mischmodi werden in fast allen Browsern (einschließlich aller Versionen von Microsoft Edge) unterstützt, mit Ausnahme aller Versionen von Internet Explorer und Opera Mini.

Nächste Seite: Objektanpassung, Form außerhalb, aktuelle Farbe und mehr

  • 1
  • zwei
  • 3
  • 4

Aktuelle Seite: Hintergrundwiederholung, Seitenverhältnis, Mischmodus

Vorherige Seite CSS-Filter und CSS-Variablen Nächste Seite Objektanpassung, Form außerhalb, aktuelle Farbe und mehr