CODEWITHSUNDEEP
css
VdeVentura
VdeVentura

Reputation: 2101

CSS shadow effect

Does anyone knows how to achieve the following effect using CSS? (I'm referring to the shadows between each circle)

enter image description here

So far my html looks like this:

<div>
    <div class="psa-circle-container"><span class="psa-circle">12</span><br>CIUDADES</div>

    <div class="psa-circle-container"><span class="psa-circle">3</span><br>
    EQUIPOS POR CIUDAD</div>

    <div class="psa-circle-container"><span class="psa-circle">18</span><br>
    JUGADORES POR EQUIPO</div>

</div>

And this is my css:

.psa-circle {
    font-size: 35px;
    line-height: 70px;
    display: inline-block;
    width: 70px;
    height: 70px;
    background: white;
    border-radius: 50%;
    margin: 30px;
    box-shadow: inset 0 0 5px #000000;
    color: black;
}
.psa-circle-container {
    display: inline-block;
    text-align: center;
    color: white;
    padding: 20px;
    width: 180px;
    vertical-align: top;
    font-size: 18px;
    font-weight: bold;
    margin: 0 20px 20px;
    padding-top: 0;
}

Acomplishing this:

enter image description here

I have tried to use the "psa-circle-container" with an inset shadow with no success. I've tried googling shadow effects but i haven't found something like it.

Upvotes: 1

Views: 191

Answers (2)

Andrew Myers
Andrew Myers

Reputation: 2786

You can do this with box-shadow:

.psa-circle-container + .psa-circle-container:before {
  content: "";

  position: absolute;
  top: 25%;
  right: 100%;

  width: 25%;
  height: 50%;
  border-radius: 50%;

  box-shadow: 2px 0 15px 1px rgba(0,0,0,0.7);
}

.psa-circle-container + .psa-circle-container:after {
  content: "";

  position: absolute;
  width: calc(25% + 13px);
  height: 100%;

  top: 0;
  left: calc(-25% - 13px);

  /* Background color copied from example */
  background: #59bbed;
}

This creates two pseudo elements. The first one is the actual shadow. This is done via box-shadow. To make the shadow slightly round, I added a border-radius and made the element an ellipse. All the rest of the stuff in there is positioning it between the containers.

The second element is there to keep the elliptical shadow from looking like a blurry ellipse. All it does is block out part of the shadow, by covering it with the same color as the background. This may not be an ideal solution.

The snippet below shows it all together:

body {
  background: #59bbed;
}

.psa-circle {
    font-size: 35px;
    line-height: 70px;
    display: inline-block;
    width: 70px;
    height: 70px;
    background: white;
    border-radius: 50%;
    margin: 30px;
    box-shadow: inset 0 0 5px #000000;
    color: black;
}
.psa-circle-container {
    display: inline-block;
    text-align: center;
    color: white;
    padding: 20px;
    width: 180px;
    vertical-align: top;
    font-size: 18px;
    font-weight: bold;
    margin: 0 20px 20px;
    padding-top: 0;
    position: relative;
}

.psa-circle-container + .psa-circle-container:before {
  content: "";
  position: absolute;
  width: 25%;
  height: 50%;
  top: 25%;
  right: 100%;
  box-shadow: 2px 0 15px 1px rgba(0,0,0,0.7);
  border-radius: 50%;
}

.psa-circle-container + .psa-circle-container:after {
  content: "";
  position: absolute;
  width: calc(25% + 13px);
  height: 100%;
  top: 0;
  left: calc(-25% - 13px);
  background: #59bbed;
}
<div>
    <div class="psa-circle-container"><span class="psa-circle">12</span><br>CIUDADES</div>

    <div class="psa-circle-container"><span class="psa-circle">3</span><br>
    EQUIPOS POR CIUDAD</div>

    <div class="psa-circle-container"><span class="psa-circle">18</span><br>
    JUGADORES POR EQUIPO</div>

</div>

Upvotes: 5

Asons
Asons

Reputation: 87191

You can use a pseudo element, like ::before

.psa-circle {
  font-size: 35px;
  line-height: 70px;
  display: inline-block;
  width: 70px;
  height: 70px;
  background: white;
  border-radius: 50%;
  margin: 30px;
  box-shadow: 0 0 5px #000000;
  color: black;
}
.psa-circle-container {
  float: left;
  text-align: center;
  color: white;
  padding: 20px;
  width: 120px;
  vertical-align: top;
  font-size: 18px;
  font-weight: bold;
  background: steelblue;
  height: 170px;
  position: relative;
  overflow: hidden;
}
.psa-circle-container ~ .psa-circle-container::before {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  width: 40px;
  left: -45px;
  background: transparent;
  border-radius: 50%;
  box-shadow: 10px 0px 10px rgba(0,0,0,0.4);
}
<div>
  <div class="psa-circle-container"><span class="psa-circle">12</span>
    <br>CIUDADES</div>

  <div class="psa-circle-container"><span class="psa-circle">3</span>
    <br>EQUIPOS POR CIUDAD</div>

  <div class="psa-circle-container"><span class="psa-circle">18</span>
    <br>JUGADORES POR EQUIPO</div>

</div>

Upvotes: 5

Related Questions