SVG-Animationen mit Hilfe von CSS Keyframe-Animationen oder Transitions haben in der letzten Jahren stark an Beliebtheit gewonnen. Das Ein- und Ausblenden von Objekten, Drehungen, Verschiebungen und sonstige Transformationen stellen kein Problem dar. Doch für Morphing musste man auf Technologien wie SMIL oder JavaScript zurück greifen. Nun ist Morphing auch mit CSS möglich.
Das Hamburger-Icon hat sich als Kennzeichnung für Menüs und Navigationselemente durchgesetzt. Auch wenn das Icon kritisiert wird und nicht in allen Anwendungsfällen gut funktioniert ist es doch in den meisten responsiven Websites anzutreffen. Besonders beliebt sind animierte Hamburger-Icons die per Klick in ein Schließen-Icon überführt werden. In diesem Beitrag archivieren wir ein Code-Snippet das dieses Verhalten herstellt.
CSS Media Queries zur Definition von Breakpoints sind die entscheidende Technologie im Zusammenhang mit responsive Design. Bei komplexen Projekten stellt sich allerdings oft die Frage wie und wo im Stylesheet die Breakpoints notiert werden. Präprozessoren wie Sass bieten zahlreiche Möglichkeiten um Media Queries komfortabel zu organisieren. Doch auch CSS selbst biete die Möglichkeit mehrere Bereiche über einen Befehl anzusprechen.
CSS hat eine vergleichsweise einfache Syntax und erlaubt daher einen leichten Einstieg. Dennoch kann CSS in der Organisation schnell komplex werden. Das gilt besonders für größere Projekte mit mehreren involvierten Entwicklern, aber auch für kleine und mittlere Projekte in Eigenverantwortung. In diesem Beitrag fassen wir einige Tipps zusammen, die euch helfen sollen besseren CSS-Code zu schreiben.
Textmasken erfreuen sich im Grafik-Design – insbesondere im Print-Design – größter Beliebtheit. Leider war es mit Webtechnologien lange Zeit kaum möglich eine Textmaske herzustellen, bei der der Text als Reintext im HTML-Code steht. Aber gerade das ist wichtig, damit der Text geändert und übersetzt, sowie von Suchmaschinen und Screenreadern ausgelesen werden kann. In diesem Beitrag zeigen wir, wie ihr mit Hilfe von CSS Blend Modes eine semantisch korrekte Textmaske erstellt.
Wenn der Eindruck erweckt werden soll, als würde ein Text getippt, wird häufig auf JavaScript zurückgegriffen. Wir haben selbst einige Tools zu diesem Zweck zusammengetragen. Doch der Effekt lässt sich auch mit einer CSS Keyframe-Animation erstellen. In diesem Beitrag zeigen wir wie es geht und was sich dennoch mit JavaScript optimieren lässt.
Scrolling-Effekte sind ein beliebtes Gestaltungsmittel auf modernen Websites. Sinnvoll eingesetzt können Sie dazu beitragen, dass eine Website gleichermaßen erfolgreich als auch ästhetisch ansprechend ist. In diesem Beitrag findet ihr ein JavaScript-Snippet, mit dem Elemente eine CSS-Klasse erhalten, sobald Sie sich im Viewport befinden. Die Klasse kann optional wieder entfernt werden, sobald sich das Element nicht mehr vollständig im Viewport befindet.
Scrolling zählt zu den elementaren Bedienkonzepten im Web. Dennoch gibt es viele Probleme bei der Implementierung der gewünschten Scrolling-Funktion sowie beim …
Beitrag zu Ende lesenDie Front-End Tooling Umfrage hat ein ziemlich geradliniges Ziel – herauszufinden welche Werkzeuge von Frontend-Entwickler derzeit in unserer Branche eingesetzt werden. …
Beitrag zu Ende lesenIm responsive Webdesign werden Bilder gegebenenfalls automatisch verkleinert. Leider rendert Google’s Browser Chrome Bilder beim Verkleinern nicht so, wie es …
Beitrag zu Ende lesenEs hat über drei Jahre gedauert aber jetzt ist es da – Bootstrap 4. Die Beta Phase ist offiziell vorbei …
Beitrag zu Ende lesenLaut dem Analyse-Tool PageSpeed Insights von Google sollen JavaScript- und CSS-Ressourcen, die das Rendering blockieren, nicht in Inhalten »above the …
Beitrag zu Ende lesenBei sog. »Variable Fonts« handelt es sich um ein neues OpenType Feature, dass zunehmend an Bekanntheit gewinnt und darüber hinaus …
Beitrag zu Ende lesen