چگونه CheckBoxها را از سادگی خارج کنیم؟

مجموعه CheckBoxهای انیمیشنی زیبا

چک باکس,checkbox

چگونه CheckBoxها را از سادگی خارج کنیم؟

CheckBox  یکی از عناصر ورودی HTMLهست به این صورت که اطلاعاتی را از کاربر دریافت می کند. نوع داده ای که بر می گرداند boolean است یعنی یا True و یا False بر میگرداند.برای مواقعی استفاده می شود که تنها دو حالت دارد. اگر CheckBoxها را به همان شکل پیش فرض استفاده کنید از زیبایی ساییت کاسته می شود ترجیحا سعی کنید CheckBoxها را به صورت Customاستفاده کنید ما در این مقاله یک نمونه را به شما آموزش میدهیم و برای نمونه های بیشتر شما را به لینک دمو ارجاع می دهیم.

کد HTML برای CheckBox

 <div class="box">
  <input class="Switcher__checkbox sr-only" id="io" type="checkbox" checked="checked"/>
  <label class="Switcher" for="io">
    <div class="Switcher__trigger" data-value="SALE"></div>
    <div class="Switcher__trigger" data-value="RENT"></div>
  </label>
  </div>

کد CSS برای CheckBox

  <style>
        .Switcher {
            position: relative;
            display: flex;
            border-radius: 5em;
            box-shadow: inset 0 0 0 1px;
            overflow: hidden;
            cursor: pointer;
            -webkit-animation: r-n .5s;
            animation: r-n .5s;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            font-size: 3vmin;
            will-change: transform;
        }

        .Switcher__checkbox:checked+.Switcher {
            -webkit-animation-name: r-p;
            animation-name: r-p;
        }

        @-webkit-keyframes r-p {
            50% {
                -webkit-transform: rotateY(45deg);
                transform: rotateY(45deg);
            }
        }

        @keyframes r-p {
            50% {
                -webkit-transform: rotateY(45deg);
                transform: rotateY(45deg);
            }
        }

        @-webkit-keyframes r-n {
            50% {
                -webkit-transform: rotateY(-45deg);
                transform: rotateY(-45deg);
            }
        }

        @keyframes r-n {
            50% {
                -webkit-transform: rotateY(-45deg);
                transform: rotateY(-45deg);
            }
        }

        .Switcher::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            width: 200%;
            border-radius: inherit;
            background-color: #fff;
            -webkit-transform: translateX(-75%);
            transform: translateX(-75%);
            transition: -webkit-transform .5s ease-in-out;
            transition: transform .5s ease-in-out;
            transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out;
        }

        .Switcher__checkbox:checked+.Switcher::before {
            -webkit-transform: translateX(25%);
            transform: translateX(25%);
        }

        .Switcher__trigger {
            position: relative;
            z-index: 1;
            padding: 1em 5em;
        }

        .Switcher__trigger::after {
            content: attr(data-value);
        }

        .Switcher__trigger::before {
            --i: var(--x);
            content: attr(data-value);
            position: absolute;
            color: #00a8ff;
            transition: opacity .3s;
            opacity: calc((var(--i) + 1) / 2);
            transition-delay: calc(.3s * (var(--i) - 1) / -2);
        }

        .Switcher__checkbox:checked+.Switcher .Switcher__trigger::before {
            --i: calc(var(--x) * -1);
        }

        .Switcher__trigger:nth-of-type(1)::before {
            --x: 1;
        }

        .Switcher__trigger:nth-of-type(2)::before {
            --x: -1;
        }

        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            border: 0;
        }

        .box {
            display: flex;
            flex: 1;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            overflow: hidden;
            -webkit-perspective: 750px;
            perspective: 750px;
        }

        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        html {
            height: 100%;
        }

        body {
            display: flex;
            flex-direction: column;
            min-height: 100%;
            margin: 0;
            line-height: 1.4;
            color: #fff;
            background-color: #00a8ff;
        }

        .intro {
            width: 90%;
            max-width: 50rem;
            padding-top: .5em;
            padding-bottom: 1rem;
            margin: 0 auto 1em;
            font-size: calc(1rem + 2vmin);
            text-transform: capitalize;
            text-align: center;
            font-family: serif;
        }

        .intro small {
            display: block;
            text-align: right;
            opacity: .5;
            font-style: italic;
            text-transform: none;
            border-top: 1px dashed rgba(255, 255, 255, 0.75);
        }

        .info {
            margin: 0;
            padding: 1em;
            font-size: .9em;
            font-style: italic;
            font-family: serif;
            text-align: right;
            opacity: .75;
        }

        .info a {
            color: inherit;
        }
    </style>

 

لینک دمو

منبع: طراحی سایت ارزان

اگر سوالی در رابطه با این مطلب دارید می توانید از طریق فرم زیر ارسال کنید
  • ایمیل شما به هیچ عنوان در سایت نمایش داده نمی شود
  • کامنت شما بعد از تایید مدیر سایت نمایش داده می شود