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.

Practice

1. What does the rgba(255, 0, 0, 0.5) color value represent in Sass?

easy

A. A semi-transparent red color

B. A fully opaque blue color

C. A transparent green color

D. A solid black color

Solution

1. Step 1: Understand RGBA components

   The first three numbers (255, 0, 0) represent red, green, and blue. Here, red is full (255), green and blue are zero.

2. Step 2: Interpret the alpha value

   The last number (0.5) is the alpha channel, which controls transparency. 0.5 means 50% transparent.

3. Final Answer:

   A semi-transparent red color -> Option A

4. Quick Check:

   RGBA = red + transparency [OK]

Hint: RGBA's last value controls transparency from 0 to 1 [OK]

Common Mistakes:

• Confusing alpha with opacity property
• Mixing up RGB values order
• Thinking 0.5 means fully opaque

2. Which of the following is the correct Sass syntax to set a background color with 30% opacity using RGBA?

easy

A. background-color: rgba(0, 0, 255, 3);

B. background-color: rgba(0, 0, 255, 0.3);

C. background-color: rgba(0, 0, 255, 30);

D. background-color: rgba(0, 0, 255, '0.3');

Solution

1. Step 1: Check alpha value range

   Alpha must be a decimal between 0 and 1. 0.3 means 30% opacity.

2. Step 2: Validate syntax correctness

   Values must be numbers without quotes. So rgba(0, 0, 255, 0.3) is correct.

3. Final Answer:

   background-color: rgba(0, 0, 255, 0.3); -> Option B

4. Quick Check:

   Alpha decimal between 0 and 1 [OK]

Hint: Alpha must be decimal 0-1 without quotes [OK]

Common Mistakes:

• Using alpha values greater than 1
• Putting alpha in quotes
• Confusing percentage with decimal

3. Given the Sass code:

.box { background-color: rgba(100, 150, 200, 0.4); opacity: 0.5; }

What is the effective transparency of the box's background color?

medium

A. 20% opacity

B. 50% opacity

C. 70% opacity

D. 90% opacity

Solution

1. Step 1: Understand RGBA alpha and opacity interaction

   The background color has 0.4 alpha (40% opacity). The element's opacity is 0.5 (50%).

2. Step 2: Calculate combined opacity

   Effective opacity = 0.4 * 0.5 = 0.2 (20% opacity).

3. Final Answer:

   20% opacity -> Option A

4. Quick Check:

   Multiply alpha and opacity for final transparency [OK]

Hint: Multiply RGBA alpha by opacity for total transparency [OK]

Common Mistakes:

• Ignoring opacity property effect
• Adding alpha and opacity instead of multiplying
• Assuming opacity overrides RGBA alpha

4. Identify the error in this Sass code snippet:

.alert { background-color: rgba(255, 255, 0, 50%); }

medium

A. Opacity property is required for transparency

B. RGB values must be between 0 and 100

C. Missing semicolon after rgba function

D. Alpha value should be a decimal between 0 and 1, not a percentage

Solution

1. Step 1: Check alpha value format

   The alpha channel in rgba() must be a decimal number between 0 and 1, not a percentage.

2. Step 2: Confirm RGB value ranges and syntax

   RGB values 255, 255, 0 are valid. Semicolon is present. Opacity property is optional.

3. Final Answer:

   Alpha value should be a decimal between 0 and 1, not a percentage -> Option D

4. Quick Check:

   Alpha decimal, not percent [OK]

Hint: Alpha uses decimals, never percentages in rgba() [OK]

Common Mistakes:

• Using percentages for alpha
• Confusing opacity property with alpha
• Assuming missing semicolon causes error

5. You want a button with a blue background that is 60% opaque but also want the text inside fully opaque. Which Sass approach achieves this?

hard

A. Set background-color: rgba(0, 0, 255, 0.6); and opacity: 0.6 on the button

B. Set background-color: blue; and opacity: 0.6 on the button

C. Set background-color: rgba(0, 0, 255, 0.6); and opacity: 1 on the button

D. Set background-color: blue; and opacity: 1 on the button

Solution

1. Step 1: Understand opacity effect on children

   Setting opacity on the button affects the entire element including text, making text semi-transparent.

2. Step 2: Use RGBA for background transparency only

   Using rgba with alpha controls only background transparency, leaving text fully opaque.

3. Final Answer:

   Set background-color: rgba(0, 0, 255, 0.6); and opacity: 1 on the button -> Option C

4. Quick Check:

   Use RGBA alpha for background transparency, not opacity property [OK]

Hint: Use RGBA alpha for background transparency, avoid opacity on container [OK]

Common Mistakes:

• Using opacity on container affecting text
• Confusing opacity and RGBA alpha
• Setting opacity less than 1 on button