Design- und Code-Inspiration: Die Code-Pens von Gayane Gasparyan
Vielleicht nicht alles alltags-tauglich, aber definitiv sehr inspirierend sind die Code-Pens auf folgender Seite: https://codepen.io/gayane-gasparyan/pens/showcase
CSS
Blur-Effekte mit CSS
Blur-Effekte sind ein beliebtes Gestaltungsmittel im Web-Design. In CSS gibt es 2 Arten von Blur-Effekten: „filter: blur(8px)“ und „backdrop-filter: blur(8px)“. Während ersterer schon sehr lange…
Farbe eines SVGs mit CSS anpassen
Für Logos auf Websites sind SVGs die beste Wahl. Ein SVG ist eine Vektorgrafik, daher wird das Logo auf der Website in jeder Größe gestochen…
So kann man im Gutenberg-Editor Blöcken beliebige CSS-Klassen zuweisen
Die Funktion „register_block_style“ ermöglicht es benutzerdefinierte CSS-Klassen vorhandenen Gutenberg-Blöcken zuzuweisen. Das ermöglicht z.B. die Auswahl verschiedener Listen-Typen, Tabellen-Typen, Text-Styles u.v.m. – also alles, was mit…
Bestimmte Wörter NICHT trennen.
Mit der Einführung von CSS3 vor einigen Jahren war es endlich möglich lange Wörter in Texten automatisch trennen zu lassen. Häufig führt diese Funktion jedoch…
Quadratische Thumbs in der WordPress-Bildergalerie
Die Gallery-Funktion in WordPress ist wirklich großartig. Alle Fotos auf einmal per Drag&Drop in den Editor und der WordPress-Magic dabei zuschauen, wie sie daraus eine…
Download-Links mit passenden Icons
Download-Links können ganz einfach automatisch mit passenden Icons gekennzeichnet werden – ganz ohne PHP oder JavaScript, sondern nur mit CSS. In diesem Beispiel mit Hilfe…
Icon-Fonts und SVG-Icons
Font AwesomeVor über 10 Jahren wurde Font Awesome veröffentlicht und ist seitdem für die Icons auf Millionen von Websites verantwortlich. Im Jahr 2020 wurde Font…
Bild mit 100% Breite im Bootstrap-Container
Jeder, der mit Bootstrap arbeitet stand bestimmt schon mal vor diesem Problem: Die Breite der Inhalte ist durch den Bootstrap-Container begrenzt, jetzt soll aber ein…
Background-Video
Mit folgendem Code lassen sich sich Videos als Hintergrund darstellen: Hier geht´s zur Demo: www.fbnfrtg.de/demo/backgroundvideo.html