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>

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

En el desarrollo de una nueva web, son muchas las etapas en las cuales nos sentamos a analizar, diagramar y probar ideas. La estructura será un factor muy importante, ya que dependiendo la diagramación de dicha estructura, será la organización de todo nuestro contenido. Pero los menús de navegación constituyen otro elemento importante en nuestro sitio web. Lograr un menú que facilite toda la navegación por cada una de las secciones de nuestra web y que se encuentre bien adaptado al diseño desarrollado, no siempre es tarea sencilla. Si te encuentras un poco retrasado tratando de lograr un menú que se adapte de forma adecuada a tu proyecto, buscar un poco de inspiración no será mala idea. 120 Excellent Examples of CSS Menu, es un artículo que recopila 120 menu Css horizontales que te ayudaran a construir originales nuevas ideas.

Enlace 120 Excellent Examples of CSS Menu