Tessisamess

Layouts, Codes, Tutorials, & Resources

Hey there, I'm Tess!

Welcome to my blog; I make lots of different layouts, codes, tutorials, and other resources for Insanejournal and Dreamwidth RPers! There's a lot to choose from and brand new content goes up every week!

Take a look around, and don't hesitate to ask for help if you need it!

Can't get enough resources? Why not subscribe to my Patreon for exclusive monthly content, or support the creation of more content by leaving a tip on Ko-Fi! ♡

Need an invite?

If you're unable to comment on my journal to ask for help now that anon has been turned off due to serious spam issues, don't worry! Just shoot me an email and I'll send you an invite code for Insanejournal. I've got plenty to spare!
×

Please Note:

I do not offer assistance with any sites other than IJ and DW unless it is for general HTML and CSS (ie. custom hosted pages and similar.) I cannot convert a code to a new site's rules because there are a lot of niche RP sites, and I have no way of knowing each one's limitations and caveats. Sorry about that!

Layout By

Powered by InsaneJournal

Hey there, I'm Tess!

Welcome to my blog; I make lots of different layouts, codes, tutorials, and other resources for Insanejournal and Dreamwidth RPers! There's a lot to choose from and brand new content goes up every week!

Take a look around, and don't hesitate to ask for help if you need it!

Can't get enough resources? Why not subscribe to my Patreon for exclusive monthly content, or support the creation of more content by leaving a tip on Ko-Fi! ♡

Need an invite?

If you're unable to comment on my journal to ask for help now that anon has been turned off due to serious spam issues, don't worry! Just shoot me an email and I'll send you an invite code for Insanejournal. I've got plenty to spare!
×

December 2018

S M T W T F S
      1
2345678
9101112131415
16171819202122
23242526272829
3031     

Please Note:

I do not offer assistance with any sites other than IJ and DW unless it is for general HTML and CSS (ie. custom hosted pages and similar.) I cannot convert a code to a new site's rules because there are a lot of niche RP sites, and I have no way of knowing each one's limitations and caveats. Sorry about that!

Layout By

Powered by InsaneJournal
Previous | Next

How to Make a Text Gradient



So you want a text gradient, huh?

I see text gradients all over IJ, from dropbox posts to Generator topbars, and you know what they all have in common? They're ridiculously tedious to edit. Every time I see a text gradient done by defining each letter's color I die a little bit inside (the more letters I know you had to sit and edit the more I feel for you), so today we're going to learn the right way to do it!*

Here's the best part: Your text goes all in one line as usual. No color picking, no letter-by-letter faux-gradienting. Just a little bit of CSS and your display text. Let's get started!

*Except in a few very specific instances, but we won't get into that right now.

Yes, you really can do this.

So you're excited to ditch the old method and maybe a little skeptical; it can't possible be as easy as I'm making it sound, right? WRONG-O FRIENDS. Once we break down how this is done you'll be gradient-texting away like a pro without ever having to work piece by piece again. Ya welcome. I love you.

The two magical pieces needed to make this work background-clip and a background-image CSS gradient. If you think that sounds like it has a lot more potential than just a color gradient, you're right. I'll be showcasing that for you guys in a layout this month! But I'm getting ahead of myself.

What do these things do? To put it as simply as possible, background-clip specifies the boundaries of your background, and in this case we're setting it to text which, you guessed it, tells it its boundary is the text. When we couple that with background-image and slap in a gradient...

Well, I'm sure you know what happens next. Now let's see it in action!

How to set it up!

