Creative Web Typography Styles

Let’s create some interesting web typography effects with several CSS techniques and the help of lettering.js.

Creative Web Typography Styles

With a little bit of CSS magic we can transform text into beautiful typography and omit the use of images in many cases. In this tutorial we will be creating different web typography styles using the lettering.js jQuery plugin and various CSS techniques. For some of the examples we will also add hover transitions to make things a bit more interactive.

Please note: this only works in browsers that support the respective CSS properties.

We won’t include any vendor specific prefixes in the tutorial below, but you will of course find them in the files

We’ll use lettering.js in most of the cases.

In the following we will be going through eight examples.

Example 1

CreativeWebTypographyStyles_01

The idea of the first example is to separate or slice a word when hovering and making another word appear in the gap. For that we will need a special structure.

<h2 class="cs-text">
	<span class="cs-text-cut">Smooth</span>
	<span class="cs-text-mid">Operator</span>
	<span class="cs-text-cut">Smooth</span>
</h2>

The word that will be visible initially, will be duplicated. (Note that all these examples are intended for decorative purposes and might not be “SEO friendly”.)

We will apply the lettering.js plugin for the words meaning that we will have another span around the first and last word (the duplicates):

$(".cs-text-cut").lettering('words');

Now, let’s take a look at the styling. First of all, we will give a fixed width to the whole thing:

.cs-text {
	width: 645px;
	margin: 120px auto 30px;
	cursor: default;
}

The first-layer spans will be displayed as block elements:

.cs-text > span {
	display: block;
}

The two outer spans with the class “cs-text-cut” will have a height of 90px and we’ll set the overflow to hidden. The idea is to make this span half of the height of its inner one, cutting the text into half. We’ll also add a transition to these elements:

.cs-text-cut {
	width: 100%;
	height: 90px;
	overflow: hidden;
	transition: all 0.4s ease-in-out;
}

Let’s add a border to the top and to the bottom:

.cs-text-cut:first-child {
	border-top: 1px solid rgba(255,255,255,0.5);
}

.cs-text-cut:last-child {
	border-bottom: 1px solid rgba(255,255,255,0.5);
}

Let’s set the font size and the line-height of the inner span to 180px which is the double of its parent, and add some text styling:

.cs-text-cut span {
	display: block;
	line-height: 180px;
	color: rgba(255,255,255,1);
	font-size: 180px;
	font-weight: 400;
	text-transform: uppercase;
	text-align: center;
	margin-top: 6px;
	font-family: 'Sancreek', cursive;
	text-shadow: 7px 2px 0 rgba(255,255,255,0.3);
}

The second duplicate which is the last child in our structure will have its span “pulled up”. This will show the lower part of the word:

.cs-text-cut:last-child span {
	margin-top: -84px;
}

The middle text, the one that we’ll want to appear on hover will be positioned absolutely and we’ll set the opacity to 0. It will also be scaled down to 0.5:

.cs-text-mid {
	font-family: 'Raleway', sans-serif;
	font-weight: 100;
	text-transform: uppercase;
	font-size: 50px;
	letter-spacing: 50px;
	line-height: 50px;
	text-indent: 20px;
	position: absolute;
	top: 50%;
	margin-top: -25px;
	color: rgba(255,255,255,0.3);
	text-shadow: 0 0 0 rgba(255,255,255,0.9);
	opacity: 0;
	transform: scale(0.5);
	transition: all 0.4s ease-in-out 0s;
}

When we hover over the words, we want the upper half to move up, so we’ll translate it on the Y-axis and decrease its opacity:

.cs-text:hover .cs-text-cut:first-child {
	transform: translateY(-25px);
	opacity: 0.5;
}

The lower half will be moved down:

.cs-text:hover .cs-text-cut:last-child {
	transform: translateY(25px);
	opacity: 0.5;
}

And finally, we will make the middle text appear by animating its opacity and scaling it up. Notice that we’ve added a transition delay of 0.3 seconds. This will give us time to first move the halves of the initial word up and down. The transition delay of the normal state is 0 seconds meaning that when we move the mouse out, it will disappear immediately:

