Posts tagged “css”

If it happens once it’s a novelty. Twice, it’s a coincidence. Three, times it’s a habit. So if it happens four times would that make it an addiction? 🤔 From Parallax to scrolling colour changes to zooming in on image I had another idea to play around with sticky positioning and slides. As has been the case with all my experiments so far, it was surprisingly easier than expected with modern CSS.

Yet another set of experiments where I use modern CSS and JavaScript to re-create something that used to be difficult to do. This time it’s that “Zoom an image on hover” effect that’s common on e-commerce websites and photography portfolios. Like the other experiments I’ve done so far (see here and here), this was also surprisingly easy to accomplish — the hardest part was *GASP* math.

So I’ve been playing around with CSS and scrolling lately and this latest demo popped into my mind while driving home. I remember seeing this effect where some text remained stationary in the viewport but changed colour as the user scrolled. I always assumed it required some Javascript wizardry but could it be done with CSS only?

In a word, ”yes”.

Using parallax in web design isn’t new; you can easily find plugins, third-party libraries and no shortage of examples on the interwebz. I was searching for a pure CSS solution only to recall it had already been done with background-attachment and that I used this technique on a client project a few years ago! Silly forgetful me…

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.

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:

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.

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.