! Сегодня

Главная » Web и Технологии » Переключатель checkbox дня и ночи коту на css и html

Переключатель checkbox дня и ночи коту на css и html

Когда человек действительно хочет чего-то, вся Вселенная вступает в сговор, чтобы помочь этому человеку осуществить свою мечту.

2-сентября-2023, 21:37   1   0

Переключатель checkbox дня и ночи коту на css и html

В продолжении кото-темы предлагаю вашему вниманию 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>



Поделиться

Tags

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
Что приходит после зимы ?

Редакторы выбирают

Web и Технологии