DEV Community: Jon Kantner

Fitting Canvas Snow In a Tweet

Jon Kantner — Mon, 08 Feb 2021 17:31:29 +0000

Last year before Christmas, I created this snowfall animation in 257 bytes:

It’s not just the JavaScript portion but the entire source, and it fits well in Twitter’s 280-character limit. If you haven’t already checked out my 278-byte Flappy Bird, I’ll demystify this snowfall in a similar fashion.

The Code

Here’s the whole code with line breaks, tabs, and spaces for better readability.

<body onload="
    c = C.getContext('2d');
    R = Math.random;
    H = 164;
    F = [];
    f = 99;
    while (f--)
        F[f] = {
            y: R() * H,
            s: R()
        };
    setInterval(`
        c.fillRect(x = 0,0,300,H);
        for (f of F) {
        c.font = 28 * f.s + 'q a';
        f.y = f.y % H + f.s;
        c.fillText('*',x,f.y);
        x += 3;
        c.fillStyle = x > 294 ? '#000' : '#fff'
        }
    `,9)
">
<canvas id=C>

Using a single letter for every variable is essential for writing minimal code. In addition, JavaScript minifiers often do this and should be to help reduce script size when talking web performance.

Tags and Attributes

<body onload="">
<canvas id=C>

All the HTML we’ll ever need here is an opening <body> and <canvas> tag. Since no other elements will follow, we can omit the closing tags. As a result, we save 16 bytes (7 for </body> and 9 for </canvas>).

Since JavaScript lets us to use element IDs as variables, I used only C here for the canvas. Although attributes of one value may not require quotes, we still need them for the body’s onload because having '2d' in .getContext('2d') as a value in quotes, the browser will treat all else before and after it as separate attribute-value pairs. Then some =s will become invalid HTML syntax.

Context, Main Variables, and Snowflake Array

c = C.getContext('2d');

As mentioned earlier, we can use the canvas ID like a variable; using document.getElementById('C') or document.querySelector('#C') would just rack up the expense.

R = Math.random;

Since we’re using Math.random() more than once for randomizing the starting snowflake positions, we can assign R the function. Then we’d save 10 bytes per use of R()!

H = 164;

H is the height of the canvas (150) plus enough space (14) past the bottom so that when snowflakes are moved back to the top, it doesn’t look like they magically disappear.

F = [];
f = 99;
while (f--)
    F[f] = {
        y: R() * H,
        s: R()
    };

The last chunk of code before the setInterval() is where we generate 99 snowflakes as well as determine their starting y-positions (y) and speeds (s). For the random values, we use our byte-saving R() function. Rather than using a for loop of any kind and .push() to supply the F array, we can use fewer bytes with a while loop with a counter starting at 99. Then we can append each snowflake object using F[f]=, which is 3 bytes cheaper than F.push().

The Animation Loop

setInterval(`
    c.fillRect(x = 0,0,300,H);
    for (f of F) {
        c.font = 28 * f.s + 'q a';
        f.y = f.y % H + f.s;
        c.fillText('*',x,f.y);
        x += 3;
        c.fillStyle = x > 296 ? '#000' : '#fff'
    }
`,9)

The setInterval() here is where all the logic and drawing happens. Although I don’t recommend doing it anyway due to security concerns, you can supply the whole function as a string or template literal.

c.fillRect(x = 0,0,300,H);
for (f of F) {
    . . .
}

While filling the screen black by default for the first statement, we set x equal to 0 for the x-position of the first snowflake. In the for...of loop contents we’re about to explore, the x will come in handy for horizontally placing the snowflakes without using too many bytes, and we’ll see how later.

c.font = 28 * f.s + 'q a';

In the first statement in the for...of loop, we set a maximum font size of 28q. I normally don’t use the q unit, but it happens to be great for code golfing because every other unit is at least a character longer. Then multiplying the font size by snowflake speed (f.s), we’ll get the visual depth we want. The smaller the snowflake, the further away and slower in movement it’ll appear. By the way as you’ve seen earlier in the whole chunk of code, the asterisk (*) will be the snowflake. Then as part of getting the desired shape, we can use a as a single-letter fake font family that will be rendered as the browser default. If we were to leave it out in attempt to save 2 more bytes, however, the snowflakes would wind up as dots.

