Diskuze: Progress bar problém s farbou

HTML a CSS Webdesign Progress bar problém s farbou American English version English version

Avatar
Dominik Gavrecký:

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. února 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
Michal Vašíček
Tým ITnetwork
Avatar
Nahoru Odpovědět 6. února 17:16
Příspěvek může obsahovat stopy arašídů, sarkasmu a sóji.
Avatar
Odpovídá na Michal Vašíček
Dominik Gavrecký:

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

Nahoru Odpovědět 6. února 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
Michal Vašíček
Tým ITnetwork
Avatar
Odpovídá na Dominik Gavrecký
Michal Vašíček:

Nastavuješ to jen pro webkit...

Nahoru Odpovědět 6. února 19:01
Příspěvek může obsahovat stopy arašídů, sarkasmu a sóji.
Avatar
martinkhla
Člen
Avatar
Odpovídá na Dominik Gavrecký
martinkhla:
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. února 19:19
Nahoru Odpovědět 6. února 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:

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  +1 6. února 19:46
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Odpovídá na martinkhla
Dominik Gavrecký:

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

Nahoru Odpovědět 6. února 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. února 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.