Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
3D CSS Logo
#1
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:

[Image: jOSo8.png]

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:

[Image: 3XE6E.png]

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

Feel free to leave a comment.
[Image: logo.svg.svg]
Reply
#2
That's nice SmileSmile.
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.
[Image: mnvhXxj.png]
Reply
#3
Pretty cute how it doesn't require any graphic skills Smile

Nice tutorial!
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)