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;
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:
- x-value (horizontal position)
- y-value (vertical position)
- blur
- spread
- 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.
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!
WordPress
WordPress is awesome. It’s a Content Management System (CMS) that allows people who don’t know code to edit their own websites. What a lifesaver!
Of course, there’s a downside as well. WordPress (like most CMS’) uses a templating system. A WordPress website is pulled together from a number of different places: it includes a separate header file, footer file, content information, image storage, and so on. It’s a great system, but it’s not the most flexible. I spent years learning how to hack my way through a WordPress template, customizing its look and feel.
Finally, I learned how to make my own WordPress templates. That really changed things! Instead of choosing a pre-defined template and living with its shortcomings, I can create my own WordPress designs from scratch, or from your graphic designer’s Photoshop files. I’m pleased to be able to offer 100% custom WordPress websites.
You can have your cake and eat it too: you can have exactly the design you want, plus the flexibility of managing your own website’s content. Let’s talk about it! I also create templates for Adobe Business Catalyst, if you’d prefer.
Of course, if you’d rather not manage your own website, I do that as well.
