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ó

Averiguar la Salud del Disco Duro, con Crystal Disk Info [Windows]

Averiguar la Salud del Disco Duro, con Crystal Disk Info [Windows] : El actual “cuello de botella” en nuestras PCs; es decir, donde todo el rendimiento de nuestra PC llega a estancarse , es en el Disco Duro. Si bien los procesadores han evolucionado considerablemente en velocidad / rendimiento, el RAM no sólo es más económico, sino más veloz, y las tarjetas de video siguen innovando con cada generación, los discos duros han permanecido idénticos desde hace años, limitados por la física. Y es que un disco duro tradicional sólo tiene un máximo de velocidad con el que puede girar (medido en revoluciones por minuto, o RPM) que, a su vez, limita la velocidad de lectura y escritura. En pocas palabras, a pesar de que nuestras PCs pueden procesar información mucho más rápido que hace 5 años, los discos duros siguen leyendo (y escribiendo) esta información prácticamente a la misma velocidad. Esto ha cambiado con la llegada de los SSD, los Discos de Estado Sólo que no están limitados por la velo...
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ó