RGBA and opacity manipulation in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set a semi-transparent red background using RGBA.

SASS

$color: rgba(255, 0, 0, [1]);

Drag options to blanks, or click blank then click option'

A0.5

B1

C2

D-0.5

Attempts:

3 left

💡 Hint

Common Mistakes

Using values greater than 1 or less than 0 for alpha.

Confusing RGB values with alpha.

The alpha value in RGBA controls opacity. 0.5 means 50% transparent.

2fill in blank

medium

Complete the code to make the text color black with 30% opacity.

SASS

color: rgba(0, 0, 0, [1]);

Drag options to blanks, or click blank then click option'

A0.7

B1

C0.3

D3

Attempts:

3 left

💡 Hint

Common Mistakes

Using 0.7 instead of 0.3 for 30% opacity.

Using values outside 0 to 1 range.

Alpha 0.3 means 30% opacity, so the black text is mostly transparent.

3fill in blank

hard

Fix the error in the code to correctly set a blue background with 80% opacity.

SASS

background-color: rgba(0, 0, 255, [1]);

Drag options to blanks, or click blank then click option'

A8

B1.8

C80

D0.8

Attempts:

3 left

💡 Hint

Common Mistakes

Using 80 or 8 instead of 0.8 for opacity.

Using values greater than 1.

The alpha value must be between 0 and 1. 0.8 means 80% opacity.

4fill in blank

hard

Fill both blanks to create a semi-transparent green with 40% opacity and a border with 60% opacity.

SASS

background-color: rgba(0, [1], 0, 0.4);
border-color: rgba(0, [2], 0, 0.6);

Drag options to blanks, or click blank then click option'

A255

B128

C64

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using 0 for green channel which makes color black.

Mixing up the green values for background and border.

The green channel is 255 for full green. Using 128 for border green gives a medium green color.

5fill in blank

hard

Fill all three blanks to create a box shadow with 50% opacity black, offset 5px right and 10px down.

SASS

box-shadow: [1]px [2]px 5px rgba(0, 0, 0, [3]);

Drag options to blanks, or click blank then click option'

A5

B10

C0.5

D15

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping horizontal and vertical offsets.

Using alpha values outside 0 to 1 range.

The box shadow offset is 5px right and 10px down, with 0.5 alpha for 50% opacity black.