Blog

Magia CSS, hover y posición absoluta

Como parte del mejoramiento de la web en español, haré una serie de tutoriales de CSS avanzado, con un fín útil. No tengo un número definido, pero si veo que tiene una buena respuesta se puede extender hasta donde las ideas den.  Y empezaré con hover y posición absoluta. Pero, ¡Esto ya lo sé! – diras. Vamos a partir de lo más básico y para crear efectos y utilidades muy buenas con css, pasándonos de básico -> avanzado. Solo quiero decir que, todo esto solo es una probadita de lo que viene en npzine… Así que estén preparados, ya que van 15 colaboradores confirmados en diferentes países de toda América y España. Así que empezamos…

¿De qué trata?

En este tutorial vamos  a aprender a utilizar el hover, posición absoluta y el z-index. Jugaremos con estos elementos para crear un efecto de cortina con puro CSS. Para que te des una idea, es muy parecido al efecto que tengo en mi portada, el de las entradas. Al igual que como hacer un ribbon.

Empezando

portafolio

Voy a utilizar una imagen de 500px * 250px en este ejemplo y para maquetar 960gs. Pues nos facilitaremos algunas cosas con el framework. Crearemos el markup, para poder contener la imagen y el texto a mostrar.
<div class="contenedor">
<img src="images/ejemplo1.jpg" alt="foto guatemala" width="500" height="250" />
<div class="texto">
<h4>Esto aparece cuando me coloco encima</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu nunc sem.
Nullam sed lorem et nibh bibendum faucibus. Suspendisse facilisis mauris eget.
Nulla facilisis dictum quam at interdum. Etiam id nisi diam.</div>
<div class="textoh">
<a href="#">Ver proyecto</a></div>
</div>

Una vez tenemos el esqueleto, nos vamos a crear el css:
.contenedor{
position:relative;
width:500px;
height:250px;
border:#FF6600 5px solid;
}
.contenedor img{
position:absolute;
top:0;
left:0;
z-index:2;
}

.contenedor será donde estará todo, y estamos dandole posición absoluta a la imagen que estará de fondo, en nuestro caso para ilustrar el proyecto si fuera para un portafolio.
.contenedor .texto{
position:absolute;
top:0;
left:0;
z-index:2;
padding:50px 0 10px;
}
.contenedor .texto h4{
background:#FF6600;
color:#FFFFFF;
display:inline;
padding:5px;
}
.contenedor .texto p{
background:#FF6600;
color:#FFFFFF;
margin:20px 0;
padding:5px;
width:90%;
}

Le damos estilos a el texto naranja, para que se muestre encima de la imagen. EL h4 tiene display in line, para darle el estilo pegado, ya que por default es tratado como un bloque, al igual que el párrafo.
.contenedor .textoh{
position:absolute;
left:0;
top:0;
z-index:-1;
width:100%;
height:100%;
text-align:center;
background:#333333;
color:#FFFFFF;
opacity:.9;
}
.contenedor .textoh a{
margin-top:115px;
display:block;
color:#FFFFFF;
text-decoration:none;
font-size:16px;
}

Hemos creado ahora el div que será colocado encima cuando hagamos hover en el div.contenedor. Este div ahora está atrás de la imagen debido al z-index: -1, nota que he puesto una opacidad que solo será vista en los buenos exploradores.

La magia

portafolio-hover


.contenedor:hover .textoh{
z-index:3;
}

Y listo, lo único que hacemos es que cuando, estes encima del div.contenedor, .texth salga hacia el frente. Simple pero poderoso, este efecto lo podrás usar para darle información extra a tu visitante, o algo que desees mostrar cuando estén encima de un objeto. NOTA: Este selector solo funciona con IE>7 y todos los demás exploradores. Realmente no me interesa hacer cosas que funcionen en IE6 y podrás estar encontra, pero la gente que lo utiliza creo que ya está acostumbrada a ver los sitios mal.

¿Cómo hacer un ribbon?

