Mockupless

Opacity and shadow

The final pair of decorative properties that are explored in this section of the course are opacity and box-shadow. The first property adds transparency to a container, and the second one adds an outer shadow.

Opacity

The opacity property defines how opaque the container is on a scale from 0 to 1, where 0 is fully transparent and 1 is fully opaque:

<div style="opacity: 0.2;">0.2</div>
<div style="opacity: 0.4;">0.4</div>
<div style="opacity: 0.6;">0.6</div>
<div style="opacity: 0.8;">0.8</div>
<div style="opacity: 1;">1</div>

Shadow

The box-shadow property allows you to add an outer shadow to a container:

<div style="box-shadow: 2px 8px 15px 2px rgba(0, 24, 64, 0.12);">
  <!-- container’s content -->
</div>

box-shadow expects five values in the particular order:

  1. Horizontal offset
  2. Vertical offset
  3. Blur radius
  4. Spread radius
  5. Color

You can apply multiple shadows separated by commas, if you want to create a more realistic effect:

<div style="box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
                        0 4px 6px -2px rgba(0, 0, 0, 0.05);">
  <!-- container’s content -->
</div>

Practice

Add a shadow to the card design:

  1. Fork the starting prototype. It includes the layout and some necessary styles.
  2. Find an HTML shadow generator online. For example, you can use this one: https://cssgenerator.org/box-shadow-css-generator.html. Create a shadow and copy the box-shadow property.
  3. Apply the copied box-shadow property to the main container.
  4. Change the opacity of the subtitle, so it’s displayed half-transparent.

← Box model →