Question 394500 in CSS Question posted in
Some basic documentation can be found here.

Css – Background not visible behind the "whitespace" of a Unicode Character

I am using a sunburst behind a unicode character (eye, &#128065), with a CSS of:

.the-eye{
    width:100%;
    border-radius:50%;
    box-shadow: 0 0 20px 10px #eeee11;
}

HTML:

<span class="the-eye">👁</span>

However, instead of a clean yellow background behind it, I see a white circle which appears to be rendered as part of the eye graphic. Is there a way to make that white part of the unicode transparent?

eye with with background over sunburst

Verified on Chrome and Firefox.

Tags:

3

Answers


  1. 0

    from earlier comment:

    box-shadow is drown from the edge of an element. you maybe want drop-shadow and repeat it a few times instead box-shadow: filter:drop-shadow(0 0 20px #eeee11) drop-shadow(0 0 20px #eeee11) drop-shadow(0 0 20px #eeee11) drop-shadow(0 0 20px #eeee11);

    demo below:

    .the-eye {
  width: 100%;
  border-radius: 50%;
  font-size: 7em;
  color:#018af8;
  filter: drop-shadow(0 0 20px #eeee11) drop-shadow(0 0 20px #eeee11) drop-shadow(0 0 20px #eeee11) 
}

/* demo purpose */
html {
  background:#333333;
  min-height:100vh;
  display:grid;
  place-content:center;
}
    <span class="the-eye">&#128065;</span>
    Login or Signup to reply.
  2. 0

    @Paulie_D is correct: set the background-color to the same as the shadow.

    .the-eye{
    width:100%;
    border-radius:50%;
    font-size: 50pt;
    box-shadow: 0 0 20px 10px #eeee11;
    background-color: #eeee11;
}
    <span class="the-eye">&#128065;</span>
    Login or Signup to reply.
  3. 0

    To avoid the gap you just need to apply box shadow to an element with zero height and width, In this case another absolutely positioned span would do, and then set the z-index of that backdrop to -1 to fall under the icon.

    This may not be the best solution but it is a solution, especially if support for older browsers is a concern.

    span.the-eye {
  width: 100%;
  border-radius: 50%;
  position: relative;
  font-size: 50px;
}

span.the-eye .backdrop {
  position: absolute;
  width: 0;
  height: 0;
  top: 50%;
  left: 50%;
  box-shadow: 0 0 20px 24px #eeee11;
  z-index: -1;
}
    <span class="the-eye"> &#128065; <span class="backdrop"/><span/>

    [EDIT]

    This can also work with pseudo elements

    .the-eye {
  width: 100%;
  border-radius: 50%;
  position: relative;
  font-size: 50px;
}

.the-eye:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  top: 50%;
  left: 50%;
  box-shadow: 0 0 20px 24px #eeee11;
  z-index: -1;
}
    <span class="the-eye">&#128065;<span/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search