Actualizado el sábado, 11 enero, 2020
Selector día – noche en tu sitio web.
Cada vez esta más de moda (sobre todo en visualizaciones con un smartphone), diferenciar la visualización de un sitio web o aplicación dependiendo de si es de día o es de noche.
Por eso mismo te presento un sencillo código html con css, con el cual podrás crear un selector para cambiar los colores de tu template a selección del usuario o visitante.
Comenzamos…
Code Html5
<h1>Selector - DÍA / NOCHE</h1> <div class="switch-wrapper"> <input id="switchCheckbox" type="checkbox"> <span class="switch-label day">Día</span><label for="switchCheckbox" class="switch"></label> <span class="switch-label night">Noche</span></div>
Code CSS
$switch-width: 100px; $switch-height: 40px; $switchToggle-width: $switch-height; $sky-day: #2196F3; $sky-night: #023660; $sun: #ffeb3b; $sun-center: #ffc107; $sun-light: rgba(255,235,255,0.4); $moon: #ddd; $moon-light: rgba(255,255,255,0.2); $star: #fff; $cloud: #fefefe; body{ padding: 20px; text-align: center; font-family: "Courier New", Courier, monospace; font-size: 16px; color: $sky-night; background-color: lighten($moon, 10%); } h1{ font-size: 1.8em; } .switch-wrapper{ margin: 30px 0; font-size: 0; } .switch-wrapper input {display:none;} .switch-label{ font-size: 1rem; display: inline-block; line-height: $switch-height; vertical-align: top; padding: 5px 10px; transition: transform ease-in .2s; font-weight: bold; opacity: 0.6; } .switch { position: relative; display: inline-block; width: $switch-width; height: $switch-height; cursor: pointer; border-radius: $switch-width/2; border: 2px solid #eee; background-color: $sky-day; background-image: radial-gradient(circle, $cloud 20%, transparent 30%), radial-gradient(circle, $cloud 20%, transparent 30%), radial-gradient(circle, $cloud 20%, transparent 30%), radial-gradient(circle, $cloud 20%, transparent 30%), radial-gradient(circle, $cloud 20%, transparent 30%), radial-gradient(circle, $cloud 20%, transparent 30%); background-size: 50% 50%, 60% 60%, 40% 40%, 40% 40%, 50% 50%, 40% 40%; background-position: 60% 82%, 80% 80%, 82% 80%, 110% 20%, 134% 12%, 130% 20%; background-repeat: no-repeat; -webkit-transition: .4s; transition: .4s; overflow: hidden; } .switch:before { position: absolute; content: ""; height: $switch-height - 5; width: $switch-height - 5; top: 50%; left: 2px; cursor: pointer; transform: translateY(-50%); background-color: $sun; background-image: radial-gradient(circle, $sun-center 15%, $sun 100%); box-shadow: 0px 0px 20px 10px $sun-light; transition: transform ease-in .2s; border-radius: 50%; background-repeat: no-repeat; } .switch-label.day{ transform: scale(1.1); opacity: 1; } input:checked ~ .switch { background-color: $sky-night; background-image: radial-gradient(circle, $star 10%, transparent 30%), radial-gradient(circle, $star 10%, transparent 30%), radial-gradient(circle, $star 10%, transparent 30%), radial-gradient(circle, $star 10%, transparent 30%), radial-gradient(circle, $star 10%, transparent 30%), radial-gradient(circle, $star 10%, transparent 30%), radial-gradient(circle, $star 10%, transparent 30%), radial-gradient(circle, $star 10%, transparent 30%), radial-gradient(circle, $star 10%, transparent 30%); background-size: 8% 8%, 7% 7%, 6% 6%, 8% 8%, 8% 8%, 6% 6%, 6% 6%, 8% 8%, 7% 7%; background-position: 20% 20%, 45% 30%, 25% 55%, 20% 90%, 40% 60%, 5% 50%, 58% 10%, 58% 60%, 50% 80%; background-repeat: no-repeat; &:before{ background-color: $moon; background-image: radial-gradient(circle, darken($moon,10%) 50%, transparent 50%), radial-gradient(circle, darken($moon,8%) 50%, transparent 50%), radial-gradient(circle, darken($moon,8%) 50%, transparent 50%), radial-gradient(circle, darken($moon,8%) 50%, transparent 50%),; background-size: 40% 40%, 25% 25%, 50% 50%, 30% 30%; background-position: 20% 20%, 65% 30%, 120% 100%, 20% 80%; box-shadow: 0px 0px 20px 10px $moon-light; } } .switch-wrapper input:checked{ ~ .switch-label.day{ transform: scale(1); opacity: 0.6; } ~ .switch-label.night{ transform: scale(1.1); opacity: 1; } } .switch-wrapper input:checked ~ .switch:before{ transform: translate($switch-width - $switchToggle-width, -50%); }
Un ejemplo del resultado, es:
Espero que te sea útil.