.cs-text:hover .cs-text-mid {
	transition-delay: 0.3s;
	opacity: 1;
	transform: scale(1);
}

And that’s the first example. Let’s check out the second one.

Example 2

CreativeWebTypographyStyles_02

In the second example we will play a bit with transforms and create a semi-transparent panel look for the letters.

<h2 class="cs-text" id="cs-text">Glass</h2>

We will apply lettering in order to have every letter wrapped in a span:

$("#cs-text").lettering();

We’ll give the main wrapper a fixed width and add the clearfix hack by Nicolas Gallagher because our spans will be floating:

.cs-text {
	width: 600px;
	margin: 70px auto 30px;
}

/* Micro clearfix hack by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/ */
.cs-text:before,
.cs-text:after {
	content: " ";
    display: table;
}

.cs-text:after {
	clear: both;
}
/* end clearfix hack */

Each span will be floating and we’ll add a semi-transparent background. We’ll also apply a box shadow that will make a nice thick border. Then we’ll skew the element and add a transition:

.cs-text span {
	float: left;
	width: 120px;
	font-size: 120px;
	line-height: 230px;
	font-weight: 400;
	text-transform: uppercase;
	text-align: center;
	cursor: default;
	font-family: 'Medula One', cursive;
	display: block;
	z-index: 1;
	position: relative;
	color: rgba(255,255,255,0.7);
	text-shadow: 5px 5px 2px rgba(0,0,0,0.5);
	background: rgba(0,0,0,0.05) url(../images/scratch-texture.png);
	box-shadow: 
		-6px 2px 10px rgba(0,0,0,0.5), 
		inset 0 0 0 20px rgba(255, 255, 255, 0.4);
	border-radius: 5px;
	transform: skewY(8deg);
	transition: all 0.5s ease-in-out;
}

We’ll use the pseudo class :before in order to create another inset shadow effect. There are other ways of doing that but let’s be fancy πŸ™‚
So, what we do is to stretch it until the shadow which is 20px and give it a white box shadow and a black inset box shadow (semi-transparent RGBA):

.cs-text span:before {
	content: '';
	position: absolute;
	left: 20px;
	right: 20px;
	top: 20px;
	bottom: 20px;
	box-shadow: 
		1px 1px 1px rgba(255,255,255,0.4), 
		inset 1px 1px 1px rgba(0,0,0,0.1);
}

The :after pseudo class will be the little dot on top of the element:

.cs-text span:after {
	content: '';
	position: absolute;
	left: 50%;
	top: 5px;
	margin-left: -5px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	box-shadow: inset 1px 1px rgba(0, 0, 0, 0.4);
	background: rgba(255, 255, 255, 0.2);
}

And finally, on hover, we’ll translate the element and scale it up a bit while changing its text-shadow and increasing the opacity value:

.cs-text span:hover {
	transform: translateY(-10px) scale(1.1);
	color: rgba(255,255,255,1);
	text-shadow: 2px 2px 2px rgba(0,0,0,0.2);
}

Example 3

CreativeWebTypographyStyles_03

The style of th third example is completely based on a Photoshop tutorial about creating scrabble tiles for a neat text effect by textuts.com. It’s a great tutorial, so check it out, especially to understand the shadow effects for the scrabble tiles.

We’ll try to create the same effect with pure CSS.

<h2 class="cs-text">
	To sing is to ♥love and affirm, to fly and soar, to coast into the hearts of the people who listen, to tell them that life is to live, that love is there, that nothing is a promise, but that beauty exists, and must be hunted for and found.
</h2>
<h3 class="cs-text">Joan Baez</h3>

We will apply lettering.js to the words and the letters:

$(".cs-text").lettering('words').children('span').lettering()

This will wrap every word into a span with a class starting with “word” and every letter of the word into a wrapper with a class starting with “char”.

Let’s center the text:

