Hallo allerseits!
Im modernen Design wenden viele Entwickler beim Erstellen von Websites und Anwendungen den Effekt von Tiefe und Volumen an und beziehen sich häufig auf CSS-Eigenschaften wie
Box-Shadow und
Drop-Shadow . Einige glauben, dass dies
2018 ein Trend ist. In der Tat gibt es viele ausländische und russische Standorte, die ab 2018 häufiger Schatten werfen.
In dieser Hinsicht ist kürzlich eine kleine
Sammlung einfacher und angenehmer CSS-Schatten erschienen , die häufig auf Websites zu finden sind (plus oder minus ein paar Pixel nebeneinander). Die Sammlung heißt
Box-shadows.css . Sie hat bereits einige positive Bewertungen im Netzwerk erhalten und wurde kürzlich auf Version 1.0.4 aktualisiert, in der mehrere weitere schöne Schatten erschienen, die in Gruppen unterteilt waren.
Nach dem letzten Update enthielt die Sammlung mehr als 60 relevante Optionen für Schatten, die sich hervorragend für die Verwendung in Tabellen eignen, für den Inhalt von Startseiten, Containern, Navigationsleisten und anderen Blöcken Ihrer Site.
Das Hauptziel der Erstellung dieser Kollektion ist es, unerfahrenen Webdesignern und Entwicklern die Arbeit bei der Erstellung eines angenehmen und modernen Designs zu erleichtern. Dank der Sammlung können Sie die Arbeit mit Blöcken vereinfachen und die Zeit für die Auswahl von CSS-Schatten im Generator verkürzen (was übrigens auch verfügbar ist). Natürlich ist es unwahrscheinlich, dass erfahrene Entwickler es brauchen, aber vielleicht können sie etwas Interessantes für sich selbst lernen. Die Sammlung ist nützlich für diejenigen, die es noch nicht geschafft haben, sich vollständig mit dem Layout zu befassen, aber schöne Schatten auf den Schaltflächen, Blöcken und Containern ihrer Site erstellen möchten.
Verbinden Sie Stile
Um ein Stylesheet zu verbinden, rufen Sie
die Projektwebsite auf und laden Sie die gewünschte Datei herunter. Hängen Sie die Datei dann nach dem Öffnen des <head> -Tags mit einer für Sie geeigneten Methode an Ihre HTML-Seite an.
<head> <link rel="stylesheet" href="/box-shadows.css"> <link rel="stylesheet" href="/box-shadows.min.css"> </head>
Sie können
den Dateigenerator min.css verwenden, mit dem Sie eine eigene Datei erstellen können, die nur aus den ausgewählten Klassen besteht. Oder wählen Sie einfach den gewünschten Block aus und kopieren Sie den gewünschten Schatten auf Ihre Site. Dies hilft, die Last zu reduzieren, wenn Ihr Projekt weniger als zwei oder drei Schatten verwendet. Folgen Sie einfach den Anweisungen auf der Website und Sie werden erfolgreich sein.
Klassen verwenden
Um den gewünschten Schatten mit Ihrem Block zu verbinden, fügen
Sie einfach die
.bShadow- Klasse mit der gewünschten Nummer hinzu:
<div class="bShadow-54"></div>
Hover-Effekte
Um einen Hover-Effekt für Ihren Block zu erstellen, fügen Sie die
gewünschte Klasse mit der Nummer hinzu, z. B.
.bShadow-1, und schreiben Sie den lateinischen Buchstaben
h nach der Nummer. Zum Beispiel:
<div class="bShadow-38 bShadow-1h"></div>
Schauen Sie sich
das Beispiel der .bShadow- Klasse an. Beim Hover werden der benachbarten Klasse
.bShadow-1 Schattenwerte
zugewiesen . Wenn der Schatten beim
Bewegen oder Klicken nicht
angezeigt werden soll , fügen Sie die Klasse
.bSnone hinzuReibungslose Transformation und Animation
Die
.bShadow- Klasse verwendet standardmäßig eine reibungslose Animation beim
transition: transform 0.2s ease-in-out .2s
transition: transform 0.2s ease-in-out und enthält auch eine Eigenschaft, die den Browser vor einer bevorstehenden Schatten- und Positionsumwandlung warnt
will-change: transform, box-shadow; .
Verwenden Sie diese Option, um schöne Animationen Ihrer Blöcke zu erstellen. Beispielsweise können Sie Ihre Klasse oder Eigenschaften mit einer Transformation hinzufügen:
.transform-translateY-5:hover { -webkit-transform: translateY(-5px) translateZ(0); transform: translateY(-5px) translateZ(0); }
Fügen Sie dann dem gewünschten Container Folgendes hinzu:
<div class="bShadow transform-translateY-5 bShadow-1h"> </div> und Sie werden das
Ergebnis sehenHinzufügen des Inset-Parameters
Um einen inneren Schattenparameter hinzuzufügen, fügen Sie das Skript einfach in die HTML-Seite ein und geben Sie die Klassen an, für die Sie es anwenden möchten.
Zum Beispiel
.bShadow-1 . Um mehrere Klassen anzugeben, trennen Sie sie wie im folgenden Beispiel durch Kommas. Vergessen Sie nicht, der Klasse ein Ende zu setzen!
[].forEach.call(document.querySelectorAll('.bShadow-1, .bShadow-2h, .bShadow-3'), function(node) { var bsh = getComputedStyle(node).boxShadow; node.style.boxShadow = "inset " + bsh; });
DemoCSS-Box-Shadow-Generator
Die Sammlung impliziert auch eine Erhöhung der Anzahl von Klassen mit Schatten, die vom Benutzer selbst erstellt wurden. Das heißt, Sie können den
klassischen Schattengenerator verwenden, um die Sammlung mit Ihren eigenen Stilen zu ergänzen. Durch Klicken auf die Schaltfläche Speichern und Weiter hinzufügen können Sie eine unendliche Anzahl von Klassen erstellen. Den ersten generierten und nachfolgenden Klassen wird eine Sequenznummer zugewiesen, die nicht in der Sammlung enthalten ist. Die resultierenden Stile können einfach kopiert und in die CSS-Stammdatei Ihres Projekts oder in die auf der Auflistungssite erstellte Datei box-shadows.min.css eingefügt werden.
Jetzt planen wir, die Sammlung zu erweitern und das npm-Paket zu konfigurieren, aber es gibt einige kleinere Schwierigkeiten damit. Daher hoffe ich zwar, den
cdnjs- Link und die Weiterentwicklung des Projekts zu erhalten.
GitHubPagePage