css text effects for html5 templates

Collection of 10 Free CSS Text Effects

CSS is a wonderful thing, enabling us to create stylish and modern websites

With CSS3 the possibilities are truly endless, you’re only limited but the creativeness of your person so to speak.
What makes CSS3 even better is its supports by almost all major web browsers.
One major game changer when it comes to CSS and how its had an noticeable impact is most defiantly typography, gone are the days of reliance on JS to achieve cool textual effects; now all we need is CSS3.

Having text is fine, however sometimes that just not enough, especially when you can make the text look amazing.
Thanks to custom style-sheets and some very creative people we can make our dull text and titles look the ‘bees knees’.

Below I have gathered 10 excellent free text effects that you can use for your textual content with the implementation of some CSS3.
Whether you are a designer or a developer, I am sure you’ll benefit greatly from the collection

Real Letterpress

This snippet shows you an awesome effect made with css text-shadow.


1

Selection of Text Effects

In this section, you’ll see a nifty collection of CSS text effects.


2

Half style

The user here has created a really cool half-half text color effect.


3

Animated Color swap

With this animated effect that swaps the text color, the possibilities are endless.


4

Terminal Effect

This effect is reall nice, its a sort of effect your get when typing at a terminal.


5

Transmission Effect

A throwback to a classic effect found in old terminal/transmission machines, the effect’s not unlike the way a transmission ‘transmits’ and displays output.


6

Isometric Effect

If you want something pretty outside the box, then this really nifty isometric effect for text could do the trick.


7

3D Effect with ambient light

A very nice stylized, css effect makes the text look 3d while using ambient light


8

Minimal Countdown

A animated countdown effect with color change.


9

Focus Effect

An animated effect that blurs over the text.


10

Bonus: How to created a textured text effect using css3 and background-clip

Do you remember using Photoshop back in the day to achieve this background-clip effect inside your text and they upload it as an image to websites? of course you do!
“So whats your point” I hear you say, well… instead of doing this via photoshop, we can actually achieve all of this in, yeah you guess it CSS3, usign the background-clip property which is supported by wekbit.

In addition, or alternatively i should say, you can also use the mask-image css property which will accomplish the exact same result, however this method will clip the visible portion of an element according to the transparency of the masked images.

Below you’ll learn how to apply theis effect to text using css3 and html5.

Resources For This CSS Text Effect Tutorial

– Any background image
– Any textured images (PNG file)
– Lato (Google Font)
– Pacifico (Google Font)
– Oswald (Google Font)

What we are aiming to achieve

css

Use the webkit background-clip to text
At the initial part of this tutorial, We are going to want to use the webkit background-clip property to apply a really awesome lion and jungle text effect using the H1 tag.

The HTML

So for this markup, first we wrap our H1 tag with clipped-title1 and clipped-title2 with our second H1 tag.

<div id="clipped-title1">
<h1>THE LION</h1>
</div>

<div id=”clipped-title2″>
<h1>King of the Jungle</h1>
</div>

The CSS

Ok so for thsi part of our CSS, we are going to want to use the baackground-cip property to clip the image to the text.
By default, the background will be extended to the edge of the border.

On the CSS below, you cna see that different backgroudn images are used. The first image used in the cool lion background image, whereas the second is the jungle image.
You’ll also notice that the wekbit-text-fill-color was set to transparent to make sure that the image color will be the one to display on the text.

#clipped-title1 {
background: url(../images/lion.jpg) no-repeat center center;
background-size: cover;
color: #fff;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}


#clipped-title2 {
background: url(../images/jungle.jpg)no-repeat top center;
background-size: cover;
color: #fff;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
cursor: pointer;
}


#clipped-title1 h1 {
font-size: 200px;
font-family: Anton, sans-serif;
text-align: center;
-webkit-transition: text-shadow 1s ease;
text-shadow: 0 0 1px rgba(0,0,0,.1);
margin: 0;
padding: 0;
}


#clipped-title2 h1 {
font-size: 110px;
font-family: Pacifico, sans-serif;
text-align: center;
-webkit-transition: text-shadow 1s ease;
text-shadow: 0 0 1px rgba(0,0,0,.1);
margin-top: -75px;
padding: 0;
}


Using Webkit Mask-Image To Text

With us using the -webkit-mask-image CSS property, you can have the image set in a text. This is method almost the same as the background-clip teh old difference is that the mask image clips the visible portion of an element according to image mask transparency.

The HTML

For this markup, we are going to wrap a H1 tag to an ID masked-image.

<div id="masked-image">
<h1>CERTIFIED ROUGH<br/>TEXTURED TEXT</h1>
</div>

The CSS

When it coems to the CSS, all we need to do is put the basic style for the color, font type and so on. Additionally we can sue the -webkit-mask-image property to clip a rought image background to the text. Then just rotate th etext -4 degrees usign the transform property.

#masked-image {
font-family: Oswald, sans-serif;
font-size: 100px;
color: #fff;
text-transform: uppercase;
border: 14px solid #fff;
border-radius: .2em;
text-align: center;
margin: 0;
display: block;
-webkit-mask-image: url(../images/rough-texture.png);
-webkit-transform: rotate(-4deg);
-moz-mask-image: url(../images/rough-texture.png);
-moz-transform: rotate(-4deg);
-o-mask-image: url(../images/rough-texture.png);
-o-transform: rotate(-4deg);
mask-image: url(../images/rough-texture.png);
transform: rotate(-4deg);
}

In Conclusion

Bish-Bash-bosh, Simple as that to create a texture image using the background-clip and mask-image property in CSS. However this may well be a great replacement for the Photoshop workflow, at the time of this post, the property is 100% supported by every type of browser, especially the older ones, so its a good idea to do some research beforehand to make sure you’re work isn’t going to be in vain.

Author

Audain Designs is run by a single person, you'll sometimes find him peeking at you over the top of his laptop screen.

Subscribe

Developer Courses

  • Web Design for Beginners: Real World Coding in HTML & CSS
  • Learning Javascript Programming
  • AngularJS Cookbook: Recipes For Common Scenarios
  • Develop Responsive Websites with Bootstrap 3
  • Complete Web Development: HTML5 and CSS3
  • Learn Angular JS for Beginners