Hallo an alle!
Sicherlich haben einige von Ihnen bemerkt, dass verschiedene Websites in Blöcken, Navigationsfeldern und anderen Containern fast dieselbe Art von Schatten verwenden, plus oder minus ein paar Pixel in Richtung Transparenz. Ich analysierte eine Reihe beliebter Websites, sowohl unsere als auch ausländische, und versuchte, die Parameter der verwendeten Schatten so nah wie möglich in einer großen Sammlung oder Bibliothek zusammenzufassen. Für wen ist es bequemer. Ich hoffe, jemand ist nützlich.
Das Hauptziel des Projekts ist es, die Arbeit neuer Webdesigner und -entwickler bei der Schaffung eines angenehmen und modernen Designs zu erleichtern. Vielleicht ziehen erfahrene Designer aus dieser Entwicklung etwas Interessantes für sich.
Die Bibliothek ist praktisch für diejenigen, die noch keine Zeit hatten, sich vollständig mit dem Layout zu befassen, aber schöne Schatten auf Schaltflächen, Blöcken usw. erstellen möchten. Auf diese Weise können Sie die Arbeit mit Blöcken vereinfachen und die Zeit für die Auswahl von CSS-Schatten im Generator verkürzen.
Box-shadow.css
Box-shadows.css ist eine Sammlung einfacher und netter CSS-Schatten (Box-Shadow) für Ihre Projekte. Die Hauptklasse verwendet die einfache
.bShadow- Klasse. Jetzt verfügt die Sammlung über mehr als 50 relevante Optionen für Schatten mit einer Nummer sowie drei separate Klassen
.bShadow ,
.bShadow-light und
.bShadow-inset . Sie eignen sich hervorragend für die Verwendung in Tabellen, für den Inhalt von Startseiten, Containern, Navigation und anderen Blöcken Ihrer Website.
Ich werde eine Reihe von Fragen unterdrücken und sofort erklären, warum Zahlen verwendet werden und nicht Namen oder Klassen wie
bShadow-01040-00 .
Die Sammlung verwendet keine unabhängigen Namen, wie dies in animate.css der Fall ist, da dies für dieses Projekt etwas inakzeptabel ist. Der Schatten der Blöcke nimmt mit verschiedenen Abweichungen schrittweise zu, und aufgrund der Zahlenfolge können Sie die beste Option für sich selbst auswählen, ohne sich einzelne Namen zu merken. Dies vereinfacht die Arbeit mit der Sammlung erheblich.
Die Sammlung verfügt über eine
Reihe weiterer Funktionen , z. B. die Verwendung von
Hover-Effekten mit einem reibungslosen Wechsel zwischen den Schatten.
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. Die Seite ist in Englisch geschrieben, aber für diejenigen, die diese Sprache noch nicht fließend sprechen, gibt es einen Wechsel zu Russisch.
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. Die Auswahl von Schatten und Klassen erfolgt durch Auswahl von Optionen oder Bewegen des Mauszeigers über Blöcke. Das Ergebnis wird als Schatten des Hauptcontainers angezeigt.
Min.css-Dateigenerator
Die Site verfügt außerdem über
einen Dateigenerator box-shadows.min.css mit Anweisungen, mit denen der Benutzer seine eigene Datei erstellen kann, die nur aus den von ihm ausgewählten Klassen besteht. Dies hilft, die Belastung der Site zu verringern, wenn Ihr Projekt weniger als zwei oder drei Schatten verwendet.
CSS-Box-Shadow-Generator
Sie können den klassischen
CSS-Box-Shadow-Generator verwenden, um Ihre 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 Seriennummer zugewiesen, die nicht Teil der Sammlung ist. Sie können die resultierenden Stile kopieren und in das Root-CSS oder die auf der Site erstellte Box-Shadows-Datei einfügen.
min.css .
Versuchen Sie zu experimentieren. Das ist ein wirklich interessanter Job.
Jetzt ist die Entwicklung in der Entwicklung und eine Reihe von 200 Sternen auf GitHub für einen Link zu cdnjs. Ich wünsche Ihnen eine angenehme Nutzung und kreativen Erfolg. Wenn Sie Vorschläge, Kommentare oder Vorschläge zur Verbesserung des Projekts haben, schreiben Sie in die Kommentare.
GitHub ·
Website