.cs-text {
	text-align: center;
	margin-top: 70px;
}

The words will be displayed as inline-blocks and we’ll give them a lateral margin:

.cs-text span[class^="word"] {
	display: inline-block;
	margin: 0 15px;
}

The characters will have a scrabble-style background color and we’ll set a width and height for them. The text shadow will create a carved effect for the letters and the multiple box shadows will add some depth to the tile:

.cs-text span[class^="char"] {
	width: 90px;
	height: 100px;
	display: inline-block;
	background: #e4d095;
	color: #2a1f1b;
	border-radius: 4px;
	font-size: 60px;
	font-weight: 400;
	line-height: 100px;
	margin: 10px 3px;
	text-align: center;
	cursor: default;
	font-family: "Spinnaker", Arial, sans-serif;
	text-shadow: 
		1px 1px 1px rgba(255, 255, 255, 0.9), 
		0 -1px 1px rgba(255,255,255,0.2);
	text-transform: uppercase;
	box-shadow: 
		1px 7px 15px rgba(0,0,0,0.8),
		inset 3px 0 2px rgba(255,255,255,0.4),
		inset 0 3px 0px rgba(255,255,255,0.5),
		inset -2px -3px 0px rgba(143,128,82,0.6);
}

Now, let’s add some “randomness” to the the tiles by rotating every odd one and every third one slightly:

.cs-text span[class^="char"]:nth-child(odd) {
	transform: rotate(2deg);
}

.cs-text span[class^="char"]:nth-child(3n) {
	transform: rotate(-3deg);
}

The fifth word and the last heading will have red letters and the last heading will be a bit smaller than the rest of the text:

.cs-text > span:nth-child(5) span,
h3.cs-text span[class^="char"] {
	color: #a62a19;
}

h3.cs-text span[class^="char"] {
	font-size: 40px;
	width: 50px;
	height: 60px;
	line-height: 60px;
}

And that’s it! Scrabble tile text!

Example 4

CreativeWebTypographyStyles_04

The forth example is a style for a typographic background. We’ll make the letters big and semi-transparent, add some text shadow and rotate/translate some letters “randomly”.

<h2 class="cs-text" id="cs-text">Nothing can be more hopeless than to attempt to explain this similarity
of pattern in members of the same class, by utility or by the doctrine
of final causes. The hopelessness of the attempt has been expressly
admitted by Owen in his most interesting work on the "Nature of Limbs."
On the ordinary view of the independent creation of each being, we can
only say that so it is; that it has pleased the Creator to construct all
the animals and plants in each great class on a uniform plan; but this
is not a scientific explanation.</h2>

Since we don’t really care about the text itself, we’ll simply wrap every letter into a span with lettering.js:

$("#cs-text").lettering();

The whole text will be fluid: we’ll give it a width of 100%:

.cs-text {
	width: 100%;
	text-align: center;
	margin-top: 80px;
}

The letters will be semi-transparent by giving a RGBA color with a low opacity value. We’ll also add a text shadow with a big offset:

.cs-text span { 
	font-family: 'Cantata One', 'Trebuchet MS', sans-serif;
	font-size: 180px;
	line-height: 150px;
	font-weight: 400;
	color: rgba(255,255,255,0.3);
	display: inline-block;
	text-transform: uppercase;
	text-shadow: 15px 15px 0 rgba(0,0,0,0.2);
	cursor: default;
	pointer-events: none;
}

Since we want to use this a a background, we’ll use pointer-events: none. This will avoid making the text clickable/selectable.

Now, let’s go nuts and randomly rotate, translate, enhance or enlarge some of the letters. We will use the :nth-child selector to target specific spans:

.cs-text span:nth-child(2n) {
	transform: rotate(-6deg);
	color: rgba(255,255,255,0.4); ;
}

.cs-text span:nth-child(3n) {
	transform: translateY(20px);
}

.cs-text span:nth-child(4n) {
	color: rgba(255,255,255,0.2);
}

.cs-text span:nth-child(3n+3) {
	transform: scale(1.4) rotate(5deg);
}

