24. März 2023

jQuery Count up

Mit folgendem jQuery-Script wird von 0 bis zu einer definierten Zahl hochgezählt, sobald die Zahl auf dem Bildschirm zu sehen ist.

• JavaScript
• jQuery

24. März 2023

CSS für Touchscreens

Mit folgendem Media-Query können CSS-Eigenschaften definiert werden, die nur auf Touchscreens angewendet werden.

• CSS

21. März 2023

Unique-ID in PHP generieren

Mit folgendem Code lässt sich in PHP eine einzigartige ID erstellen: Z.B: Diese hier: Oder diese: Oder diese:

• PHP

20. März 2023

Formulareingaben lokal speichern

Mit folgendem JavaScript/jQuery-Code lassen sich Formulareingaben lokal speichern und müssen somit beim nächsten Aufruf der Seite nicht erneut eingegeben werden. Demo: Vorname Name Dieser Code sollte logischerweise nicht für sensible Daten oder Passwörter genutzt werden, da die Daten im Klartext im localStorage des Browsers gespeichert werden.

• HTML
• JavaScript
• jQuery

19. März 2023

SVGs, JSON oder andere Dateiformate in WordPress hochladen

In die WordPress-Mediathek lassen sich eine ganze Reihe Dateiformate hochladen. Standardmäßig sind das .jpg, .jpeg, .png, .gif, .pdf, .doc, .docx, .ppt, .pptx, .pps, .ppsx, .odt, .xls, .xlsx, .mp3, .m4a, .ogg, .wav, .mp4, .m4v, .mov, .wmv, .avi, .mpg, .ogv und .3gp. Darüberhinaus kann es aber durchaus sinnvoll oder erforderlich sein andere Dateitypen hochzuladen. Z.B. auch um […]

• PHP
• WordPress

18. März 2023

Accordion mit jQuery

Accordions sind ein beliebtes UI-Element im Webdesign. Um ein Accordion zu erstellen kann man auf jede Menge WordPress- oder jQuery-Plugins zurückgreifen. Das ist aus meiner Sicht aber eigentlich gar nicht nötig, da man ein Accordion mit ein paar Zeilen Code selbst erstellen kann und somit auch die volle Kontrolle über Design & Funktionalität hat. So […]

• jQuery
• WordPress

15. März 2023

Bilder croppen mit CSS

Um ein Bild in´s richtige Format zu croppen, ist heute weder PHP erforderlich, noch muss man es als Hintergrundbild in ein div einbauen. Mit der CSS-Eigenschaft „object-fit“ lassen sich Bilder problemlos auf das passende Format beschneiden, was im responsive Webdesign sehr hilfreich sein kann. Hier ein Bild im Original-Format: Und hier gecroppt: Mit der CSS-Eigenschaft […]

• CSS

14. März 2023

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 in allen gängigen Browsern funktioniert und eingesetzt werden kann, funktioniert die CSS-Eigenschaft „backdrop-filter: blur“ im Firefox erst seit Version 103, die im Juli 2022 veröffentlicht worden ist. Jetzt gibt es […]

• CSS
• Design

12. März 2023

Vorher-Nachher-Slider in WordPress

Vorher-Nachher-Slider (Before-After-Image-Viewer) sind ein beliebtes und sinnvolles Tool um um Vorher-Nachher-Effekte zu demonstrieren, z.B. um Änderungen an einem Raumdesign, an der Haut von Personen oder Bildbearbeitungen zu zeigen. So z.B.: Um einen solchen Slider zu erstellen, gibt es bereits fertige Plug-ins für WordPress. Was mir hieran nicht gefällt ist, dass man hier erst den Slider […]

• jQuery
• LazyBlocks
• WordPress

12. März 2023

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 scharf angezeigt. Bei einfarbigen Logos bietet SVG einen weiteren Vorteil: Die Farbe des SVGs kann mithilfe von CSS angepasst werden. Dies ist besonders nützlich, wenn das Logo auf verschiedenen Hintergründen […]

• CSS