Tinted Photos with CSS

Code
CSS

For most web designers, posting an image is a one-step process: you post an image, as-is. Because a lot of designers are very, very clever, it’s becoming clear that we can do much more. Here’s an image:

We display this with the following CSS:

background: url(https://straightstreetdesign.com/images/fish-tint.jpg) no-repeat 0 0;

How can we add some color to the photo using CSS? We typically add color to an element using background-color. Unfortunately, that won’t work here. While we can use multiple backgrounds in CSS3, we can’t use background-color that way.

Fortunately, we can use background gradients! If we code a semi-transparent gradient with only one color, it will tint our photo, like this:

background: linear-gradient(rgba(236, 254, 79, 0.3), rgba(236, 254, 79, 0.3)), url(http://straightstreetdesign.com/images/fish-tint.jpg) no-repeat 0 0;

CSS3 Box-Shadow on One Side

CSS

I’m working on a fresh design, and need a shadow…but only on one side of an element. Typically, box-shadows show up on two sides, like this:

I don’t want a two-sided shadow. I want the shadow on one side! How about this?

Not quite. Some of the shadow shows around the element.

Like magic, huh? The key is to use a negative value for the spread. The spread is the least-known part of box-shadow. There are 5 values involved in box-shadow:

  1. x-value (horizontal position)
  2. y-value (vertical position)
  3. blur
  4. spread
  5. color

It’s written like this:

box-shadow: 5px 0 2px -3px #000;

The 5px means ‘move the shadow from directly beneath the box, 5 pixels to the right. A negative value would move it left.

The 0 means ‘do not move the shadow up or down’.

The 2px means ‘blur the shadow 2 pixels in all directions’.

The -3px means ‘contract the the shadow by 3 pixels in all directions. A positive value would, of course, ‘spread out’ the shadow.

So, using a mixture of positive and negative values, we can create a shadow on any or all sides of an element. Because we can use multiple shadows on a single element, we can get as crazy as we want.

CSS Icons?

CSS

Most people who have any interest in websites know what CSS is…or at least what it does. It’s a language by which designers “style” the content of a web page. For example, this text is blue. I used the language of CSS to do that.

What fewer people know is that CSS is fast becoming a very powerful system by which designers do more than change text colors and add borders to stuff. Today, using some recent advances, designers can display complex shapes without using images.

At UI PlayGround, they’ve spent some time compiling a collection of icons that are created solely using CSS. Here’s an example:

Pretty neat, huh? There are over 200 CSS icons in their collection…go check ’em out!

Remove WordPress Multisite

WordPress

There’s a lot of information online about how to set up a multi-site WordPress installation. I had a little trouble finding specific answers about how to UNDO one. I recently set up a WP website, expecting to need a multi-site process later. Turns out I won’t need that, so I wanted to go back to a single-site installation. Reverting didn’t seem very straightforward.

Here’s what I did:

I opened my config file (config.php, in the main installation folder). Near the bottom, I found these 2 lines:

define('WP_ALLOW_MULTISITE', true);
define('MULTISITE', true);

I changed “true” to “false” and reuploaded the edited file. Next, I logged into my Control Panel and edited the database directly. Simply put, I went to the Users table and dropped two fields: “spam” and “deleted”. That’s it! My WordPress website was no longer a multi-site installation, but a normal old single website. Voila! I hope this helps.