Barras de Porcentaje con CSS

Barras de Porcentaje con CSSEl uso del CSS se ha extendido bastante afortunadamente y ayudado a que la Internet y sus sitios web conserven una semántica, estructura y diseño mas cuidados, aunque los navegadores no sea los mas óptimos, pero bueno esa historia para otro dia.

Bueno en pixelspread nos presenta un sencillo tutorial para crear barras de porcentaje usando CSS, el autor del tutorial nos propone 3 formas de hacer esto, mediante:

  • Hojas de Estilo
  • Directo de una capa (div)
  • Según la posición del fondo de la capa

De las tres creo la mejor seria, la segunda “Directo de una capa” ya que si utilizamos php o javascript para procesar e imprimir nuestras consultas, seria mas fácil y directo pasar las variables que nos dibujen la barra de porcentaje, las barras del tutorial no necesitan ni PHP ni Javascript solo CSS.

Demo del tutorial aplicado

via PixelSpread

comment ¿Que opinas?

Artículos recientes

close

Impresionantes paisajes espaciales creados a mano por Adam Makarenko

Adam Makarenko es un fotógrafo que ha demostrado su habilidad al lente y con las manos con esta increíble sesión fotográfica creativa;. Con un genial aspecto estas fotografías podrían parecer que son emitidas por la…

close

Nintendo anuncia SNES Mini la nueva miniatura nostalgica

SNES mini – la nueva consola de la nostalgia de Nintendo Nintendo sigue apostando por la nostalgia como estrategia de venta y posicionamiento; en primera instancia Nintendo presentó la “NES Mini“; la cual, fue todo…

close

play_circle_outline The Story of an idea, animación de Google muestra cómo se desarrollan las ideas

En el marco del Google I/O 2017 la multinacional Google busca inspirar a los asistentes de su evento así como a los creativos en general con la siguiente animación. Esta animación titulada “The Story of…

close

El rebranding de una panadería que fue de lo común a lo minimalista

Todas las empresas necesitan renovar su imagen y marca de vez en cuando; es por eso, que siguiendo esta premisa la agencia creativa mousegraphics ha realizado una renovación increíble para la empresa Mills of Saint George; este cambio…

close

Spinner Car la creación rusa de relajación para entusiastas de los autos

La moda de los Spinners contra el estrés está por todas partes y los amantes de los vehículos no podían quedarse atrás. Conducir un vehiculo debe ser la practica más relajante para los amantes de…

close

Pack with Care, una creativa y bonita campaña contra el abandono animal

Pack With Care es el nombre de esta campaña realizada y lanzada por SPCA (Sociedad para la Prevención de la Crueldad a los Animales) y Home Hardware en Canadá; esta creativa campaña busca crear conciencia sobre…

notifications Recién publicamos
close