• Skip to main content
  • Skip to primary sidebar
  • Home
  • Technology
  • Inspiration
  • Photography
  • Business
  • Games
  • More
    • SEO
    • Tutorial
      • Coding
      • WordPress
    • Resume/CV
    • Graphics
      • Logo
    • Wallpapers
    • Freebies

Free Web Resources

For Smart Internet Users, Designers and Developers

10 Cool And Fresh CSS3 Text Effects Tutorials

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

What to read next?

  • 30 Amazing CSS3 Tutorials To Improve Your Skills
  • Free Ebooks for Designers and Developers
  • How to Create an Awesome WordPress Responsive Menu for Your Theme
  • How to Create Custom WordPress Widget to be Used on Your Set Up?
  • The 5 Best CSS Frameworks for Web Designers
  • Best CPU Temperature Monitor Applications for Windows

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

  • 7 Best Video Chat Websites
    7 Best Video Chat Websites
  • Best VPN for China
    Best VPN for China
  • There’s A New Runner in Town: Run 5 Unblocked
    There’s A New Runner in Town: Run 5 Unblocked
  • 15 Wonderful Magical Pictures for Creative People, and Children
    15 Wonderful Magical Pictures for Creative People, and Children
  • Best Barbie Font for your next project
    Best Barbie Font for your next project
  • 40 Eye-Catching Examples Of Character Illustrations
    40 Eye-Catching Examples Of Character Illustrations
  • 30 Examples Of Shadow Photography Taken at Perfect Time
    30 Examples Of Shadow Photography Taken at Perfect Time
  • 40 Creative Sport Print Ads - Inspired
    40 Creative Sport Print Ads - Inspired
  • 10 Best Photoshop Sports Templates
    10 Best Photoshop Sports Templates
  • 10 Best Nursing Resume Templates
    10 Best Nursing Resume Templates

Pages

  • About
  • Privacy Policy
  • Contact
  • Facebook
  • RSS
  • Twitter

EMAIL NEWSLETTER

Get the latest in your Inbox for free.

Copyright © 2023 · Free Web Resources