Pracuję nad projektem dla przeglądarek dla iphone i android, który wymaga zbudowania miernika postępu podobnego do termometru, który może reagować na zmianę rozmiaru przeglądarki i łatwo może zmieniać postępy. Musi być jak projekt tak bardzo, jak to możliwe. Oznacza to, że potrzebuje fantazyjnych gradientów, podkreślenia wstawki, granicy.Budowanie złożonych kształtów za pomocą CSS
Miernik:
Wskazówki biały wstawka cień i granicy
Postęp powinny sięgać do części okrągłej, jak również i nadal mają ciekawe efekty.
poszedł do przodu i ma chropowatą prototyp (przetestowane w Chrome) http://jsfiddle.net/xduQ9/3/
html,
body {
padding: 25px;
}
.circle {
margin-left: -6px;
width: 48px;
height: 48px;
border-radius: 25px 25px 25px 24px;
border: solid rgba(178, 181, 188, 0.8) 1px;
box-shadow: inset 1px 2px 0 #fff, inset 1px -2px 0 #fff, inset -2px 0 0 #fff, inset -2px -2px 0 #fff, inset 0 3px 0 rgba(255, 255, 255, 0.35), -20px -20px 0 #fff, 20px -20px 0 #fff, 20px 20px 0 #fff, -20px 20px 0 #fff;
}
.circle-wrap {
overflow: hidden;
width: 48px;
height: 51px;
position: absolute;
right: 0;
}
.wrap {
display: -webkit-box;
width: 100%;
position: relative;
height: 51px;
overflow: hidden;
}
.progress {
position: absolute;
z-index: 0;
height: 100%;
width: 70%;
background: url("http://dl.dropbox.com/u/905197/white-stripe-diagonal.png"), -webkit-linear-gradient(top, rgba(183, 237, 21, 1) 0%, rgba(140, 186, 24, 1) 28%, rgba(78, 126, 11, 1) 65%, rgba(59, 86, 0, 1) 99%);
}
.meter.complete .progress {
width: 100%;
-webkit-animation: progress-slide 0.6s linear infinite;
}
@-webkit-keyframes progress-slide {
0% {
background-position: 0 0;
}
100% {
background-position: 25px 25px;
}
}
.progress-cover {
position: absolute;
top: 19px;
width: 70%;
height: 12px;
border-radius: 9px 0 0 9px;
border: solid #70901b 1px;
border-right: 0;
z-index: 2;
}
.top-mask {
position: absolute;
box-sizing: border-box;
width: 100%;
height: 18px;
padding-left: 45px;
margin-left: -45px;
background: white;
border-bottom: solid #b2b5bc 1px;
border-radius: 0 0 33px 0;
box-shadow: 1px 2px 0 #fff, 0 3px 0 rgba(255, 255, 255, 0.35);
}
.bottom-mask {
position: absolute;
bottom: 0;
box-sizing: border-box;
width: 100%;
height: 17px;
padding-left: 45px;
margin-left: -45px;
background: white;
border-top: solid #b2b5bc 1px;
border-radius: 0 19px 0 0;
box-shadow: 1px -2px 0 #fff;
}
.inner {
position: absolute;
top: 0;
left: 2px;
width: 3px;
height: 12px;
border: solid 3px #fff;
border-right: none;
border-radius: 5px 0 0 5px;
}
.meter {
position: relative;
}
.left-border {
position: absolute;
top: 17px;
left: -4px;
width: 10px;
height: 16px;
border-radius: 12px 0 0 12px;
border: solid 1px #b2b5bc;
border-right: none;
z-index: 3;
}<div class="meter complete">
<!-- Remove .complete to stop animation -->
<div class="left-border">
<div class="inner"></div>
</div>
<div class="wrap">
<div class="progress"></div>
<div class="top-mask"></div>
<div class="bottom-mask"></div>
<div class="circle-wrap">
<div class="circle"></div>
</div>
</div>
</div>technika zasadzie klipów prostokąta o paski zielone tło z kilku DIV z zaokrąglonymi narożnikami aż pojawi się żądany kształt. Następnie używam kilku cieni, aby dodać dopełnienie i wstawkę wokół licznika.
Moje pytanie: Co byś zrobił? Mam na myśli, mogę trochę zoptymalizować to rozwiązanie. Mogłabym dodać więcej znaczników, aby projekt był odpowiedni, ale jest tak brudny. I mam wrażenie, że testowanie w wielu przeglądarkach nie będzie łatwe. Myślałem o używaniu płótna, ale konieczność przerysowania kształtów, gdy przeglądarka zmienia rozmiar jest sucky.
Chciałbym unikać używania obrazów w największym możliwym stopniu, ale jeśli możliwe jest eleganckie rozwiązanie, zdecydowanie skorzystam z tego.
Chociaż możliwość zmiany koloru paska postępu nie jest wymogiem wdrożenia, chciałbym rozwiązanie, które ma tę zdolność.
Updated skrzypce z '' prefiksu -moz-sprzedawca do Firefoksa. Nie wygląda to tak dobrze jak w Chrome: http://jsfiddle.net/xduQ9/8/ –