Do you depend heavily on Photoshop for your design project's? Well, the new CSS3 properties now give developers a wonderful chance to enhance their designs in a way that’s quick and easy, yet visually impressive.
1. Create 3D Text With CSS3
Multiple text-shadow is used to create a 3D text. No extra HTML, only your CSS3 markup will give that fascinating look.
2. Pure CSS3 Text Gradients Effect
Currently, there is no sure resource that explain how to apply gradient to text itself, with a bit of trickery, we can force this effect - at least in webkit browsers.
3. Text Shadow Box
Move your cursor over your text box and see an amazing shadow with the spotlight. Luckily, it is compatible with popular browsers like Chrome, Safari and Firefox 3.5.
4. CSS3 Poster With No Images
This one uses lovely bits like box-shadow, border-radius, @font-face, transform, box-sizing, text-shadow, RGBa to produce an unbelievable output. You might find it hard to believe that the poster is created with CSS, just see the tutorial and clear your doubt.
5. CSS3 Tilt-shift Text
The author of the tutorial uses offset-y and blurred the radius from the top and bottom edges to create a lens blur effect specified with Tilt-Shift effect. Also, a rotation effect is used so as to blend the text with the background image.
6. CSS3 Background-Clip: Text
Learn how to apply CSS3 transition background clip to a selectable text.
7. How to Create Inset Typography With CSS3
Inset text effect is a popular and impressive text effect. It is created using CSS3 and works perfectly well most major browsers but not in old internet explorer.
8. Cool Anaglyphic Text Effect with CSS
Learn how to create a cool transparency overlay effect that closely resembles anaglyph stereoscopic 3D images.
9. Cool Text Effects Using CSS3 Text-Shadow
The Neon Lights text effect uses various layers of text-shadow to create a glow on the outside of the text. By varying the blur radius numerous times, you can create the illusion of neon text.
10. Blur Text With CSS3
Learn how to add blur to text without using bunch of text-shadow properties.
11. Glass Text Effect
The glass text effect or refractive index effect is achieved by using two background images on top of each other. The underlying one get’s scaled down a bit and the top one get’s cut-out by the text using -webkit-background-clip: text.
12. Create Beautiful CSS3 Typography
Create an attractive and beautiful typographical design through pure CSS3. There are no images or other external resources, just pure CSS magic.
13. Create Flashing Light With CSS3
Do experiment, and create flashlight effect across text. The only drawback is this works only in Safari. Again, text shadow is used along with the transparent text. Rotate-y transition with low perspective is used to create the hover effect.
14. Change Default Text Selection Colour
Change default text selection color to your favorite color. The good news is that, it is supported by almost all browsers. So feel free to have fun with it.
15. Stroked Text
In the tutorial you will learn how to add an outline, or stroke, to your text using the CSS3 text-stroke property. Though, the tutorial is a round up of 7 super sexy CSS recipe, which entails Letterpress, Small Caps, CSS Coupon, Stitched, Gloss, Stroked text and Double stroked text. Be sure to check it out,
16. Text Rotation With CSS
You don't have to stick to that boring horizontal text only. Transforming some part of your text vertically makes it make it more engaging. Thankfully, many of the popular browsers of today support the ability to rotate HTML elements.
17. Add Stroke to Web Text
Stroke or outlining web text with an impressive color to give it a cool look.
18. Letterpress Effect with CSS Text-Shadow
The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS. No Photoshop trickery here!
19. CSS3 Background-Clip & @Font-Face
Experiment with background-clip: text and @font-face via Typekit. Trent has explained it all in his article.
20. 3D CSS Shadow Text Tutorial
Create 3D font with multiple CSS shadows by stacking multiple CSS3 text shadow properties, then go a step further and use the CSS text transform and CSS transition properties to make the 3D text zoom on hover.
I believe we don't cover the whole CSS3 text effect tutorials within the web. We'll like to hear the one's we have missed and which one from the above list is your favorite?
*Please confirm the email sent to your inbox after clicking "Sign Up!".