Recursos simples en CSS

1

Hay muchos pequeños efectos que se pueden lograr de forma muy simple con código CSS y acá les traigo algunos de estos recursos simples en CSS

Hay efectos para imágenes y otros para hacer nuestros menúes más atractivos. Estos 3 recursos simples en CSS les ayudarán a interiorizar y aprender un poco más como trabaja CSS ya que les mostramos tanto el código como la implementación. También pueden ver un DEMO de cada efecto funcionando antes de ponerse a estudiarlo para que comprueben si es el efecto que buscaban.

Efecto de opacidad

DEMO

Código:

<style type="text/css">
body {width: 100%;
height: 100%;
outline: 0;
}
a img {border: none;}

.opacidad { opacity: 0.8;
background-color: #000;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 0;
}
a {width: 61px;
height: 37px;
display: block;
position: absolute;
z-index: 1;
outline: 0;
}
a:hover {background-color: transparent;}

.uno, .dos, .tres {top: 50px;}
.cuatro, .cinco, .seis {top: 100px;}
.siete, .ocho, .nueve {top: 150px;}
.uno, .cuatro, .siete {left: 100px;}
.dos, .cinco, .ocho {left: 180px;}
.tres, .seis, .nueve {left: 260px;}

a span {opacity: 0.8;
background-color: #000;
position: absolute;
left: 0;
top: 0;
width: 61px;
height: 37px;
visibility: visible;
display: block;
}
a:hover span, 
a:active span, 
a:focus span {visibility: hidden;}
a:hover span.opacidad2, 
a:active span.opacidad2, 
a:focus span.opacidad2 {visibility: hidden;}

.foto1, .foto2, .foto3, .foto4, .foto5 {top: 300px;
height: 78px;
width: 115px;
}
.foto1 {left: 100px;}
.foto2 {left: 230px;}
.foto3 {left: 360px;}
.foto4 {left: 490px;}
.foto5 {left: 620px;}

a span.opacidad2 {opacity: 0.8;
background-color: #000;
position: absolute;
left: 0;
top: 0;
width: 118px;
height: 78px;
visibility: visible;
display: block;
}
</style>
<!--[if IE 6]>
<style>
a span.opacidad2 {filter: alpha(opacity=80);}
a span {filter: alpha(opacity=80);}
.opacidad {filter: alpha(opacity=80);}
</style>
<![endif]-->

Y para usarlo en el documento HTML lo hacemos asi:

<div class="opacidad"></div>
<div>
<a class="uno" href="#"><img src="/imageng/N1.gif" alt="Número 1" />
<span class="opacidad1"></span>
</a>

</div>

Ahora veamos otro efecto:

Blanco y negro a Color al pasar el mouse

DEMO

Código:

<style type="text/css">
.galeria {position:absolute;
width:950px;
height:115px;
left: 77px;
top:336.5px;
}
.galeria ul {list-style:none;
margin:0 auto;
padding:0;
}
.galeria ul li{display:inline;}
.galeria ul li img {border:0;
width: 100px;
height: 100px;
}
.galeria ul li a {width: 100px;
height: 100px;
display: block;
float:left;
padding:0 23px;
}
.galeria ul li a:hover {background-color: transparent;}
.galeria ul li a span {display: none;}
.galeria ul li a:hover span {display: block;
position: relative;
top: -100px;
}
</style>

Para usarlo en el documento HTML debemos hacerlo asi:

<div id="galeria1" class="galeria">
<ul>
<li><a href="../img/1.jpg">
<img src="../img/1bn.jpg" alt="foto 1 en blanco y negro" /><span>
<img src="../img/1.jpg" alt="foto 1 en color" /></span></a>
</li>
</ul>
</div>

Y otro efecto bastante simple de logar

Cambia el tamaño del menu al pasar el mouse

DEMO

Código:

 <style type="text/css">
body {margin: 0;
background-color: #ADADAD;
}
#contenedor {margin-left: 20px;
margin-top: 30px;
}
#contenedor a {border-left: 1px solid #E7E7E7;
border-right: 1px solid #fff;
padding: 4px 7px;
font-family: Arial,Verdana,Helvetica,sans-serif;
font-size: 11px;
text-decoration: none;
color: #000;
background-color: #E7E7E7;
margin-top: 6px;
float: left;
}
#contenedor a:hover { border: 1px solid #fff;
padding: 8px 7px;
font-family: Arial,Verdana,Helvetica,sans-serif;
font-size: 11px;
text-decoration: none;
color: #fff;
background-color: #26265D;
margin-top: 0;
float: left;
}
</style>

Y para usarlo en el menu se hace de la siguiente manera:

<div id="contenedor">
<a href="#">&raquo;&nbsp;Empresa</a>
<a href="#">&raquo;&nbsp;Soluciones</a>
<a href="#">&raquo;&nbsp;Case
Study</a>
<a href="#">&raquo;&nbsp;Sala
de Prensa</a>
<a href="#">&raquo;&nbsp;Partners</a>
<a href="#">&raquo;&nbsp;Cursos</a>
<a href="#">&raquo;&nbsp;Bolsa
de Empleo</a>
<a href="#">&raquo;&nbsp;Tienda
Online
</a>
</div>

&raquo; y &nbsp; solo son la imagen de flecha y un espacio en blanco

Quizas te interese   Burbujas de Texto en CSS

1 COMENTARIO

Dejar una respuesta

Please enter your comment!
Please enter your name here