CSS Snippet Cheatsheat

This page is a home for the exact synytax for various CSS code elements.

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 layout 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-header {
    box-shadow: inset 0px 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;
    }