.cs-text span:nth-child(7n) {
	font-size: 110px;
}

.cs-text span:nth-child(12n) {
	font-size: 200px;
}

And that’s it, a very simple, yet exciting text effect.

Example 5

CreativeWebTypographyStyles_05

Example 5 will have a nice 3D effect which will create some nice depth.

<h2 class="cs-text" id="cs-text">Disarmer</h2>

Since we want every letter to be wrapped in two spans, we’ll first apply lettering.js and then wrap the created span into another one:

$("#cs-text").lettering().children('span').wrap('');

Let’s give a with/height and a margin to the main wrapper:

.cs-text {
	position: relative;
	width: 960px;
	height: 100px;
	margin: 100px auto;
	cursor: default;
}

The first-layer spans will have perspective and float:

.cs-text > span {
	perspective: 200px;
	float: left;
	position: relative;
}

Since we will be rotating and translating the inner spans, we’ll need a specific stacking order for the perspective containers (from the center outwards):

.cs-text > span:first-child,
.cs-text > span:last-child {
	z-index: 1;
}

.cs-text > span:nth-child(2),
.cs-text > span:nth-child(7){
	z-index: 2;
}

.cs-text > span:nth-child(3),
.cs-text > span:nth-child(6){
	z-index: 3;
}

.cs-text > span:nth-child(4) {
	z-index: 5;
}

.cs-text > span:nth-child(5){
	z-index: 4;
}

The inner spans will have multiple backgrounds: the gradient and a semi-transparent texture. We’ll also apply a box shadow that will give some depth to the elements:

