Blog Borchani Studios

Algunos me habían preguntado como lograr que una imagen que tiene un enlace hacia otro sitio o artículo se muestre como en estado de off o mas opaca, y al pasar el Mouse se muestre el color original de la misma. Como el efecto que veras pasando el mouse sobre la imagen que se encuentra arriba:

Como logramos este efecto en las imágenes?

Simplemente copiamos este código en nuestra hoja de estilo (Style.css)

CSS:

a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;} 

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}

y cada vez que queramos darle este efecto a una imagen agregamos la clase “linkopacity” ejemplo:

HTML:

<a class=”linkopacity” href=”http://www.xyberneticos.com/”><img src=”images/demo.jpg” style=”border:1px solid black;”></a>

Si han estado siguiendo algunas de las tendencias en los themes Wordpress Premium, probablemente habrán notado que los dos niveles en menú de navegación se han ido convirtiendo en algo muy popular o frecuente de ver, quizás más aun, en aquellos diseños estilo magazine que suelen poseer muchas secciones con información. Este estilo de menú puede utilizarse en infinidad de maneras, pero lo más común es mostrar las paginas principales, donde al posar nuestro ratón sobre uno de los títulos nos mostrara en un segundo nivel todas las subpáginas que contenga dicha sección. Como lograrlo en worpdress? de esta forma:

PHP:

<ul id=“nav”>
<?php wp_list_pages(‘title_li=&depth=1′); ?>
</ul> 

<?php if($post->post_parent)
$children = wp_list_pages(“title_li=&child_of=”.$post->post_parent.“&echo=0″); else
$children = wp_list_pages(“title_li=&child_of=”.$post->ID.“&echo=0″);
if ($children) { ?>
<ul id=“subnav”>
<?php echo $children; ?>
</ul>
<?php } else { ?>
<?php } ?>

un poco de estilo

CSS:

* {
    margin:0;
    padding:0
    } 

#nav {
    background:#577da2;
    border-bottom:1px solid #FFF;
    height:32px;
    }

#nav li {
    margin-right:25px;
    }

#nav li, #subnav li {
    float:left;
    list-style:none
    }

#nav a, #nav a:visited {
    color:#FFF;
    text-decoration:none;
    font-weight:bold
    }

#nav a:hover, #nav a:active,
li.current_page_parent a,
li.current_page_parent a:visited,
#nav li.current_page_item a,
#nav li.current_page_item a:visited
        {
    background:#295887
    }

#subnav {
    background:#e6eef7;
    border-top:2px solid #577da2;
    border-bottom:2px solid #cad8e6;
    height:28px;
    }

#subnav li {
    border-right:1px solid #295887;
    padding:0 7px;
    }   

#subnav a, #subnav a:visited {
    color:#295887;
    text-decoration:none;
    font-weight:bold
    }

#subnav a:hover, #subnav a:active,
#subnav li.current_page_item a,
#subnav li.current_page_item a:visited {
    text-decoration:underline
    }

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>