These 4 Exciting CSS Typography Will Impress Your Blog Readers (Actual Demo)

You Can If You Think You Can. ~ Dr. Norman Vincent Peale (book) ~

Come to think of it, your blog readers are a pampered lot. There is no dearth of helpful contents on the web, and the visitor that lands up on your webpage is just a click away to move to another website, perhaps not to come back again.

You can take steps to improve visitor stickiness, some of the important ones to pay close attention are:

  1. Reducing page loading time
  2. Reducing clutter on the page
  3. Clear messaging to explain what you want to say
  4. Improving page design

 

CSS typography to your rescue

Improving page design with clever use of typography is my favorite. I frequently change font designs and their sizes on my pages to find out what looks better than before. For this, I often refer to the guide on Google web fonts to use new fonts.

In this article, I’m going to show you the use of 4 exciting CSS typography for your blog site. Two of these show shadow effects and the other two are about font animations.

The HTML and CSS code snippets are given for each design created here. Copy them and alter the codes for your specific use.

One more point. I’ve used a good amount of CSS codes for these designs. These codes are specific to this article. To do this I’ve used the plugin, Insert JavaScript and CSS, by Ryan Nutt.

Okay, let’s begin.

 

3D Extrude Text Effects with CSS

The 3D effect in the following example is created with the CSS text-shadow property. The fonts used are Cinzel:900 and Luckiest Guy. For more refer this codepen.

The Real

CONTENT DEVELOPMENT

SKILLS

ARE HERE

by HubSkills

A) HTML Code

<div class="plate">
<p class="script"><span>The Real</span></p>
<p class="shadow text1">CONTENT DEVELOPMENT</p>
<p class="shadow text2">SKILLS</p>
<p class="shadow text3">ARE HERE</p>
<p class="script"><span>by HubSkills</span></p>
</div>

B) CSS Code

@import url('https://fonts.googleapis.com/css?family=Cinzel:900|Luckiest+Guy');
.plate { background-color: #c30; width: 100%; margin: 10% auto; }
p.shadow { color: #fff; font-family: 'Cinzel', serif;
text-shadow:
-3px -3px 0 #222,
3px -3px 0 #222,
-3px 3px 0 #222,
3px 3px 0 #222,
4px 4px 0 #ccc,
5px 5px 0 #ccc,
6px 6px 0 #ccc,
7px 7px 0 #ccc;
line-height: 1.1em; letter-spacing: 0.07em;
transform: scaleY(0.7);
-webkit-transform: scaleY(0.7);
-moz-transform: scaleY(0.7);
margin:0; text-align: center; overflow: hidden;
}
p.script {
font-family: 'Luckiest Guy', cursive;
color: #fff;
text-align: center;
font-size: 3em;
position: relative;
margin:0;
text-shadow: 2px 2px 2px #222;
}
p.script span {
background-color: #c30; padding: 0 0.3em;
}
.script:before {
content:"";
display: block;
position: absolute;
z-index:-1;
top: 50%;
width: 100%;
border-bottom: 3px solid #fff;
}
p.text1 {
font-size: 4.4em;
}
p.text2 {
font-size: 6em; margin-top: -45px; color: #fc0;
}
p.text3 {
font-size: 4em;
}

 

Long Shadow with Gradient Effect

This design is inspired by this codepen. The background color forms the base for the long shadowy gradient for each letter.

The real
content development
skills

are here!

A) HTML Code

<p style="padding: 60px 40px; background: #e74c3c;" class="text-longshadow"><span style="font-size: 2em;">The real</span><br/> <span style="color: #ff0;">content development<br /> skills</span><br /><span style="font-size: 2em;">are here!</span></p>

B) CSS Code

