1.box-shadow we have the ubiquitous box-shadow, which allows you to immediately apply depth to your elements. Just don't be too obnoxious with the values you set!
box-shadow: 1px 1px 3px #292929; box-shadow accepts four parameters:
x offset y offset blur
color of shadow Now, what many don't realize is that you can apply multiple box-shadows at a time. This can lead to some really interesting effects. For example, we can use a blue and green shadow to magnify each shadow.
box-shadow: 1px 1px 3px green, -1px -1px 3px blue;
Clever Shadows
By applying shadows to the ::before and ::after pseudo-classes, we can create some really interesting perspectives. Here's one to get you started: https://codepen.io/RamuStar/pen/PojzLQW
2.text-shadow Similarly to box-shadow, it must be applied to text, and it receives the same four parameters:
x-offset y-offset blur
color of shadow
h1 { text-shadow: 0 1px 0 white; color: #292929; }
Text Outlines
Again, much like its sibling, box-shadow, we can apply multiple shadows, by using a comma as the separator. For example, let's say that we want to create an outline effect for the text. While webkit does offer a stroke effect, we can reach more browsers by using the following method (though not quite as pretty):
body { background: white; }
h1 { text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black; color: white; }
codepen.io/RamuStar/pen/PojzLQW
3.text-stroke
Be careful with this method. It is a non-standard feature. The text-stroke property isn't yet part of the CSS3 spec. However, it is now supported by all major browsers if you use the -webkit- prefix.
h1 { -webkit-text-stroke: 3px black; color: white; }
https://codepen.io/RamuStar/pen/LYLZaJY
4.Multiple Backgrounds
The background property has been overhauled to allow for multiple backgrounds in CSS3.
Let's create a silly example, simply as a proof of concept. For lack of any suitable images nearby, I'll use two tutorial images as our backgrounds. Of course, in a real-world application, you might use a texture and, perhaps, a gradient for your backgrounds.
.box { background: url(image/path.jpg) 0 0 no-repeat, url(image2/path.jpg) 100% 0 no-repeat; }
here comma as the separator, we're referencing two separate background images. Notice how, in the first case, it's placed in the top left position (0 0), and, in the second, the top right position (100% 0).
Make sure that you provide a fallback for the browsers which don't provide support for multiple backgrounds. They'll skip over the property entirely, leaving your background blank.
Compensating for Older Browsers
To add a single background image for older browsers, like IE7, declare the background property twice: first for old browsers, and the second as an override. Alternatively, you could, again, use Modernizr.
.box { / fallback / background: url(image/path.jpg) no-repeat;
/ modern browsers / background: url(image/path.jpg) 0 0 no-repeat, url(image2/path.jpg) 100% 0 no-repeat; }
5.background-size
background: url(path/to/image.jpg) no-repeat; background-size: 100% 100%;
That's all there is to it. The background-size property will accept two parameters: the x and y widths, respectively.
While the latest versions of Chrome and Safari support background-size natively, we still need to use vendor-prefixes for older browsers.