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 of the code for you to copy.
Use these three properties to create a Flexbox row layout.
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
Use this to create a Flexbox column layout.
.column {
display: flex;
flex-direction: column;
}
Build a 12-column layout using CSS Grid.
.grid {
display: grid;
width: 100%;
grid-template-columns:
repeat(12, 1fr);
}
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%
);
}
Use transition and box shadows to glow on hover.
.code-card .card-header {
border-radius: 8px;
transition: all 0.5s ease-in-out;l
}
.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);
}
Use position properties and negative margins to raise elements higher than their natural starting point.
.card-header {
postion: relative;
margin-top: -20px
}