3 kleine Helfer um deine Webseite optisch aufzuwerten

Im folgenden Beitrag habe ich drei kleine Tools zusammengetragen, die ich sehr interessant finde. So kann man seine Webseite ein wenig aufwerten, wenn man einen dieser kleinen Eyecatcher verwendet.


neumorphism.io

Auf neumorphism.io lassen sich per Generator Buttons/Flächen im Neumorphismus-Stil (auch Soft-UI genannt) erstellen. Es lassen sich mehrere Parameter und die Farbe einstellen. Anschließend kann man sich den CSS-Code ausgeben lassen. Der Effekt lässt sich für schöne auffällige Buttons aber auch für Flächen verwenden. Der weiche Stil macht auf jeden Fall was her. Man kann sich aber beispielsweise auch zwei entgegengesetzte Einstellungen erstellen und diese dann für einen hover-Effekt verwenden.

Soft-UI entwickelt sich gerade zu einem neuen Webdesign-Trend. Da werden wir wohl in naher Zukunft noch viele schöne Beispiele sehen können.

Screenshot neumorphism.io
Screenshot https://neumorphism.io

Animated CSS Background Generator

Dieser Effekt erinnert etwas an Bokeh. Im Hintergrund werden verschwommene Blendenflecke animiert, die je nach Einstellung im Hintergrund schweben. Auch hier lassen sich wieder verschiedene Parameter einstellen – Anzahl, Größe, durchschnittliche Geschwindigkeit. Aber auch Hintergrundfarbe und Farben der Bokehs können nach eigenem Wunsch angepasst werden. In weiteren Demos können auch Rechtecke im Hintergrund animiert werden, entweder farbig ausgefüllt oder nur als Kontur.

Hier geht es zum Generator:
https://wweb.dev/resources/animated-css-background-generator

Screenshot Generator Animated CSS Background
Screenshot https://wweb.dev/resources/animated-css-background-generator

Make some waves!

Get WavesCreate SVG waves for your next design … Genau das macht der folgende Generator. Er generiert Wellenformen und gibt diese als SVG aus. Entweder als Datei oder als SVG-Code. Hier stehen drei verschiedene Wellenformen zur Auswahl. Zusätzlich kann man die Komplexität der Wellen anpassen oder auch die Farben invertieren. Einfach ausprobieren und für dein nächstes Web-Projekt verwenden.

Screenshot Get Waves Generator
Scrrenshot https://getwaves.io/

Bonus

CSS Section Separator Generator

Und hier noch ein Bonus. Ein Generator, den ich erst etwas später entdeckt habe. Mit diesem lassen sich CSS Separatoren für Bereiche erstellen. So kann man zum Beispiel zwei Bereiche mit Zacken von einander abtrennen. Auch immer wieder ein kleiner Hingucker. Hier geht es zum Generator.

Screenshot https://wweb.dev/resources/css-separator-generator

WebTool: Web Gradients

Oha, mein letzter Beitrag ist ja schon eine gefühlte Ewigkeit her. Da wird es Zeit für einen neuen Beitrag – bessergesagt ein WebTool.

Ich bin letztens erst selber auf die Seite https://webgradients.com/ gestoßen. Hier findet ihr sehr schöne CSS-Verläufe für eure Webprojekte. Man kann sich die Verläufe als Vollbild anzeigen lassen, den CSS-Code kopieren oder auch alle Verläufe in Sketch oder Photoshop integrieren.

Sicher wird hier jeder fündig.

Bilder: Screenshots webgradients.com


Des Weiteren kann ich auch den Ultimate CSS Gradient Generator empfehlen.

SubtlePatterns Bookmarklet – Einfache Webseiten-Hintergrund-Vorschau

subtlepatternsbookmarkletGerade habe ich mal wieder auf SubtlePatterns nach neuen und schönen Hintergründen gesucht. Auch wenn ich die Seite schon öfter angesurft habe, fiel mir erst heute der SubtlePatterns-Bookmarklet auf.
Ein kleines Tool, mit dem ihr bequem den Hintergrund einer Webseite austauschen könnt. Eigentlich ist es vielmehr eine Vorschau der Patterns von SubtlePatterns. So habt ihr aber die Möglichkeit, die einzelnen Hintergründe einfach live durch zu zappen. Wenn ein passender Hintergrund dabei ist, könnt ihr diesen herunterladen und einfach fest in eure Webseite via CSS einbinden.
Eine wirklich tolle Möglichkeit viele Hintergründe direkt auf eurer Webseite auszuprobieren.

Unter den Snacks auf der Webseite findet ihr auch 3 Pattern-Pakete zum Download.