Переключатель checkbox дня и ночи коту на css и html
Настоящее хобби нашего поколения - это нытье и тупая болтовня ни о чем! Неудачные отношения, проблемы с учёбой, начальник-мудак. Это всё полная фигня. Если у тебя ничего не получается, то есть только один мудак - это ты. И ты сильно удивишься, если узнаешь, как много можно изменить, просто оторвав жопу от дивана!
2-сентября-2023, 21:37 12 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>
