Cómo ocultar enlaces usando CSS

Ocultar un enlace con CSS se puede hacer de varias maneras, pero veremos dos métodos en los que una URL se puede ocultar completamente de 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 enlaces.

Ocultar un enlace con CSS se puede hacer de varias maneras, pero veremos dos métodos en los que una URL se puede ocultar completamente de 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 enlaces.

La primera forma es usando «none» como

 eventos de puntero 

Valor de propiedad CSS. El otro es simplemente coloreando el texto para que coincida con el fondo de la página.
Ninguno de los 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 idea de cómo encontrar el enlace.

Deshabilitar el evento de puntero

El primer método que podemos usar para ocultar una URL es hacer que el enlace no haga nada. Cuando el mouse pasa sobre el enlace, no mostrará a qué apunta la URL y no le permitirá hacer clic en él.

Escribe el HTML correctamente

En la página web, asegúrese de que el hipervínculo lea así:

  Lifewire.com  

Por supuesto, «https://www.lifewire.com/» necesita apuntar a la URL real que desea ocultar, y Lifewire.com se puede cambiar a cualquier La palabra o frase que te gusta que describe el enlace.

La idea aquí es que la clase

 active 

se usará con el CSS que se detalla a continuación para ocultar de manera efectiva el enlace.
Use este código CSS

El código CSS debe abordar la clase active y explicarle al navegador que el evento al hacer clic en el enlace, debería ser «none», como este:

 .active {pointer-events: none; 
cursor: default;
}

Puede ver este método en acción en JSFiddle. Si elimina el código CSS allí y luego vuelve a ejecutar los datos, el enlace de repente se vuelve cliqueable y utilizable. Esto se debe a que cuando el CSS no se aplica, 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 todavía está allí, simplemente no es utilizable.

Cambiar el color del enlace

Normalmente, un diseñador web creará hipervínculos de 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, simplemente podemos cambiar la clase a lo que queramos para que solo se oculten enlaces especiales.

Si no utilizamos una clase y en su lugar aplicamos el CSS de abajo a cada enlace, todos desaparecerían. Eso no es lo que buscamos aquí, así que usaremos este código HTML que usa la clase personalizada hideme :

  Lifewire.com  

Averigüe qué color usar

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

Por ejemplo, si el color de fondo tiene un valor hexadecimal de e6ded1 , debe saberlo 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. Úselo para probar el color de fondo de su página web para obtener el color hexadecimal.

Personaliza el CSS para cambiar el color

Ahora que tiene el color que debería ser el enlace, es hora de usar eso y el valor de clase personalizado de arriba, para escribir el código CSS:

 .hideme {
color: # e6ded1;
}

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

 .hideme {
color: blanco;
}

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

Rate article
labsfabs.com
Add a comment