.cs-text span span {
	display: block;
	background: url(../images/scratch-texture.png), linear-gradient(to right, #00b7ea 0%,#009ec3 100%);
	box-shadow: 
		-1px 0 2px rgba(255,255,255,0.4),
		-2px 0 0 #00adda, 
		-2px 7px 9px rgba(0, 0, 0, 0.5);
	color: #fff;
	text-shadow: -1px -1px 2px rgba(0,0,0,0.6);
	width: 120px;
	height: 150px;
	font-weight: 700;
	line-height: 150px;
	font-size: 140px;
	text-align: center;
	text-transform: uppercase;
}

The last four letters will have the reverse gradient, box shadow and text shadow:

.cs-text > span:nth-child(n+5) span {
	background: url(../images/scratch-texture.png), linear-gradient(to right, #009ec3 0%,#00b7ea 100%);
	box-shadow: 
		1px 0 2px rgba(255,255,255,0.4),
		2px 0 0 #00adda, 
		-2px 7px 9px rgba(0, 0, 0, 0.5);
	text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}

Now we’ll translate the inner spans on the z-index and rotate them in order to create the effect. Each one will have different values, so we will target them with the respective :nth-child selector:

.cs-text > span:nth-child(4) span{
	transform: translateZ(40px) rotateY(40deg);
}

.cs-text > span:nth-child(5) span{
	transform: translateZ(40px) rotateY(-40deg);
}

.cs-text > span:nth-child(3) span{
	transform: translateZ(30px) rotateY(30deg);
}

.cs-text > span:nth-child(6) span{
	transform: translateZ(30px) rotateY(-30deg);
}

.cs-text > span:nth-child(2) span{
	transform: translateZ(20px) rotateY(20deg);
}

.cs-text > span:nth-child(7) span{
	transform: translateZ(20px) rotateY(-20deg);
}

.cs-text > span:first-child span{
	transform: translateZ(10px) rotateY(10deg);
}

.cs-text > span:last-child span{
	transform: translateZ(10px) rotateY(-10deg);
}

Let’s move the spans a bit by translating them on the x-axis:

.cs-text > span:nth-child(-n+4) {
	transform: translateX(14px);
}

.cs-text > span:nth-child(n+5) {
	transform: translateX(-14px);
}

And that’s it, we have a neat 3D text effect!

Example 6

CreativeWebTypographyStyles_06

This example is inspired a bit by Origami. It’s going to have several semi-transparent spans that we will rotate and skew. On hover, they will remove all the transforms so that they all appear as boxes.

<h2 class="cs-text" id="cs-text">Bird</h2>

We need each letter to be wrapped in a span, preceded by three other spans and all that wrapped into a span (yes, insane!):

$("#cs-text").lettering().children('span').wrap('').parent().prepend('');

Let’s add a width and some margins to the main wrapper and clear the floats:

.cs-text {
	width: 600px;
	margin: 70px auto 30px;
}

/* Micro clearfix hack by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/ */
.cs-text:before,
.cs-text:after {
	content: " ";
    display: table;
}

.cs-text:after {
	clear: both;
}
/* end clearfix hack */

All the spans will be displayed as block elements:

.cs-text span{
	cursor: default;
	display: block;
	position: relative;
}

The first-layer spans will all have a height and width of 130 pixels and some margin:

.cs-text > span {
	float: left;
	width: 130px;
	height: 130px;
	margin: 10px;
}

All inner spans will have a RGBA background which will make them semi-transparent white. We will also add a transition to them:

.cs-text span span {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(255,255,255,0.3);
	box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	transition: all 0.3s ease-in-out;
}

The last child of the inner spans is the letter and we will size it to fit and add some colored text shadows. It will also have a gradient as background that will simulate a subtle fold:

.cs-text span span:last-child{
	font-size: 70px;
	line-height: 130px;
	font-weight: 400;
	text-transform: uppercase;
	text-align: center;
	color: rgba(255,255,255,0.8);
	font-family: 'Michroma', sans-serif;
	text-shadow: 
		1px 1px 1px rgba(0,0,0,0.1),
		-1px -1px 1px rgba(0,0,0,0.1),
		5px 5px 0 rgba(216,65,40,0.6),
		-5px -5px 0 rgba(37,166,164,0.6);
	background: 
		linear-gradient(
			45deg, 
			rgba(249,249,249,0.08) 0%,
			rgba(234,234,234,0.5) 49%,
			rgba(255,255,255,0.51) 50%,
			rgba(244,244,244,0.94) 100%
			);
}

Let’s add some arbitrary rotation and skew transforms to the resting spans:

.cs-text > span:nth-child(odd) span:first-child {
	transform: rotate(5deg) skewY(-14deg);
}

.cs-text > span:nth-child(even) span:first-child {
	transform: rotate(-35deg) skewY(-5deg);
}

.cs-text > span:nth-child(odd) span:nth-child(2) {
	transform: rotate(45deg) skewY(-10deg);
}

.cs-text > span:nth-child(even) span:nth-child(2) {
	transform: rotate(27deg) skewY(-12deg);
}

.cs-text > span:nth-child(odd) span:nth-child(3) {
	transform: rotate(45deg);
}

.cs-text > span:nth-child(even) span:nth-child(3) {
	transform: rotate(30deg);
}

On hover, we will set all the spans transforms to 0 and apply a different text shadow to the text in order to create a nice effect:

#cs-text > span:hover span {
	transform: rotate(0deg) skewY(0deg);
	text-shadow:
		1px 1px 0 rgba(216,65,40,0.1),
		-1px -1px 0 rgba(37,166,164,0.1);
}

And that was example 6! There are many possibilities, just try to change the transform values or nest the spans for some interesting effects.

Example 7

CreativeWebTypographyStyles_07

In this example we want to show a logo initially and make some letters appear when we hover. We’ll not use lettering here, we’ll simply create the following structure:

<h2 class="cs-text">
	<span>C</span>
	<span>o</span>
	<span>d</span>
	<span>r</span>
	<span>o</span>
	<span>p</span>
	<span>s</span>
	<span></span>
</h2>

Let’s define some text properties and the width of the whole thing:

.cs-text {
	font-size: 50px;
	text-transform: uppercase;
	margin: 80px auto 0 auto;
	width: 580px;
	height: 100px;
	padding-left: 20px;
	font-family: 'McLaren', Arial;
	font-weight: 400;
	position: relative;
}

/* Micro clearfix hack by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/ */
.cs-text:before,
.cs-text:after {
	content: " ";
    display: table;
}

.cs-text:after {
	clear: both;
}
/* end clearfix hack */

The spans will be floating and we’ll make them round. We’ll also add a transition.

.cs-text span {
	cursor: default;
	display: block;
	float: left;
	border-radius: 50%;
	width: 100px;
	height: 100px;
	line-height: 100px;
	text-align: center;
	margin: 0 0 0 -20px;
	color: rgba(255,255,255,0.95);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.1);
	transition: all 0.4s ease-in-out;
}

