CODEWITHSUNDEEP
css
Harshit
Harshit

Reputation: 286

How to achieve a particular shadow effect inside the circle

I want something like this but, unfortunately not able to get this shaddow effect any help would be great 

    .circle{
  width:50px;
  height:50px;
  border-radius:50%;
  background-color :yellow;
  display:flex;
  align-items:center;
  justify-content:center;
}
.inner_img{

}

I want something like this:

enter image description here

here is the attach fiddle file http://jsfiddle.net/3u0mxjqq/188/

Upvotes: 2

Views: 67

Answers (3)

fbid
fbid

Reputation: 1570

It's not possible using box-shadow rule alongside font-awesome glyphs.

You can achieve that effect using multiple text-shadow instances.

Solution (CSS3 only / working IE10+) 

.circle{
  width:50px;
  height:50px;
  border-radius:50%;
  background-color :yellow;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}


.fa-search{
  text-shadow:rgb(148, 148, 0) 1px 1px, rgb(148, 148, 0) 2px 2px, rgb(148, 148, 0) 3px 3px, rgb(148, 148, 0) 4px 4px, rgb(148, 148, 0) 5px 5px, rgb(148, 148, 0) 6px 6px, rgb(148, 148, 0) 7px 7px, rgb(148, 148, 0) 8px 8px, rgb(148, 148, 0) 9px 9px, rgb(148, 148, 0) 10px 10px, rgb(148, 148, 0) 11px 11px, rgb(148, 148, 0) 12px 12px, rgb(148, 148, 0) 13px 13px, rgb(148, 148, 0) 14px 14px, rgb(148, 148, 0) 15px 15px, rgb(148, 148, 0) 16px 16px, rgb(148, 148, 0) 17px 17px, rgb(148, 148, 0) 18px 18px, rgb(148, 148, 0) 19px 19px, rgb(148, 148, 0) 20px 20px, rgb(148, 148, 0) 21px 21px, rgb(148, 148, 0) 22px 22px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="circle">
  <i class="fa fa-search"></i>
</div>

Upvotes: 1

Pugazh
Pugazh

Reputation: 9561

I tried to replicate the same effect using text-shadow: rgb(39, 118, 152) -1px 1px. Check this fiddle

.inner_img {
  color: white;
  font-size: 22px;
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}
.icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgb(59, 175, 228);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-shadow: rgb(39, 118, 152) -1px 1px, rgb(39, 118, 152) -2px 2px, rgb(39, 118, 152) -3px 3px, rgb(39, 118, 152) -4px 4px, rgb(39, 118, 152) -5px 5px, rgb(39, 118, 152) -6px 6px, rgb(39, 118, 152) -7px 7px, rgb(39, 118, 152) -8px 8px, rgb(39, 118, 152) -9px 9px, rgb(39, 118, 152) -10px 10px, rgb(39, 118, 152) -11px 11px, rgb(39, 118, 152) -12px 12px, rgb(39, 118, 152) -13px 13px, rgb(39, 118, 152) -14px 14px, rgb(39, 118, 152) -15px 15px, rgb(39, 118, 152) -16px 16px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
  <div class="icon">
    <div class="inner_img">
      <i class="fa fa-search"></i>
    </div>
  </div>
</div>

Upvotes: 1

sbswim
sbswim

Reputation: 276

One way would be to make a div and position it exactly in the correct spot as if it were a shadow of your choice. That along with the proper z-index would make it possible to position it correctly under the image in the middle but on top of the circle. Hope this helped. If you want to make the circle glow see: http://cssdeck.com/labs/glowing-circle Also, if an image is included in the middle of the circle, the box-shadow could also work to provide a shadow of any color outside in any direction of the image.

Upvotes: -1

Related Questions