Переключатель checkbox дня и ночи коту на css и html
Настоящий друг — это человек, который выскажет тебе в глаза все, что о тебе думает, а всем скажет, что ты — замечательный человек.
2-сентября-2023, 21:37 11 0
В продолжении кото-темы предлагаю вашему вниманию checkbox , переключатель дня и ночи коту выполненный на css и html. Возможно кому и пригодится для оформления сайта или блога соответствующей тематики. Установка займёт не более двух минут, вам достаточно скопировать ниже приведённый код к себе на сайт.
HTML
<div class="the-container">
<input type="checkbox" id="toggle" />
<label for="toggle"></label>
<div class="day-night-cont">
<span class="the-sun"></span>
<div class="the-moon">
<span class="moon-inside"></span>
</div>
</div>
<div class="switch">
<div class="button">
<div class="b-inside"></div>
</div>
</div>
<div class="c-window">
<span class="the-sun"></span>
<span class="the-moon"></span>
<div class="the-cat">
<div class="cat-face">
<section class="eyes left">
<span class="pupil"></span>
</section>
<section class="eyes right">
<span class="pupil"></span>
</section>
<span class="nose"></span>
</div>
</div>
</div>
</div>
CSS
<div class="the-container">
<input type="checkbox" id="toggle" />
<label for="toggle"></label>
<div class="day-night-cont">
<span class="the-sun"></span>
<div class="the-moon">
<span class="moon-inside"></span>
</div>
</div>
<div class="switch">
<div class="button">
<div class="b-inside"></div>
</div>
</div>
<div class="c-window">
<span class="the-sun"></span>
<span class="the-moon"></span>
<div class="the-cat">
<div class="cat-face">
<section class="eyes left">
<span class="pupil"></span>
</section>
<section class="eyes right">
<span class="pupil"></span>
</section>
<span class="nose"></span>
</div>
</div>
</div>
</div>