The spans will alternate in background color and we’ll add a subtle texture to them:

.cs-text span:nth-child(odd) {
	background: rgba(118,176,204, 0.8) url(../images/noise.png); 
}

.cs-text span:nth-child(even) {
	background: rgba(58,126,162, 0.8) url(../images/noise.png); 
}

All the spans will be moved to the center. We’ll apply the transform twice: the first one is the percentage that we know, i.e. the first span needs to be 3 positions so it’s 300%, and the second transform is for the compensation of the margin:

.cs-text span:nth-child(1) {
	transform: translate(300%) translate(-60px);
}

.cs-text span:nth-child(2) {
	transform: translate(200%) translate(-40px);
}

.cs-text span:nth-child(3) {
	transform: translate(100%) translate(-20px);
}

.cs-text span:nth-child(5) {
	transform: translate(-100%) translate(20px);
}

.cs-text span:nth-child(6) {
	transform: translate(-200%) translate(40px);
}

.cs-text span:nth-child(7) {
	transform: translate(-300%) translate(60px);
}

All of the spans except the last one will have opacity 0:

.cs-text span:not(:last-child) {
	opacity: 0;
	pointer-events: none;
}

The last span is the special logo span. We’ll give it a different background and position it absolutely in the center of the main wrapper:

.cs-text span:last-child{
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -50px;
	z-index: 100;
	background: url(../images/codrops_logo.jpg) no-repeat center center;
}

On hover, all the translated spans will be set back to their natural position and we’ll increase the opacity value to 1:

.cs-text:hover span:not(:last-child){
	transform: translate(0%);
	opacity: 1;
}

The logo span will scale up a bit and fade out:

.cs-text:hover span:last-child {
	opacity: 0;
	transform: scale(1.4);
}

Example 8

CreativeWebTypographyStyles_08
In the last example we’ll just play a bit with multiple text shadows.

<h2 class="cs-text">Time for Thyme</h2>

We’ll use lettering.js to wrap all the words in spans:

$(".cs-text").lettering('words');

Let’s add a width to the main heading and center it. We’ll also skew it a bit:

.cs-text {
	width: 660px;
	margin: 120px auto 30px;
	cursor: default;
	transform: skewY(-12deg); 
	text-align: center;
}

The spans are going to be display block and we’ll add a top margin to position them:

.cs-text span {
	display: block;
	color: #fff;
	font-weight: 400;
	text-transform: uppercase;
	margin-top: 6px;
	font-family: 'Stint Ultra Expanded', cursive;
}

The first word will have a font size of 100 pixels and a large letter spacing:

.cs-text span:first-child {
	font-size: 100px;
	letter-spacing: 96px;
	text-shadow: 6px 6px 0px rgba(255,255,255,0.3);
}

The second word will be in an italic serif font and we’ll give it a dark color:

.cs-text span:nth-child(2) {
	font-family: Georgia, serif;
	font-weight: 400;
	text-transform: none;
	font-style: italic;
	line-height: 60px;
	font-size: 67px;
	color: #392f2c;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
	position: relative;
}

We’ll style the pseudo-classes :before and :after to create two lines to the left and right:

.cs-text span:nth-child(2):before,
.cs-text span:nth-child(2):after {
	content: '';
	width: 240px;
	height: 2px;
	background: #392f2c;
	position: absolute;
	top: 50%;
	margin-top: -1px;
	box-shadow: 0 1px 0 rgba(255,255,255,0.2);
}

