0

i want to dynamically "fill" a shape with a css background-color and dont want to use images for this problem.

what i have now:

enter image description here

what i want to achieve ("filled" 50% with blue background-color):

enter image description here

my existing code is: (HTML)

    <i class="fa fa-gamepad fa-4x award_lvl1 award">
    <span>1</span>
</i>

(CSS)

    /* ==========================================================================
   General Award Styling
   ========================================================================== */
   .award{
    margin: 0;

    -webkit-border-bottom-right-radius: 50%;
-webkit-border-bottom-left-radius: 50%;
-moz-border-radius-bottomright: 50%;
-moz-border-radius-bottomleft: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;

    position: relative;
    width: 70px;
    height: 80px;
    text-align: center;
    z-index: 1;
   }
   .award > span{
    font-size: 0.2em;
    font-weight: bold;
    position: absolute;
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
    color: black;
    z-index: 2;
   }


/* ==========================================================================
   Awards Lvl1
   ========================================================================== */
   .award_lvl1{
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(left, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(50%,#f1f1f1), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* IE10+ */
    background: linear-gradient(to right, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=1 ); /* IE6-9 */

   }
2

1 Answer 1

1

Basicly, you can do this using the imbrication of your elements.

Give container and childs same border-radius and give a padding to container (or transparent border).

Draw you 50/50 gray/blue gradient in container and apply other gradient to child. DEMO

/* ==========================================================================
General Award Styling
========================================================================== */
.award > span{
  margin: 0;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;

  position: relative;
  width: 70px;
  height: 80px;
  text-align: center;
  z-index: 1;
  display:inline-block;
  font-size: 0.2em;
  font-weight: bold;
  left: 0px;
  right: 0px;
  margin-left: auto;
  margin-right: auto;
  color: black;
  z-index: 2;
}

/* ==========================================================================
Awards Lvl1
========================================================================== */
.award_lvl1 span{
background: linear-gradient(to right, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* W3C */
}
.award {
  display:inline-block;
  padding:3px;
  background:linear-gradient(to bottom,gray 50%,turquoise 50%);
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
}
2
  • ... background-clip can be an option too, but will not mind the radius effect
    – G-Cyrillus
    Jun 19, 2014 at 21:11
  • wow, didnt thought about that simple solution :D. You are a genius :D. Thanks, exactly what i was looking for!
    – Mafu
    Jun 19, 2014 at 21:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.