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

Diferentes estilos y efectos modernos para los enlaces de texto

enlaces modernos

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 moderno y original.

Hace un tiempo vimos un tutorial parecido en Algunos enlaces con efectos creativos y originales.

En este tutorial veremos estilos y efectos diferentes al anterior, utilizando solamente HTML y CSS. La idea es utilizar pseudo-elementos y animaciones para crear un efecto sutil, moderno y también un poco de magia SVG (en los dos últimos estilos). La idea de este tutorial es inspiraros con estos enlaces de texto y que vosotros los personalicéis mejor que nosotros para que queden más vistosos y a vuestro gusto.

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. Solamente Explorer en algún efecto se comporta de forma extraña ya que no es del todo compatible con las transiciones de pseudo-elementos.

Para que os hagáis una idea, a continuación podéis probar los enlaces que vamos a explicar, sólo tenéis que pasar el cursor por encima del enlace de texto para ver su efecto.

ENLACES CON EFECTOS MODERNOS


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 img, copiamos y pegamos los dos archivos de imagen .svg a nuestra carpeta de imágenes. Ambos archivos los necesitaremos para realizar dos de los enlaces. Luego en el archivo css acordaros de poner la ruta correcta donde los tengáis alojados.

Ahora abrimos la carpeta css, copiamos todo lo que hay dentro del archivo style-enlacesmodernos.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.

Para lograr el apilamiento deseado de los anclajes y sus pseudo-elementos se ha creado una clase llamada enlacesmodernos, con la que establecemos algunos estilos generales. Para los dos últimos estilos hemos creado una clase llamada svg-wrap.

.enlacesmodernos {
	position: relative;
	z-index: 1; /* Necesario para establecer el pseudo-elemento z-index */
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.enlacesmodernos a {
	position: relative;
	display: inline-block;
	outline: none;
	color: #fff;
	font-size: 19px;
	vertical-align: bottom;
	text-decoration: none;
	white-space: nowrap;
}

.enlacesmodernos p {
	font-family: 'Lato';
    font-size: 17px;
    color: #ccc;
    line-height: 30px;
}

.enlacesmodernos a::before,
.enlacesmodernos a::after {
	pointer-events: none;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
}

.svg-wrap { /* Para los dos últimos efectos */
	position: absolute;
	width: 0px;
	height: 0px;
	overflow: hidden;
}

Todo el código que hay después en el archivo css es para realizar y configurar los distintos efectos de los enlaces. Fijaos bien como se han realizado para luego personalizarlos a vuestro gusto.

Para que estos enlaces funcionen, 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. Por ejemplo, si vamos a poner el enlace con el efecto Scale down, el código HTML sería el siguiente.

<section class="link-scaledown enlacesmodernos">
<p>Este es un <a href="#">ejemplo</a> de enlace con el efecto <a href="#">Scale down</a> del tutorial.</p>
</section>

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.

A continuación os dejo el enlace de descarga con todos los archivos. Espero que con esta colección de nuevos efectos para enlaces de texto, vuestra página web quede más visible.

ENLACE DE DESCARGA
Enlaces con estilos y efectos modernos (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