@import url('https://fonts.googleapis.com/css?family=Lato:700,900');
p.text-longshadow {
color: #fff;
font-size: 6rem;
line-height: 6rem;
font-family: lato;
font-weight: 900;
text-align: center;
text-shadow: 1px 1px rgba(123, 25, 15, 0.5) , 2px 2px rgba(129, 28, 18, 0.51) , 3px 3px rgba(135, 31, 20, 0.52) , 4px 4px rgba(140, 33, 22, 0.53) , 5px 5px rgba(145, 36, 24, 0.54) , 6px 6px rgba(150, 38, 26, 0.55) , 7px 7px rgba(154, 40, 28, 0.56) , 8px 8px rgba(158, 42, 30, 0.57) , 9px 9px rgba(162, 44, 31, 0.58) , 10px 10px rgba(166, 45, 33, 0.59) , 11px 11px rgba(169, 47, 34, 0.6) , 12px 12px rgba(173, 48, 36, 0.61) , 13px 13px rgba(176, 50, 37, 0.62) , 14px 14px rgba(178, 51, 38, 0.63) , 15px 15px rgba(181, 52, 39, 0.64) , 16px 16px rgba(184, 54, 40, 0.65) , 17px 17px rgba(186, 55, 41, 0.66) , 18px 18px rgba(189, 56, 42, 0.67) , 19px 19px rgba(191, 57, 43, 0.68) , 20px 20px rgba(193, 58, 44, 0.69) , 21px 21px rgba(195, 59, 45, 0.7) , 22px 22px rgba(197, 60, 46, 0.71) , 23px 23px rgba(199, 61, 47, 0.72) , 24px 24px rgba(201, 62, 47, 0.73) , 25px 25px rgba(202, 62, 48, 0.74) , 26px 26px rgba(204, 63, 49, 0.75) , 27px 27px rgba(206, 64, 49, 0.76) , 28px 28px rgba(207, 65, 50, 0.77) , 29px 29px rgba(209, 65, 51, 0.78) , 30px 30px rgba(210, 66, 51, 0.79) , 31px 31px rgba(211, 67, 52, 0.8) , 32px 32px rgba(213, 67, 52, 0.81) , 33px 33px rgba(214, 68, 53, 0.82) , 34px 34px rgba(215, 69, 53, 0.83) , 35px 35px rgba(216, 69, 54, 0.84) , 36px 36px rgba(218, 70, 54, 0.85) , 37px 37px rgba(219, 70, 55, 0.86) , 38px 38px rgba(220, 71, 55, 0.87) , 39px 39px rgba(221, 71, 56, 0.88) , 40px 40px rgba(222, 72, 56, 0.89) , 41px 41px rgba(223, 72, 57, 0.9) , 42px 42px rgba(224, 73, 57, 0.91) , 43px 43px rgba(225, 73, 57, 0.92) , 44px 44px rgba(225, 73, 58, 0.93) , 45px 45px rgba(226, 74, 58, 0.94) , 46px 46px rgba(227, 74, 58, 0.95) , 47px 47px rgba(228, 75, 59, 0.96) , 48px 48px rgba(229, 75, 59, 0.97) , 49px 49px rgba(230, 75, 59, 0.98) , 50px 50px rgba(230, 76, 60, 0.99);
}

 

Vertically Rotating (Scrolling) Texts

The following is an example of CSS3 Animations property. 2 more properties, namely Animation-Delay and Animation-Iteration-Count decide how the text animation will occur and for how long. For more on this example refer this codepen.

We help you with

content development skills
online course creation
in-person coaching
making more money
HubSkills skills

A) HTML Code

<div style="background: #036; height: 150px;" class="Iam">
<p>We help you with</p>
<b>
<div class="innerIam">
content development skills
online course creation<br />
in-person coaching<br />
making more money<br />
HubSkills skills<br />
</div>
</b>
</div>

B) CSS Code

/*NEW VERTICAL SCROLL*/
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
.Iam {
width: 100%;
padding: 1em;
font: normal bold 30px/50px Montserrat, sans-serif;
color: #ccc;
}
.Iam p {
height: 50px;
float: left;
margin-right: 0.3em;
}
.Iam b {
float: left;
overflow: hidden;
position: relative;
height: 50px;
}
.Iam .innerIam {
display: inline-block;
color: #0a0;
position: relative;
white-space: nowrap;
top: 0;
left: 0;

/*NEW VERTICAL SCROLL animation*/
-webkit-animation:move 5s;
-moz-animation:move 5s;
-ms-animation:move 5s;
-o-animation:move 5s;
animation:move 5s;
/*animation-iteration-count*/
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
animation-iteration-count:infinite;
/*animation-delay*/
-webkit-animation-delay:1s;
-moz-animation-delay:1s;
-ms-animation-delay:1s;
-o-animation-delay:1s;
animation-delay:1s;
}
@keyframes move{
0% { top: 0px; }
20% { top: -50px; }
40% { top: -100px; }
60% { top: -150px; }
80% { top: -200px; }
}
@-webkit-keyframes move {
0% { top: 0px; }
20% { top: -50px; }
40% { top: -100px; }
60% { top: -150px; }
80% { top: -200px; }
}
@-moz-keyframes move {
0% { top: 0px; }
20% { top: -50px; }
40% { top: -100px; }
60% { top: -150px; }
80% { top: -200px; }
}
@-o-keyframes move {
0% { top: 0px; }
20% { top: -50px; }
40% { top: -100px; }
60% { top: -150px; }
80% { top: -200px; }
}
@keyframes move {
0% { top: 0px; }
20% { top: -50px; }
40% { top: -100px; }
60% { top: -150px; }
80% { top: -200px; }
}

 

Typewriter Effect

The font animation below is created with the plugin, Typing Effect. After it is installed, the plugin facilitates using a shortcode (given below) that includes the number of strings to be used and the contents of those strings. It is also possible to fix the type-speed, start-delay, back speed, and back-delay.

We help you at HubSkills.

A) HTML Shortcode

[typed string0="master content creation" string1="create online course" string2="design awesome graphics" string3="launch e-learning business" string4="create training video" typeSpeed="120" startDelay="20" backSpeed="30" backDelay="2000" loop="1"]

 

More Inspiration

When design excels, people are automatically attracted to a webpage in droves. They try to follow and learn the techniques used to create the designs so that they too can do the same.

It’s for that reason that I’ve included the HTML and CSS codes above and also indicated the sources of the designs for CSS typography.

For more inspiration visit my posts on font selection guide for kinetic typography and also how to actually create kinetic typography video in PowerPoint.

Leave your views below about this post.

 

2017-01-22T20:31:29+00:00 Web Design|

Leave A Comment

Monetize the teacher in you, teach globally