Editing SVG Images in CSS

You might have noticed in my previous post about dark mode that there was a css rule to flip an SVG image from dark to light.

Inverting SVG Images With CSS Filter

See the Pen
Inverting images in CSS
by Joe Steinbring (@steinbring)
on CodePen.

There are a few other things that you can do, though. The same filter function can do blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, sepia and saturate. Let’s take a look at one other example.

Blurring SVG Images With CSS Filter

See the Pen
Blurring images in CSS
by Joe Steinbring (@steinbring)
on CodePen.

So, there are a few options available for you, out there. Have a questions? Feel free to drop a comment, below.

So, you want to enable dark mode on your website?

Starting with macOS Mojave, Windows 10 version 1903, and Android Pie, users can set a system-wide preference for dark mode or light more within apps.  The idea is supposed to be that you set a preference once and every application on the device then respects that preference.  So, how do you get your website to respect those system preferences?

Well, starting in recent versions of (chromium versions of) Edge, Firefox, Chrome, and Safari, you can use the prefers-color-scheme media query.

Since it is a media query (and uses a binary setting), you can default it in one direction or the other.

Light Mode by Default

See the Pen
How to implement light mode (by default) in CSS
by Joe Steinbring (@steinbring)
on CodePen.

Dark Mode by Default

See the Pen
How to implement dark mode (by default) in CSS
by Joe Steinbring (@steinbring)
on CodePen.

As you can see above, all you need to do is wrap a chunk of CSS in “@media screen and (prefers-color-scheme: light)” or “@media screen and (prefers-color-scheme: dark)”.

Have any questions?  Feel free to drop a comment, below.

Bulma Navigation: What the documentation is missing

Lately, I have been playing around with Bulma.  It is a CSS framework based on Flexbox.  It is similar to Bootstrap but it does not have a javascript component to it.  One of the first things that I wanted to figure out was the responsive horizontal nav bar.  Unfortunately, the example within the official Bulma …

Continue reading "Bulma Navigation: What the documentation is missing"

First attempt at a mobile app, using PhoneGap Build

For years, I have wanted to develop for Android but I haven’t gotten off my butt and done it.  I recently decided to force myself to explore development, using PhoneGap.  Today, I wrote a very basic proof of concept.  I have to admit that it was pretty easy.  I wrote the app using HTML, JS, and …

Continue reading "First attempt at a mobile app, using PhoneGap Build"