CSS3 Cookbook: 7 Super Easy CSS Recipes to Copy and Paste

by on 20th October 2010 with 72 Comments

By now you’ve probably seen enough lengthy CSS3 tutorials to last a lifetime. You’re probably starting to become familiar with what CSS3 has to offer and are ready to move past basic theory and see some practical design examples that you can copy and paste right into your code without without wading through tons of commentary.

Well you’re in luck because that’s exactly what we have for you today! Below you’ll find seven fun and attractive CSS tricks that you can grab and insert right into your own projects and customize at will. Keep in mind that since this stuff is still cutting edge, older browsers won’t support most of it. I’ve tried to ensure graceful degradation where possible so that you can provide a working experience to all users and a better experience to those with using webkit.

Letterpress

Insetting text is fairly simple in CSS. To accomplish it you’ll need three colors: one background color, a lighter shade of the background color and a darker shade of the background color.

To start off, fill your text with the darker shade of your background color. Then simply apply a CSS3 text shadow that’s a lighter shade and it has the effect of creating an embossed look.

screenshot

The HTML


 
    

pressed

The CSS

body {
	background: #222222;
	color: #131313;
	font-size: 200px;
}

#container p {
	text-align: center;
	text-transform: uppercase;
	text-shadow: #2c2c2c 3px 3px 5px;
	
}

Small Caps

The small caps effect is when all of the letters in a headline are capital, but the initial letters in each word are larger than the rest. It’s a nice and simple effect that you don’t often see on the web (not really CSS3 but still cool!).

One easy way to do this is simply to insert “small” tags into your HTML and then to style those tags with a slightly smaller font size than the rest of the headline. A few commenters informed me that there is in fact an easier way to accomplish this! Simply use “font-variant: small-caps;” and you’re good to go!

I also used the “uppercase” text-trasform just for fun. This will automatically take any lowercase text and transform it, making it easy to go back and change your HTML while keeping the same look, even if you don’t remember to type in all caps.

screenshot

The HTML


 
    

Small Caps

The CSS

body {
	background: #2c2b2b;
	color: #131313;
	font-size: 200px;
}

#container p {
	text-align: center;
	text-transform: uppercase;
	text-shadow: #363535 3px 3px 5px;
	font-variant: small-caps;
	
}

CSS Coupon

This one is helpful for those online retailers that want to offer promotions, sales, online coupons, etc. The typical border treatment that you see on most websites is just a solid line, but you can alternatively apple dashed or dotted lines to a border.

Combine this with some CSS3 rounded corners and a box-shadow and you’ve got yourself a nice little CSS coupon graphic!

screenshot

The HTML


 
    

$10 Off

The CSS

body {
	background: #21303b;
	color: #000;
	
}

h2 {
	font-size: 80px;
	line-height: 70px;
	font-family: Helvetica, sans-serif;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
}

#container {
	background-color: white;
	height: 200px;
	width: 400px;
	margin: 100px auto;
	border: 3px dashed #21303b;
	
	/*shadow*/
	-webkit-box-shadow: 10px 10px 10px #000;
	-moz-box-shadow: 10px 10px 10px #000;
	box-shadow: 10px 10px 10px #000;
	
	/*rounded corners*/
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

Stitched

While we’re on the subject of dashed border treatments, here’s an alternate trick you can use to give a box a subtle sewn-on illusion.

This time instead of a border we use an outline. An outline can be easily inset using a negative value on the outline-offset command.

screenshot

The HTML


 
    

Stitched

The CSS

body {
	background: #21303b;
	color: #fff;
}

h2 {
	font-size: 70px;
	line-height: 190px;
	font-family: Helvetica, sans-serif;
	font-weight: bold;
	text-align: center;
}

#container {
	/*stitching*/
	outline: 1px dashed #98abb9;
	outline-offset: -5px;
	
	background-color: #556068;
	height: 200px;
	width: 400px;
	margin: 100px auto;
	
	/*shadow*/
	-webkit-box-shadow: 2px 2px 2px #000;
	-moz-box-shadow: 2px 2px 2px #000;
	box-shadow: 2px 2px 2px #000;
}
	

Gloss

