MyBB Community Forums

This most basic trick is about how to create a 3D CSS logo using text shadow.
For that we need to change our default board logo from Image to Text, but thats a different trick as far as we are concentrating on CSS.

So, I'm picking up a theme which is already using a text logo. The theme is one of my favorite, called 'Trince'. You can find it here:

http://mods.mybb.com/view/trince

This theme uses CSS test decoration to create its logo using the "logo" class in global.css. It looks like:



The class for this in global.css is:

.logo {
font-family: Ubuntu;
font-weight: bold;
font-size: 36px;
color: #fff;
padding-top: 3px;
}

Now add some text shadow in the main style. The code will be exactly the following:

.logo {
font-family: Ubuntu;
font-weight: bold;
font-size: 36px;
color: #fff;
padding-top: 3px;
	text-shadow:
		0 1px 0 #c0c8cc,
		0 2px 0 #b9c1c4,
		0 3px 0 #b1b9bd,
		0 4px 0 #aab2b5,
		0 5px 0 #a3aaad,
		0 6px 1px rgba(0,0,0,.1),
		0 0 5px rgba(0,0,0,.1),
		0 1px 3px rgba(0,0,0,.3),
		0 3px 5px rgba(0,0,0,.2),
		0 5px 10px rgba(0,0,0,.25),
		0 10px 10px rgba(0,0,0,.2),
		0 20px 20px rgba(0,0,0,.15);
}

Output looks like:



This ends here. You can change the colors (text as well as shadow) further to match your theme.

Feel free to leave a comment.

That's nice .
Also don't forget to smoothen the text with anti aliasing property of css3,or else the text looks pixelated.

Here is it :

-webkit-font-smoothing: none;
-webkit-font-smoothing: subpixel-antialiased;
-webkit-font-smoothing: antialiased;

Regards,
Envira.

Pretty cute how it doesn't require any graphic skills

Nice tutorial!