Borchani.COM – Blog

Si están pensando en mostrar alguna clase de estadística en sus web, porque no hacerlo también utilizando CSS. Sixrevisions, nos muestra 8 atractivas formas de hacerlo y cada una de ellas con opciones en particular.

Mas ejemplos en Sixrevisions

Ejemplo: Ver demo online – - Idea by Apples to oranges

Images utilizadas en el Ejemplo: Imagen 1 – imagen 2 (guardar como)

CSS:

/* Vertical Bar Graph */
                #vertgraph {
                    width: 378px;
                    height: 207px;
                    position: relative;
                    background: url(“/wp-content/uploads/2006/08/g_backbar.gif”) no-repeat;
                }
                #vertgraph ul {
                    width: 378px;
                    height: 207px;
                    margin: 0;
                    padding: 0;
                 }
                #vertgraph ul li {
                    position: absolute;
                    width: 28px;
                    height: 160px;
                    bottom: 34px;
                    padding: 0 !important;
                    margin: 0 !important;
                    background: url(“/wp-content/uploads/2006/08/g_colorbar3.jpg”) no-repeat !important;
                    text-align: center;
                    font-weight: bold;
                    color: white;
                    line-height: 2.5em;
                }
                #vertgraph li.critical { left: 24px; background-position: 0px bottom !important; }
                #vertgraph li.high { left: 101px; background-position: -28px bottom !important; }
                #vertgraph li.medium { left: 176px; background-position: -56px bottom !important; }
                #vertgraph li.low { left: 251px; background-position: -84px bottom !important; }
                #vertgraph li.info { left: 327px; background-position: -112px bottom !important; }

Montando nuestras graficas

HTML:

<div id=”vertgraph”>
                        <ul>
                            <li class=”critical” style=”height: 150px;”>22</li>
                            <li class=”high” style=”height: 80px;”>7</li>
                            <li class=”medium” style=”height: 50px;”>3</li>
                            <li class=”low” style=”height: 90px;”>8</li>
                            <li class=”info” style=”height: 40px;”>2</li>
                        </ul>
                    </div>

Validationicons.com un sitio que recopila botones de validación para tus proyectos web. Encontraremos un paquete con los diseños tradicionales listo para ser usado o bien los archivos PSD para adaptarlos a tus diseños. Sin duda validationicons, lograra sacarte de apuros si no andas con ganas de ponerte a diseñar cada uno de ellos.

Enlace Validationicons.com

Si deseas promocionar tu empresa por internet, rightbanners es una compañía que te propone poner toda su creatividad a la hora de diseñar tus propios Banners, algo genial si no estás empapado en el tema de diseño. Solicitar el servicio es de lo más simple, simplemente basta con llenar el formulario que veras al ingresar al sitio, el cual te permitirá selección que tipo de banner deseas, Tamaño, si lo prefieres animado o estático, con bordes redondeados o no, tu URL, una imagen como base o logo, etc. Depende el tamaño que elijas y cuantas opciones desees implementar, será la variación del costo. Una vez enviados tus datos, Rightbanners se tomara cerca de 4 horas para enviarte via email 3 propuestas para tus Banner, de las cuales escogerás una. Ahora, si se da que las propuestas que te plantea Rightbanners no te convencen en absoluto, te devolverán el dinero por la misma vía por la cual has pagado el servicio (ej Paypal). De ahora en más, si tus banner no son nada atractivos, es porque tu lo quieres así, si no deseas contratar a un diseñador para estos trabajos, Rightbanners es una opción interesante y una idea original, como todas las llevadas a cabo por Perflect Corp ya que también son los creadores de PSD2HTML.com y OUTLINE2DESIGN.com. Un buen respaldo detrás, para darte confianza a la hora de solicitar sus servicios.

Enlace rightbanners