Show DevBest CSS3 Logo

[sumo]

Not everyone in the world has the very basic knowledge of being able to create a logo, or have a friend that can. Never fear, this can be done with simple CSS3. You can modify the gradients in the code to your preferences. I hope this helps others save time like it helped me.
HTML:

<div class="green">Logo</div>

CSS:

.green {
   background: -webkit-linear-gradient(#8CE06E, #61964E); /* Gradient colors: Top to Bottom */
     -webkit-background-clip: text; 
     -webkit-text-fill-color: transparent;
font-size: 43px;
font-family: Luckiest Guy;
text-align: center;
}

Preview:

I originally made this (I'm not saying I came up with the method, I'm saying I didn't copy/paste) for my forums, so that I could quickly add a logo to theads, without opening photoshop. If there's any other coders out there reading this, maybe you could help me out... What I would like to do:

Add two outlines to the text. For example: First one would be white, second one would be green.

 

[Lame]

The tards should be grateful. Good thread.

 

[Markshall]

Probably worth noting that to achieve the exact effect in your picture, you'd need to import the font "Luckiest Guy" from Google Fonts or wherever it's from.

 

[sumo]

Probably worth noting that to achieve the exact effect in your picture, you'd need to import the font "Luckiest Guy" from Google Fonts or wherever it's from.

Yeah, this is very simple in graphics if that's what you're saying. I actually do this method, it's why I made a CSS script for it, to save me time.

 

[griimnak]

Now here's the real question, what puts more load on your webpage, a css logo or a png logo. Nice tut though

 

[sumo]

Now here's the real question, what puts more load on your webpage, a css logo or a png logo. Nice tut though

Yeah, I mostly just made this for my own benefit, but why not share it I thought.

 

[Sysode]

Now here's the real question, what puts more load on your webpage, a css logo or a png logo. Nice tut though

This is a good point. For smaller sites it wouldn't cause as much of an issue.. Bigger scale this would be a no go though - same question as "How responsive is this?"

If you're just playing around though, then why not

 

[sumo]

This is a good point. For smaller sites it wouldn't cause as much of an issue.. Bigger scale this would be a no go though - same question as "How responsive is this?"

If you're just playing around though, then why not

Not really as responsive, because I originally made this as an Xenforo Custom BBCode. In the settings, it only allows HTML Replacement, so I could only use <style>, but I might tweak the code and add some CSS3 animations then transfer it to Xenforo.

 

[Sysode]

Not really as responsive, because I originally made this as an Xenforo Custom BBCode. In the settings, it only allows HTML Replacement, so I could only use <style>, but I might tweak the code and add some CSS3 animations then transfer it to Xenforo.

You could still make it responsive text?

Edit: not saying you have to, this is yours just suggesting if you want something to do

 

[Markshall]

It is also recommended that font names with spaces in them, you wrap in quote marks, eg:

font-family: "Luckiest Guy";

 

[sumo]

It is also recommended that font names with spaces in them, you wrap in quote marks, eg:

font-family: "Luckiest Guy";

Thank you for the tip.

You could still make it responsive text?

Edit: not saying you have to, this is yours just suggesting if you want something to do

Yeah, what I meant was: the box for Xenforo is kinda confusing for me, you know? I like to have the CSS and HTML separate, but I'm sure that's just me. So that's what I meant by transfer it/why I didn't previously do it.

 

[Revplit]

Good job