Flexbox Row
Use these three properties to create a Flexbox row layout.
.row { display: flex; flex-direction: row; flex-wrap: wrap; }
Ever have trouble recalling the exact syntax for your favourite CSS code? Give it a permanent home and add it to this page! Select any snippet below and it will 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; } .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 { position: relative; margin-top: -20px; }