% zamalowania koła

[Yaneek 13]

Hej, mam sobie takie kółko z health pointami i w jquery chcę aby się zmniejszało, lecz do tego potrzeba mi jakby procentu zamalowania figury. W sensie żeby nagle nie było w pełni czerwone, tylko od góry czarny paseczek. Mam nadzieje, że rozumiecie.
To kod koła:

 

width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;

[xorg 693]

 

Mam nadzieje, że rozumiecie.

 

Niestety nie.

[PapaSmerf 497]

Coś jak wykres kołowy?

[Piotr GRD 608]

... tylko od góry czarny paseczek. ...

 

Również nie jestem pewien czy dobrze rozumiem pytanie, ale jeśli dobrze, to osobiście umieściłbym wewnątrz koła drugi czarny element i regulował jego wysokość.

 

[regdos 1848]

http://boski.regdos.com/zycie/ - chodzi o coś takiego ?

 

Trochę inne podejście. Na górze obrazek maska w postaci białego kwadratu z wyciętym kołem, koło to przezroczystość a w tle czerwony kwadrat którego pozycja jest przesuwana co w efekcie daje zapełnienie życia.

 

PS.

Drugi obrazek wykorzystuje Twoje koło i tylko wykorzystuje pozycjonowanie tła. jak chcesz zmienić wielkość zapełnienia przesuwasz tło w górę lub dół.

[maniack 403]

.

Edytowano Wrzesień 13, 2017 przez maniack (zobacz historię edycji)

[regdos 1848]

Tylko linear-gradien nie zadziała pod IE <10.

[maniack 403]

.

Edytowano Wrzesień 13, 2017 przez maniack (zobacz historię edycji)

[Yaneek 13]

Właśnie próbowałem z gradientem, z tym, że linear-gradient jak pamiętam nie działał mi pod każdą przeglądarką i musiałem dać dodatkowe odniesienia do webkita, moz, o itp. I szukam rozwiązania "zgrabnego", w sensie żebym nie musiał używać If (dana przeglądarka){}elseif itp.

[Piotr GRD 608]

Zaproponowane przeze mnie i regdosa rozwiązania będą działać nawet w najstarszych przeglądarkach.

Czy to pozycjonowanie nie powtarzającego się obrazka w tle, bądź umieszczenie wewnątrz w odpowiedniej pozycji, rozmiarze i kolorze drugiego elementu.

 

Osobiście wykorzystuję takie techniki np. tutaj: http://heliohost.grd.net.pl/disk-space/

 

 

[maniack 403]

.

Edytowano Wrzesień 13, 2017 przez maniack (zobacz historię edycji)