Simple folded list with CSS only

[x32x01]

Creating a simple folded list using CSS only is a great way to enhance your web design. This folded list will be created by hiding items initially and allowing users to reveal them when clicked, using only HTML and CSS (no JavaScript)

<section class="flex">
    <h1 class="heading">
        <span>
            A folded list
        </span>
    </h1>
    <ul class="list">
        <li class="list__item">
            <span class="list__item-text">Gumbo beet greens</span>
        </li>
        <li class="list__item">
            <span class="list__item-text">Parsley shallot courgette</span>
        </li>
        <li class="list__item">
            <span class="list__item-text">Dandelion cucumber earthnut</span>
        </li>
        <li class="list__item">
            <span class="list__item-text">Nori grape silver beet</span>
        </li>
        <li class="list__item">
            <span class="list__item-text">Bunya nuts black-eyed pea</span>
        </li>
        <li class="list__item">
            <span class="list__item-text">Kohlrabi radish okra</span>
        </li>
    </ul>
</section>

/* VARIABLES */
$colors: (
    background: #79a8a9,
    backgroundDarker: #1f4e5f,
    card: #f4f7f7,
    text: #1f4e5f,
    textInverted: #f4f7f7
);

$sizes: (
    padding: 1.5em,
    height: 4em,
    shadow: 5px,
    perspective: 150px
);


/* BASE STYLES */

body {
    color: map-get($colors, text);
    font: 400 100%/1.4 "Lato", sans-serif;
    background-image: radial-gradient(map-get($colors, backgroundDarker) 10%, map-get($colors, background) 100%);
    background-size: 2000px 2000px;
    background-position: center;
}

.flex {
    position: relative;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.heading {
    color: map-get($colors, textInverted);
    font-size: 1rem;
    padding-bottom: 2rem;
    text-transform: uppercase;
    opacity: 0.85;
}


/* THE LIST ITSELF */

.list {
    font-size: 1.15rem;
 
    &__item {
        position: relative;
        padding: map-get($sizes, padding);
        line-height: 1;
        perspective: map-get($sizes, perspective);
        background-color: map-get($colors, card);
        white-space: nowrap;

        &::before,
        &::after {
            position: absolute;
            top: 0;
            display: block;
            height: 0;
            width: 0;
            content: "";
            border: 0 solid transparent;
        }

        &::after {
            right: 0;
        }

        &::before {
            left: 0;
        }

        &:nth-child(even) {
            background-image: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, transparent 100%);

            &::before,
            &::after {
                border-top-color: map-get($colors, backgroundDarker);
                border-top-width: map-get($sizes, height);
            }

            &::before {
                border-right-width: map-get($sizes, shadow);
            }

            &::after {
                border-left-width: map-get($sizes, shadow);
            }
        }

        &:nth-child(odd) {
            background-image: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.15) 100%);

            &::before,
            &::after {
                border-bottom-color: map-get($colors, backgroundDarker);
                border-bottom-width: map-get($sizes, height);
            }

            &::before {
                border-right-width: map-get($sizes, shadow);
            }

            &::after {
                border-left-width: map-get($sizes, shadow);
            }
        }

        &-text {
            display: inline-block;

            .list__item:nth-child(odd) & {
                transform: rotateX(-7deg);
            }

            .list__item:nth-child(even) & {
                transform: rotateX(7deg);
            }
        }
    }
}