The Complete Advanced Guide to CSS/

...

/

Building Realistic CSS Effects with Box-shadow

Building Realistic CSS Effects with Box-shadow

We'll cover the following...

At the end of the last lesson, we were able to position some of the elemnts of the phone.

While that’s good stuff, the phone is far from realistic. You can’t show that off to friends yet!


Styling the Home Button and Speaker

Below is the current state of the project:


Let’s kick off with styling the home button represented by .phone-inner:after

The overall style for the home button is this:

Press + to interact
/* Home button */
.phone-inner:after{
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  bottom: -60px;
  box-shadow:  0px 1px 1px #ecf0f,
               1px 0px 1px gold;
}

I have removed the red background color. Now the background defaults to being fully transparent.

The added lines of code are highlighted above.

Can you make sense of it?


How the CSS box-shadow Property Works

The property values look weird at first, but on close look, it’s really easier than it seems.

This is what a simple box-shadow declaration looks like:

widget

Daunting, huh?


Let’s break it down.

Consider two elements represented by yellow boxes and styled with 2 different box-shadow values. The result may be seen below.

widget
...