[Aporte] Interruptores solo con CSS? Es possible !!!

[LoveSilence]

Todos sabemos, que el checkbox tiene una característica, que cuando hacemos click aparece una marca. А partir de esto al elemento se le asigna un atributo "checked".

A partir de aqui comenzamos a desarrollar nuestro elemento.

HTML

Código HTML:

<
div class="switcher">
    <input id="sw" type="checkbox" class="switcher-value">
    <label for="sw" class="sw_btn"></label>
    <div class="bg"></div>
</div> 

como deslizador ponemos el tag "label", porque está vinculado a un ID específico para input.

Tendrá siguiente función. Tu clicas en "label" = pones marca en el "input".


CSS general

Código:

.switcher {
    width: 124px;
    height: 49px;
    cursor: pointer;
    position: relative;
}
.switcher * {
    transition: all .2s;
    -moz-transition: all .2s;
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    -ms-transition: all .2s;
}
.switcher .sw_btn {
    background: url('btn.png') 0% 0% no-repeat;
    width: 49px;
    height: 49px;
    display: block;
    cursor: pointer;
    z-index: 1;
    position: relative;
}
.switcher .bg { background: url('bg-off.png') 0% 0% no-repeat; }
.switcher input.switcher-value { display: none; }
.switcher .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

Como podéis ver, escondemos el "input", ya que lo necesitamos solo como almacén de valores.

Ahora vamos por lo mas interesante:

CSS

Código:

.switcher input.switcher-value:checked ~ .sw_btn { margin-left: 68px; }
.switcher input.switcher-value:checked ~ .sw_btn ~ .bg { background: url('bg-on.png') 0% 0% no-repeat; }

Primera linea nos dice, que la margen exterior del elemento con clase sw_btn sera 68px, cuando "input" tenga valor de "checked"

Segunda linea cambia el fondo para el elemento con clase .bg, que va después de elemento sw_btn. También con la misma condición que la primera linea.

[URL="http://myhtmlexamples.narod2.ru/cssswitch/index.html"]Demo[/URL]

[pzin]

Ayer publicaron un artículo sobre lo mismo, pero yendo un poco más allá, ya que se consigue sin usar imágenes ni markup extra.