.cs-text span:nth-child(2):before {
	left: 0px;
}

.cs-text span:nth-child(2):after {
	right: 0px;
}

The last word will have multiple text shadows to create a pile effect. The trick is to alternate between the text color and the body background which is a dark brown in our case:

.cs-text span:nth-child(3) {
	font-size: 130px;
	text-shadow: 
		2px 2px 0 #645f59,
		4px 4px 0 #fff,
		6px 6px 0 #645f59,
		8px 8px 0 #fff,
		10px 10px 0 #645f59,
		12px 12px 0 #fff,
		14px 14px 0 #645f59,
		16px 16px 0 #fff,
		18px 18px 0 #645f59,
		20px 20px 0 #fff,
		22px 22px 0 #645f59,
		24px 24px 0 #fff;	
}

And that’s it! I hope you enjoyed the typography examples and find them inspiring! There’s a lot to experiment, so just try it out!

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 30

Comments are closed.
  1. Some of those typography effects are really great ! I personally love both “Bird” and “Codrops” effects.

    One note for the Scrabble demo : you could easily add the “point value” in the bottom right corner with a pseudo-element with something like that :
    .q:after, .z:after {
    content: “10”;
    position: absolute;
    right: 5px;
    bottom: 5px;
    font-size: 0.8em;
    color: #222;
    }
    You’d need probably more CSS to have a realistic effect, but you get the idea. πŸ™‚

  2. Finally, Mary Lou! I’ve been waiting for your tutorials for some time now I missed them πŸ™‚

    Demos1, 4 and 6 are my absolute favorites! Great great great job!

    and Thank you!

    • Me too! Mary Lou’s tutorials are my favorite on Codrops! Not just gorgeous examples, but a great grasp on CSS3. I always walk away knowing more about creating realistic shadows and depth with gradients, artful uses of CSS selectors, and a better understanding of the transform options available.

  3. One more thing, Mary Lou, you can use Lea Verou’s -prefix-free plugin, which according to the creator’s words “-prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed. ”
    Sounds great ha? πŸ™‚

    Browser Support: The target browser support is IE9+, Opera 10+, Firefox 3.5+, Safari 4+ and Chrome on desktop and Mobile Safari, Android browser, Chrome and Opera Mobile on mobile.

  4. I don’t think there’s another site sharing such amazing quality content as good as this.
    Beautiful as always.
    Thank you

  5. This is incredible use of web typography. Thanks so much for sharing. I can’t wait to try some of it out.

  6. Fantastico, amazingo, and coolo
    ho ho ho ho \m/
    keep health πŸ˜€
    ty for coding ?
    stay to next tut’s \m/

  7. Once again u manage to do AWESOME stuff. <3 it!
    Your tut's are rly good and always help me better understand css power and learn new stuff.

    Working on my company web site with few of your features and tips, hope we get up and running soon.
    Will send link when its done.

    Lots of <3!

    Thx

  8. Amazing. You are a real CSS ” HERO “. Your site have so many of them in such a detailed manner. I just can’t resist myself. For me I like Example Number : 6 .. ” BIRD “. Thanks

  9. I am trying the example 6 with the bird i just cant figure out where to put

    $(“#cs-text”).lettering().children(‘span’).wrap(”).parent().prepend(”);

    can you please help me?

    thanks

  10. Thank you, LOVE these! I could use some help with #7 though if possible… I was hoping to use three of these icons on one line, but one of the words I wanted to use has seven letters and makes it all go wonky. Is there a way to make them all center more so that I can use words of different lengths?? TIA!

  11. hey, #1 example i very nice, i would like to do that but with longer text like instead of “Smooth” text i want to use “Tomek Sadurski” + Raleway font (font is not a problem i did it my self).

  12. Awesome! Big fan of typography. Would be implementing demo 8 on my portfolio πŸ™‚