This popular and perhaps overused web 2.0 effect used to require at least one image to pull off. Now using CSS3 and a little background gradient know how you can recreate that shine using only code.

Complex CSS gradients can be hard to build so I recommend utilizing the Ultimate CSS Gradient Generator or something similar to help automate the process.

screenshot

The HTML


 
    

Gloss

The CSS

body {
	background: #21303b;
	color: #fff;
	
}

h2 {
	font-size: 120px;
	line-height: 190px;
	font-family: Helvetica, sans-serif;
	font-weight: bold;
	text-align: center;
	text-shadow: rgba(0, 0, 0, .3) 5px 5px 5px;
}

#container {
	
	/*gradient*/
	background: #666666; /* old browsers */
	background: -moz-linear-gradient(top, #666666 4%, #545454 50%, #3A3A3A 51%, #131313 100%); /* firefox */
	
	background: -webkit-gradient(linear, left top, left bottom, color-stop(4%,#666666), color-stop(50%,#545454), color-stop(51%,#3A3A3A), color-stop(100%,#131313)); /* webkit */
	
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#131313',GradientType=0 ); /* ie */
	
	/*box styles*/
	height: 200px;
	width: 400px;
	margin: 100px auto;
	
	/*shadow*/
	-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, .3);
	-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, .3);
	box-shadow: 5px 5px 5px rgba(0, 0, 0, .3);
	
	/*corners*/
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;	
}

Stroked Text & @font-face

In this example you get two tricks in one! You’ll see the syntax for adding text strokes in webkit plus that for adding custom fonts in all modern browsers using @font-face.

The font I used in the example below is called Jungle Fever and can be downloaded as an @font-face kit from Font Squirrel.

screenshot

The HTML


 
    

Jurassic

The CSS

/*Fonts*/
@font-face {
	font-family: 'JungleFeverRegular';
	src: url('JungleFever-webfont.eot');
	src: local('☺'), url('JungleFever-webfont.woff') format('woff'), url('JungleFever-webfont.ttf') format('truetype'), url('JungleFever-webfont.svg#webfontBlD2f3Gz') format('svg');
	font-weight: normal;
	font-style: normal;
}

body {
	background: #222;
	color: #111;
	
}

h2 {
	font-size: 150px;
	line-height: 200px;
	font-family: 'JungleFeverRegular', Helvetica, sans-serif;
	font-weight: bold;
	text-align: center;
	text-shadow: rgba(0, 0, 0, .2) 3px 3px 3px;
	
	/*text stroke*/
	-webkit-text-stroke: 2px #fff473;
}

Double Stroked Text

I discovered this tip completely by accident while building some stroked text for the previous example. It turns out if you use RGBa on stroked text and bring down the opacity a bit, you can achieve an awesome double stroke! I’m not entirely sure why it works (something to do with the bleed of the stroke?) but it does!

screenshot

The HTML


 
    

Lobster

The CSS

/*Fonts*/
@font-face {
	font-family: 'Lobster13Regular';
	src: url('Lobster_1.3-webfont.eot');
	src: local('☺'), url('Lobster_1.3-webfont.woff') format('woff'), url('Lobster_1.3-webfont.ttf') format('truetype'), url('Lobster_1.3-webfont.svg#webfontcOtP3oQb') format('svg');
	font-weight: normal;
	font-style: normal;
}

body {
	background: #731e1e;
	color: #fff;
	
}

h2 {
	font-size: 220px;
	line-height: 220px;
	font-family: 'Lobster13Regular', Helvetica, sans-serif;
	font-weight: bold;
	text-align: center;
	text-shadow: rgba(0, 0, 0, .2) 3px 3px 3px;
	
	/*text stroke*/
	-webkit-text-stroke: 4px rgba(0, 0, 0, .6);
}

Conclusion

As I said in the opening statements, feel free to copy and use the examples above however you wish. Leave a comment below if you have any ideas for improving any of these tricks, whether it’s making them look cooler or more cross-browser friendly. They’re far from perfect and I want to see you make them better!

Comments & Discussion

72 Comments

Comments & Discussion

72 Comments

  1. Elena says:

    These are simply fabulous. I love how straightforward everything is to learn CSS3. Thank you for a great article.

  2. Everton says:

    Nice tricks, but for Small caps you dont need extra marckup. Only add font-variant: small-caps in your css.

  3. @Everton, thanks! I obviously didn’t know about that!

  4. Ben Dunkle says:

    Thanks for the great list. I got a little worried about the small caps stuff; type snobs will be quick to chide you for that one…small caps are designed that way, not shrunken caps…

  5. Alexander Stepanets says:

    Simple and very usefull! :)

    Thank you, Everton!

  6. Medden says:

    Very good examples. Love the glossy button!

  7. Giacomo says:

    Nice and useful article.. thanks!!!

  8. helium says:

    Never really played around with the @font-face, will give it a go at some point.

  9. tom says:

    PLEASE DO NOT USE THE EXAMPLE FOR THE SO-CALLED-SMALL-CAPS.

  10. Ryan says:

    Other than the small-caps issue, this is a great article with some handy go-to styling options!

  11. ptamaro says:

    These are some tasty little nuggets, thanks for servin’ em up…

  12. Tony Barnes says:

    Very nice! Thank you.

  13. Fernando Lee says:

    Love “CSS Recipes to Copy and Paste” nice work thank you for sharing!

  14. Cai says:

    Sorry but have to second on NOT using the small-caps! Good list though. Thought text-stroke was pretty cool, Never thought of using text-shadow for double stroke though

  15. sanji says:

    nice post! i’m not sure ’bout the small caps, but the stitch and stroke was cool. never thought about tho..thanks!

  16. monica a. says:

    thank you! I really liked the double stroked text effect, I’ve trying to achieve that! yay for css3!

  17. Rizky Syazuli says:

    text-stroke doesn’t really work well on smaller size fonts. coz the strokes are placed inside the fonts, not outside.. it could get ugly if u don’t give it the right settings..

  18. Junaid mir says:

    These are the best and very use full tutorial . I have some problem with the stitched its text That is sticthed is showing at the bottom of the div why? i dont understand can any one help me on that plz

  19. Emiliano says:

    Nice post! Thank you

  20. Thanks! I like the stitched effect :)

  21. F925 says:

    gonna use these today! thanks

  22. Graham says:

    Thanks for the tasty recipes ;)
    These tips will certainly come in handy.

  23. Shauna says:

    The letterpress can more efficiently be done using rgba, and makes it so you don’t have to try to find a third color. You simply put in something like:

    text-shadow: 3px 3px 5px rgba(255,255,255, .2);

    This gives you a text shadow that’s lighter than the background, giving you the effect that you want, but also gives you more flexibility if you want to change the background color, since you only need to change the background color (until you get to a certain lightness, of course, in which case, you invert the color code to black, instead of white, to maintain a text-shadow).

  24. Spencer says:

    Double stroked text looks great, very nice!

  25. Nice group of effects. I love the stitching. :)

    If I could make one suggestion (for fallback)—on the stroked text & @font-face recipe? When creating text effects that will have little contrast from their backgrounds—like the #111 text on the #000 background—it’s best to use the “sister property” for -webkit-text-stroke called -webkit-text-fill-color to add the low-contrast color.

    So you’d basically be setting a contrasting color for all browsers, then for -webkit-s that can render the text-stroke, you place the #111 using the text-fill-color property. Since it’s hard to explain in a comment, I put a little demo up here: http://w3conversions.com/sandbox/webkit/fill-color.html View it in Safari and then in FFOX (or IE) to see the difference.

    Happy coding. :)

  26. saleem says:

    really great job…..

  27. Rosani says:

    Thank you for the post, really inspiring!

  28. dlare says:

    i should have seen these earlier. i shouldn’t have wasted a lot of time in slicing images

    thanks a lot for sharing!

  29. naga says:

    Very Good Examples.

  30. Majalah says:

    Nice CSS3 recipe list. Added to my bookmark to save my work time for my next project. thanks

  31. Anirudh says:

    Very nice articles.Specially the gloss effect is really awsum.

  32. Onur says:

    That great! Thanks!

  33. iTechColumn says:

    Interesting stuff buddy :) Thanks for the share..:)

  34. bryan kimani says:

    I love this examnples.Kenyans will love this!!

Leave a Comment

Subscribe
Membership
About the Author