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

January 2021

S M T W T F S
     12
3456789
10111213141516
17181920212223
24252627282930
31      

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

How to use CSS gradients




Let's talk CSS gradients!

Hey guys! In this tutorial, I'll be teaching you all about the CSS gradient spec and what you can do with it based on the things I've found myself using it for over the years. There's a lot going on in this tutorial already, so I'll keep this intro short. Let's get to it! 💖

Notes:

  • I'll be using color names rather than HEX color codes for this tutorial, just to make the gradient patterns easy to read. You can use HEX (or RGBA!) and I typically do when writing CSS for real layouts and codes.

  • Repeating gradients are only touched on briefly in the Gradient Patterns sections due to anticipating people only wanting it for specific uses, which I've explained in that section, but I've also included links to further reading in that section.

  • Don't want your gradient to scroll with the page? You can give it a fixed attachment by adding fixed to the end of the gradient! Example: background:linear-gradient(to top,black,pink)fixed; will keep your gradient in place.

    Gradients 101

    Linear gradients

    Linear gradients are the ones you probably see more often in layouts; they go from one specified side or corner to the opposite in a straight line. You have eight positioning options, but you also have a ninth option of specifying your own degree increment (negative degrees are allowed.)

    background: linear-gradient(to top, black, pink);
    background: linear-gradient(to top left, black, pink);
    background: linear-gradient(to left, black, pink);
    background: linear-gradient(to bottom left, black, pink);
    background: linear-gradient(to bottom, black, pink);
    background: linear-gradient(to bottom right, black, pink);
    background: linear-gradient(to right, black, pink);
    background: linear-gradient(to top right, black, pink);
    background: linear-gradient(45deg, black, pink);


    Radial gradients

    Rather than the gradient beginning from a specified side or corner, a radial gradient will fade out from its center. You have six positioning options, four of which give you measurement options (these do not have to be percentages.) You can add measurements to ellipse and circle as well if you want a defined area to restrain the gradient spread to.

    background: radial-gradient(ellipse, black, pink);
    background: radial-gradient(circle, black, pink);
    background: radial-gradient(closest-side at 20% 20%, black, pink);
    background: radial-gradient(closest-corner at 20% 20%, black, pink);
    background: radial-gradient(farthest-side at 20% 20%, black, pink);
    background: radial-gradient(farthest-corner at 20% 20%, black, pink);


    Can I use more colors?

    Of course! Use as many colors as you like if you want more control over the color change of your gradient. You can also use transparent as a color if you want it to fade from a color to transparent to show something behind it. I use linear-gradient(to bottom,rgba(255,255,255,0.5)transparent); often so that you can get a subtle monochrome gradient layered on top of a solid background.

    background: linear-gradient(to bottom, lightsalmon, hotpink, plum);


    What about measurements?

    Sure thing! If you don't specify measurements, the gradient will distribute evenly between your colors. When specifying a measurement for one of your colors, you're not telling it how far to blend; you're telling it how far you want the solid color to go before spreading. So, if we set our first color to 50% it will take up half of the area before blending into the next color.

    background: linear-gradient(to bottom, black 50%, pink);


    Gradient Patterns

    Can I make patterns?

    You certainly can! You can create things like stripes and color blocking easily with CSS gradients by using specific types of measurements, along with some additional background specs.

    For color blocking, you'll want to set your first color's width, then the second color to the same width, telling the first color where to stop. This can be pixels, percentages, etc.

    background: linear-gradient(to right, black 30%, pink 30%);


    For stripes, you'll want to set your first color twice and your second color once, each with the measurement of how thick you want your first color to be. Then we use the background-size spec to set the width of the second color.

    background: linear-gradient(to right, black 1px, black 1px, pink 1px);
    background-size: 20px 100%;


    For horizontal stripes, we'll use the same method, but our background size will swap so that 100% is the width and 20px is the height instead.

    background: linear-gradient(to bottom, black 1px, black 1px, pink 1px);
    background-size: 100% 20px;


    At this point, you're probably wondering if you can make a grid, and the answer to that is also yes! We'll set our background color the standard way, and then use background-image for our gradient instead. From there, we'll combine two gradients by comma separating them to create our grid lines, and then set the background-size for how big we want the grid squares to be.

    background: pink;
    background-image: linear-gradient(to right, black 1px, transparent 1px), linear-gradient(to bottom, black 1px, transparent 1px);
    background-size: 20px 20px;


    Diagonal stripes are a bit different. You won't need to use background-size and we'll use a repeating-linear-gradient instead. The color pattern will be: starting color, where the starting color ends, where the next color begins, where the next color ends. So if you wanted 2px white stripes and 20px pink stripes, you'd have:

    background: repeating-linear-gradient(45deg, white, white 2px, pink 2px, pink 20px);


    Let's talk about using repeating-radial-gradient to create rings now. The color pattern will be the same as the last example: starting color, where the starting color ends, where the next color begins, where the next color ends. So if you wanted 10px white rings and 80px pink rings, you'd have:

    background: repeating-radial-gradient(circle, white, white 10px, pink 10px, pink 80px);


    You can read more about repeating-linear-gradient here and repeating-radial-gradient here since I've chosen not to go into extensive detail in this guide.

    Combining gradients & images

    How to use a CSS gradient with an image

    Sometimes in a layout you want both a gradient and a transparent pattern or image! A lot of times I see people having trouble figuring out how to do that. The solution isn't immediately obvious, but don't worry; it's not hard! The issue comes in when you try to use both in the same area of styling, like putting both into body, which is where a lot of people try first. It makes sense! However, they're conflicting styles for the same spec, background, so whichever comes second is the one that will take effect. If you want to combine them, you'll have to do something a little different instead.

    First, you'll put your gradient in so that it renders as the parent (or bottom) element. This needs to be in something that comes before the <body> tag in the HTML. What comes before that? Well... the <html> tag, actually! That's pretty much it for style-able HTML tags before the opening <body> tag.

    html{ /* your gradient */ }
    Next, we'll want to add a small precaution so that on pages that don't have enough content to reach the bottom of the page, the gradient image doesn't cut short. To do this, we'll give html a minimum height of 100% of the viewport height—but not 100% itself, because that will give us unwanted page scrolling on pages that don't need it.

    html{ /* your gradient */ min-height:100vh;}
    Finally, we'll add our background image to body as usual, but make sure there's no background color with it or you won't see the gradient!

    body{background:url(IMG_URL)center fixed;}

    html{background: linear-gradient(to bottom, black, pink); min-height: 100vh;}
    body{background: url(https://i.imgur.com/ig8nUnB.png) center fixed;}


    As I mentioned above, sometimes I layer a transparent gradient with a solid background. If you want to do this, you'll use this same method of doubling up, but you'll add your gradient to body and a solid background color to html instead.

    But wait, do you have a mystery gap?

    On a final note, sometimes you'll have a weird gap at the top and bottom of your page displaying the gradient, but the image cuts off. No problem! This happens when there's a margin setting your inner page content away from the top of the page, but this is also easy to fix. Put the following example of this issue into Ye Olde code tester and try changing margin:50px; to padding:50px; instead!



    In the demo example I've used the two Complete Style ID names and styling you're most likely to run into if using these CSS styles with one of my layouts, but other layouts (and some of my own) may vary! For instance, you may find the margin in #container instead.


    ♡ You're Done! ♡

  • Using on DW?

    Comments

    From:
    ( )Anonymous- this user has disabled anonymous posting.
    ( )OpenID
    Username:
    Password:
    Don't have an account? Create one now.
    Subject:
    No HTML allowed in subject
      
    Message:
     
    Notice! This user has turned on the option that logs your IP address when posting.