CSS Tutorial 9: Visual Effects & Variables

Lesson 9 Review

In our last lesson, we learned how to use Advanced Selectors and generate virtual content using Pseudo-elements. Today, we focus on the aesthetic presentation layer and how to write DRY (Don't Repeat Yourself) code using CSS Variables.

Step 1: CSS Variables (Custom Properties)

Imagine you are building a massive website, and you use your brand's primary color (#4C8BF5) on 50 different buttons, headings, and borders. If your boss asks you to change the brand color to purple, you would have to find and replace that hex code 50 times.

CSS Variables solve this. You declare a value once at the top of your file, give it a custom name, and reference that name everywhere else.

Subtopic 1.1: Declaring and Using Variables

We usually declare variables inside the :root pseudo-class. This attaches the variables to the highest level of the HTML document, making them accessible globally.

• A variable must start with two dashes: --variable-name.
• To use the variable, you wrap its name in the var() function.

The CSS:

/* 1. Declare variables at the root level */
:root {
  --primary-color: #4C8BF5;
  --danger-color: #e74c3c;
  --main-padding: 20px;
}

/* 2. Use the var() function to apply them */
.save-button {
  background-color: var(--primary-color);
  padding: var(--main-padding);
}

.delete-button {
  background-color: var(--danger-color);
  padding: var(--main-padding);
}

The Output:

Step 2: Shadows (Adding Depth)

Modern web design relies heavily on flat design with subtle shadows to create the illusion of depth (often called "Card Design" or "Material Design"). We use two properties: box-shadow for containers and text-shadow for typography.

Subtopic 2.1: The Box Shadow Mechanics

The box-shadow property accepts up to 5 values in a very specific order:

1. X-Offset: Horizontal distance (positive moves right, negative moves left).
2. Y-Offset: Vertical distance (positive moves down, negative moves up).
3. Blur Radius: How soft the shadow is (higher is softer/wider).
4. Spread Radius (Optional): How much the shadow expands or contracts.
5. Color: Usually an RGBA value so the shadow is semi-transparent.

The CSS: Floating Card Effect

.floating-card {
  background-color: white;
  padding: 30px;
  border-radius: 8px;
  /* X=0, Y=10px, Blur=20px, Color=Black at 15% opacity */
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15);
}

The Output:

I look like I am floating above the page!

Subtopic 2.2: Text Shadow

text-shadow works exactly the same way, but it does not accept a "Spread Radius". It is strictly X, Y, Blur, and Color.

The CSS: Neon Glow Text

.neon-text {
  color: white;
  /* X=0, Y=0, Blur=15px, Color=Cyan */
  text-shadow: 0px 0px 15px #00ffff;
}

The Output:

CYAN GLOW

Step 3: Background Gradients

Gradients allow you to smoothly transition between two or more colors. The browser actually renders gradients as background images, not solid colors, which is why we use the background-image or background shorthand property.

Subtopic 3.1: Linear Gradients

A linear gradient flows in a straight line. You must define a direction (or angle) and at least two color stops.

The CSS: Directional and Angled Gradients

.gradient-right {
  background: linear-gradient(to right, #4C8BF5, #8e44ad);
}

.gradient-angled {
  /* 45 degrees, starting red, ending orange */
  background: linear-gradient(45deg, #e74c3c, #f1c40f);
}

The Output:

To Right

45 Degrees

Step 4: The Math Function: calc()

One of the most powerful tools in CSS is the calc() function. It allows you to perform basic math (addition, subtraction, multiplication, division) directly inside your CSS rules.

Its superpower is mixing units. For example, what if you want a box to be 100% of the screen width, MINUS exactly 50 pixels to leave room for a fixed sidebar?

Syntax Warning: When using calc(), you MUST put spaces around the plus and minus operators. calc(100%-50px) is invalid and will fail. It must be calc(100% - 50px).

The HTML & CSS: Mixing Percentages and Pixels

<!-- HTML -->
<div class="layout-wrapper">
  <div class="sidebar">Fixed 200px</div>
  <div class="main-content">Fluid (100% - 200px)</div>
</div>

/* CSS */
.layout-wrapper { display: flex; }

.sidebar {
  width: 200px;
  background-color: #34495e;
}

.main-content {
  /* Calculates width dynamically as the browser resizes! */
  width: calc(100% - 200px);
  background-color: #ecf0f1;
}

The Output:

Fixed 200px

Fluid Width (calc)

Final Quiz: Test Your Visual & Mathematical Logic

Click the buttons below to verify your knowledge.

1. What is the correct syntax to declare a CSS Custom Property (Variable) in the `:root` selector?

A) $main-color: blue;

Incorrect. The dollar sign syntax is used in CSS preprocessors like SASS, not native CSS.

B) --main-color: blue;

Correct! Native CSS variables must begin with two dashes (`--`). You then recall them using `var(--main-color)`.

C) var main-color = blue;

Incorrect. That looks like JavaScript syntax.

2. In the rule `box-shadow: 2px 5px 10px rgba(0,0,0,0.5);`, what does the `10px` represent?

A) The X-Offset (horizontal shift).

Incorrect. The X-Offset is the first value (`2px`).

B) The Spread Radius (how far the shadow stretches).

Incorrect. Spread is the optional 4th value, which is omitted in this example.

C) The Blur Radius (how soft the shadow edge is).

Correct! The order is X-Offset, Y-Offset, Blur Radius. `10px` creates a nice, soft fade on the shadow.

3. Why will the rule `width: calc(100%-20px);` fail to work?

A) You cannot mix percentages and pixels in CSS.

Incorrect. Mixing units is the exact reason the `calc()` function exists!

B) It is missing spaces around the minus sign.

Correct! In CSS math, `100%-20px` is parsed as an invalid single string. It MUST be written as `calc(100% - 20px)` so the browser recognizes the mathematical operator.

C) You cannot use subtraction in `calc()`, only addition.

Incorrect. You can use addition, subtraction, multiplication, and division.