CSS Tidbits!

Little CSS bits that I didn't learn from W3schools. More to be added!

The following demos assume you know some basic CSS, like making class attributes. If you're not quite there yet, I highly recommend W3schools!

Scaling up Pixel Art

blurry small pixel art bunny crisp small pixel art bunny blurry scaled up pixel art bunny cripst scaled up pixel art bunny

I want to double the size this bunny pixel art so the pixels are more visable, but simply doubling the width results in a blurry image. Luckily only one additional css property is needed: image-rendering: pixelated.

.example {
  width: 64px;
  image-rendering: pixelated;}

I would hesitate to use this on unscaled pixel art however, as the pixels distort on firefox.

two screenshots of the same set of blinkies

On the left are pixels without pixelated rendering, on the right the pixels have pixelated rendering. Pixelated rendering for unscaled images looks fine on google chrome, but on firefox it tends to produce jagged pixels, particularly noticable in lettering and line art (take a look at the glass border on the last bottle, it looks a lot less jagged unpixelated). Thus pixelated rendering is mostly useful for pixel art that has been resized 2X 3X 4X etc.

Text on Background Lines

How to make text fall on lines of a background image (ex. notebook paper). This takes a little trouble shooting with dimensions, but revolves around one key property: line-height

.example {
  background-image: url(https://solaria.neocities.org/recipes/linetile.png);
  background-size: 20px; 
  line-height: 18.5px;}

I tried making lines under each line of text using bottom-border and text-decoration: underline but was unsucessful. Luckily a small background image file works just fine

ivory background with thin black line at the bottom, repeats to make a lined background for the next four paragraphs

Since the dimensions are small, this file naturally tiles to make evenly spaced lines. Now it makes wider spaces than I wanted, so I resized it to 20px, but you could also crop some of the blank space out of the file to make the tile shorter

I base line-height off of the height of the background image (before it is tiled). I then adjust it by trial and error, making it shorter if the text starts to run below the line, or making it longer if the text starts floating higher above the line

interestingly enough, font-size does not matter, as long as it is not bigger than the line-height

sometimes making the line-height and vertical paragraph margin the same height as the untiled background works, but not always

How to give text a gradient

Without manually making each letter a different color

If you're like me you've wanted to make text with a rainbow gradient, but the only way you knew how was to put each letter in a span element and style each letter with a different color. This is extremely messy and inconvienent, especially if you want to change the text but keep the gradient. Thankfully the solution is not complex at all. You just need to style one element with three different properties (and if you make a class you can make any element have the same text gradient by giving it that class)

.rainbowtext {
  background-image: linear-gradient(to right, #e91e63, #ffc107, #009688, #673ab7, #e91e63);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;}

There are three key components to how this class is styled:

Blocks vs Inline

Here's a gradient I use on my homepage! The gradient will span the entire length of the element. As such, block elements like paragraphs and divs will have the gradient span the whole line, regardless of the amount of text.

Inline elements on the otherhand, will display the whole gradient according to the length of the text.

Note that a short amount of text in a block element will not show the whole gradient if the text ends before the line
If you want a block element to display the gradient all throughout the text, rather than extending the whole line, style the element with display: inline-block;

default block paragraph example

inline-block paragraph example

Looping animated background

I figured this one out through trial and error working on the background for this page!

If your background image tiles seamlessly, this should work well ^^

@keyframes background {
    0% {
      background-position: 0px 0px;}
    100% {
      background-position: 307px 133px;}}

An animation is defined with two frames ("background" is what I named the animation)

body {
      animation: background 12s infinite linear;}

The animation property is added to the desired element (the body in my case). you of course will also need to have the background image for this element (not shown here)