Ciekawe efekty i użyteczne zastosowania Checkbox na stronie internetowej [CSS]

Dziś zajmę się efektami jakie można uzyskać z pomocą „Checkbox„.

Jedyne co będzie potrzebne poza samym elementem <input type=„checkbox„> to <label> i <div>. Jak widać nie będę tworzyć nic bardzo skomplikowanego w HTML. Zabawa zacznie się kiedy zastosuje CSS by nadać elementom „trochę życia”. 

Zamiana elementów miejscami po kliknięciu

Pierwszą dość prostym efektem jaki chciałam pokazać jest zamiana/podmiana elementów miejscami. Na moje potrzeby wykorzystam dwa Emoji ??. W wyniku kliknięcia będą się one zamieniały miejscami. Czyli raz będziemy widzieć 1 buśkę a kolejnym razem inną.

Prosta animacja

Budowę efektu zacznę od stworzenia struktury w HTML

<div>
    <label for="toggle">Toggle</label>
    
    <input type="checkbox" id="toggle">

    <div class="control-me"></div>
</div>

W tej chwili jedyne co posiadamy to 3 elementy zamknięte w <div>. Dwa z nich są ze sobą ściśle powiązane. Chodzi oczywiście <label> i <input type=”checkbox”>. Checkbox posiada bowiem klasę „toggle„. A <label> parametr for=”toggle”.

Żeby to jakoś wyglądało dodam na początek:

body {
    height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    text-align: center;
    font: 900 24px/1.4 -system-ui, sans-serif;
}

Jak widać na powyższym obrazku jedyne co teraz mamy to napis oraz nasz checkbox. Kolejnym krokiem jaki musimy wykonać jest dodanie naszej grafiki oraz poprawa wizualna elementy <label> tak by przypominał on bardziej przycisk.

.control-me::after {
    content: "?";
    font-size: 100px;
}
label {
    background: #673AB7;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    color:#fff;
    cursor:pointer
}

To jeszcze w dalszym ciągu nie działa. Dlatego też należy dodać:

#toggle:checked ~ .control-me::after {
    content: "?";
}

Jak widać pomiędzy od wołaniami do elementów znajduje się znak tyldy ~. O łączeniu ze sobą znajdujących się obok siebie elementach już piałam na tym blogu (podlinkowałam wam wpis pod słowem tyldy).

Teraz ukryjemy nasz checkbox. Zrobię to poprzez dodanie nowej klasy.

<input type="checkbox" id="toggle" class="visually-hidden">

.visually-hidden {
    position: absolute;
    left: -100vw;
}

Gotowy efekt:

Rozwijane menu

Drugim projektem jaki chce dzisiaj zrealizować jest rozwijane menu. Nie będę się zbytnio nad tym projektem rozpisywać ponieważ wykorzystuje on tę samą technologię co wcześniejszy. Tyle że nie będę podmieniała emoji tylko elementy samego menu.

Powyższy obrazek pokazuje jak wygląda moje menu bez ingerencji w CSS. Jak widać zastąpiłam tu checkbox elementem radio.

Dużo innych ciekawych przykładów znajdziecie poniżej:

źródła:

https://css-tricks.com/the-checkbox-hack/