4

I would like to display a specific CSS presentation that I'm trying to achieve : a completion bar indicator with a two-tone font coloring.

The goal is to display something like this : http://jsfiddle.net/ddz86cr3/ But this one is ajusted by pixels borders.

I used the question Two-tone font coloring in CSS? to create something approaching :

HTML

<div>
    <span id="span1">15%</span>
    <span id="span2">15%</span>
    &nbsp;
</div>

CSS

div {
    position: relative;   
    color: green;
    font-size: 50px;
    font-family: Georgia;
    width: 500px;
    border: 1px solid green;
}
div span#span1 {
    display: inline-block
    height: 100%; 
    width: 100%;
    position: absolute;
    color: green;
    background-color: white;
    overflow: hidden;  
    text-align: center;
}
div span#span2 {
    display: inline-block
    height: 100%; 
    width: 15%;
    border-left: 200px solid green;
    position: absolute;
    color: white;
    background-color: green;
    overflow: hidden;   
}

See example : http://jsfiddle.net/va3whf86/

This one works great and is very close to what I want, except it's not center.

SOLUTION

I used modified version of the solution from Midas in the question Is there any way to change the color of text "halfway" through a character on a webpage? My version is without javascript and with real colors.

Here is the code : http://jsfiddle.net/ytt2r2sa/

HTML

<span class="progressbar">
    <span>50%</span>
    <strong style="width: 50%;">
        <em>50%</em>
    </strong>
</span>

CSS

.progressbar, .progressbar strong {
    display:block;
    height:1.2em
}
.progressbar, .progressbar em {
    width:10em
}
.progressbar strong, .progressbar em {
    position:absolute;
    top:0;
    left:0
}
.progressbar {
    color:green;
    background:window;
    border:1px solid green;
    text-align:center;
    position:relative
}
.progressbar strong {
    background:green;
    width:0;
    font-weight:normal;
    overflow:hidden
}
.progressbar em {
    color:white;
    font-style:normal
}
Community
  • 1
  • 1
Thibault
  • 1,566
  • 15
  • 22
  • Like this http://jsfiddle.net/j08691/k0fyj2qr/? – j08691 Jan 05 '15 at 17:58
  • 3
    Why don't you just stylize a `progress` element? – James Taylor Jan 05 '15 at 17:59
  • Listen to @JamesTaylor - http://css-tricks.com/html5-progress-element/ – Luke Jan 05 '15 at 18:05
  • 1
    possible duplicate of [Is there any way to change the color of text "halfway" through a character on a webpage?](http://stackoverflow.com/questions/6258690/is-there-any-way-to-change-the-color-of-text-halfway-through-a-character-on-a) – Oriol Jan 05 '15 at 21:22
  • @Oriol Thanks ! I used a modified version of one of the solution in that question. – Thibault Jan 06 '15 at 09:22
  • @JamesTaylor Thank you for this element I didn't know about. But it seems pretty tricky to style properly, and is not yet well supported by browsers. Too bad that would have been the perfect way. – Thibault Jan 06 '15 at 09:23

1 Answers1

1

One way is to create a DIV and place the % inside the DIV.

http://jsfiddle.net/va3whf86/9/

<div>
<span id="span1">&nbsp;</span>
<span id="span2">&nbsp;</span>
<div id="text1">15%</div>
&nbsp;
</div>

And add this CSS:

#text1 {
width: 100%;
text-align: center;
display: inline-block;
position: absolute;
}
geeves
  • 652
  • 7
  • 24
  • Sorry but it does not seem to answer the question. There is no progressbar in this solution. Although the 15% is centered. – Thibault Jan 06 '15 at 09:31