Sammlung von CSS-Schatten Box-shadows.css

Hallo an alle!

Sicherlich haben einige von Ihnen bemerkt, dass fast unterschiedliche Arten von Schatten an unterschiedlichen Standorten in Blöcken, Navigationsbereichen und anderen Containern verwendet werden, plus oder minus ein paar Pixel in Richtung der Transparenz. Ich analysierte eine Reihe beliebter Websites, sowohl unsere als auch fremde, und versuchte, die ungefährsten Parameter der verwendeten Schatten in einer großen Sammlung oder Bibliothek zusammenzufassen. Wer ist bequemer? Ich hoffe jemand wird sich als nützlich erweisen.

Bild

Das Hauptziel des Projekts ist es, den Neulingen der Webdesigner und Entwickler die Arbeit an einem angenehmen und modernen Design zu erleichtern. Vielleicht erfahren auch erfahrene Designer etwas Interessantes aus dieser Entwicklung.

Die Bibliothek ist praktisch für diejenigen, die noch keine Zeit hatten, sich vollständig in das Layout zu vertiefen, aber schöne Schatten auf Schaltflächen, Blöcken usw. erzeugen möchten. So können Sie die Arbeit mit Blöcken vereinfachen und die Zeit für die CSS-Schattenauswahl im Generator reduzieren.

Box-Schatten.css


Box-shadows.css ist eine Sammlung einfacher und angenehmer CSS-Schatten (Box-Shadow) für Ihre Projekte. Die Hauptrolle ist eine einfache Klasse .bShadow . Die Sammlung umfasst jetzt mehr als 50 aktuelle Schattenvarianten mit einer Nummer sowie drei unabhängige Klassen .bShadow , .bShadow-light und .bShadow-inset . Sie eignen sich hervorragend für Tabellenkalkulationen, den Inhalt von Startseiten, Containern, die Navigation und andere Blöcke Ihrer Website.

Um eine Reihe von Fragen zu vermeiden , werde ich sofort erklären, warum Zahlen verwendet werden, und nicht Namen oder Klassen vom Typ bShadow-01040-00 .
Die Sammlung verwendet keine eigenständigen Namen wie in animate.css, da sie für dieses Projekt etwas inakzeptabel ist. Der Schatten der Blöcke nimmt schrittweise zu, mit verschiedenen Abweichungen, und auf Kosten einer Zahlenfolge können Sie die beste Option für sich selbst wählen, ohne einzelne Namen zu speichern. Dies vereinfacht die Arbeit mit der Sammlung erheblich.
Bild
Die Sammlung bietet eine Reihe weiterer Möglichkeiten , z. B. die Verwendung von Hover-Effekten mit sanftem Wechsel zwischen Schatten.

Bild

Zusätzliche Funktionen


Die Projektwebsite ist visuell einfach, verfügt jedoch über genügend Funktionen, um die erforderlichen Klassen und Stile vollständig anzupassen und auszuwählen. Eine Website wurde auf Englisch verfasst, aber für diejenigen, die diese Sprache noch nicht beherrschen, wird auf Russisch umgestellt.

Bild

Schattenauswahl


Die Site verfügt über eine Vorschaufunktion, in der Sie die Hintergrundfarbe und den Container Ihrer Site für die weitere Auswahl von Schatten festlegen können. Schatten und Klassen werden durch Auswahl von Optionen oder Überfahren mit Blöcken ausgewählt. Das Ergebnis wird als Schatten des Hauptsite-Containers angezeigt.

Bild

Min.css-Dateigenerator


Die Site verfügt außerdem über eine Generator-Datei box-shadows.min.css mit einer Anweisung, mit der der Benutzer eine eigene Datei erstellen kann, die nur aus den von ihm ausgewählten Klassen besteht. Dies verringert die Belastung der Site, wenn für Ihr Projekt weniger als zwei oder drei Schatten verwendet werden.

Bild

Css Box-Schattengenerator


Sie können den klassischen css-Box-Shadow-Generator verwenden , um die Kollektion mit Ihren eigenen Stilen zu ergänzen. Durch Klicken auf die Schaltfläche "Save and Add Next" können Sie eine unbegrenzte Anzahl von Klassen erstellen. Der ersten generierten und den nachfolgenden Klassen wird eine Sequenznummer zugewiesen, die nicht zur Sammlung gehört. Sie können die empfangenen Stile kopieren und in die Root-CSS oder die Box-Shadows-Datei einfügen, die auf der Site erstellt wurde. min.css .

Bild

Versuchen Sie zu experimentieren. Das ist ein wirklich interessanter Job.
Jetzt befindet sich die Entwicklung in der Entwicklungsphase und auf GitHub befinden sich 200 Sterne, um Links zu cdnjs zu erhalten. Ich wünsche Ihnen viel Freude und kreativen Erfolg. Wenn Sie Vorschläge, Kommentare oder Vorschläge zur Verbesserung des Projekts haben, schreiben Sie in die Kommentare.

Bild

GitHub · Website

Jetzt auch beliebt: