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
1 2 3 4 5 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 | $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.