Fill Text - CSS Clipping

Let the JavaScript plugin do the work for you or get into the CSS playground
P.S. It is a pure CSS effect.

Installation

<script src="jquery.js"></script>
<script src="fillText.js"></script>
<script>
 $(function(){
     $(".fill-text").fillText({
       color: "black",
       text_bg: "#ccc",
       duration: "2s",
     });
 });
</script>
...

<div data-sample="Fill_Text" class="element"></div>

Options

With default values:

color : "#ccc",
text_bg : "black",
fill_value : 7,
duration : "2s"

CSS Playground

-webkit-background-clip is a powerful css property still under experiments. I was going through various usecases when this effect struck me. It can be used as a light-weight css-only loader, a cool text effect or in my case to show skillset efficiency.
Let's start with the basic HTML structure required.

Attention: Some of the techniques we’ll be using are experimental and might not work in older browsers.


The Markup

We'll be using data-attribute to provide dynamic value of the content to the CSS selectors.

<div data-sample="Fill_Text" class="fill-text"></div>

The CSS

We will be creating two layers, one containing the base color of the text and other to achieve the fill effect.
Let's give the basic styling to the text.

.fill-text {
  font-size:4.5em;        /* set accordingly */
  font-weight:700;
  position:relative;      /* this is important to give scope to the ::after content */
  display:inline-block;   /* this will confine the width of the content */
  color:#ccc;             /* base text color */
}

Clipping the background to text

The ::before will contain the base color text layer.
attr(data-sample) will fetch the content of the data-attribute used in the HTML markup. This way, our text will stay dynamic in CSS.

.fill-text::before {
  content:attr(data-sample);
}

The ::after is where the top layer will reside. Set the background color to the desired fill color and -webkit-background-clip:text will clip the background to take the shape of text. The width of the background will give the value to the effect.

Note: -webkit-text-fill-color:transparent is important to clear the fill color of the text and make it transparent for the background to fill.

.fill-text::after {
  content:attr(data-sample);  /* get content from HTML */
  position:absolute;          /* to overlap the base text */
  top:0;
  left:0;
  width:60%;            /* this sets the width of the fill color */
  background:black;       /* Set the color to desired fill color */
  height:100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Now, lets give life to the effect

The animation

I hope you'll agree motion does more work than static content. For the basics, we will simply change the width of the background from 0 to 60% . However, a variety of animations can be added.

@keyframes fill {
  from {
    width: 0;
  }
  to {
    width:60%;
}

Now add the animation fill to the original ::after

.fill-text::after {
  animation-name:fill;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-direction: alternate;      /* this will reverse the direction after one loop */
}

That's it from my side! Now its your time to make the internet awesome 😎