CSS Cheat Sheet

Ever have trouble recalling the exact syntax for your favorite CSS code? Give it a permanent home and add it to this page! Select any snippet below and it'll automatically select all the code for you to copy.

Flexbox Row

Use these three properties to create a Flexbox row layout. 

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

Flexbox Column

Use this to create a Flexbox column layout. 

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

CSS Grid Layout

Build a 12-column layour using CSS Grid 

                        
        .grid {
            display: grid;
            width: 100%; 
            grid-template-columns:
            repeat(12, 1fr);
        }

Linear Gradients

This will create a background linear gradient from top to bottom. 

                        
            .linear-gradient-background { 
                background-image: linear-
               gradient (
            rgba (232, 102, 236, 0.3) 0%,
            rgba (232, 102, 236, 0.6) 100%
            );
            }

Box Transition Glow

Use transition and box shadows to glow on hover. 

                        
        .code-card .card-header { 
                border-radius: 8px;
                transition: all 0.5s ease-in
            out;
        }

        .code-card:hover,
            .code-card:hover .card-hover {
            box-shadow: inset 0pc 0px 8px
            rgba (232, 102, 236, 1), 0 0 15px
            rgba (232, 102, 236, 1);
        }

Overlay Card with Title

Use position properties and negative margins to raise elements higher than their natural starting point. 

                        
        .card-header { 
            position: relative;
            margin-top: -20px;
        }