CSS Snippet Cheatsheet

Here are some snippets of CSS that I have found very useful.

Flexbox Row

This makes your flexboxes rows.

display: flex;
flex-direction: row;
flex-wrap: wrap;
Flexbox Column

This makes your flexboxes columns.

display: flex;
flex-direction: column;
Adding a Breakpoint

Allows the page to change when a condition is met.

@media screen and (max-width:1380px) {
   .box {
        min-width: 46%;
    }
}
Linear Gradients

This creates a gradient in whatever you are applying this background to.

background-image:linear-gradient(
    rgb(47,79,79) 0%,
    rgb(211,211,211) 100%
)
Box Transition Glow

Places a glow around the box when you hover over that box.

.box header {
    transition: all 0.5s ease-in-out;
}

.box:hover,.box:hover .box  {
    box-shadow: inset 0px 0px 8px
    rgba(127, 255, 212), 0 0 15px
    rgba(135,206,235);
}
Overlay Box with Title

This offsets the title to be placed above the box. It's a nice stylistic touch.

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