Snippet Cheatsheet

Select All

Automatically selects and highlights all content on click.


        .select {
            -moz-user-select: all;
            -webkit-user-select: all;
            -ms-user-select: all;
            user-select: all;
        }

Transition

Use with pseudo code to make small animations when "hovering" or "clicking".

        .card {
            height: 300px
            transition: height 1s 2s
        }

        .card {
            height: 400px
        }

Media Screen

Changes certain rules depending on the width of the screen. Allowing for a smoother user experience no matter what kind of device you are viewing on.


        @media screen and (max-width: 768px) {
            .card {
                width: 100%;
            }
            header {
                background: linear-gradient(rgb(2, 75, 0), #8cda34);
            }
        }

Linear Gradient

Allows a the background to incorporate a spectrum between two specific colors.

        .linear-gradient {
            background: linear-gradient(#9D5809, #ad3202);
        }

Flexbox Row

Aranges content horizontally from left to right.

        .row {
            display: flex; 
            flex-direction: row
        }

Overlay Card with Title

Allows title to overlap the border of the container around it.

        .h2 {
            position: relative;
            margin: -20px;
        }