Kategorie: CSS3

Linkfutter 405 – Animation

Animationen mit JS-Hilfe:

  • Bouncy Ball – Comparing web animation techniques by showing how to bounce a ball with each one.
  • Scrollanim – Scrollanim is a CSS3 and JavaScript library to create stunning scroll animations that work everywhere.
  • Anime.js – eine JS-Bibliothek für Animationen
  • WOW – Reveal Animations When You Scroll.

Drei CSS-Bibliotheken, die man als Klassiker bezeichnen kann:

Zum Abschluss noch eine motivierende SVG-Animation: Die Projekt-Deadline.

Ein Navigationseffekt mit Flexbox

Flexbox ist schon eine nette Sache. Elemente sind damit flugs ausgerichtet, ohne lästige Hacks und Berchnungen. Zudem kann man den Flex-Items mitgeben, ob sie den gesamten Platz ihrer Achse einnehmen sollen oder wie sie sich genau ausrichten sollen. Alles nur mit jeweils einer einzigen Eigenschaft.
Weiterlesen

Jeder Browser ist anders …

Bei der Weiterentwicklung des YAML-Frameworks konfrontierte mich Dirk Jesse gestern mit einem ärgerlichen Verhalten von Chrome. Bei einem Off-Canvas-Menü ignorierte dieser geflissentlich die Eigenschaft position:fixed. Nach ein paar Versuchen kam ich zu der Erkenntnis, dass die Entfernung von -webkit-perspective: 1000; das Problem löste. Ein Grund erschloss sich mir nicht. Also recherchierte ich heute Morgen ein wenig und stolperte schon gleich zu Beginn auf eine frustrierende Erkenntnis von Ian Routledge:
Weiterlesen

Animiertes SVG-Menü zusammenbauen lassen

Sara Soueidan ist die Entwicklerin, die man im Blick haben muss, wenn es um die Nutzung von SVG geht. Neben vielen tollen Talks und Artikeln hat sie jetzt ein Tool veröffentlicht, mit dem man ein auf SVG basierendes animiertes Menü erstellen kann. Die Menüpunkte können dabei im Kreis oder in einem Teil eines Kreises angeordnet werden. Nicht nur das Tool ist interessant, auch die Erläuterungen von Sara dazu sind es. Es gibt zudem zu einzelnen Beispielen Codepens, mit denen man selber experimentieren kann.

Linkfutter 191 – Shadow DOM

Bei HTML5Rocks gibt es drei Tutorials zum Shadow DOM: Eines zum Styling, eines, das in die Grundlagen einführt und eines, das erweiterte Konzepte und DOM APIs thematisiert.

Wenn man dann mit dem Shadow DOM herumspielen will, benötigt man eine gute Übersicht über die jeweiligen Pseudoelemente. Eine sehr umfangreiche Übersicht über Pseudoelemente gibt es als Github gist. Jeder Abschnitt beginnt mit einer knappen Erklärung bzw. Einordnung. Die einzelnen Pseudoelemente muss man sich dann anhand der Namen erschliessen.

Diese Liste von Pseudoelementen ist übersichtlicher, aber auch kürzer.

HTML5-MasterClass in Hamburg

Frontendentwicklung ist kein leichter Job. Die technischen Rahmenbedingungen ändern sich ständig. Oft bleibt nicht genügend Zeit, um neben dem Job auf dem neuesten Stand zu bleiben. Und am Arbeitsplatz selber wird einem oft die Möglichkeit nicht eröffnet.

Deshalb sind Schulungen für viele Unternehmen und Entwickler wichtig, um technisch nicht abgehängt zu werden.
Weiterlesen

Die Einheit vh in der Praxis

Andrew Ckor beschreibt, wie man mittels der Einheit „vh“ viewportfüllende Designs ohne eine Zeile JavaScript erstellen kann. Er unterfüttert seine Ausführungen mit guten und bekannten Beispielen.

Die Einheit wird ab IE9 unterstützt. Für den IE8 benötigen wir entweder einen Polyfill, eine JavaScript-Funktion oder wir geben einfach im Geiste von Graceful Degredation diesem Browser ein leicht anderes Design. Der IE9 hat allerdings einen üblen Bug: in Printstylesheets werden aus „90vh“, also der 90%igen Viewporthöhe, einfach mal „90 Seiten“. Die IE-Entwickler haben einen schrägen Humor! (Auf der verlinkten Seite im Reiter „Known Issues“ schauen.)