CSS Snippet Cheat Sheet
Every have trouble recalling your favorite CSS Code? Give it a permanent home and add it to this page!
Selectany snippet below and it'll automatically select all of the code for you to copy.
Flex Box Row
Use these three properties to create a Flexbox row layout.
Row {
display: flex;
flex-direction: row;
flex-wrap: wrap }
Flex Box Column
Use these three properties to create a Flexbox row 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 Gradient
This will create a background linear gradient from top to bottom.
.linear-graident-background {
background-image: linear-gradient (
rgba(232, 102, 236, 0.3) 0%,
rgba(232, 102, 236, 0.6) 100% }
); }
Box Transition Glow
Use transition an box shadows to glow on hober
.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 Opx Opx 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:}