El 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

Aquí les dejo unos pequeños tips para su CSS, imagino se han dado cuenta que al poner un enlace y hacer click sobre el mismo aun le hallan puesto la propiedad border:0; le aparece un borde punteado alrededor esto sucede cuando el objeto a tiene asignada la propiedad display:block; como evitar esto?.

Bueno pues las siguiente lineas te enseñaran la manera de evitar esto y a parte poner un logo que al oprimirle con el botón derecho encima no les aparezca ni Guardar Imagen.. y tampoco Ver imagen de fondo… y aparte sea un enlace.

Primer paso:

Generar codigo html, usaremos H1 para incluso ayudar al SEO de nuestro sitio:

Leer el post completo…