• iborra
    borde slide
    DESCUBRE A TRAVÉS DE
    borde slide
    NUESTRO BLOG
    Artículos de interés sobre diseño web

Algunos enlaces con efectos creativos y originales

enlaces creativos

Un hipervínculo de texto es un enlace que se encuentra asociado a un texto, de forma que si hacemos clic sobre ese texto, navegamos dónde indique el hipervínculo, y queremos que esa transición se realice con algún efecto original.

En este tutorial nos gustaría compartir algunos enlaces con efectos creativos. La idea es utilizar pseudo-elementos y animaciónes para crear un efecto sutil y moderno. Así que los podéis utilizar bien como si fueran un enlace o simplemente una animación sobre un texto en concreto.

Estos enlaces han sido probados en los principales navegadores en sus últimas versiones como en Chrome, Firefox, Safari, Opera y Vivaldi dónde funcionan correctamente. Sólo Explorer no soporta dos de los enlaces, que tampoco esto es una sorpresa.

Para que os hagáis una idea, a continuación podéis probar los enlaces con efectos creativos que vamos a explicar, pasando el cursor por encima del texto para ver su efecto.

Para realizar estos enlaces, primero descargamos los archivos, el enlace de descarga se encuentra más abajo. Dentro del archivo descargado encontramos tres carpetas. Abrimos la carpeta js, copiamos y pegamos el archivo modernizr.custom.js a nuestra carpeta js y hacemos un enlace a este archivo, al principio de la página dónde vayamos a poner los enlaces, dentro de la etiqueta <head>, que es dónde se recomienda que se ponga la librería modernizr. Si ya tenéis esta librería enlazada, saltaros este paso. Un ejemplo de cómo ponerlo, tener en cuenta que la ruta puede cambiar dependiendo de donde tengáis localizados los archivos.

<script src="js/modernizr.custom.js"></script>

Ahora abrimos la carpeta css, copiamos todo lo que hay dentro del archivo style-enlacescreativos.css y lo pegamos dentro del archivo principal css de nuestro tema. Podéis cambiar cualquier cosa a vuestro gusto o añadir otros elementos css para que quede mejor en vuestro sitio web. Mirar con detalle el código y observar cómo se realizan los efectos en los enlaces para así también aprender. Este es el código, por ejemplo, del enlace 1, dónde utilizamos las transiciones de pseudo-elementos para conseguir el efecto.

.cl-effect-1 a {
	color: #fff;
	text-transform: uppercase;
	font-family: 'Lato';
	font-size: 17px;
}

.cl-effect-1 a:hover {
	color: #fff;
}

.cl-effect-1 a::before,
.cl-effect-1 a::after {
	display: inline-block;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
	-moz-transition: -moz-transform 0.3s, opacity 0.2s;
	transition: transform 0.3s, opacity 0.2s;
}

.cl-effect-1 a::before {
	margin-right: 10px;
	content: '[';
	-webkit-transform: translateX(20px);
	-moz-transform: translateX(20px);
	transform: translateX(20px);
	color: #ec9b1b;
}

.cl-effect-1 a::after {
	margin-left: 10px;
	content: ']';
	-webkit-transform: translateX(-20px);
	-moz-transform: translateX(-20px);
	transform: translateX(-20px);
	color: #ec9b1b;
}

.cl-effect-1 a:hover::before,
.cl-effect-1 a:hover::after,
.cl-effect-1 a:focus::before,
.cl-effect-1 a:focus::after {
	opacity: 1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	transform: translateX(0px);
}

Una vez puesto los archivos anteriores, sólo nos quedará poner el código HTML del enlace que vayamos a utilizar. Dentro de la carpeta demo está todo el código HTML de los ejemplos de enlaces vistos anteriormente. A continuación, un ejemplo de como sería el código para mostrar el enlace 1.

<nav class="cl-effect-1">
    <a href="#">enlace 1</a>
</nav>

En la mayoría de los casos, el HTML es tan simple cómo el que acabamos de ver, sin embargo, para algunos efectos especiales, se utilizan otros atributos que encontraréis en el archivo demo.php. Observar los ejemplos de antes con las herramientas de desarrollo (F12) para ver cómo hemos puesto el código.

También podéis ver otros efectos de enlaces de texto distintos en el tutorial Diferentes estilos y efectos modernos para los enlaces de texto.

A continuación os dejo el enlace de descarga con todos los archivos. Espero que con esta colección de enlaces encontréis inspiración y también podáis crear otros efectos agradables.

ENLACE DE DESCARGA
Enlaces con efectos creativos y originales (Iborra Web Design)

CONTRASEÑA DEL ARCHIVO
iborra.es

Comenta y comparte este post!

¿Tienes alguna sugerencia, idea, consejo, duda, pregunta, agradecimiento, encuentras algún error o este post no está actualizado? Entonces esperamos tu comentario.

También puedes recomendar y compartir este post. Estamos muy agradecidos por tu apoyo!

Comentarios (0)

No hay Comentarios todavía en este post. Podrías ser el primero!

Deja un comentario

Este blog se nutre de los comentarios de los visitantes! Así que vamos, únete a nosotros!

Por favor esperamos que entiendas que se eliminarán aquellos comentarios que no tengan nada que ver con el contenido de este post o siempre que se utilicen palabras ofensivas.

COMENTARIO PARA ESTE POST

Imagen mínimo: 300x300 - Formato: jpg o png - Tamaño máximo: 10Mb

CAPTCHA code