5 CSS text, link and typography effects

Posted on October 28, 2013 4:45 pm in
Share on Facebook0Tweet about this on TwitterShare on Google+0Share on LinkedIn0

Using CSS text, link and typography effects to spice up your website will not only keep time in Photoshop down, it will dramatically speed up your website loading time and keep things looking sharp and fresh.

I always use CSS text effects and large typography as opposed to using an image as it looks amazing and it also helps with SEO when using H tags.

So take a look at my top 5 I have either developed myself or have found on another website.

Fade In Link Transition

menu

I use this nifty effect a lot in all of my websites as it gives all the transitions a smoother feel. Take a look at my navbar above and you can see what I mean.

a  {
color:#ff0000;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}

a:hover  {
color:#33ccff;
}

Inset / Embossing Text Effect

Embossing is just plain cool. Especially when working on really light and dark backgrounds. With 2 lines of simple CSS code, you can have some text that would look great in huge featured lettering or as some simple headers to spice things up.

text-shadow: 0px 2px 3px #666;

Large Drop Cap Effect On First Letter

This one’s a cool one that I shall be using with future projects. This capitalises, enlarges and puts a cool solid shadow behind the first letter of each article/page you decide on.

p {
font-size: 50px; line-height: 80px;
text-transform: uppercase;
text-shadow: 10px 10px 0 rgba(255,255,255,0.07);
}

p:first-child:first-letter {
font-size: 160px; float: left; margin: 20px 20px 0 0; line-height: 0.8;
}

Board Game Text Effect

Bright, bold, colourful and amazing. A great one to help make your blog or website stand out and perfect for promotions.

text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px 0 #5ac7ff;

Vintage Retro

This one’s really trendy right now and will fit in with any uber cool blogs.

text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;

Share on Facebook0Tweet about this on TwitterShare on Google+0Share on LinkedIn0
< Previous Post
Next Post >

Leave a Reply

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

I’ve been a freelance web designer since the age of 10 and I’ve learnt a few things along the way. I’ve been brought up with the internet and how to create with it. From this, I’ve got over 12 years experience in the web design industry which is unique.

Now I specialise in WordPress and responsive web design. I chose WordPress as it is the most user friendly and diverse CMS system out there and everything I make is responsive as standard. As a freelance web designer, I’m always looking at staying ahead of the game.

I specialise in responsive Wordpress websites and pixel perfect designs.
"The product has turned out to be truly unique and exactly what I wanted, both aesthetically and functionally. I cannot begin recommending him enough for any developing project, he's just the best!"
Katy Kann
View Project
Let's make your vision come to life
I've put together an easy form to get us started
Freelance Web Designers in the UK