Einfache, aber schöne und luftige Schatten mit Vue Box Shadows / Sudo Null IT News

In modernem Design, auf fast jeder Website und in Anwendungen können Sie die Schatten sehen, die Designer und Entwickler verwenden, um den Effekt von Tiefe und Volumen zu erzeugen.

Halo-Labor.  Dribbble.comHalo-Labor. Dribbble.comAndrej Scharapow.  Dribbble.comAndrej Scharapow. Dribbble.comSchibir.  Dribbble.comSchibir. Dribbble.comMasud Rana.  Dribbble.comMasud Rana. Dribbble.comAndrej Scharapow.  Dribbble.comAndrej Scharapow. Dribbble.com

Stimmen Sie zu, solche Projekte sehen wirklich schön und vorzeigbar aus, besonders wenn weiche Schatten verwendet werden und keine harten, düsteren “Striche”.

Über Schatten

Um solche Effekte zu erstellen, verwenden Entwickler CSS-Eigenschaften. Box Schatten und Schlagschatten. Dies sind sehr häufige Funktionen, die seit mehreren Jahren im Design verwendet werden und von allen modernen Browsern und Geräten unterstützt werden. Sie können dies überprüfen, indem Sie die Website besuchen. Kann ich benutzen.

Die Arbeit mit dieser Eigenschaft zu meistern ist recht einfach, für viele reicht ein Tag, wenn nicht sogar ein paar Stunden. Auch hier können Sie leicht mehrere Artikel finden, die seine Arbeit beschreiben. Das Erlernen der richtigen Anwendung dieser Eigenschaft ist jedoch selbst für erfahrene Designer nicht immer möglich.

Ein Erlebnis

Ich liebe es, mit Schatten zu arbeiten, weil sie verwendet werden können, um viele erstaunliche Effekte zu erstellen, von einfachen Schaltflächen und verschiedenen Blöcken bis hin zum Design von Produktkarten in Online-Shops, Landeelementen, mobilen Anwendungen, einem persönlichen Blog und mehr. Und das Wichtigste: Schatten sind seit vielen Jahren im Trend des Webdesigns.

Ausgaben

Sicherlich sind Sie auf ein solches Problem gestoßen, dass Sie bei der Verwendung eines UI-Frameworks (z. B. Bootstrap, Bumla, Vuetify, MUI und andere) standardmäßig aufgefordert werden, die in die Komponenten integrierten Schatteneigenschaften zu verwenden, was, um ehrlich zu sein , sind nicht immer erfolgreich oder mengenmäßig begrenzt. Und wenn Sie Code ohne Framework schreiben, müssen Sie sich jedes Mal an die Arbeit von CSS-Eigenschaften erinnern und Ihre eigenen Stile schreiben. Das ist manchmal anstrengend.

Also habe ich versucht, die ungefährsten Parameter häufig verwendeter Schatten von verschiedenen beliebten Websites und basierend auf meiner Erfahrung in einer kleinen Bibliothek zu sammeln, die unten beschrieben wird.

css-Schattenbibliothek

Schattenbibliothek Zunächst einmal soll es den Arbeitsablauf für unerfahrene Webdesigner und Entwickler beschleunigen, die noch keine Zeit hatten, sich mit dem Layout zu befassen, aber schöne Schatten in ihren Projekten erstellen möchten. Es enthält mehr als 100 luftige und auffällige Schatten, die den Elementen der zukünftigen Anwendung Volumen und Leichtigkeit verleihen. Natürlich ist es unwahrscheinlich, dass es für erfahrene Entwickler nützlich ist, aber vielleicht lernen sie etwas Nützliches für sich selbst.

Jetzt habe ich mich mit dem Studium von Vue.js befasst und bei meiner Arbeit muss ich manchmal UI-Frameworks wie Vuetify, Tailwind und andere verwenden, mit einigen Unannehmlichkeiten in den von ihnen angebotenen Komponenten wie Karten, Dropdown-Menüs, QuickInfos, Listen und demnächst. Zum Vergleich die Höhengruppe:

Zuerst habe ich meine eigenen Klassen und Stile geschrieben, um neue Schatten zu definieren, auf die ich manchmal !important anwenden musste, aber dann habe ich beschlossen, meine eigene kleine Bibliothek zu erstellen, die heißt vue-box-schatten.

Über Vue Box-Schatten

Derzeit ist die Version 2.0.0 mit 115 Schatten erschienen, die sich für verschiedene Zwecke eignen, zum Beispiel für das Design Preiskarten. Jetzt hat es die üblichen Erhebungen, horizontale, vertikale und eckige Schatten, ein paar einfache Muster und sogar für Fans des Neomorphismus Es gibt mehrere Grundelemente.

Installation

Sie können das Bibliothekspaket global installieren oder es lokal auf die gleiche Weise wie andere Pakete gemäß verwenden Anweisungen.

Anwendung

Schatten werden angewendet, indem dem ausgewählten Element die v-box-shadow-Direktive hinzugefügt wird.

Wenn Sie alles richtig eingestellt haben, zeigt Ihr Element einen einfachen Schatten, den Sie leicht mit einem benutzerdefinierten umschreiben können Optionen.

Alle Schatten sind nach ID nummeriert und zur bequemen Verwendung der Bibliothek in Gruppen unterteilt. Um den gewünschten Schatten anzuwenden, müssen Sie der Direktive daher nur eine Kennung (id) hinzufügen:

Zusätzlich zu id erhalten die Schatten spezielle Kurznamen, die intuitiv sind und den Namen ihrer Gruppen entsprechen:

  • Neumorphismus – neu-$

  • Achse x-ax-$

  • Achse y-ay-$

    und andere.

Wenn es für Sie beispielsweise bequemer wäre, Namen zu verwenden, dann kann der Code aus dem obigen Beispiel wie folgt geschrieben werden:

Aktuelle Gruppenliste:

  • Keiner

  • Elevation

  • Grenzen

  • Neumorphismus

  • Achse x

  • Achse y

  • Kleine Innenseite

  • Mittlere Innenseite

  • Große Innenseite

  • oben

  • Unterseite

  • rechte Seite

  • linke Seite

  • Winkel: oben links

  • Winkel: oben rechts

  • Winkel: unten rechts

  • Winkel: unten links

  • Muster

Weitere Informationen zu Gruppen finden Sie unter im Depot finden.

Damit ist die Installation und Konfiguration abgeschlossen.

Wenn Sie vue.js nicht verwenden, können Sie Schatten einfach aus einer Bibliothek analysieren, die in alle Browser integriert ist. Entwicklerkonsole oder sehen Sie sich die Schattendatei an, indem Sie einfach darauf schauen Repository auf github.

Ich hoffe, dass dieses Material nützlich ist und Sie diese Bibliothek in Ihren Projekten anwenden werden. Viel Spaß beim Benutzen!

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *