- 1. Create Attractive Web Typography with CSS3 and Lettering.js
- 2. Create 3D Text Using CSS3
- 3. 3D CSS Shadow Text Tutorial
- 4. Create True Inset Text Effect Using CSS3
- 5. CSS3 Poster with No Images
- 6. Use Text Shadow with CSS3
- 7. CSS3 Background-Clip: Text
- 8. Create Inset Typography with CSS3
- 9. I Heart Blur
- 10. CSS3 Text-Shadow – Can It Be Done in IE without JavaScript?
One of the spheres CSS3 has changed dramatically is web typography. Text styling and neat effects can now be achieved without using any JavaScript or images at all. This post presents 10 very useful CSS3 text effect and web typography tutorials that will take your designs to the next level. Enjoy!
Related Posts:
- Using jQuery to Test New Website Fonts
- 10 IE CSS3 and HTML5 Modern Browser Mimics
- 10 Magicial jQuery Text Effect Plugins
1. Create Attractive Web Typography with CSS3 and Lettering.js
Learn how to take basic markup and transform it into an attractive typographical design using only minimum images, pure CSS3 magic and we will spice things up with lettering.js – a jQuery plugin for radical web typography.
2. Create 3D Text Using CSS3
Learn how we create 3D text using CSS3 text-shadow to heading and paragraph tags.
3. 3D CSS Shadow Text Tutorial
This will show you step-by-step on how to create 3D font with multiple CSS shadows by stacking multiple CSS3 text shadow properties.
4. Create True Inset Text Effect Using CSS3
This inset text tutorial differs from others because besides default text-shadow it also uses inner shadow property.
5. CSS3 Poster with No Images
An experiment showing the power of CSS3 techniques. This one uses lovely bits like box-shadow, border-radius, @font-face, transform, box-sizing, text-shadow, RGBa. You can check out the code to discover these impressive features.
6. Use Text Shadow with CSS3
The text-shadow property is one of these awesome abilities. This article covers 5 great effects you can achieve using CSS3 text-shadow.
7. CSS3 Background-Clip: Text
Learn to apply CSS transition on a selectable text.
8. Create Inset Typography with CSS3
In this tutorial, you’ll learn to create inset type, a popular text treatment, using only CSS.
9. I Heart Blur
It isn’t exactly a tutorial, however you should check out the code used to create this stunning effect to learn how to add blur to text without using bunch of text-shadow properties.
10. CSS3 Text-Shadow – Can It Be Done in IE without JavaScript?
IE9 does support the majority of the CSS3 properties; however it doesn’t support image-border and text-shadow properties. This article will deal with text-shadow: how it works in browsers that support it, and strategies developers can use today to emulate some of its functionality in IE.
Sam DeeringSam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.
