SLANTED ENERGY BARS !! Need Advise,.. !

[jedigunz]

So,. i saw the new COD ghosts,. and noticed the slanted bars and had the idea to implement the slanted bar idea into my game,.. now im having a few problems,.

I've found a way to SKEW an IMAGE using CSS,. But I'm experiencing problems,. wondered if anyone could help ???

Style:

 

.skew {
 -webkit-backface-visibility: hidden;
 -webkit-transform: skew(35deg, 0);
 overflow:hidden;

}

.skew img {
 -webkit-transform: skew(-35deg, 0);
}

 

Script:

 

<b>Energy:</b> {$enperc}%
<div class=skew><img src=baryellow.jpg width=$enperc height=7></div>
<div class=skew><img src=bargray.jpg width=$enopp height=7></div><br />

 

which resulted in this happening:

[ATTACH=CONFIG]1126[/ATTACH]

Ive tried this with 1 div covering the whole thing,. 1 div just the images,. seperate divs,. the image wont slant

any ideas that could help ??

Edited August 17, 2013 by jedigunz

[KyleMassacre]

what browser are you in chrome or safari? Because what you are using only works with those 2 browsers. I got a real crappy version to work just by copy and pasting it in the try it now of that method in w3schools.

[css]

.skew {

backface-visibility:hidden;

-webkit-backface-visibility:hidden; /* Chrome and Safari */

-moz-backface-visibility:hidden; /* Firefox */

-ms-backface-visibility:hidden; /* Internet Explorer */

transform: skew(35deg,0);

-ms-transform: skew(35,0); /* IE 9 */

-webkit-transform: skew(35deg,0); /* Safari and Chrome */

overflow: hidden;

}

.skew .img {

transform: skew(-35deg,0);

-ms-transform: skew(-35deg,0); /* IE 9 */

-webkit-transform: skew(-35deg,0); /* Safari and Chrome */

}

[/css]

The back trace doesn't work for opera FYI so no need to limit users browsers unless there is nothing you can do about it

**EDIT**

Try This

Edited August 17, 2013 by KyleMassacre

[jedigunz]

im using chrome and it works pretty much perfect,. thanks Kyle ,.

only thing is the text wont stay next to the text,. can that be solved to,. without the text being Skewed as well ??

[ATTACH=CONFIG]1127[/ATTACH]

Script relating to image::

 

<b>Energy:</b> {$enperc}%<div class=skew><img src=baryellow.jpg width=$enperc height=7><img src=bargray.jpg width=$enopp height=7></div>
<div class=skew><b>Will:</b> {$wiperc}%<img src=baryellow.jpg width=$wiperc height=7><img src=bargray.jpg width=$wiopp height=7></div>

[KyleMassacre]

its because you have "Will" inside your div class. Im no good at css anyways

**EDIT**

it seems as though I got it to work by changing the skew class to an id in the css http://jsfiddle.net/ALGeb/1/

I'm not sure if that is the right way to go

Edited August 17, 2013 by KyleMassacre

[jedigunz]

okay well ive gone with this

 

<table width=100%>
<tr>
<td><b>Energy:</b> {$enperc}%</td>
<td><div class=skew><img src=baryellow.jpg width=$enperc height=7><img src=bargray.jpg width=$enopp height=7></div></td>
</tr><tr>
<td><b>Will:</b> {$wiperc}%</td>
<td><div class=skew><img src=baryellow.jpg width=$wiperc height=7><img src=bargray.jpg width=$wiopp height=7></div></td>
</tr><tr>
<td><b>Brave:</b> {$ir['brave']}/{$ir['maxbrave']}</td>
<td><div class=skew><img src=baryellow.jpg width=$brperc height=7><img src=bargray.jpg width=$bropp height=7></div></td>
</tr><tr>
<td><b>EXP:</b> {$experc}%</td>
<td><div class=skew><img src=baryellow.jpg width=$experc height=7><img src=bargray.jpg width=$exopp height=7></div></td>
</tr><tr>
<td><b>Health:</b> {$hpperc}%</td>
<td><div class=skew><img src=baryellow.jpg width=$hpperc height=7><img src=bargray.jpg width=$hpopp height=7></div></td>
</tr>
</table>

 

which resulted in this,.. perfect :)

[ATTACH=CONFIG]1128[/ATTACH]

thanks for the help