Colors & Shadows

The Alchemy of Glow and Shade

In these lines, you’ll discover how to wield the magic of CSS to make colors and shadows so dazzling that even a seasoned mage would pause in awe. Your text will glow in the dark, while background colors swirl like mystical mists, framing your stories in radiant brilliance. And shadows? They lend depth to your boxes, making them emerge from the page with a whisper of mystery, as if sharing a secret with the reader.

But be warned: colors and shadows are like magical potions. One drop too many, and your page might resemble a chaotic experiment gone wrong, the kind of potion even the bravest wizard hesitates to touch. Design wisely, and your page will shine like a luminous star in the CSS constellation.

Let’s Keep Going

Text Color
Background Color

Text Shadow
Box Shadow

Colors & Effects

Light, shadows, contrast – bring your elements to life!

Text Color

The Artist’s Palette

Like an alchemist blending magical hues, text color breathes life into your words. A fiery red ignites passion, while a gentle green whispers the freshness of a tranquil forest into your sentences.

h1 {
    color: red;
}

color: This property assigns your text a color, transforming it into a vibrant piece of your digital masterpiece.

Background Color

The Stage for the Grand Performance

Curtains up! Background color sets the perfect scene for your text’s big debut. With a touch of CSS magic, you roll out the carpet of colors, creating a backdrop where your content can truly shine.

h1 {
    background-color: green;
}

background-color: This property assigns a background color to your text block, making it the star of the show.

Text Shadow

The Dramatic Entrance

A well-placed text shadow is like a mysterious mist swirling around your words. It adds depth and drama, making your headings pop even on the most chaotic of backgrounds.

h1 {
    text-shadow: 2px 2px 5px grey
}

text-shadow: This property is crafted from four components: horizontal and vertical offset, a blur radius, and a color – all combining to create a striking visual effect.

Box Shadow

The Magic of Levitation

With a box shadow, your element seems to hover effortlessly above the page, as if lifted by an invisible spell. A touch of shadow here, a hint of light there, and your box takes center stage, ready for its grand performance under the spotlight.

h1 {
    box-shadow: 4px 4px 9px black;
}

This box features a shadow with 4 pixels of horizontal and vertical offset, a 9-pixel blur radius, and a black shadow color – subtle yet striking, like a magician’s flourish.

In this lesson, you have learned…

How to use color to set the text color in order to highlight content and create moods.
Why background-color sets the stage for your text by enhancing contrast and improving readability.
How to use text-shadow to create dramatic effects that make text appear more three-dimensional and lively.
Why box-shadow highlights elements by visually separating them from the background and creating a sense of depth.

Here you can see the code you’ve practiced – but feel free to experiment! Try out changes, test new ideas, and see what happens. This is your space for tinkering!

The Color Magic of the Forest

When autumn transforms the trees of Greenwood Forest into a kaleidoscope of hues, it feels as though the forest is softly whispering its ancient secrets. To master this magical art, you must learn to wield colors and shadows in texts and boxes. With CSS, you can make the words of the elders shine – and perhaps even bring the shadows to life, if you do it right.

Your Task: Designing the Rune Script

Text Color (color):
- Apply an appropriate text color, such as forestgreen or darkslategray, to the heading (<h1>) and paragraphs (<p>).
Background Color (background-color):
- Add a background color, such as lightgoldenrodyellow, to the .magic-box class.
Text Shadow (text-shadow):
- Use a text shadow for the <h1> element, e.g., 2px 2px 4px rgba(0, 0, 0, 0.5) to give depth and a magical glow.
Box Shadow (box-shadow):
- Set a box shadow for the .magic-box class: 5px 5px 10px rgba(0, 0, 0, 0.3) to create a floating effect.

Open Visual Studio Code and make these words appear on the page. Or try it right here in the editor!

Open Editor in a New Tab

CSS

body {
    color: darkslategray;
}

h1 {
    color: forestgreen;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.magic-box {
    background-color: lightgoldenrodyellow;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

Let’s Keep Going