Crear enlaces internos y externos en 3D, Links Creativos.

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).

Twittear

Crear enlaces internos y externos en 3D, Links Creativos.

Cuerpo HTML (Body)

Agregando Jquery

Relacionados