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