Técnico Medio en Diseño Gráfico II año Módulo: Diseño Web HTML 5 Y CSS 3 Botón que despliega información cuando pasamos el rato encima (en estado hover): Ahora vamos a realizar un ejercicio de un botón que al poner encima el mouse nos despliega una información con transparencia, y la verdad es muy sencillo de hacer y es muy llamativo, funcional y las páginas web se ven elegantes con estas pequeñas cositas que han ido practicando. A como lo hemos venido haciendo en los ejercicios anteriores es comentar cada una de las líneas de código que tecleamos para tener nuestro ejercicio bien explicado, lo que vamos a copiar en nuestro index.html es el siguiente código, bien manos a la obra y a trabajar:
Docente: Ing. JIMMY JOSÉ SALAZAR ABARCA
Página 1
Técnico Medio en Diseño Gráfico II año Módulo: Diseño Web HTML 5 Y CSS 3 <!DOCTYPE html> <html > <head> <meta charset=utf-8" /> <title>Boton desplegable con transparencia</title> <!--[if gte IE 9]> <style type="text/css"> .gradient { filter: none; } </style> <![endif]--> <link href="estilos.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="botons"> <div class="boton"> <h5><a href="#">Perfil..</a></h5> <div> <p><a href="http://twitter.com/iamvdo">@tutostips</a><br /> <a href="http://www.tutosytips.com">www.tutosytips.com</a></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur orci metus, suscipit non gravida eget. </p> </div> </div> <div class="boton"> <h5><a href="#">Mas Información...</a></h5> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit .</p> <p>Vestibulum metus quam, tristique in posuere et</p> </div> </div> <div id="contenido"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. <br /> Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. <br /> Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris <br /> sit amet orci. Aenean dignissim pellentesque felis.</p> <p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, <br /> euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p> </div> </div> </body> </html>
El resultado de la página es la siguiente:
Docente: Ing. JIMMY JOSÉ SALAZAR ABARCA
Página 2
Técnico Medio en Diseño Gráfico II año Módulo: Diseño Web HTML 5 Y CSS 3
Bien ahora vamos a hacer los cambios necesarios que harán que nuestros botones sean funcional cómo? y con qué? Bueno con css3, y lo que vamos hacer es crear nuestro archivo en notepad⁺⁺, ojo tenga mucho cuidado recuerde que tiene que guardar estos archivos en una carpeta, cuales archivos el index.html que ya realizó y el css que es la hoja de estilo que va a realizar ahorita, bueno a continuación aquí les dejo el siguiente código y lo ponen su respectivo comentario a cada línea:
body { background: #009BFC; } div#contenido { clear: both; padding: 50px 10px 0; text-align: justify; } #botons { height: 100px; margin: 20px auto 0; width: 520px; } #botons h5 { background: #cedce7; background: -moz-linear-gradient(top, #cedce7 0%, #596a72 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cedce7), colorstop(100%,#596a72)); background: -webkit-linear-gradient(top, #cedce7 0%,#596a72 100%); background: -o-linear-gradient(top, #cedce7 0%,#596a72 100%);
Docente: Ing. JIMMY JOSÉ SALAZAR ABARCA
Página 3
Técnico Medio en Diseño Gráfico II año Módulo: Diseño Web HTML 5 Y CSS 3 background: -ms-linear-gradient(top, #cedce7 0%,#596a72 100%); background: linear-gradient(to bottom, #cedce7 0%,#596a72 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72',GradientType=0 ); border-bottom: 1px solid #555555; border-radius: 3px 3px 3px 3px; border-top: 1px solid #AAAAAA; box-shadow: 0px 2px 1px #222; margin: 0; font-size: 1.1em; font-weight: normal; position: relative; text-align: center; text-shadow: 0 1px 0 #ccc; z-index: 2; } #botons h5 a { color: #333333; display: block; padding: 12px; text-decoration: none; } .boton { float: left; height: 1px; margin: 0 15px; width: 225px; } .boton div { -moz-transform: scaleY(0); -moz-transform-origin: 50% 0; -moz-transition: all 0.5s ease 0s; -webkit-transform: scaleY(0); -webkit-transform-origin: 50% 0; -webkit-transition: all 0.5s ease 0s; background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7); color: #EEEEEE; font-size: 0.9em; margin-top: -3px; opacity: 0; padding: 15px; position: relative; z-index: 1; } .boton:hover div { -moz-transform: scaleY(1); -webkit-transform: scaleY(1); opacity: 1; }
Docente: Ing. JIMMY JOSÉ SALAZAR ABARCA
Página 4
Técnico Medio en Diseño Gráfico II año Módulo: Diseño Web HTML 5 Y CSS 3 .boton div p { padding: 5px; } .boton div p a { border-bottom: 1px solid #CCCCCC; color: #EEEEEE; text-decoration: none; } .boton div p a:hover { border-width: 2px; color: white; }
Y el resultado final será a como lo vieron en las capturas de pantallas que esta al inicio del documento.
Docente: Ing. JIMMY JOSÉ SALAZAR ABARCA
Página 5