Aquí hay dos métodos fáciles para ocultar enlaces de páginas web usando CSS

Aquí hay dos métodos fáciles para ocultar enlaces de páginas web usando CSS

Aquí hay dos métodos fáciles para ocultar enlaces de páginas web usando CSS

VALORACIÓN DEL ARTÍCULO:
5/5


Ocultar un enlace con CSS puede hacerse de varias maneras, pero veremos dos métodos en los que una URL puede estar completamente oculta a la vista. Si desea crear una búsqueda del tesoro o un huevo de pascua en su sitio, esta es una forma interesante de ocultar los enlaces.

La primera forma es usando «none» como el

pointer-eventsCSS valor de la propiedad. La otra es simplemente coloreando el texto para que coincida con el fondo de la página.

Ninguno de los dos métodos oculta el enlace si alguien inspecciona el código fuente HTML. Sin embargo, los visitantes no tendrán una forma simple y directa de verlo, y sus visitantes novatos no tendrán ni idea de cómo encontrar el enlace.

Desactivar el evento del puntero

El primer método que podemos usar para ocultar una URL es hacer que el enlace no haga nada. Cuando el ratón pasa el ratón por encima del enlace, no muestra hacia dónde apunta la URL y no le permite hacer clic en ella.

Escribir el HTML correctamente

En la página web, asegúrese de que el hipervínculo diga lo siguiente:

Por supuesto, «https://www.lifewire.com/» necesita apuntar a la URL real que desea ocultar, y Lifewire.com puede cambiarse a cualquier palabra o frase que le guste que describa el enlace.

La idea aquí es que la clase

active con el CSS que se indica a continuación para ocultar el enlace de forma efectiva.

Usar este código CSS

El código CSS necesita dirigirse al activo class y explicar al navegador que el evento sobre el que se hace clic en el enlace, debe ser «none», así:

.active {puntos-eventos: ninguno;
. cursor: default;
}

Puedes ver este método en acción en JSFiddle. Si eliminas el código CSS allí y luego vuelves a ejecutar los datos, el enlace de repente se vuelve clicable y utilizable. Esto se debe a que cuando no se aplica el CSS, el enlace se comporta normalmente.

Si el usuario ve el código fuente de la página, verá el enlace y sabrá exactamente a dónde va porque, como vemos arriba, el código sigue ahí, simplemente no es utilizable.

Cambiar el color del enlace

Normalmente, un diseñador web hará que los hipervínculos tengan un color diferente del fondo para que los visitantes puedan verlos y saber a dónde van. Sin embargo, estamos aquí para ocultar enlaces, así que veamos cómo cambiar el color para que coincida con el de la página.

Definir una clase personalizada

Si usamos el mismo ejemplo del primer método anterior, podemos simplemente cambiar la clase a lo que queramos para que sólo se oculten los enlaces especiales.

Si no usáramos una clase y en su lugar aplicáramos el CSS desde abajo a cada enlace, entonces todos ellos desaparecerían. Eso no es lo que estamos buscando aquí, así que usaremos este código HTML que está usando la costumbre hideme class:

Averigüe de qué color usar

Antes de introducir el código CSS apropiado para ocultar el enlace, tenemos que averiguar qué color queremos usar. Si ya tienes un fondo sólido, como blanco o negro, entonces es fácil. Sin embargo, otros colores especiales también necesitan ser exactos.

Por ejemplo, si su color de fondo tiene un valor hexadecimal de e6ded1, necesita saber que para que el código CSS funcione correctamente.

Hay muchas de estas herramientas de «selector de color» o «cuentagotas» disponibles, una de las cuales se llama ColorPick Eyedropper para el navegador Chrome. Se usa para probar el color de fondo de su página web para obtener el color hexadecimal.

Personalizar el CSS para cambiar el color

Ahora que tiene el color que debería tener el enlace, es el momento de utilizarlo y el valor de la clase personalizada desde arriba, para escribir el código CSS:

.hideme {
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>"">>>>>>>>>>>>>""">i color: #e6ded1;
}

Si su color de fondo es simple como el blanco o el verde, no tiene que poner el signo # delante de él:

.hideme {
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>"">>>>>>>>>>>>>""">i color: blanco;
}

Vea el código de ejemplo de este método en este JSFiddle.

Deja un comentario

TAMBIÉN TE INTERESA

veentajas-del-marketplace

Ventajas de los marketplaces en plena escalada de precios

Si vendes productos por la web, deberías apostar por los marketplaces, aún en un momento de inflación alta, en plena escalada de precios. La economía se encuentra en un momento difícil: agosto cerró con una tasa de inflación superior a los dos dígitos (10,4%) por tercer mes consecutivo. La incertidumbre ante el invierno impulsa a

OPPO-Reno8-5G

Ya a la venta los nuevos teléfonos OPPO Reno8

OPPO Reno8 es una realidad ya en Europa. La marca hizo una presentación en París para dar a conocer los nuevos productos que llegan directamente al mercado para sumar una feroz competencia. Y es que en pocos años en el mercado del viejo continente, OPPO se ha hecho un hueco importante en el consumidor.  

batería-portátil-DELTA-2

Esta batería portátil es top y acaba de salir a la venta

Tener una batería portátil puede darnos mucha versatilidad para nuestras actividades tanto dentro como fuera de casa. Usamos muchos dispositivos a diario y todos ellos requiere de energía eléctrica para trabajar, por lo que una herramienta que nos aporte dicha energía puede venirnos muy bien en caso de apagones o proyectos en el exterior. EcoFlow,

GoPro-HERO11

GoPro HERO11 Black: las nuevas cámaras para los creadores de contenido

La conocida marca de videocámaras GoPro ha lanzando tres nuevas especialmente concebidas para creadores. GoPro HERO11 llega en tres modelos para satisfacer las necesidades de todo tipo de perfiles y creadores de contenidos.   Índice de contenidos1 El sensor de mayor resolución hasta la fecha2 Las tres cámaras GoPro HERO112.1 Principales tecnologías en las tres

camara-motorola-edge-30-ultra

¿200 megapíxeles? Sí, es lo que tiene el nuevo motorola edge 30 ultra

El furor por los megapíxeles parece estar de vuelta en la fotografía de los smartphones, si bien hay expertos que mantienen que más MP no quiere decir que resulte en mejores fotografías. El nuevo motorola edge Ultra llega al mercado con una barbaridad inédita en el mundo de la telefonía. Cabe destacar también que otras