A rather geeky/technical weblog, est. 2001, by Bramus
Sparked by the question “Is it possible to apply CSS to half of a character?” on StackOverflow, HalfStyle was created: HalfStyle is a set of advanced CSS rules that allow styling each half or third of a character, vertically or horizontally, independently and individually. Works on any dynamic text, or a single character, and is …
Continue reading “HalfStyle: Style Half of a Character by CSS”
Lately I’ve seen quite a few websites that have some kind of an indicator to display the current reading position (how much you have “read”, depending on how far you have scrolled down an article). In this article, we’ll focus on a technique that uses a horizontal progress bar as the indicator. But instead of …
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 …
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 …
.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 …
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 →
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 …
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;”