It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
This was always my favorite thing in Mad magazine. One page (the inside of the back cover, I think) was covered in a zany illustration. You folded that page in thirds, covering up the middle-third of that image, and a new image would form because the illustration was designed to perfectly line up with those folds. The new image (and text!) was part of the joke.
Every one was a clever trick, so of course, I’m delighted to see that … Read article “The Mad Magazine Fold-In Effect in CSS”
I was in a situation recently where I wanted to show an iPhone on a website. I wanted users to be able to interact with an application demo on this “mock” phone, so it had to be rendered in CSS, not an image. I found a great library called marvelapp/devices.css. The library implemented the device I needed with pure CSS, and they looked great, but there was a problem: the devices it offered were not responsive (i.e. they couldn’t … Read article “Turning a Fixed-Size Object into a Responsive Element”
Nils Binder covers the ways:
1. Use an SVG in the form of a triangle. This technique is nicely described by Erik Kennedy on CSS-Tricks.
2. Hide part of your section using
clip-path. Read Diagonal Containers in CSS by Sebastiano Guerriero or Sloped edges with consistent angle in CSS by Kilian Valkhof.3. Using CSS Transforms
I would normally be a #2 kinda guy — slice off the top and bottom a bit, make sure there is ample padding, … Read article “Create Diagonal Layouts Like it’s 2020”
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 of the UI is its hover behavior. When a show preview expands on hover, the cards next to it are pushed outward so that they don’t overlap. … Read article “How to Re-Create a Nifty Netflix Animation in CSS”
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 10px;
}That’s extremely useful, as having to repeat other transforms when you change a single one, lest remove them, is tedious and prone to error.
But there is some nuance to know about here, and Dan Wilson digs in… Read article “How They Fit Together: Transform, Translate, Rotate, Scale, and Offset”
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 things about the implementation I felt I could simplify and improve at the same time.… Read article “Weaving a Line Through Text in CSS”
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.… Read article “Various Methods for Expanding a Box While Preserving the Border Radius”
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 more interactive and fun. I ended up coding an image container that tilts as the user moves the mouse cursor above it.… Read article “Animate a Container on Mouse Over Using Perspective and Transform”
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 workaround, the new magic Houdini solution and, finally, will offer you a feast of eye candy through better looking examples than those used to illustrate concepts.… Read article “What Houdini Means for Animating Transforms”
