Estoy trabajando en un proyecto para navegadores iphone y android que requiere que construya un medidor de progreso parecido a un termómetro que pueda reaccionar con el cambio de tamaño del navegador y poder cambiar el progreso fácilmente. Debe ser como el diseño tanto como sea posible. Es decir, necesita los elegantes degradados, el recuadro resaltado, el borde.Construyendo formas complejas con CSS
El Medidor:
Aviso la sombra inserción blanca y la frontera
El progreso debe extenderse dentro de la porción circular, así y seguir teniendo los efectos de fantasía.
que siguió adelante y consiguió un prototipo en bruto de trabajo (probado en cromo) 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>La técnica básicamente clips de un rectángulo con un fondo verde con rayas con algunos divs con esquinas redondeadas hasta que salga la forma deseada. Luego uso un montón de sombras para agregar relleno y el recuadro alrededor del medidor.
Mi pregunta: ¿Qué harías? Quiero decir, puedo optimizar esta solución un poco. Podría agregar más marcado para obtener el diseño perfecto, pero se siente tan sucio. Y tengo la sensación de que no será fácil realizar una prueba de navegador cruzado. Pensé en usar lienzos, pero tener que volver a dibujar las formas si el tamaño del navegador es desagradable.
Me gustaría evitar el uso de imágenes tanto como sea posible, pero si una solución elegante es posible con ellos, definitivamente lo usaré.
Si bien la implementación no tiene la capacidad de cambiar el color de la barra de progreso, me gustaría tener una solución que tenga esa capacidad.
violín actualiza con la '' -moz-prefijo de proveedor para Firefox. No se ve tan bien como en Chrome: http://jsfiddle.net/xduQ9/8/ –