f.y = f.y % H + f.s;

The next statement moves each snowflake downward. By using f.y % H, each snowflake will be kept in its 0-164 range when its y finally exceeds H through adding f.s.

c.fillText('*',x,f.y);
x += 3;

Once having the needed position, we throw in the snowflake itself. After that we evenly space out all 99 snowflakes as possible across the canvas by dividing the default canvas width of 300 by 99 and rounding the result, which will be 3. That’s what we use to increment x. The reason we did not give snowflakes their own x property is that obviously more bytes will be wasted if we used f.x. So that explains our use of x in the .fillRect() from earlier.

c.fillStyle = x > 294 ? '#000' : '#fff'

The last statement in the loop determines when to switch fills. Since the last snowflake will be located at x = 294 ((x increment of 3) × (99 snowflakes) - (x increment of 3)), we can set the fill black for the background when x is finally greater than it.

setInterval(`
    . . .
`,9)

Finally for the sake of cutting bytes, a single-digit interval of 9 milliseconds sets a comfortable animation speed.

Conclusion

There you have it, a wintery scene in about a quarter of a kilobyte! The key parts of this have been:

Turning a built-in JavaScript function Math.random into a single letter if using more than once
Changing how we may normally populate arrays
Not using a certain property if a pattern can be determined without it (x)
Tolerating defaults

How to Create Simple Skeuomorphic Buttons in CSS

Jon Kantner — Thu, 24 Sep 2020 16:14:20 +0000

If you’re a fan of skeuomorphism, then this tutorial on creating buttons in that style is for you. Skeuomorphic buttons you find in the wild can take all sorts of forms, but we’ll create a basic one similar to what I’ve used in this Pen.

Normal State

To start off with the initial button state, here’s the HTML you’ll need:



<button>
    <span tabindex="-1">Button</span>
</button>

The reason for the <span> with that tabindex is for pulling off the keyboard-only focus later. We could use :focus-visible in CSS here, but just for deeper browser support we’ll adopt Roman Komarov’s approach as already used.

For better organization and productivity, we’ll do all styling in Sass (SCSS syntax). Then we start with a flat-colored button without any states as well as two variables for the button background and text color ($btnColor, $btnTextColor).



body {
    background: #c7cad1;
}
button {
    $btnColor: #0053d0;
    $btnTextColor: #fff;
    background: $btnColor;
    border: 0 {
        radius: 0.375em;
    };
    color: $btnTextColor;
    cursor: pointer;
    font: 24px/1.5 sans-serif;
    margin: 1.5em auto;
    padding: 0.5em 1em;
    -webkit-tap-highlight-color: transparent;
    &, span {
        display: block;
    }
}

There are a couple key things here:

Having a slightly dark enough page background for the body (or whatever the parent element should be) will allow all edges of the button hole to be seen.
We clear the -webkit-tap-highlight-color to avoid the brief dark highlight on Apple devices.
Both the button and text span should be display: block to allow transitions near the end.

So far, here’s what we have:

Now we apply the look. We’ll need more variables after $btnTextColor for the button edge, edge of the button hole, drop shadow color, dark edges, lighter edges, and a dark edge adopting more of the button color.



button {
    . . .
    $btnEdge: 0.2em;
    $btnHoleEdge: 0.1em;
    $dropShadowColor: rgba(0,0,0,0.47);
    $darkEdgeColor: rgba(0,0,0,0.27);
    $lightEdgeColor: rgba(255,255,255,0.27);
    $coloredDarkEdgeColor: darken($btnColor,10%);
    . . .
}

Next, anywhere before &, span { }, the order of box shadows for drawing a bulk of the button will be as follows:



button {
    . . .
    box-shadow:
        // drop shadow
        $btnEdge $btnEdge 0.5em $dropShadowColor,
        // top, left, and right edges of hole
        0 (-$btnHoleEdge) 0 $btnHoleEdge $darkEdgeColor,
        // bottom edge of hole
        0 $btnHoleEdge 0 $btnHoleEdge $lightEdgeColor,
        // right edge of button
        (-$btnEdge) 0 $btnEdge $coloredDarkEdgeColor inset,
        // top edge of button
        0 $btnEdge $btnEdge $lightEdgeColor inset,
        // left edge of button
        $btnEdge 0 $btnEdge $lightEdgeColor inset,
        // bottom edge of button
        0 (-$btnEdge) $btnEdge $coloredDarkEdgeColor inset;
    . . .
}

