Will Bontrager Blogs Website Techniques

The two most used font size-relative measurements in CSS are em and rem. Both refer to the width of the capital letter "M" in traditional fonts, like Arial. The font size affects the width.

Measurement 1em is relative to the size of the font being published. Size 2em is twice that.

Size 1rem is the width of the letter "M" at the browser's default font size.

The font size-relative measurements em and rem can be used for dimensions, spacing, and thickness. Here is a demonstration using em for measurements:

Adjust number to adjust font size:

The code for the demonstration is below. (How to adjust font sizes within a box is outside the scope of this article.)

<div style="font-size:20px; width:10em; border:.25em dotted black; padding:.5em;">
Change my font size. The box width, border thickness, and padding all adjust accordingly.
</div>

Note: If you change all the em sizes with rem sizes in the above code, there will be no size and dimension shifts. That's because rem is the browser default. It won't change unless the user changes the browser setting.

If you try to set a font size with an em value, the em value will be obtained from the parent element. If there is no parent, then the value of em will be the same as the rem value.

An em is variable. It changes whenever you change the font size.

A rem is not variable, generally a 16px "M". But the default browser size can be adjusted in browser settings.

Which font-relative measurement you use depends on which gives you the properties you desire.

For automatically adjustable things, like the demonstration, em typically works well. For boxes and spacings and fonts that you won't want changed, rem is the most likely candidate.

(This content first appeared in Possibilities newsletter.)

When an image seems too cold or harsh, soak a bit of sepia into it for some warmth. Sepia is a yellow/brown color, with a hint of red.

I enjoy working with images. Which is a funny thing to say for someone who is colorblind, huh? I'm only certain-colors colorblind.

In this article, I'll show you how to use CSS to imbue the color sepia into images.

Use filter:sepia(0); for zero amount of sepia in the image and filter:sepia(1); for an image entirely in shades of sepia.

For an amount of sepia between the two extremes, specify a decimal number between 0 and 1 or a percentage between 0 and 100. filter:sepia(65%); imbues 65% sepia into the colors. As does filter:sepia(0.65);.

Demonstrations of filter:sepia() for 0, 0.65, and 1 values.

Here is the source code for the above demonstrations.

<img style="filter:sepia(0); max-width:100%;" src="https://www.willmaster.com/possibilities/images/poss20161027_Multicolorbeachball.png" style="filter:sepia(0); max-width:100%;" alt="beach ball">
<img style="filter:sepia(0.65); max-width:100%;" src="https://www.willmaster.com/possibilities/images/poss20161027_Multicolorbeachball.png" alt="beach ball">
<img style="filter:sepia(1); max-width:100%;" src="https://www.willmaster.com/possibilities/images/poss20161027_Multicolorbeachball.png" alt="beach ball">

To add a bit of warmth, test with various amounts of the filter:sepia() value. As you see with the demonstration values, it can make quite a bit of difference.

(This content first appeared in Possibilities newsletter.)

Occasionally it is important to allow only one tap on a web page element. A form submit button, for example, which this article describes how to do.

To prevent a second tap on something, what was tapped needs to disappear. It might just go poof, or it might get covered. This article describes how to make it go poof.

Here is an illustration. When you tap the button below, it disappears.

Reload the page to make the button appear again.

This is the source code of the above illustration.

<input 
   style="visibility:visible" 
   onclick="this.style.visibility='hidden'" 
   type="button" 
   value="Tap Me and I Go Poof">

The page is loaded with the button CSS being visibility:visible. When the button is tapped, this.style.visibility='hidden' turns visibility into hidden.

The reason to use property visibility instead of display is so the button can be removed without reflowing the entire web page. The button goes poof, but the space it occupied does not close up.

Now you know. :-)

(This content first appeared in Possibilities newsletter.)

When a mouse goes over an image, the image can change its brightness. When the mouse goes elsewhere, the image brightness can be restored.

The CSS is the filter:brightness() declaration. The img attributes are onmouseover and onmouseout.

Here is a demonstration.

Put the mouse pointer over the image to see it brighten. Send the pointer elsewhere to restore the brightness. If you are using a phone instead of a computer, you are unlikely to have a mouse.

Here is the code for the demonstration.

<img 
   onmouseover="this.style.filter='brightness(120%)'" 
   onmouseout="this.style.filter='brightness(100%)'" 
   src="https://willbontrager.com/coverimages/MessengerWill/CoverMessengerWill-200w.jpg" 
   style="max-width:100%;" 
   alt="Book cover, 'Messenger Will' by Will Bontrager">

The CSS brightness() function expects a percentage of brightness (no number means no change). 100% is the actual brightness of the image. Less than 100% is less bright. More than 100% is more bright.

The onmouseover value in the demonstration is brightness(120%). It makes the image slightly brighter. The onmouseout value is brightness(100%). It restores the image's natural brightness.

The filter:brightness() declaration is used to set the image's initial brightness when you want it different from its original luminosity. As an example, if you wanted to load an image a bit darker than its natural brightness, you would specify style="filter:brightness(70%);" declaration (or different percentage under 100%; 0%=black).

You're not restricted to images. The filter:brightness() declaration and the onmouseover and onmouseout attributes for changing brightness can be applied to divs, tables, and other HTML elements. This article's focus is images.

(This content first appeared in Possibilities newsletter.)