Whether you want a contact code with an icon or a header on your journal layout, setting this up is fairly simple. Here is the breakdown of what you need to make it function, as well as information on text options:
<div style="
<!---THIS IS YOUR FONT STYLE; IT CAN BE ANYTHING YOU WANT AND DOES NOT EFFECT THE GRADIENT IN ANY WAY AS LONG AS YOU DO NOT DEFINE A FONT COLOR---> text-align:center; font-family:arial black,gadget,sans-serif; font-size:28px; text-transform:uppercase; <!---THIS ALLOWS THE GRADIENT TO SHOW UP INSIDE OF YOUR TEXT---> color:transparent; <!---THIS IS YOUR CLIPPING; IT WILL TELL THE BACKGROUND TO CLIP ITSELF TO THE TEXT AND YOU SHOULD NOT NEGLECT THE VENDOR PREFIXES FOR CROSS-BROWSER SUPPORT---> -webkit-background-clip:text; background-clip:text; <!---THIS IS YOUR GRADIENT; IT MUST BE BACKGROUND-IMAGE AND YOU SHOULD NOT NEGLECT THE VENDOR PREFIXES FOR CROSS-BROWSER SUPPORT---> background-image:-moz-linear-gradient(left, #a90329 0%, #d604ba 50%, #6500ea 100%); background-image:-webkit-linear-gradient(left, #a90329 0%,#d604ba 50%,#6500ea 100%); background-image:linear-gradient(to right, #a90329 0%,#d604ba 50%,#6500ea 100%);
"> A Simple Example Title </div>
Using the above code with the same font specs and gradient gives you this:
A Simple Example Title

That's all there is to it! You could even use this clip text method to replace journal entry titles in your layout CSS!* And I didn't have to wrap a single letter inside of a span or font tag to define its color! I don't wanna know how long this would take with the alternative.

This isn't really a tutorial on how to make gradients, so I recommend just finding the gradient generator that works for you! I usually use Colorzilla. Just make sure you stick to this format:
background-image:MOZGRADIENT; background-image:WEBKITGRADIENT; background-image:DEFAULTGRADIENT;
*Please note that this method does restrict you from using text-shadow in conjunction with it due to the color:transparent; declaration. There is a workaround using :after in your layout's CSS, but I won't get into that unless someone asks for it in the comments.

We did it! Now for some examples.

I've got two entry codes and an example for layout elements below--you honestly can use this for any text, so go nuts! Feel free to use these codes on your journals if you like any of my examples; credit's already in place! ♥

Character Name
CONTACT / ABOUT / VISUALS / PLAYLIST / ©
VIEW CODE
<lj-raw><div style="margin:0 auto;width:385px;text-align:center;font-family:helvetica,arial,sans-serif;font-size:9px;letter-spacing:2px;display:flex;align-items:center;">

<img src="USERPIC" style="width:60px;height:60px;border-radius:100px;padding:3px;background:#fff;box-shadow:1px 1px 2px 0 rgba(0,0,0,0.3);margin-right:15px;">

<div style="width:300px;"><div style="font-family:arial black,gadget,sans-serif;font-size:25px;text-transform:uppercase;letter-spacing:1px;color:transparent;-webkit-background-clip:text;background-clip:text;

background-image:-moz-linear-gradient(left, #a90329 0%, #d604ba 50%, #6500ea 100%);background-image:-webkit-linear-gradient(left, #a90329 0%,#d604ba 50%,#6500ea 100%);background-image:linear-gradient(to right, #a90329 0%,#d604ba 50%,#6500ea 100%);

">Character Name</div>

<a href="" style="color:#000;text-decoration:none;">CONTACT</a> / 
<a href="" style="color:#000;text-decoration:none;">ABOUT</a> / 
<a href="" style="color:#000;text-decoration:none;">VISUALS</a> / 
<a href="" style="color:#000;text-decoration:none;">PLAYLIST</a> / 
<a href="http://tessisamess.insanejournal.com/" style="color:#000;text-decoration:none;">&copy;</a>

</div></div></lj-raw>
Character Name
CONTACT / ABOUT / VISUALS / PLAYLIST / ©
VIEW CODE
<lj-raw><div style="width:300px;margin:0 auto;font-family:helvetica,arial,sans-serif;font-size:9px;letter-spacing:2px;text-align:center;">

<img src="USERPIC1" style="width:30px;height:30px;border-radius:100px;padding:3px;background:#fff;box-shadow:1px 1px 2px 0 rgba(0,0,0,0.3);">

<img src="USERPIC2" style="width:30px;height:30px;border-radius:100px;padding:3px;background:#fff;box-shadow:1px 1px 2px 0 rgba(0,0,0,0.3);">

<img src="USERPIC3" style="width:30px;height:30px;border-radius:100px;padding:3px;background:#fff;box-shadow:1px 1px 2px 0 rgba(0,0,0,0.3);">

<img src="USERPIC4" style="width:30px;height:30px;border-radius:100px;padding:3px;background:#fff;box-shadow:1px 1px 2px 0 rgba(0,0,0,0.3);">

<div style="font-family:arial black,gadget,sans-serif;font-size:27px;text-transform:uppercase;letter-spacing:1px;color:transparent;-webkit-background-clip:text;background-clip:text;

background-image:-moz-linear-gradient(left, #d8343f 0%, #300008 100%);background-image:-webkit-linear-gradient(left, #d8343f 0%, #300008 100%);background-image:linear-gradient(to right, #d8343f 0%,#300008 100%);

">Character Name</div>

<a href="" style="color:#000;text-decoration:none;">CONTACT</a> / 
<a href="" style="color:#000;text-decoration:none;">ABOUT</a> / 
<a href="" style="color:#000;text-decoration:none;">VISUALS</a> / 
<a href="" style="color:#000;text-decoration:none;">PLAYLIST</a> / 
<a href="http://tessisamess.insanejournal.com/" style="color:#000;text-decoration:none;">&copy;</a>

</div></lj-raw>
PRETEND THIS IS A JOURNAL ENTRY
Donec rutrum vel magna sit amet pretium. Mauris non viverra ipsum. Quisque malesuada enim ac elit vulputate euismod sit amet sit amet arcu. Phasellus volutpat odio sapien. Quisque in hendrerit dolor. Aenean et nulla et elit elementum pulvinar. Donec vitae magna eget augue fermentum fermentum. Nulla ornare urna eget sapien vestibulum, quis lacinia metus tempus. Nulla consequat convallis nibh, eu eleifend arcu. Curabitur sit amet blandit leo, eget luctus tortor. Mauris vitae euismod lectus. Pellentesque a magna porta, tristique orci id, pharetra massa. Cras ac nisi tellus. Sed laoreet lectus tempus quam fringilla, nec pretium mi volutpat. Donec malesuada bibendum euismod. Aenean mollis quam vel lorem fermentum.
VIEW CSS This coding is for layout examples, so I've left some stuff blank so you can take the CSS and input it into whatever classname is available in your layout type (usually Generator or Complete Style.)

.ENTRYTITLECLASSNAME{
font-family:arial black,gadget,sans-serif; font-size:22px; text-transform:uppercase; color:transparent; -webkit-background-clip:text; background-clip:text; background-image:-moz-linear-gradient(left, #ff3f3f 0%, #ffbf3f 25%, #cfff3f 50%, #49ff3f 75%, #00f6ff 100%); background-image:-webkit-linear-gradient(left, #ff3f3f 0%, #ffbf3f 25%, #cfff3f 50%, #49ff3f 75%, #00f6ff 100%); background-image:linear-gradient(to right, #ff3f3f 0%,#ffbf3f 25%,#cfff3f 50%,#49ff3f 75%,#00f6ff 100%);
} .COMMENTCLASSNAME{
font-family:arial black,gadget,sans-serif; font-size:12px; text-transform:uppercase; text-align:right; color:transparent; -webkit-background-clip:text; background-clip:text; background-image:-moz-linear-gradient(left, #ff3f3f 0%, #ffbf3f 25%, #cfff3f 50%, #49ff3f 75%, #00f6ff 100%); background-image:-webkit-linear-gradient(left, #ff3f3f 0%, #ffbf3f 25%, #cfff3f 50%, #49ff3f 75%, #00f6ff 100%); background-image:linear-gradient(to right, #ff3f3f 0%,#ffbf3f 25%,#cfff3f 50%,#49ff3f 75%,#00f6ff 100%);
} .COMMENTCLASSNAME a{
color:transparent;
}


♡ You're Done! ♡

Comments

Dec. 8th, 2017 07:31 pm (UTC)
This is beautiful and so much easier than how I used to do it sob.
Dec. 11th, 2017 05:58 pm (UTC)
Awww, yay! ♥ I'M SO GLAD! :D