Where we draw or color the shadows depends on where the direction of light is. In this case, it’ll come from the top left. Therefore, the shadow shall be cast 0.2em to the right and from the top. To explain how everything should be shaded:

We use $darkEdgeColor to add slightly dark transparency to hole edges that should receive hardly any light, which would be the top, left, and right.
$lightEdgeColor is for adding transparent white to the hole and button edges receiving more light (note: because the drop shadow initially covers it, we’ll see the full effect only when the button is pressed).
For a little more color on the button edges receiving minimal light, we apply $coloredDarkEdgeColor rather than $darkEdgeColor.

The texture is kicking in now, but there’s more to go.

Let’s spice it up by adding slight shading from top to bottom as well as a small reflection at the top to the current background.



button {
    . . .
    background:
        // top-to-bottom shading
        linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.13)),
        // reflection at top
        radial-gradient(90% 7% at 50% 8%,rgba(255,255,255,0.47) 25%,rgba(255,255,255,0) 50%),
        $btnColor;
}

When you look at an object from a certain angle, sometimes you can barely see a visible transition of shades. Take this picture of a plastic for example:

Running along the side of it with macOS’s Digital Color Meter (or you can click around a similar image with the eyedropper in your favorite image editing tool), you can see the gradual shift in hex from red to a darker red (roughly #eb0011 to #d5000e). That’s the purpose of the first gradient. Depending on the material, you may see some reflection at top edges, which the second gradient illustrates.

The last thing to add to the button’s initial state is this text shadow before &, span { }:



button {
    . . .
    text-shadow: 0 0 $btnEdge fade-out($btnTextColor,0.53);
    . . .
}

The text won’t look so sharp if we provide a slight blur having the same value as $btnEdge and the same color but about half the opacity.

Looking at what we have now, we’re ready to move forward with the button states!

`:active` State

To begin with our down state, we need an additional variable $coloredDarkerEdgeColor with a slightly darker blue.



button {
    . . .
    $coloredDarkerEdgeColor: darken($btnColor,20%);
    . . .
}

The darker blue edges of the button ought to become darker while pressed to show the lack of light between button and hole edges.

Then we apply the same stack of shadows with some parameter changes for :active as well as some scaling down for the button text span:



button {
    . . .
    &:active {
        box-shadow:
            // pull shadow inward
            0 0 0 $dropShadowColor,
            // edges of hole stay the same
            0 (-$btnHoleEdge) 0 $btnHoleEdge $darkEdgeColor,
            0 $btnHoleEdge 0 $btnHoleEdge $lightEdgeColor,
            // darker right shadow with a bit of blue to result from button being deep into hole
            (-$btnEdge) 0 $btnEdge $coloredDarkerEdgeColor inset,
            // similar shadow at top and left
            0 $btnEdge $btnEdge $darkEdgeColor inset,
            $btnEdge 0 $btnEdge $darkEdgeColor inset,
            // same as 4th shadow but coming from bottom
            0 (-$btnEdge) $btnEdge $coloredDarkerEdgeColor inset;
        span {
            transform: scale(0.95);
        }
    }
}

To sum up what happens at this point:

We change the x- and y-positions to 0 to pull that drop shadow inward.
Because nothing should happen to them, we leave the next two box shadows for the edges of the hole alone.
The fourth and last shadows is where we apply the darker blue using $coloredDarkerEdgeColor.
The lighter shadows before the last shall use the direct opposite color, which would be $darkEdgeColor.
At the same time, the button text transform will give a top-down 3D perspective.

What we’ve done here in a nutshell is an optical illusion since it’s merely a change of a couple box shadows and scaling of text.

Now what the button needs is some animation. Let’s add 0.1-second box-shadow and transform transitions to the button and span as well as will-change: transform to the span, which will stop the button from jerking up and down.



button {
    . . .
    transition-property: box-shadow;
    &, span {
        display: block;
        transition: {
            duration: 0.1s;
            timing-function: linear; 
        }
    }
    span {
        transition-property: transform;
        will-change: transform;
    }
    . . .
}

After all that, we have the effect we’re looking for; however, it looks weird to see that native focus ring encircle the button or the text, whether you tab into it or click it. Tackling that will be the final step.

`:focus` State

Since neither the button nor its text should have that native outline for :focus, let’s take that away with outline: none.



button {
    . . .
    &, span {
        . . .
        &:focus {
            outline: none;
        }
    }
    . . .
}

For a new focus style, we must consider what would best fit the button. If the button were a LED, a change of background color would certainly fit perhaps as well as an extra box shadow with the button color. For a plastic button like this one, a change of text color as well as its shadow works best. So that calls for one more variable ($btnTextFocusColor), and we’ll use a lighter shade of the button color. Right after our :active selector is where we’ll apply the :focus.



button {
    . . .
    $btnTextFocusColor: lighten($btnColor,40%);
    . . .
    &:focus {
        color: $btnTextFocusColor;
        text-shadow: 0 0 $btnEdge fade-out($btnTextFocusColor,0.53);
    }
}

And now we have a complete button! If you click it now, those annoying focus rings won’t be there. Plus, the new focus shouldn’t persist. That’s because the span containing the button text covers it. That way, it’ll look more natural clicking or tapping that button. Therefore, it should be via keyboard only the text changes color just to indicate where the user is tabbing.

Conclusion

All in all, realistic-looking buttons like these or even other form controls don’t require a complicated HTML structure. Although we didn’t use them here, you can even take advantage of using :before and :after if you feel more elements are needed just as I did in this LED switch, which were for the rotating part. By learning to effectively stack gradients and box shadows, you can pull off a lot of detail in the fewest DOM elements possible.

Fitting Flappy Bird Into a Tweet

Jon Kantner — Wed, 09 Sep 2020 13:30:16 +0000

Note: I originally published this article on December 21, 2017 on a site I shut down as part of a purge.

Since Twitter recently extended the character limit to 280, I’ve challenged myself to write programs or patterns within 280 bytes such as a tweet-sized Flappy Bird (game by dotGEARS about flying a bird through pipes without touching them) I’ll share in this post. I once thought about writing functional apps under 140, but there was just too little room to do anything significant.

The inspiration came from studying posts on a Twitter-like site called Dwitter where you share 140-byte snippets of functions for canvas animations. I also studied some 2012 challenge to write a Tron in the fewest bytes possible.

This practice of writing minimal code is known as “code golfing“ because using the least bytes to write a functional program is like using the least strokes to complete a hole in regular golf.

I’ll walk through how I made a 278-byte, black-and-white version of the once viral Flappy Bird using HTML and JavaScript. Due to the amount of minimum logic needed for the number of game mechanics (e.g. flapping, collision with pipes), there wasn’t enough room to make everything 100% accurate with the current JavaScript features available. The goal was rather to fit as many of those mechanics 280 characters could hold.

The Code

Here’s the entire source code, and I added some line breaks and tabs so that you can easily see its parts.

<body id=B onload="
    c=C.getContext('2d');
    o=[90,-92,98];
    y=0;
    x=225;
    s=0;
    setInterval('
        c.fillRect(0,0,W=150,W);
        for(i in o)
            c.clearRect(+i?x:37,o[i],+i?14:9,+i?W:9);
        b=o[0];
        b<W-9&&(x<23||x>46||58<b&&b<89)?
            (y+=.04,x<-13?(x=W,++s):--x,o[0]+=y):B.innerHTML=s
    ',9)
">
<canvas id=C onclick=y=-1>

I kept all variable names and IDs at a single-letter because it’s a great strategy for writing minimal code. Pretty small and weird, isn’t it?

Tags and Attributes

<body id=B onload="">
<canvas id=C onclick=y=-1>

The skeleton of the game consists of only opening <body> and <canvas> tags. It may normally be a good habit to close these, but it doesn’t really matter here because there are no other elements coming after the canvas. Therefore, we can save 16 bytes by not including </body> and </canvas> (7 + 9)!

Then we have IDs B and C. Luckily, JavaScript allows us to use IDs assigned to elements as variable names. In that case, we can use B for displaying the score on game over and C for accessing the canvas.

The main game code goes in the onload event listening attribute and then an onclick with a variable change to explain later.

All of these attributes except onload don’t have quotes. Since three need only one value, we save 6 bytes by not including the quotes. The case for onload is different because it’ll contain a for...in loop with two spaces, and the browser will mistake for(i plus code before it, in, and o) plus code after it as attributes if quotes aren’t surrounding them. Furthermore, the browser will treat > before the 46 as the end of the opening <body> tag and then think everything after 58 is an another opening tag.

What the browser will see if onload is unquoted

Context and Main Variables

c=C.getContext('2d');

For the canvas context, I simply used the canvas ID like a variable instead of using document.getElementById("C") or document.querySelector("#C"). Either way it saves 27 bytes (28 – 1 for C)!

o=[90,-92,98];

o holds the Y positions of the bird (90) and pipes (-92 and 98).

y=0;

y is the additional Y distance added to the bird, and this is constantly increased later in the code. When the player clicks the canvas, this value goes back to -1, and that is what you see in the element’s onclick. This helps the bird flap because y being negative moves it upward. When y is over zero, then the bird starts falling again.

x=225;
s=0;

x is the X position of the pipes, which starts offscreen at 225 pixels, and s is the score.

By the way, you may have noticed that I used neither var, let, nor const to declare these variables. Without those keywords, variables are treated as var by default as long as strict mode ("use strict") isn’t enabled.

Game Functionality

setInterval('
    c.fillRect(0,0,W=150,W);
    for(i in o)
        c.clearRect(+i?x:37,o[i],+i?14:9,+i?W:9);
    b=o[0];
    b<W-9&&(x<23||x>46||58<b&&b<89)?
        (y+=.04,x<-13?(x=W,++s):--x,o[0]+=y):B.innerHTML=s
',9)

The setInterval() contains the core of the game logic. Since this function can accept code in a string as the first argument, we can save bytes using ' ' instead of function(){} or ()=>{}. Be advised, however, that the syntax is a security hole according to Mozilla. It may not matter for little games like what I’m explaining here, but please don’t consider the syntax for reducing code in production!

Drawing the Screen

c.fillRect(0,0,W=150,W);

This fillRect() is for the background, and you can immediately throw in a new variable W as the width and height parameters. This is valid as long as you’ve defined it in the first place, and it even becomes available within the scope of setInterval(). Occupying the whole default canvas height at 150×150 is fine; the screen is easiest to see, and it’s closest to being portrait like the original Flappy Bird.

for(i in o)
    c.clearRect(+i?x:37,o[i],+i?14:9,+i?W:9);

The for...in loop that follows draws the bird and pipes. Using for...in to loop through an array is a lot simpler than the classic for(i = 0; i < n; ++i) boilerplate.

To use only one clearRect() and the smallest arguments to draw the bird or pipes, I took advantage of the way JavaScript handles single-variable expressions. If a variable equals 0 and you check if it’s true, it returns false. That’s because JavaScript first thinks 0 is a boolean. Since the counter in a for...in loop is initially a string though, you must convert it to a number by placing a + before it in order to get the desired result. Then for clearRect() to draw the bird when i is 0, i must return false, or else clearRect() draws a pipe.

If you’re wondering why fillRect() and clearRect() are where I used them, it’s because if I swapped their roles, clearRect() wouldn’t be able to erase the pipes when offscreen. For instance:

Note: Slightly cropped to focus on pipe “trail”

Collision Detection

b=o[0];
b<W-9&&(x<23||x>46||58<b&&b<89)?

Next, I set the conditions for avoiding the pipes and ground, but first I used b for a copy of the bird’s Y position. Normally I’d use o[0], but it saves a few bytes to use a shorter reference to an array item. Then here are the conditions broken down:

b<W-9: The top of the bird must not be 9 less the canvas height, which is touching the ground.
x<23: The left side of pipes must be more than their diameter (14) behind the X position of the bird (37). To keep this short, I wrote the result of 23.
x>46: If the previous condition is false, then check if the pipes are ahead of the bird plus its width (37 + 9 = 46).
58<b&&b<89: Then if false again, compare the top of the bird to the visible horizontal sides both pipes. Because the top of the first pipe is offscreen at -92, add the pipe height, which is the same value as the screen width W (-92 + 150 = 58). That’s the first value in this condition for the bird to avoid game over. The other value 89 is the top of the second pipe minus the bird height (98 – 9 = 89).

My original plan for the last comparison was to use o[1]+W<b&&b<o[2]. That way, I could use Math.random() somewhere to generate different pipe positions and not use magic numbers for the same ones, yet it requires me to sacrifice scoring or collision detection.

Object Movement

(y+=.04,x<-13?(x=W,++s):--x,o[0]+=y):B.innerHTML=s

As long as the bird is in play, every variable adjustment in this part of the ternary operation influences the bird and pipes. Using commas, you can put multiple statements in one expression as long as that expression is enclosed by ( ). An error will occur, however, if you slip in semicolons or keywords like if or else. For example, the console will complain about an unexpected token for y+=.04,if(x<-13)x=W,++s;else--x.

In the first expression, the extra distance y is increased slightly by .04 and then compounded on the bird as shown by o[0]+=y. As I noted before, this is part of the flapping and at the same time simulates gravity. If I were to decrease this increment, the bird would fall more slowly as if on the moon. If greater, it would fall faster thus making it harder to keep midair.

Then an inner ternary operation x<-13?(x=W,++s):--x controls the pipes. When the x position of the pipes is less than the pipe diameter negated plus one (-14 + 1 = -13), then they are moved back to the right edge of the screen at W, the screen width. At the same time, the player scores a point (as ++s shows). In the original game though you score points for just passing a set of pipes. To make it look that way in this version, I set the y increment so that the bird shouldn’t be able to hit the ground before the pipe exits. If these changes aren’t to happen yet otherwise, the pipes should keep moving left.

Finally in the second expression for b<W-9..., the entire canvas is replaced with the player’s score on game over.

Interval

setInterval('
    . . .
',9)

The last part to cover is the interval. To run animations very smoothly at least 60 fps, 1000/60 is typically the value to use. We could simplify it to 16.6667 then round to 17, but the bird and pipes would move too slowly. To fix that, we could change y from .04 to a higher value and --x to maybe x-=2, but that would cost some extra bytes. Because I wanted to reduce bytes wherever I could, I used a single digit value of 9, which would still set a comfortable game speed.

Conclusion

Writing such a tiny program has taught me to find ways to write less code. All in all, these sort of programs are created for fun and in code golfing competitions. Plus, you can learn from golfing how to better minify or compress your code for reduced load time! Just be mindful of what might lead to bugs or errors.

Play the 278-byte Flappy Bird on CodePen

How to play: Click the canvas to flap. Avoid the pipes. Click Run to replay.

Trick for Resizable and Responsive CSS Images

Jon Kantner — Wed, 09 Sep 2020 13:21:07 +0000

Note: I originally published this article on May 28, 2017 on a site I shut down as part of a purge.

Every once in a while in CodePen’s Popular or Picked section, you’ll come across a Pen name containing #dailycssimages. These Pens are vector images created using only HTML elements and CSS. These images usually consist of absolutely positioned elements formed using a variety of properties including border-radius, box-shadow, and sometimes clip-path. For plenty of examples, just do a search for the hashtag. I have been drawing some myself including this Longcat and radar animation. Yet, I’ve always wondered if there was a way to make them resizable or responsive.

I haven’t found too many examples of responsive CSS images in the wild. If responsive somewhat, you’ll find at least a few media queries in the code to define smaller or larger sizes. Just like responsive <img> elements, CSS images made responsive should gradually and proportionally increase or decrease in size if you resize the browser window. Moreover, it would save so much time if we could resize them manually like choosing a new width or height value for a certain <img> element (in CSS that is) and using auto for the other dimension. We may have scale() of the transform property, but the space the image occupies won’t be adjusted along with the image if used.

After endless tinkering, I finally found a way that seemed to be less complicated than I thought. I would like to share it with you, but please be advised, however, that it’s experimental only. There are few browser-related situations where it malfunctions.

Create or Find any Image

The first step is to draw everything like usual or grab an existing image. For this demo, we’ll use the teddy bear I drew above. Here’s its HTML and CSS:

Before we start pulling off the trick, verify that the parent container has a defined width and height. They must use an absolute unit (px, pt, pc, in, cm, or mm) in order to maintain a constant side-to-side ratio. Any selectors of child elements using absolute units must use the same type as that of the parent. In this case, .teddy is our parent container at 260px × 330px, and we have left the %s under .right-ear,..., .foot and .foot alone since they weren’t absolute.

Applying the Trick

Once we’re satisfied with the code, let’s add a font size to the container using a calc() expression. It shall divide a new width or height of the image by the original one. Just don’t add the unit to the original one because the divisor in calc() division must be a number. For our example we’ll choose a new width of 50vmin (for responsiveness) and divide it by the original width 260 (px dropped).

.teddy {
    font-size: calc(50vmin / 260);
    . . .
}

We could also use an expression that adds or subtracts different units as well like (300px + 5vw) as long as we keep everything before the slash and 260 in parentheses. %s used here though applies to font size only and yields different results in every browser.

After setting the font size, we replace every absolute unit out side of the calc() with em (you can speed up this process using your text editor’s Find and Replace tool). In this example we used px and replaced each px with em.

Finally, resize the window to see how the image increases or decreases in size proportionally!

(Demo)

If you got something awfully strange, refactor your code so that every element is inside one main container element with an absolute width and height. Ensure that you used a single type of absolute unit, too. If you feel you did everything correctly and the image still appears larger than it should, I’ll discuss why that happens in the next section.

Caveats

Whether this successfully worked or not, there are still two caveats to be aware of:

The Minimum Font Size Setting

If your image ended up being unusually large, here’s why: the browser has a setting for minimum font size, and it will force the result of the calc() we used to that font size if under. For instance, if the resulting font size is 2px and the minimum is 6px, then it remains at 6px. This will make every em 6px each thus causing the image to be ridiculously large. I discovered this by accident when for no reason I played with Chrome’s font settings. Since the default minimum font size is 1px and we did not touch that setting for this demo, we could use super small font size for resizing a CSS image in the way desired.

Additionally, according to some post about minimum font size in Chrome by Ian Lai, we would have been able to fix the minimum font size issue in every browser using the text-size-adjust property. Unfortunately, desktop browser support has been dropped a few years a ago (possibly due to accessibility issues).

`calc()` with Viewport Units in Safari

The other caveat is that if you provide a new length using vw, vh, vmin, or vmax, Safari will only calculate it on load and not on window resize. This happens to be a bug with using viewport units in calc() for font size, and there currently aren’t any workarounds I know of.

How It Works

The magic behind this is all in the font size and em. Since 1em is equal to the font size of the current element, font size will redefine what one unit of the image would be if we switched the units for everything else from that unit to em. If the font size were 10px for instance, every pixel of the image will be 10 times larger. Then, an image originally 50px wide would become 500px.

To show how we can choose a new width or height and get what we want though, we use calc(new_length / original_length) (remember, drop the unit for the original length!). Plus, it really doesn’t matter which absolute unit we choose to work with as long as we’re being consistent.

Conclusion

In a nutshell, we can enable CSS images to be proportionally resizable and responsive by:

Using calc(new_length / original_length) for the parent container’s font size
Swapping every absolute unit outside the calc() with em

Although there’s still some experimenting to do for improving the safety of use in production, this has been a huge step towards making pure CSS images as flexible as <img> elements and SVGs. This approach for responsive CSS images is the best I’ve found so far, and I hope you’ll enjoy trying it out!

DEV Community: Jon Kantner

Fitting Canvas Snow In a Tweet

The Code

Tags and Attributes

Context, Main Variables, and Snowflake Array

The Animation Loop

Conclusion

How to Create Simple Skeuomorphic Buttons in CSS

Normal State

:active State

:focus State

Conclusion

Fitting Flappy Bird Into a Tweet

The Code

Tags and Attributes

Context and Main Variables

Game Functionality

Drawing the Screen

Collision Detection

Object Movement

Interval

Conclusion

Trick for Resizable and Responsive CSS Images

Create or Find any Image

Applying the Trick

Caveats

The Minimum Font Size Setting

calc() with Viewport Units in Safari

How It Works

Conclusion

`:active` State

`:focus` State

`calc()` with Viewport Units in Safari