Diskuze: Progress bar problém s farbou

Aktivity

Dominik Gavrecký

Tvůrce

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ť.

Člen

:6.2.2016 17:16

Co to je za prohlížeč?

Nahoru Odpovědět

6.2.2016 17:16

Dominik Gavrecký

Tvůrce

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ť.

Člen

:6.2.2016 19:01

Nastavuješ to jen pro webkit...

Nahoru Odpovědět

6.2.2016 19:01

martinkhla

Člen

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

Tomáš123

Člen

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.

Dominik Gavrecký

Tvůrce

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ť.

martinkhla

Člen

martinkhla:6.2.2016 21:08

https://css-tricks.com/…ess-element/

možno ti to pomôže viac

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.

Nejčastěji vyhledáváné

Diskuze: Progress bar problém s farbou