6. Oktober 2023

YouTube-Videos responsive einbetten

Mit folgendem Code lassen sich YouTube-Videos im Format 16:9 responsive einbetten:

• CSS
• HTML
• YouTube

5. Oktober 2023

Daten aus einer REST-API mit PHP ausgeben

Mit folgendem Code lassen sich (JSON-)Daten aus einer REST-API ausgeben:

• PHP
• REST

30. September 2023

background-Attachment: fixed und background-size: cover auf einem iPhone oder iPad

Es ist ein altes Problem, das Apple leider bis heute nicht behoben hat: Die CSS-Eigenschaft „background-Attachment:fixed“ lässt sich nicht in Kombination „background-size: cover“ nutzen. Während auf dem Desktop alles normal aussieht, wird das Hintergrundbild unter iOS viel zu groß dargestellt, also nicht durch „background-size: cover“ in das div eingepasst. Erst seit dem Release von iOS […]

• CSS

29. September 2023

Mit jQuery Position innerhalb eines divs bestimmen

Mit folgendem jQuery-Script kannst du die Postion eines Punktes innerhalb eines divs bestimmen. Das ist zum Beispiel sehr hilfreich wenn du den Fokuspunkt eines Bildes bestimmen willst oder wenn du ein Overlay baust.

• JavaScript
• jQuery

20. September 2023

So kannst du ein 360°-Panorama in eine Website einbauen

• JavaScript

30. August 2023

Divs beim scrollen einblenden

Divs erst beim scrollen zeitverzögert einzublenden oder „reinfliegen“ zu lassen ist ein großer Trend in den letzten Jahren gewesen. Wenn man es nicht übertreibt und subtile Animationen, kann das durchaus ein netter Effekt sein. Wobei ich grundsätzlich eher Fan davon bin wenn eine Website schnell und direkt ist und die Darstellung der Inhalte nicht noch […]

• HTML
• JavaScript

30. August 2023

Breadcrumb-Navigation für WordPress

Mit diesem Code kannst du automatisch eine Breadcrumb-Navigation für deine WordPress-Website generieren. Ergänze folgenden Code in deiner functions.php: Und anschließend rufst du die Funktion an gewünschter Stelle im Template auf:

• PHP
• WordPress

27. August 2023

Mit CSS clip-path kannst du divs in jeder beliebigen Form erstellen.

Standardmäßig ist ein div viereckig. Um außergewöhnliche Designs umzusetzen, ist es manchmal erforderlich, dass divs in einer anderen Form dargestellt werden müssen. In der Regel setzt man hier dann pngs mit Transparenz ein. Für einfache Formen sind CSS clip-paths allerdings die elegantere Lösung. So kann z.B. solch ein Hexagon mit folgendem Code erzeugt werden. Die […]

• CSS
• HTML

25. August 2023

So verhinderst du, dass Bilder deines Servers auf externen Websites angezeigt werden (Hotlinking)

Wenn du eine Web-App baust, in der die User Bilder hochladen können, solltest du darüber nachdenken, Hotlinking zu verhindern, denn sonst könnte es passieren, dass deine App missbräuchlich als Imagehoster genutzt wird. Mit wenigen Zeilen in der htaccess ist dieses Problem gelöst:

• htaccess

24. August 2023

So erstellst du eine Prozessgrafik mit HTML & CSS.

• CSS
• Design
• HTML