Cambio de hoja de estilos con puro Css 14.10.15
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
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.
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.
Kseso
the obCSServer ᛯ 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 Kseso