NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s podporou uplatnění od 0 Kč. Více informací.

Diskuze: Progress bar problém s farbou

Aktivity
Avatar
Dominik Gavrecký:6.2.2016 17:14

Ahojte,

potreboval by som vašu radu v jednej pre mňa záhadnej veci. Mám vytvorený progress bar ktorý sa mi zobrazuje ako (obrázok v prílohe). Nedokážem zmeniť tu modrú farbu neviem tu v tom kóde nikde nájsť.

progress {
    width: 194px;
    height: 14px;
    display: inline-block;
    -webkit-appearance: none;
    border: none;
    float: left;
    margin: 3px;
    background-color: #150F15;
}

progress::-webkit-progress-bar {
    border-radius: 50px;
    padding: 2px;
    box-shadow: 0 1px 0px 0 rgba(255, 255, 255, 0.2);
}

progress::-webkit-progress-value {
    border-radius: 50px;
    box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
    background: -webkit-linear-gradient(45deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),
    -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),
    -webkit-linear-gradient(left, #ba7448, #c4672d);
    background-size: 25px 14px, 100% 100%, 100% 100%;
    -webkit-animation: move 5s linear 0 infinite;
}

@-webkit-keyframes move {
    0% {
        background-position: 0px 0px, 0 0, 0 0
    }
    100% {
        background-position: -100px 0px, 0 0, 0 0
    }
}
Odpovědět
6.2.2016 17:14
Hlupák nie je ten kto niečo nevie, hlupákom sa stávaš v momente keď sa na to bojíš opýtať.
Avatar

Člen
Avatar
Odpovídá na Dominik Gavrecký
:6.2.2016 17:16

Co to je za prohlížeč?

 
Nahoru Odpovědět
6.2.2016 17:16
Avatar
Odpovídá na
Dominik Gavrecký:6.2.2016 17:20

Firefox a na mobiloch mi to zobrazuje už úplne inak ...

Nahoru Odpovědět
6.2.2016 17:20
Hlupák nie je ten kto niečo nevie, hlupákom sa stávaš v momente keď sa na to bojíš opýtať.
Avatar

Člen
Avatar
Odpovídá na Dominik Gavrecký
:6.2.2016 19:01

Nastavuješ to jen pro webkit...

 
Nahoru Odpovědět
6.2.2016 19:01
Avatar
martinkhla
Člen
Avatar
Odpovídá na Dominik Gavrecký
martinkhla:6.2.2016 19:16
progress::-moz-progress-bar {
  background-image: -moz-linear-gradient(45deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),
    -moz-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),
    -moz-linear-gradient(left, #ba7448, #c4672d);

  border-radius: 50px;
  background-size: 35px 20px, 100% 100%, 100% 100%;
}

Skús toto, malo by to fungovať ... problémom pri Firefoxu je, že pre progress bar podporuje iba jediný pseudo class a to

-moz-progress-bar

taktiež problémom je že nepodporuje, pre progress bar, ::before a ::after pseudo class a CSS3 keyframe animation.

Editováno 6.2.2016 19:19
Nahoru Odpovědět
6.2.2016 19:16
Logic will get you from A to B. Imagination will take you everywhere. - Albert Einstein
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Dominik Gavrecký
Tomáš123:6.2.2016 19:46

Je divné, že tú farbu spôsobuje border :) http://kod.djpw.cz/afub

Firefox a na mobiloch mi to zobrazuje už úplne inak ...

Niektoré mobilné prehliadače nepodporujú tvoje hrátky. Ja neviem, ako to má vyzerať v Chrome (a momentálne nemám žiadny po ruke), ale prečo takto? Môžeš to animovať aj bez zložitých pseudoselektorov: http://kod.djpw.cz/bfub (prefixy som kvôli jednoduchosti nepridal).

Nahoru Odpovědět
6.2.2016 19:46
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Odpovídá na martinkhla
Dominik Gavrecký:6.2.2016 20:50

Teraz sa mi to zobrazuje už úplne na prd.

Nahoru Odpovědět
6.2.2016 20:50
Hlupák nie je ten kto niečo nevie, hlupákom sa stávaš v momente keď sa na to bojíš opýtať.
Avatar
martinkhla
Člen
Avatar
Nahoru Odpovědět
6.2.2016 21:08
Logic will get you from A to B. Imagination will take you everywhere. - Albert Einstein
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 8 zpráv z 8.