Parallax has become, for better or worse, an increasingly popular web trend. Done right, it feels awesome. The problem is, a vast majority of sites using parallax suffer from terrible scroll performance. A good refresher on how to do high performance animations Parallax Done Right → Related: High Performance Animations → 2D transform’s translate() vs …
Tag Archives: css
Reminder: Current Color in CSS
Reminder to self, as I seem to keep forgetting this (even after having blogged about it 3 years ago): you can use currentColor as a color value in CSS. Be it for background-color, border-color, etc. — they all accept currentColor. The value it represents is the current color, so if that one changes so will …
CSS Grid layout: a new core primitive for web apps
CSS3 text-align-last
.caption { text-align: justify; text-align-last: center; } The text-align-last property describes how the last line of a block or a line right before a forced line break is aligned when ‘text-align’ is ‘justify’, which means you gain full control over the alignment of the last line of a block. As seen in the example above …
Getting modular with CSS animations
Neat little example showing how to combine CSS animations: Check out this Pen! Beware with animationend though, Firefox still has its quirks with it (in my experience it will fire most of the time, but sometimes it won’t). A video walking through the code is available Getting modular with CSS animations →
Content-out Layout
Grids serve well to divide up a predefined canvas and guide how content fits onto a page, but when designing for the web’s fluid nature, we need something more… well, responsive. Enter ratios, which architects, sculptors, and book designers have all used in their work to help set the tone for their compositions, and to …
CSS Diner
Establishing a new block formatting context using overflow: hidden;
Today Vasilis tweeted a link to a very nice (and old, apparently) CSS trick: Here's your monthly reminder that this is an obscure, but very handy feature of CSS overflow. http://t.co/4qNriVlB5y — Vasilis (@vasilis) February 13, 2014 Overflow does some cool things you should know about. Creates Block Formatting Context Clears Floats The second feature …
Continue reading “Establishing a new block formatting context using overflow: hidden;”
The Letter-Heads
Vertical align anything with just 3 lines of CSS
.element { position: relative; top: 50%; transform: translateY(-50%); } Same goes for horizontal centering. Where one – back in the day – would abuse margin-left by setting a negative margin to half of the width, we can now use translateX(-50%) to horizontally center a fluid-width box. .element { position: relative; width: 400px; left: 50%; margin-left: …
Continue reading “Vertical align anything with just 3 lines of CSS”