Simple folded list with CSS only

x32x01
  • by 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)
Simple folded list with CSS only.png
HTML:
<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>
CSS:
/* 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);
            }
        }
    }
}
 
Last edited:
Similar Threads
x32x01
  • Locked
  • x32x01
Replies
0
Views
474
x32x01
x32x01
x32x01
Replies
0
Views
213
x32x01
x32x01
x32x01
Replies
0
Views
224
x32x01
x32x01
x32x01
Replies
0
Views
223
x32x01
x32x01
x32x01
Replies
0
Views
210
x32x01
x32x01
TAGs: Tags
css code folded list
Register & Login Faster
Forgot your password?
Forum Statistics
Threads
517
Messages
519
Members
50
Latest Member
Trydeco
Back
Top