Show DevBest CSS3 Logo

sumo

The end is nigh.
Jan 18, 2014
143
102
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:
HTML:
<div class="green">Logo</div>
CSS:
Code:
.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:
auVx5tW.png

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.
 

Markshall

Русский Стандарт
Contributor
Dec 18, 2010
2,637
2,389
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

The end is nigh.
Jan 18, 2014
143
102
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

You're a slave to the money then you die
Jul 20, 2013
955
794
Now here's the real question, what puts more load on your webpage, a css logo or a png logo. Nice tut though
 

Sysode

Front-End Developer
Dec 11, 2012
1,673
848
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 :p
 

sumo

The end is nigh.
Jan 18, 2014
143
102
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 :p
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

Front-End Developer
Dec 11, 2012
1,673
848
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 :p just suggesting if you want something to do
 

Markshall

Русский Стандарт
Contributor
Dec 18, 2010
2,637
2,389
It is also recommended that font names with spaces in them, you wrap in quote marks, eg:

Code:
font-family: "Luckiest Guy";
 

sumo

The end is nigh.
Jan 18, 2014
143
102
It is also recommended that font names with spaces in them, you wrap in quote marks, eg:

Code:
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 :p 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.
 

Users who are viewing this thread

Top