26. Februar 2023

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 zu unerwünschten Ergebnissen, insbesondere wenn z.B. Markennamen getrennt werden, die nicht getrennt werden sollen. Das lässt sich mit folgendem JavaScript (& CSS) einfach verhindern:

• CSS
• JavaScript

23. Februar 2023

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 Galerie zaubert ist super. An den Standard-Einstellungen stören mich allerdings 2 Sachen: Außerdem nutze ich in Bildergalerien gerne quadratische, gecroppte Thumbnails. Eine Möglichkeit das in den Gallery-Settings einzustellen gibt es […]

• CSS
• WordPress

23. Februar 2023

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 von Font Awesome.

• CSS

21. Februar 2023

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 Awesome von immerhin auf 38 %(!) der Websites verwendet, die Schriftskripte von Drittanbietern verwenden. Seit fast 7 Jahren (Okt 2017) gibt es jetzt die Version 4.7, die nach wie vor […]

• CSS
• Design
• HTML

18. Februar 2023

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 Bild über die ganze Breite des Bildschirms laufen. Das naheliegende „width: 100%“ bezieht sich auf die Breite des Containers und funktioniert somit natürlich nicht. Und wenn der Image-Container absolut positioniert […]

• Bootstrap
• CSS

14. Februar 2023

Background-Video

Mit folgendem Code lassen sich sich Videos als Hintergrund darstellen: Hier geht´s zur Demo: www.fbnfrtg.de/demo/backgroundvideo.html

• CSS