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!

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:

• a background image is defined (you can use a picture instead of a gradient if you wish)
• background-clip: text - this makes it so that the background only shows in the shape of the text
• -webkit-background-clip is used for browsers that do not support this property (such as google chrome)
• color: transparent - if the text is not transparent, its color will hide the background

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)

• background-position is the only property that is animated
  • its important to use pixel units, otherwise the animation will not be smooth
  • the direction of the animation depends on which corners are chosen as the start and end frames!

    | 0px 0px -|- Xpx 0px |
    |-----------|-----------|
    | 0px Ypx -|- Xpx Ypx |

    • ⇘ - 0px 0px → 307px 133px
    • ⇖ - 307px 133px → 0px 0px
    • ⇗ - 0px 133px → 307px 0px
    • ⇙ - 307px 0px → 0px 133px
    • ⇓ - 0px 0px → 0px 133px
    • ⇑ - 0px 133px → 0px 0px
    • ⇒ - 0px 0px → 307px 0px
    • ⇐ - 307px 0px → 0px 0px

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)

• background is what i named the animation above
• feel free to play around with the duration of one loop
• infinite makes the animation loop
• linear is important to make the animation a smooth constant speed, otherwise it would be jerky

---