DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
23-02-2015

En esta entrada veremos como podemos emplear la pseudo-class :target en nuestros diseños web.

Este selector o pseudo-class es empleado para seleccionar o dar estilo a un único elemento cuyo id coincida en alguno de los elementos HTML; en otras palabras el selector :target es empleado para dar estilo al elemento HTML actualmente activado.

Las URLs precedidas por el carácter # seguido de un identificador, permite enlazar elementos dentro del documento HTML; veamos un ejemplo:

Si quisiéramos enlazar el siguiente elemento a través de un enlace:

<h2 id="cuatro">Ejemplo cuatro</h2>

Tendríamos que crear un enlace como el siguiente:

<a href="#cuatro"">Empleando la pseudo-class :target para aplicar un overlay</a>

En donde el texto siguiente al caracter #, corresponde al identificador del elemento.

La pseudo-class :target en la práctica

La pseudo-class :target es muy útil cuando realizamos clics en los enlaces para activar las secciones en un documento; indicar la sección seleccionada de una manera más visual para atraer la atención del usuario hacia un área de interés; de clics en los siguientes enlaces:

En el ejemplo anterior estamos creando una región de interés a través de la propiedad border según el elemento activado a través del enlace clickeado por el usuario.

El CSS del ejemplo anterior es el siguiente:

	.parte:target {
		border: 2px solid #F00;
	}

Realmente sencillo y no requiere alguna explicación extra; en cuanto al HTML se divide en dos bloques:

El menú que referencia cada uno de los bloques de textos en el documento:


	<nav>
				<ul>
				    <li><a href="#parte1">Parte 1</a></li>
				    <li><a href="#parte2">Parte 2</a></li>
				    <li><a href="#parte3">Parte 3</a></li>
				    <li><a href="#parte4">Parte 4</a></li>
				</ul>
			</nav>

Y los bloques de texto del documento:

			<div id="parte1" class="parte">
				<span><a href="">X</a>
					<h1>Parte 1</h1>
					<p>Esto es un monto de texto sin sentido que tiene la finalidad
						de llenar espacio para mostrar un contenido.</p>

...</span>
			</div>
			<div id="parte2" class="parte">
				<span><a href="">X</a>
					<h1>Parte 2</h1>
					<p>Esto es un monto de texto sin sentido que tiene la finalidad
						de llenar espacio para mostrar un contenido.</p>

...</span>
			</div>
			<div id="parte3" class="parte">
				<span><a href="">X</a>
					<h1>Parte 3</h1>
					<p>Esto es un monto de texto sin sentido que tiene la finalidad
						de llenar espacio para mostrar un contenido.</p>

...</span>
			</div>
			<div id="parte4" class="parte">
				<span><a href="">X</a>
					<h1>Parte 4</h1>
					<p>Esto es un monto de texto sin sentido que tiene la finalidad
						de llenar espacio para mostrar un contenido.</p>

...</span>
			</div>

El HTML mostrado anteriormente no tendrá variación alguna en los experimentos (exceptuando el último) presentados en esta entrada.

La pseudo-class :target y las animaciones

Podemos emplear las animaciones en CSS para crear cambios más sutiles y no persistentes en el tiempo:

Especificamos la propiedad de la animación:

	.parte:target {
		    animation: brillar 1s ease-out;
	}

Las propiedades definidas en el @keyframes simplemente cambian el color de fondo:

	@keyframes brillar {
	    0% { background-color: rgba(255,0,0,0.2); }
	    100% { background-color: #FFFFFF; }
	}

La pseudo-class :target y las transiciones

En este tercer ejemplo veremos cómo emplear el selector en conjunto con las transiciones en CSS; por defecto ocultaremos todos los bloques de contenidos a través de la propiedad opacity establecida en cero:

.parte {
/*otras reglas*/
opacity: 0;
	transition: opacity 1s;
}

Al dar clic sobre un enlace mostraremos el bloque de contenido progresivamente empleando la siguiente regla que aumenta la opacidad del bloque activado:

.parte:target {
	opacity: 1;
}

Empleando la pseudo-class :target para aplicar un overlay

Como último ejemplo, veremos como crear un sencillo especie de modal al activar el bloque de texto:

selector target en CsS - ejemplo 4

Lo principal que debes de tener en cuenta de este experimento que podrás ver a continuación:

Es que sobreescribimos por completo el comportamiento del bloque de texto activado; es decir, se altera su posición con respecto al resto del documento con la propiedad position y así como el tamaño del mismo que se configura para que ocupe el 100% de la pantalla:

.parte:target {
	background: rgba(0, 0, 0, 0.5);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 5px;
	box-shadow: 0 0 15px #666;
}

Y el contenido a mostrar embebida dentro del elemento span se ubica en el medio de la pantalla:

.parte:target span {
	background: #FFF;
	padding: 10px;
	margin: 20% auto 0 auto;
	display: block;
	width: 50%;
	height: auto;
}

Las demás reglas son de fácil comprensión y permiten definir una mayor estética al experimento.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Colourlovers: Paletas de colores lista para el diseño web

Colourlovers: Paletas de colores lista para el diseño web

Calendario de cubo

Calendario de cubo

Pulpo animado con solo CSS

Pulpo animado con solo CSS

Algunos artículos que te pueden interesar

Botones con fondo corredizo en CSS

Botones con fondo corredizo en CSS

En esta entrada veremos como crear unos fantásticos botones con fondo corredizo.

Andrés Cruz 21-04-2015

Truco para los bordes en CSS: Bordes transparentes

Truco para los bordes en CSS: Bordes transparentes

En esta entrada veremos un pequeño truco que permite que los bordes de los contenedores de nuestros elementos HTML; se vean transparentes.

Andrés Cruz 22-01-2015

¿Qué es LESS CSS?

¿Qué es LESS CSS?

LESS CSS es una extensión de CSS que nos permite agregar dinamismo al CSS tradicional.

Andrés Cruz 12-09-2013