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!
×

May 2019

S M T W T F S
   1234
567891011
12131415161718
19202122232425
262728293031 

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 Create Text Effects

FANCY
Text Effects
Cheat Sheet


Gradients, & image fills, & outlines—Oh my!

Extra slick text effects without relying on image editing programs are easier than you might think! I've put together some demos for effects you might have wished you could do without having to create images, what to do to make them, and how they work. If you have an other types of text effects not shown here that you're curious about, ask away in the comments! If they can be done with CSS I'll add them to the cheat sheet for you guys!

Where is this cheat sheet? Follow the link below for the full demo and tutorial! Since this revolves all around fonts I thought I'd really be dropping the ball here if I didn't import as many Google fonts as I could to showcase what I'm showing you how to do on this one, so I figured an HTML page of its own would be best in this case.

Is this tutorial only for layouts? NOPE. All demos available can be used to style your text in entries too. I have more info at the end of the tutorial page!

Are all of these styles completely cross-browser compatible? Most of them don't work in IE as far as I know, but they're all supported in Chrome/Firefox/Opera/Safari, so I'm fine with that level of support haha.


To the Cheat Sheet!

Comments

Dec. 18th, 2018 12:44 am (UTC)
OMG SHUT THE FRONT DOOR. THIS IS SO FREAKING AWESOME!!!
Dec. 18th, 2018 12:49 am (UTC)
RRRIGHT? I kept meaning to get a collection like this up, I'm so stoked it's ready & posted now!
Dec. 18th, 2018 02:12 am (UTC)
Hey there!

I feel like I'm missing something with the Entry Code Example. What should I be subbing in for "your text styling here"?

Sorry if this is a silly question -- I'm usually one of those people who can figure out things with enough trial-and-error, but this time I'm flummoxed.

Thanks again for all you do! :)
Dec. 18th, 2018 02:21 am (UTC)
Okay, so!

If you had it in mind to use something from this in a layout (like for your header title), you'd put the styling in the layout's CSS. For example, the demo for the image fill text is:

CSS
.image{font-family:Bungee Inline,arial black,gadget,sans-serif;font-size:80px;background:url(URL)center;background-size:cover;-webkit-background-clip:text;-webkit-text-fill-color:transparent;}

HTML
<div class="ex image">
Image Text
</div>


But! If you wanted to use it in an entry code where the coding would stay the same when you're on entry view and not just the journal view, you'd do it this way instead:

<div style="font-family:Bungee Inline,arial black,gadget,sans-serif;font-size:80px;background:url(URL)center;background-size:cover;-webkit-background-clip:text;-webkit-text-fill-color:transparent;">
Image Text
</div>
Dec. 18th, 2018 02:36 am (UTC)
omg, THANK YOU. I've figured it out. I'm going to keep playing with the shadows now, but GAHKFJBksabg THANK YOU. I'm so excited to fool around with this!

I have no idea why neither DW nor IJ seem to want to play nice with Bungee Inline. I'm totally in love with this font, but all it wants to do in the preview is show me regular ol' Arial.

THANK YOU AGAIN.
Dec. 18th, 2018 02:38 am (UTC)
YW! I HOPE YOU HAVE FUN!!

HUH, that's super weird; I can see it on the IJ demo page without issue. What are your specs? (Or do you mean you've tried using it in a layout before and it hasn't worked? I have THAT issue with Cookie on Google fonts when I put it into layouts and only Cookie. It's so WEIRD.)
Dec. 18th, 2018 02:50 am (UTC)
I don't know, it's heckin' bizarre. Here's what my test looks like on IJ and it's identical on DW. Yours shows up fine for me when I look at the cheat sheet, too. I did some tweaking to the code (mostly just adjusting sizes) -- nothing that would really impact the font face itself.

I'll just chalk it up to being one of Earth's great mysteries.

Dec. 18th, 2018 02:55 am (UTC)
AH, I see what the issue is! You'll need to add the font to your layout header:

This:
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed|Gugi" rel="stylesheet">

Becomes this:
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed|Gugi|Bungee+Inline" rel="stylesheet">

Or in cases of s2 layouts where you don't have control over your HTML header you'd go to that URL and grab the latin CSS import for the font:

/* latin */
@font-face {
font-family: 'Bungee Inline';
font-style: normal;
font-weight: 400;
src: local('Bungee Inline'), local('BungeeInline-Regular'), url(https://fonts.gstatic.com/s/bungeeinline/v3/Gg8zN58UcgnlCweMrih332VuPGV_-Q.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
Dec. 18th, 2018 03:09 am (UTC)
First off, bought you a Ko-Fi as thanks for helping me out tonight. Seriously, thank you!

Made those changes on S1 with my IJ layout and S2 with my DW layout. Looks fine on the main journal page, but as soon as you click into the journal entry, it's back to Arial. If I can remember how to toggle the comment pages so they use my layout, I think that'll fix that problem. :)

ANYWAYS thank you so much again!