Otra cosa que me han preguntado es la forma que se crean los ribbons (las pestañitas que salen del layout). Eso también es gracias a la posición absoluta. Que te parece si creamos uno para que lo puedas utilizar en una caja de suscripción, para que tal, feedburner.

Escribiendo el markup, html:
<div id="suscribete">
<div id="title">
suscribete<span class="ribbon"></span>
</div>
<div class="texto">
a nuestro RSS, tan f&aacute;cil como<br />escribir tu correo eletr&oacute;nico.
</div>
<form id="suscribeform">
<div>
<input name="" type="text" class="text" value="yo@midireccion.com" />
<div id="suscribe-enviar">
<input name="" type="button" class="button" value="suscribirme" />
<span class="ribbon"></span>                        </div>
</div>
<div class="clear"></div>
</form>
</div>
</div><!--suscribete-->

Esto dará como resultado algo sinflón y sin gracia :) Vamos al protagonista de esta historia, el css.

ribbon1

1. Estilos al titulo

Crearemos el título celeste ahora, y le vamos a dar posición para poder colocarlo donde queremos, dando el efecto que sale de atras.
#suscribete{
position:relative;
background:#00c0ff;
width:500px;
height:150px;
}
#title{
position:absolute;
top:10px;
left:-27px;
background:url(images/ribbon-back.gif) bottom repeat-x #074e64;
color:#FFFFFF;
font-style:italic;
font-size:30px;
padding:2px 15px 2px 40px;
}
#title .ribbon{
position:absolute;
background:url(images/ribbon-tail.gif) no-repeat;
width:27px;
height:27px;
left:0;
bottom:-27px;
}

ribbon2

Le colocamos la posición, una imagen para dar un efecto de degradado y el ribbon. Es una imagen que es posicionada sus dimensiones en negativo. como quiero que se salga para abajo, le doy un bottom:-27px… Para que quede exactamente su tamaño hacia abajo. También al propio titulo, lo muevo a la izquierda 27px. Recuerda que el contenedor de cualquier objeto con posición absoluta tiene que tener esa posición o una relativa; para resetear las posiciones como lo explican en W3C School.

2. Aplicando estilos al formulario

#suscribeform{
position:relative;
margin-top:20px;
padding:0 20px 0;
}

Colocamos el formulario en una posición relativa para manipular los objetos en posiciones absolutas. Luego lo posicionamos bien.


#suscribeform .text{
border:5px solid #06465a;
font-size:20px;
color:#999999;
position:relative;
top:20px;
float:left;
padding:5px 10px;
}
#suscribeform .button{
border:none;
color:#FFFFFF;
font-family:Georgia, "Times New Roman", Times, serif;
font-style:italic;
font-size:20px;
background:none;
}

ribbon3

Le damos estilos al campo de texto y también al botón. Como puedes ver, el botón tiene un div que lo contiene. Este div será el que le dará el efecto de ribbon al botón.

#suscribe-enviar{
position:relative;
bottom:-10px;
float:right;
background:url(images/suscribe-back.gif) repeat-x bottom #fd7e03;
padding:20px 10px 30px;
*padding:20px 10px 25px; /*tonto IE7*/
}
#suscribe-enviar .ribbon{
position:absolute;
bottom:0;
left:-10px;
background:url(images/suscribe-tail.gif) no-repeat;
height:10px;
width:10px;
}

ribbon4

Por último le damos el margen al formulario y colocamos al texto donde debe estar.

#suscribete .texto{
margin-left:190px;
padding:15px 0 0;
}

ribbon5

Listo, ahora le hemos dado una posición al div, donde lo bajamos 10px para que la colita que hemos colocado (la imagen que le da el efecto en la clase .ribbon). Como podrán ver, hay que colocarle un hack para que se mire bien en IE7. Esto desvalida el código por lo que lo ideal sería que colocaran esta y otras propiedades dentro de un CSS condicional para IE. Esto se logra con el siguiente código luego de los estilos de CSS.

<!–[if lt IE 7]><link href=”miestiloIE.css” rel=”stylesheet” type=”text/css” /><![endif]–>

Puedes encontrar más información, sobre diferentes condicionales en Quircks Mode.