Posts tagged “css”

Dark Mode is all the rage now. And with All Hallows’ Eve 2021 (aka Halloween) creeping up, it’s the best time to release a Dark Mode scheme for our website.

Read more »

Although there is no bulletproof way to stop people downloading images on your website I still get this request every now and again. If you really want to protect your images don’t upload them at all but if you must you can “protect” them by including a watermark in the center or uploading a low resolution copy. A popular, if somewhat notorious, method is to disable right-clicks on the website but I do not encourage this because it confounds what the user expects of the browser. It also does not prevent people from digging the image out from their browser cache.

But while I was in the shower this morning I had a silly, if naughty, idea to “protect” an image with nothing but HTML and CSS. Here’s the codepen:

Read more »

Sometimes all you need is a simple plugin to add custom CSS to WordPress websites. Heaven knows there’s no lack of them in the WordPress repository.

I prefer to keep all CSS in the theme’s folder but sometimes I need to add some custom CSS on-the-fly without having to go through the trouble of updating the actual theme code. Maybe the client has reported a visual anomaly or I spotted something off while browsing their website. Either way, it’s much easier to log into the WordPress admin and add the CSS code. Migrating it to the theme can be done at a properly scheduled time.

Read more »

I support the separation of presentation from structure.

I think it’s admirable we’re moving towards code reuse and modularity.

I’m all for using HTML tables for data and not for page layouts.

This is the perfect world I strive for in building websites. But we don’t live in a perfect world. We live in a messy world where clients want visible changes immediately and we’re working within parameters of time, money and energy that we have no control over.
Read more »

File this one under “Silly Workarounds that work”. This is an ever-so-slight variation of CSS-Trick’s method.

There was some text that needed to be placed over an image. The problem was that while the text-color was fixed, the image colour wasn’t so there was a chance that you could have poor contrast between the text and the image.

The quick CSS workaround I used was to use text-shadow to add an outline (or stroke) like so:

.text-to-outline {
  text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000;
}

Hey, don’t judge me because it works. Play around with the value of the blur radius (set to 2px in the example) and the number of text-shadows applied.

Designmodo has a quick overview of what to expect in Bootstrap 4. My initial thoughts:

  • Moving from Less to Sass. Crap, now I gotta learn Sass and set up my development environment to support it.
  • Grid System based on ems instead of pixels. Nice.
  • Dropped support for IE8. OK, whatever…
  • Dropped Glyphicons. Uh… please announce a replacement.
  • Optional Flexbox. Yesssssss…
  • Cards as a new component. Nice.

My biggest gripe is easily having to switch to Sass. Ah well, I’ll live.

They say “Don’t re-invent the wheel.” It’s pretty sound advice but you should probably know the different kinds of wheels you can choose from. And because it had been a while since I’d experimented with third-party libraries, I decided to mess around with Google’s Material Design Lite framework.

Read more »

Now that Google has released it’s Material Design Lite (MDL) Framework, how does it stack up against the incumbent behemoth that is Bootstrap? Tutorialzine has a quick run-down comparing the two including their grid systems, navigation bars and other components. The article includes live, side-by-side comparisons of various components.

This comes courtesy of Reddit which linked to an old Mozilla’s Bug-Tracker thread. 39 comments in total, not a very long read.

TL;DR Vendor-prefixed CSS Properties will eventually be removed. To future-proof your code, make sure to include the W3C standard property at the end of the declaration.

-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-ms-transition: all 600ms ease;
-o-transition: all 600ms ease;
transition: all 600ms ease;

I have to take my hat off to those who replied to the thread. They did it with such patience, courtesy and professionalism. Kudos to them.

CSS veterans probably know this already but it’s one of those minor things that tripped me up when I was learning CSS.

Read more »