CSS

CSS (Cascading Style Sheets) ist eine Sprache zu Strukturierung und Gestaltung von Website-Inhalten und wird i.d.R. in Kombination mit HTML oder XML eingesetzt. HTML und XML übernehmen die semantische Auszeichnung der Inhalte, CSS3 übernimmt das visuelle Erscheinungsbild. Das Verhalten von Website-Elementen fällt in den Aufgabenbereich von JavaScript. Bei Interaktionen und Animationen kommt es zu Überschneidungen zwischen JavaScript und CSS3. Viele Effekte lassen sich mit beiden Technologien erreichen.

SVG Browser-Support für Animationen und Interaktionen

SVG

Mit Hilfe der SVG-Technologie können interessante Interaktionen und Animationen auf einer Website realisiert werden. Leider ist der Browser-Support höchst unübersichtlich, denn ob etwas funktioniert oder nicht ist davon abhängig wie die SVG eingebunden wurde und welche Sprache (JavaScript, SMIL, CSS) zur Erzeugung der Animation verwendet wurde. Wir haben daher für die interne Nutzung eine Übersicht erstellt, die wir euch natürlich nicht vorenthalten wollen.

Beitrag zu Ende lesen

CSS backdrop-filter – Filter auf Objekte im Hintergrund anwenden

Mit Hilfe der CSS-Eigenschaft filter lassen sich zahlreiche interessante Effekte realisieren. Für die Eigenschaft backdrop-filter stehen die gleichen Effekte zur Verfügung, allerdings wirken sich die Filter nicht auf das Element selbst aus, sondern auf alles was optisch hinter dem Element liegt. Mit Backdrop Filtern ist es also beispielsweise möglich eine fixierte, halbtransparente Navigationsleiste zu erstellen, hinter der bei Scrollen alle Inhalte leicht unscharf dargestellt werden.

Beitrag zu Ende lesen

SVG-Grafiken in Websites/HTML-Seiten einbinden

Das SVG-Format erfreut sich aufgrund kleiner Dateigrößen, verlustfreier Skalierung und Animationsmöglichkeiten großer Beliebtheit. Doch wie kann man SVGs am besten in HTML-Dokumente bzw. Websites eingefügen? In diesem Beitrag beschreiben wir die verschiedenen Möglichkeiten jeweils mit ihren Vor- und Nachteilen.

Beitrag zu Ende lesen

SVG-Pfade mit CSS animieren (Path-Morphing/Shape-Morphing)

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.

Beitrag zu Ende lesen

Webdesign-Trends 2017

Die Entwicklungen im Webdesign stehen nie still - daher haben wir den Jahreswechsel genutzt, um über die Webdesign- und -development-Trends 2017 nachzudenken. Wir möchten mit diesem Beitrag übrigens auf die zahlreichen Anfragen von Lesern dieses Blogs reagieren, die uns darum gebeten haben, einen Artikel zum Thema »Webdesign-Trends 2017« zu veröffentlichen. Wir danken euch sehr für den Besuch unserer Website im vergangen Jahr, euer Feedback und eure Anregungen, und wünschen euch ein großartiges Jahr 2017!

Beitrag zu Ende lesen

Textmasken mit CSS erstellen

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.

Beitrag zu Ende lesen