• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar
  • Skip to footer
  • Home
  • About
  • Privacy Policy
  • Contact
bfwr logo

Free Web Resources

For Smart Internet Users

  • Facebook
  • RSS
  • Twitter
  • Technology
  • Inspiration
  • Photography
  • Business
  • Games
  • More
    • SEO
    • Tutorial
      • Coding
      • WordPress
    • Resume/CV
    • Graphics
      • Logo
    • Wallpapers
    • Freebies

10 Cool And Fresh CSS3 Text Effects Tutorials

January 10, 2012 by Rupesh Kumar

CSS3 new possibilities have brought revolution in web development. The CSS3 properties have given web developers a great opportunity to enhance their design in a quick and easy way. Today , We are featuring today, 10 Cool And Fresh CSS3 Text Effects Tutorials that will surely enhance your CSS skills.

How To Create a Stylish Drop Cap Effect with CSS3

The design we’ll be creating features a large drop cap at the start of a block of text.

Text Effects using CSS3

This post is explains how to create Photoshop style 3D text effects using CSS3 text-shadow and @font-face property

Item Blur Effect with CSS3 and jQuery

We’ll be using CSS3 transitions and some jQuery to apply the respective classes. Since CSS3 transitions are not supported in order browsers, the demo should be best viewed in Safari or Chrome (here we got the smoothest transitions).

Create Attractive Web Typography with CSS3 and Lettering.js

In this tutorial, we’ll look at 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. To make things a bit interesting and less boring, instead of just using meaningless placeholder text I will use text from Jules Verne’s “Moon-Voyage” book, chapter X. The Observers of the Moon. So, let’s get started.

Create 3D Text Using CSS3

Learn how we create 3D text using CSS3 text-shadow to heading and paragraph tags.

3D CSS Shadow Text Tutorial

This easy CSS text shadow tutorial will show you step by step how to 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 pop out / zoom on hover!

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.

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.

Flash Light

This is a great effect but the only downer is that it works only in Safari. Text shadow is used with the transparent text. The hover effect is achieved by using the rotate transition with low perspective.

CSS3 Tilt-shift Text

This tutorial teaches you how to create a Tilt-Shift text effect. The radius has been somewhat blurred from top and bottom and the Tilt-Shift effect has been applied

Filed Under: Coding, Tutorial Tagged With: Coding, css3, Tutorials

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Search

Trending

  • Best Barbie Font for your next project
    Best Barbie Font for your next project
  • 7 Best Video Chat Websites
    7 Best Video Chat Websites
  • 10 Best Photoshop Sports Templates
    10 Best Photoshop Sports Templates
  • Free online services to create and convert PDF documents
    Free online services to create and convert PDF documents
  • 30 Breathtaking Examples Of Makkah Photography
    30 Breathtaking Examples Of Makkah Photography
  • 30 Impressive Healthcare Print Ads
    30 Impressive Healthcare Print Ads
  • 30 Funny Examples Of Fat Animals
    30 Funny Examples Of Fat Animals
  • 10 Best Nursing Resume Templates
    10 Best Nursing Resume Templates
  • 7 Common Snafus To Avoid While Develop New E-commerce Store
    7 Common Snafus To Avoid While Develop New E-commerce Store
  • The True Cost of Workplace Accidents: 4 Ways They Impact Business
    The True Cost of Workplace Accidents: 4 Ways They Impact Business

Footer

EMAIL NEWSLETTER

Get the latest in your Inbox for free.

Recent

  • 4 Tips for Buying Accessible Gaming Equipment
  • What are Google Workspace Restrictions?
  • Types of Hot Tubs Popular in Grand Rapids
  • The True Cost of Workplace Accidents: 4 Ways They Impact Business
  • The Best SEO Practices For 2023: 7 Tips To Help You Improve Your Google Rankings

Copyright © 2023 · Free Web Resources