Cambio de hoja de estilos con puro Css

Uso de la pseudoclase :target para cambiar la apariencia a todo el contenido de una página web.

Cambio de hoja de estilos con puro Css

Por Kseso ✎ 0
Cambio de hoja de estilos con puro Css

Una vieja práctica, tanto casi como las propias páginas web, es ofrecer al visitante la opción de seleccionar o cambiar la apariencia con las que se muestran ciertos elementos como el tamaño de la tipografía, color de fondo... o toda la apariencia de la página.

En ocasiones cada selección lleva aparejado incluso la presencia o ausencia de elementos, y no sólo su estética.

Normalmente se recurre a js para ofrecerle al visitante las opcines de cambiar los estilos con los que visualiza la página. Pero es algo que también pueda hacerse sólo con puro Css.

En esta ocasión y antes de entrar a ver el cómo te dejo jugar con el ejemplo. Si no puedes visualizarlo, aquí un enlace al ejemplo en jsfiddle. Debajo el pen:

See the Pen jbGyeM by Kseso (@Kseso) on CodePen.

Ver Demo a Full

Advertencia: he tenido que hacer una pequeña trampa en el ejemplo por las limitaciones la página donde alojo el ejemplo.

"La trampa" es añadir un <body> y tras el un div>. El código html bueno, sin argucias sería:

<!DOCTYPE html> <html id="huevera" lang="es-es"> <head> <meta charset="utf-8"> <title>Kseso: jugando con Css</title> </head> <body id="color"> <h1>Prefiero los huevos:</h1> <ul> <li><a href="#color">Blancos</a></li> <li><a href="#huevera">Morenos</a></li> <li><a href="#">No me gustan los huevos</a></li> <div> <div class="huevo"></div> <div class="huevo"></div> <div class="huevo"></div> </div> </body> </html>

Como ves, un html de lo más sencillo. Quizás sólo el hecho de marcar con un id el html y otro para el body que utilizaremos como destino interno (anclas o anchors) de los enlaces para cambiar los estilos.

Los estilos iniciales con los que carga la página:

* {margin: 0; padding: 0; border: none; position: relative;} html { background: #fff; height: 100%; min-height: 100%; } body { height: 100%; min-height: 100%; } h1 {text-align: center; font-size: 3em;} ul {list-style-type: none; margin: 0 3em;} .huevo { display:block; width:126px; /* el 70% de height */ height:180px; -webkit-border-radius:63px 63px 63px 63px/ 108px 108px 72px 72px; /* bug en Safari*/ border-radius:50% 50% 50% 50%/60% 60% 40% 40%; float: left; margin: 20px; }

Tienes un artículo completo para ver cómo lograr los huevos en puro Css.

Para conseguir que se apliquen unos estilos u otros usamos :target de la siguiente manera:
Los huevos blancos aparecen porque el destino del enlace es el id del body (#color), lo que hace que se aplique el css:

#color:target { background: #FFE4AC; color: red; } #color:target h1 { font-family: monospace; text-transform: uppercase; } #color:target .huevo { background-color:#F8F8F8; box-shadow: 0 0 60px rgba(0, 0, 0, 0.2) inset, -5px -5px 15px rgba(0, 0, 0, 0.1) inset; }

Para los morenos es el mismo mecanismo. El destino del link es el id del html (#huevera) y el css que aplica:

#huevera:target { background: #41B7D8; color: #fff; } #huevera:target h1 { font-family: georgia, serif; text-transform: uppercase; } #huevera:target .huevo { background-color:#FFE4AC; box-shadow: 0 0 60px rgba(0, 0, 0, 0.2) inset, -5px -5px 15px rgba(0, 0, 0, 0.1) inset; }

Y ya sólo quedaba darles una opción a los huevofóbicos (¿o son ovifóbicos?) y otra a los inapetentes xD.
Así que para estos últimos dejo el destino de su enlace vacío: <a href="#">. Los id´s anteriores dejar de estar seleccionados (no target) y vuelven a aplicarse las reglas con las que cargó la página inicialmente.

Chocolate y ficha Lego puro Css

Echa a volar tu imaginación y mezcla un poco de :target con, por ejemplo, los pseudoelementos :before/:after para divertirte un poco jugando con Css y atrévete a dejar tu opinión o ideas o realizaciones al respecto en los comentarios. Es gratis y además no cobro ;-)
Eso sí, no seré yo quien lo recomiende en una página "industrial"

Otras demos de funcionamiento similar

Y como guinda del pastel, otra vieja realización. Y si no lo ves bien, aquí en pantalla completa

See the Pen Ahora es invierno en el Sur, y con Css lo que quieras by Kseso (@Kseso) on CodePen.

Por lo viejas o veteranas que son las demos, la fecha original de publicación (Mayo de 2012) y su carácter principalmente divulgativo hay algunos aspectos notoriamente mejorables.

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 0

EsCss RSS del Blog RSSS Comentarios ᛯ Licencia Beerware Humans.txt ᛯ Diseño por Kseso SiteMap