Salta al contingut principal

Uso de la pseudo-clase target

CSS3 trajo muchos selectores nuevos, entre ellos está :target, que es una pseudo-clase de CSS que se activa cuando el target de un elemento está activo, es decir, desde un link hemos ido a una parte concreta del texto (en una etiqueta <a> hemos establecido un enlace como este: "#texto"). Esta pseudo-clase se activa al pulsar un link y no se desactiva hasta pulsar otro, por lo que nos puede servir para crear menús, pestañas y más cosas impresionantes con solo CSS.
Ejemplo de uso de :target.


Pestaña


Pestaña


Pestaña

Al pulsar uno de los botones (con link a "#nombre") aparecerá el elemento que tenga en su ID también "nombre", gracias a la propiedad de CSS :target.

Al pulsar uno de los botones (con link a "#nombre") aparecerá el elemento que tenga en su ID también "nombre", gracias a la propiedad de CSS :target.

Al pulsar uno de los botones (con link a "#nombre") aparecerá el elemento que tenga en su ID también "nombre", gracias a la propiedad de CSS :target.


Cerrar


En el ejemplo hay tres links, que llevan a "textoN" (del 1 al 3, como podemos ver en la URL al pulsar uno de ellos) y ese mismo nombre es el que aparece en la ID de cada uno de los bloques de texto. Con este pequeño ejemplo hemos visto como funciona :target, ahora os voy a enseñar como ponerlo en funcionamiento.

  1. <!-- Al pulsar el link se activa el :target del DIV -->

  2. <a href="#texto">Pestaña</a>

  3. <div id="texto">Bloque con el texto</a>






via Pedro Gutiérrez [Xitrus - RSS] http://xitrus.es/blog/81/Uso_de_la_pseudo-clase_target

Comentaris

Publica un comentari a l'entrada

Entrades populars d'aquest blog

15 Tutoriales CSS3 para mejorar tus paginas web

15 Tutoriales CSS3 para mejorar tus paginas web : Les dejo una pequeña recopilación de tutoriales CSS3 que espero sean de utilidad para ustedes, intentamos hacer una recopilación bastante completa para crear impresionantes diseños web con CSS3 y aprovechar las bondades de CSS3 incluso para aplicar efectos, son un total de 15 tutoriales CSS3 gratis . Crear menu dropdown con CSS3 Crear breadcrumbs con estilo Transiciones de paginas con CSS3 Crear timeline con CSS3 y jQuery Reproductor de video con HTML5, CSS3 y jQuery Crear efecto acordion CSS3 Aplicar degradado a texto Crear texto en curva con CSS3 y jQuery Aplicar textura a texto con Magic Pill Crear slider de imagenes con CSS3 y jQuery Rotar texto con CSS3 Crear menu vertical con CSS3 Crear formulario con HTML5 y CSS3 Crear efecto de imagenes apiladas con CSS3 Aplicar estilos para imagenes con CSS3  
Publica un comentari a l'entrada
Més informació

El meu editor de codi preferit el 2024, que això ja se sap que va canviant 😄

Visual Code Visual Code és un editor de codi font lleuger, però potent que s’executa al teu escriptori i està disponible per a Windows, macOS i Linux. Compta amb suport integrat per a JavaScript, TypeScript i Node.js i té un ric ecosistema d’extensions per a altres llenguatges i entorns d’execució (com C++, C#, Java, Python, PHP, Go, .NET).  És una eina ideal per a desenvolupar i depurar aplicacions web i en el núvol. Per què Visual Code? Visual Code té molts avantatges com a editor de codi font, com per exemple: És gratuït, ràpid i fàcil d’instal·lar i actualitzar. Té un ampli ecosistema d’extensions que et permeten afegir funcionalitats i personalitzar la teva experiència de desenvolupament. Té un suport integrat per a molts llenguatges i entorns d’execució, i et permet depurar i executar el teu codi des del mateix editor. Té una interfície senzilla i elegant, amb diferents temes i modes de visualització. Té un sistema de sincronització de configuracions que et permet guardar les...
Publica un comentari a l'entrada
Més informació

Learn Composition from the Photography of Henri Cartier-Bresson

“Do you see it?” This question is a photographic mantra. Myron Barnstone , my mentor, repeats this question every day with the hopes that we do “see it.” This obvious question reminds me that even though I have seen Cartier-Bresson’s prints and read his books, there are major parts of his work which remain hidden from public view. Beneath the surface of perfectly timed snap shots is a design sensibility that is rarely challenged by contemporary photographers. Henri Cartier-Bresson. © Martine Franck Words To Know 1:1.5 Ratio: The 35mm negative measures 36mm x 24mm. Mathematically it can be reduced to a 3:2 ratio. Reduced even further it will be referred to as the 1:1.5 Ratio or the 1.5 Rectangle. Eyes: The frame of an image is created by two vertical lines and two horizontal lines. The intersection of these lines is called an eye. The four corners of a negative can be called the “eyes.” This is extremely important because the diagonals connecting these lines will form the breakdown ...
Publica un comentari a l'entrada
Més informació