sabemos que los enlaces o links internos y externos nos ayudan a mejorar y ayudar a que nuestros usuarios tengan una experiencia mas gratificante a la hora de navegar en nuestra web, también sabemos que los enlaces salientes y entrante nos ayudan para mejorar el seo organico, y que mejor forma de presentarlos de una manera única y original.
Ahora realizaremos un tutorial para mejorar de forma creativa la vista clasica con el tipico subrayado en nuestro parrafo con enlance. comenzemos!
Cuerpo HTML (Body)
<body> <h1> <a href="http://antocas.com/">ANTOCAS.COM</a> </h1> <p> hay muchas formas de mostrar la información de un producto, ya sea mediante animación con <a href="http://jquery.com">Jquery</a> que es la mas tedioza de hacer hasta la mas simple que es generar una pestaóa o ventana emergente que no siempre es bueno, por que algunos navegadores tiene activado por defecto el bloqueo de la misma. En este <a href="http://antocas.com/blog/caja-cubo-3d-con-css3-animacion-mostrar-informacion/">tutorial</a> voy a compartir una forma de mostrar la información de nuestros productos con estilo cubo con <a href="http://antocas.com/blog/caja-cubo-3d-con-css3-animacion-mostrar-informacion/">CSS3 3D animada.</a> </p> </body>
Nota: el cuerpo de nuestro html es como cualquier otro, el trabajo se lo encargaremos al Jquery.
Agregando Jquery
<script> $().ready(function(){ var supports3DTransforms = document.body.style['webkitPerspective'] !== undefined || document.body.style['MozPerspective'] !== undefined; function linkify( selector ) { if( supports3DTransforms ) { var nodes = document.querySelectorAll( selector ); for( var i = 0, len = nodes.length; i < len; i++ ) { var node = nodes[i]; if( !node.className || !node.className.match( /roll/g ) ) { node.className += ' roll'; node.innerHTML = '<span data-title="'+ node.text +'">' + node.innerHTML + '</span>'; } }; } } linkify( 'a' ); }); </script>
Nota: Recuerden agregar el Jquery para que se pueda ejecutar nuestro codigo.
body { font-family: sans-serif; background: #666; color: #eee; } a { text-decoration: none; color:#ff9900; } .roll { display: inline-block; overflow: hidden; vertical-align: top; -webkit-perspective: 400px; -moz-perspective: 400px; -webkit-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%; } .roll span { display: block; position: relative; padding: 0 2px; -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; } .roll:hover span { background: #FFF; -webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg ); -moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg ); } .roll span:after { content: attr(data-title); display: block; position: absolute; left: 0; top: 0; padding: 0 2px; color: #fff; background: #ff9900; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg ); -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg ); }
aplicamos el Css y listo eso es todo, muy sencillo verdad, espero les sirva de mucho al igual que a mi.
De todos modos dejo laDemo y la descarga de los Archivos de este tutorial (contraseña: antocas.com).