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.
HSL Color Picker
Farbwähler und Konvertierer für (HSL-)Farben.
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.

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.

Typografie

PX to REM Converter
Du möchtest rem statt px verwenden? Dann ist dieser Converter genau richtig für dein Design.
Font Size Clamp Generator
Erstellt CSS-clamp()-Regeln für Schriftgrößen.
Fluid Type Scale Calculator NEU
Generiert font-size-Variablen für die Verwendung von CSS clamp().
Modern fluid typography editor
Erstellt für clamp() die drei Werte.
<kbd> Generator
Erstellt <kbd>-HTML-Elemente zur Anzeige von Tastaturbefehlen in Texten und Dokumentationen.

Farben und Kontraste

APCA Contrast Calculator NEU
Kalkuliert den APCA-Kontrast zwischen zwei Farben. APCA steht für „Advanced Perceptual Contrast Algorithm“ und berücksichtigt die menschliche Wahrnehmung.
Auto tint with APCA NEU
Testet, ob Schwarz oder Weiß als Textfarbe besser zu einer Hintergrundfarbe passt.
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.

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.

Tools und Services

NoCodeForm
Endpoint für HTML-Formulare.
MarkdownDown
Konvertiere jede Webseite in ein sauberes Markdown mit heruntergeladenen Bildern.

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.

Picture-Element: Art direction Image) NEU
Mobil-optimierte Art-Direction-Images mit picture-Element und srcset.
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.
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. ↩