Sliders, filters, transforms, and better support for CSS units

This image shows a comparison between new interactions and new CSS properties, which can be controlled by a mouse and keyboard.

The latest release of Microthemer includes two new sets of CSS properties: transforms and filters. And makes it easier to fine tune these properties, along with all other numeric fields (e.g. font-size, padding, grid columns). 

Sliders, filters, transforms, and better support for CSS units

We’ve added 4 new ways to fine tune values, including:

1. Limitless sliders

Sliders are great for quickly previewing how a range of values affect the appearance of an element. But one notable downside, when it comes to CSS properties, is that they require a minimum and maximum cutoff point. But not with Microthemer! We’ve come up with a tape measure style slider that can be dragged to either side of the screen. And if that still isn’t enough room, you can go back and drag it some more. 

The default tape-measure design requires dragging left to increase values and right to decrease (due to the way the numbers in the tape measure move). But we’ve added an option in the Preferences where you can reverse this. Set the “Enable tape measure style sliders” option to “No”. You will lose the numbers, but may find dragging right to increase values more intuitive. Please let us know if you settle on the numberless slider, as we may make it the default system.

2. Mousewheel interactions

You can now hover over a CSS property and scroll the mouse wheel up or down to increase or decrease values. And if you hold down the shift key, Microthemer will increase the size of the increments. 

3. Plus and minus buttons

The plus and minus buttons to the left of the slider are great for tiny adjustments. They can also be used as an alternative to the slider if you press and hold when clicking them. Use the shift key to bump up the speed.

4. Up and down keyboard arrows

If you prefer the keyboard, the new up/down arrow controls should come in handy. Gently tap for small increments, or press and hold for bigger adjustments (with or without shift). 

Better CSS unit control

Previously, it was necessary to manually enter non-pixel CSS units e.g. (rem, %, or vh). Now, the unit is stored separately from the numeric value. It is shown above the property field, and can be changed by typing the unit into the field (where it will be stripped after updating), or via the dropdown menu. When changing the unit via the dropdown menu, Microthemer will auto-convert the current value, so the size remains the same with the new unit. Furthermore, the default suggested values auto-convert to the new unit. 

The default unit for all length properties is still pixels (apart from line-height, as it’s useful to define line-height in unitless terms e.g. 1.5 for 1.5 times the current font-size) . However, Microthemer will remember any custom units you set for a given property. And you can still set the unit for all length properties in one go via Preferences > Units.

Transform properties

Microthemer has complete support for CSS transform functions like scale, rotate, translate and skew. Some nice effects can be achieved when combining transforms with the transition property.

Filter functions

CSS filter functions are useful for adjusting the color composition of images. You can adjust brightness, contrast, saturation, and hue for instance. The blur function is also useful for making foreground text more readable against a background image. Or for hover effects.

Try the online demo

Launch demo

Get Microthemer

View price plans

  • Keep in touch…

    Don't miss out on tutorials, special offers, and discounts we share with our subscribers!

  • Follow us on:

  • Refer friends for benefits

    We know that lots of you have been happily recommending Microthemer to your friends. This really helps us out. And to say thanks, we'd like to start giving you some commission for sending customers our way. Find out more.