Create Text with Background Images and Colors

CSS

Cascading Style Sheets (CSS) has done much to bring special effects to the web that were previously only available by using an image editing program like Photoshop. One such effect is creating text that looks like it’s cut out of an image.

Here are two examples. The first uses a background image, the second uses a gradient of two colors.

Creating Text with a Background Image:

create text with a background image

Background
Image

How is this done?

In our stylesheet, we add the following style to the text:

background-image: url(image.jpg);
background-clip: text;
color: transparent;

Creating Text with a Background Gradient:

Background
Gradient

How is this done?

In our stylesheet, we add the following style to the text

background-image: linear-gradient(135deg, blue, red);
background-clip: text;
color: transparent;

Things to Know

  1. This effect works best on fonts with thicker strokes.
  2. Use color: transparent; to keep the default text color from covering up the background.
  3. Use background-size: contain; to make the backgrounds fit inside the text block. When using gradients, wrap the text in a <span>.

Good Code Equals Web Success

Code

Or, “Never put salt on your Wheaties.”

Once, when we were kids, my brother emptied the sugar bowl and filled it with salt. When I sat down to eat my regular breakfast of sugar with Wheaties, I ignorantly piled on spoon after spoon of the crystallized white stuff. You can probably imagine my reaction, about two seconds after putting the first bite in my mouth. What looked so good certainly tasted very bad! I’ve since forgiven my big brother, but I haven’t forgotten the taste.

Looks can be deceiving. Salt and sugar look enough alike to fool a teenager. The same is true for websites. What looks good at first glance may actually be very bad.

Broadband + 4G = a false Sense of security

It’s easy to assume that a good-looking website is also a good-performing website. We’re driven by visuals, and most of us know nothing about the code that makes a website.

What makes a good website?

That’s a good question. The answer depends on the goals of the website’s owner. If the goal is to have a kooky, quirky website with an experimental design, then having a kooky, and quirky website means success. That’s not the most common goal for having a website, though. Most often, those needing a website have goals related to the goals of their organization: to sell products, to explain how they might benefit their customers, or to simply spread their message to the public.

When getting stuck in traffic is good

Whether it’s selling products or ideas, one of the primary goals for most websites is for people – more people, obviously – to come and see. Unless you have a giant advertising budget like McDonald’s or Ford or the never-ending stream of new prescription drugs, it’s up to you to figure out how to bring the masses in. That’s where good code comes in.

Search engines are very complex. There’s a lot we don’t know about how each one works, but there’s plenty we do know. One of the key factors in internet search success is each website’s code to content ratio. To simplify the process, let’s do a little quick math. Imagine two competing websites, each with the same 1,000 words of content on their home page. Imagine that they look exactly alike as well. Now imagine that Website A was written by a competent web professional, and Website B was written by an amateur. Which will rank higher in an internet search? The one with the better code-to-content ratio.

Change the WordPress 30-Second Timeout

WordPress

The WordPress import plugins are very helpful. Unfortunately, some clients have a LOT of blog posts to import, and the WP importer chokes on them. When that happens, you’ll often get this error:

Fatal error: Maximum execution time of 30 seconds exceeded…

Edit your wp-config.php file (in the top-level directory of your WordPress website). Right above the line that says That’s all, stop editing!, paste the following:

set_time_limit(60);

Images vs Base64 – Test for yourself!

Code

UPDATE: testing has revealed that data URIs are six times slower on mobile devices than simple images. Be aware that every situation may be different, and that you should make decisions based on YOUR website and YOUR clientele.

I spent some time this morning reading a good article about speeding up web pages by looking at their critical render path. It’s a good article, and I recommend it. It outlines a smart look at how web pages work.

One of the improvements that the author suggests is to remove your header image (for example, the logo at the top of your page). You would then encode the image as base64, reducing the time it takes to download. Sounds great, right? Not so fast!

Before you implement any changes to your own website, you must ask yourself an important question: does this apply to me? Suggestions like this one should be taken on a case-by-case basis. For example: the header on my personal blog weighs in at 94kb. That seems pretty big to me, but I haven’t optimized it. Here’s what it looks like:

godwords-header

When you convert that image to base64 (using an encoder like this one), it will look something like this:

<img src="data:image/png;base64,/9j/7gAhQWRvYmUAZMAAAAABAwAQAwMGCQAAV8AAAPtjAAF35//bAIQAAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQICAgICAgICAgICAwMDAwMDAwMDAwEBAQEBAQECAQECAgIBAgIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMD/8IAEQgA4gPBAwERAAIRAQMRAf/EAXIAAAICAQUBAQAAAAAAAAAAAAQFAwYCAAEHCQoICwEBAAEDBQEAAAAAAAAAAAAAAAEHCAkCAwQFBgoQAAEDAwMDAAYIBQMEAwEAAAIAAQMEBQYRBwgSExQQFRYXNwlgITEiMjU2ODAjMxgZIEBBQiQ0OVCQQygRAAEBBQMGCQMLDA0HCQYHAQECABEDBAUhEgYxUWFxIgdBgZGhscHRMhNCgiPw4VJicjMUFRbWCBDxktJDlTZ2hrY3d6KywoM0RLS11ZbGF7cgcyR1haY44lNj04SU1DUmMJPEJUVXQPJkVWUnlygSAAECAwQADwYQCgYJAQkAAAECAwARBCExEgUQQVFhcbEiktITM6PTNAaBkTKzFHUgYKHB0UJScrIjc3S0FTUHMGKCg5OElLU2dkDwwlMkFlDhokPDpMTUJZDx8mNUVYWVJggTAQACAgEDAwQCAwEBAQAAAAERIQAxQVFhcYGRoRDwsdHB8SBg4TBAUP/aAAwDAQACEQMRAAAA+7vR7KTdgQlLIcljUYkxbS8j0wChkOS6B5otwSRmAqIRkDkACAmAKCmI4MByJywEQxBREYgYWDhIjNhIXIfkIeMxoSDQwDRMRgoODARAICIAIg0WjURg4tJgcXkxEAiwronBA0XEgvFpor4vFxGRkZMSCoENCQCGZkFkgEIhYJzIkBgIUH3EcC7Uw7sXYMLsWMLJwYtY4HAQMxsNB4WQPCAonEQeRhRibEZWStFYGxmOjE..." />

…except that it goes on and on and on and on. Encoding an image into base64 means turning all of the visible bits into code bits. The idea is that you’ll reduce the amount of data your visitors will have to download. The problem? Encoding my own header image makes it larger! My header went from 94kb to around 120kb. That’s a 20% increase.

The lesson here is to avoid knee-jerk reactions about technical things. A lot of people might read this article and figure they should encode ALL of their images…but that could turn out to be bad instead of good. Test everything for yourself, on your own website. That’s the only way to know what will work best for you!