Zum Hauptinhalt springen
HAWK GT1191

Assets für deine Website

Nutze diese kuratierten Assets und Inhalte, falls du noch noch keine eigenen Inhalte erstellt hast.

Komponenten

Generative KI

HAWKI
Generative Text-KI, kostenlos und datenschutzkonform für Hochschul-Mitgieder.

Text

Dylan Ipsum
Blindtext-Generator mit Zitaten von Bob Dylan.
Cupcake Ipsum
Blindtext-Generator mit einem „Hauch von Zucker“.
DeLorean Ipsum Text Generator
Du kennst die Filmreihe Zurück in die Zukunft? Dann nutze Dialoge von Doc und Marty.

Farben

Tailwind Color Palette
Schnelles kopieren einer Farbe aus einer Palette.
Color Designer
Umfangreiche Tools, wie Farbschemen, Verläufe, Farbkreis und Komplementärfarben.
Alphredo: Alpha colors generator
Generiert farbechte Farbschatierungen.
Monk Skin Tones
Farbtöne der menschlichen Haut nach dem Monk-Schema (Open Source von Google).
Easing Gradients
Lineare Farbverläufe ohne die typischen harten Kanten.

Fonts

Google Fonts & Material Symbols
Frei nutzbare Webfonts und Icons. Beachte bitte den Datenschutz1.
Google Webfonts Helper
Lokale und datenschutzunbedenkliche Einbindung der Google Fonts.
Fontsource
Sammlung von Open-Source-Fonts, die als NPM-Pakete lokal eingebunden werden können.f
ETC – Etcetera Type Co
Variable Open-Source-Fonts von ETC.

Icons

Iconify Icons
Sammlung von 200.000 Icons, die als SVG, Font oder JSON eingebunden werden können.
Lucide Icons
Stark erweiteter Clon der Feather-Icons. Simpel und sauber. Zur Einbindung.
Material Symbols
Icons und variabler Icon-Font von Google, verwendet in Android und den Google-Apps.
Material Design Icons
Community-Edition der Google-Icons mit größerer Auswahl und Varianten. Auch als Webfont nutzbar.
Simple Icons
Brand-Icons und Farben bekannter Markern wie Facebook und Instagram.

Bilder

Unsplash
Der Standard: Hochauflösende Bilder zur freien Verwendung auf deiner Website.
Lorem Picsum
Platzhalterbilder für deine Website. Unterstützung von WEBP.
Placehold.in
Schneller Weg, um Platzhalterbilder einzusetzen.
dddraw
Freihand-Zeichenwerkzeug zur Erzeugung von SVG-Grafiken.
pppointed
Pfeil-Generator.

Layouts

1-Line Layouts
Zehn moderne CSS-Layouts zum kopieren und einfügen.

Daten

Mockaroo
Mock-Service zum erstellen von realistischen Testdaten.

Services

NoCodeForm
Endpoint für HTML-Formulare.

Optimierungen

Assets solltest du immer optimieren, bevor du diese in deiner Website verwendest. stets optimieren, damit sie schneller geladen werden können. Biete ggf. auch alternative Bildformate wie WebP2 oder AVIF3 an.

Bilder

Squoosh
Zuschneiden von Bildern und Export als optimiertes JPG, WebP und AVIF.
SVGOMG
Optimiert dein SVG und entfernt unnötigen Datenballast.
SVGWIZ
Konvertiert SVG in CSS-Data-URIs, um diese als Hintergrundgrafik verwenden zu können.
PX to REM Converter
Du möchtest rem statt px verwenden? Dann ist dieser Converter genau richtig für dein Design.

Typografie

Fluid Type Scale Calculator
Generiert font-size-Variablen für die Verwendung von CSS clamp().
Modern fluid typography editor
Erstellt für clamp() die drei Werte.
Leonardo Contrast Colors
Kontrastverhältnis zwischen Vorder- und Hintergrundfarbe ermitteln.
Colour Contrast Checker
Prüft Vorder- und Hintergrundfarben auf hohen Kontrast, damit diese gut gelesen werden können.
<kbd> Generator
Erstellt <kbd>-HTML-Elemente zur Anzeige von Tastaturbefehlen in Texten und Dokumentationen.

Inhalte

Meta Tags Toolkit
Überprüfe die Meta-Daten deiner Website (Open Graph Protocol) für Social-Media.
LanguageTool
Prüft deine Texte auf Rechtschreibung und Grammatik.

Code-Beispiele

Du hast eine Idee, weißt aber noch nicht wie du sie umsetzen kannst? Hier habe ich dir ein paar meiner Codepens aufgeführt.

Sticky Back-To-Top Button
Zurück-nach-oben-Button, der erst beim scrollen erscheint. Die Demo nutzt den Intersection Observer. Wird auch auf dieser Seite verwendet.
Responsive Images
Mobil-optimierte Art-Direction-Images mit picture-Element und srcset.
CSS Grid
Bild-Gallerie ohne Media-Queries.
Sticky Header
Header, der am Bildschirm stehen bleibt, sobald er im View erscheint.
Responsive Timeline
Mobile-first-optimierte und responsive Zeitleiste.
WIP: Image Slider Replacement
Moderne Variante eines Bild-Karussells.
Hiding header on scroll event with Headroom.js
Header, der nach dem scrollen verschwindet.

Fußnoten

  1. Die Einbindung von Google Fonts ist datenschutzrechtlich bedenklich, da beim aufruf einer Website immer die IP-Adresse gepspeichert wird. Die Nutzung von Google Fonts ist daher nur mit Einwilligung des Nutzers zulässig. Binde Fonts daher lieber lokal ein. ↩

  2. WebP ist ein ein von Google entwickeltes Bildformat. Im Vergleich zu JPG benötigen WebP bei vergleichbarer Qualität weniger Speicherplatz und sind damit schneller ladbar. ↩

  3. AVIF steht für „AV1 Image File Format“ und bietet im Vergleich zu JPG und AVIF die beste Kompressionseffizienz. Es ist ein offenes und lizenzfreies Bildformat, das auf dem Videocodec AV1 basiert, wird aktuell aber noch nicht von allen Browsern unterstüzt. ↩