The design for Netflix’s browse page has remained pretty similar for a few years now. One mainstay component is the preview slider that allows users to scroll through content and hover on items to see a preview.
One unique characteristic …
Firefox 72 was first out of the gate with “independent transforms.” That is, instead of having to combine transforms together, like:
.el {
transform: translate(10px, 10px) scale(0.95) rotate(10deg);
}…we can do:
.el {
rotate: 10deg;
scale: 0.95;
translate: 10px 
Earlier this year, I came across this demo by Florin Pop, which makes a line go either over or under the letters of a single line heading. I thought this was a cool idea, but there were a few little …
I’ve recently noticed an interesting change on CodePen: on hovering the pens on the homepage, there’s a rectangle with rounded corners expanding in the back.…
I’ve been working on a website in which large pictures are displayed to the user. Instead of creating a typical lightbox effect (a zoom-in animation with a black overlay) for these large pictures, I decided to try and make something …
I’ve been playing with CSS transforms for over five years and one thing that has always bugged me was that I couldn’t animate the components of a transform chain individually. This article is going to explain the problem, the old …
When I saw the original article on how to recreate this animation, my first thought was that it could all be simplified with the use of preprocessors and especialy CSS variables. So let’s dive into it and see how!…
Dan Wilson documents a classic annoyance with transforms:
button {
transform: translateY(-150%);
}
button:hover {
/* will (perhaps unintentionally) override the original translate */
transform: scale(.8);
}The native (and WET) solution is list the original transform again:
button:hover {
