CSS Snippet Cheatsheet

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);
}

Add a drop shadow effect to an element adjust opacity to suit '0.2'.

.element {
  position: relative;
  box-shadow-: 0 2px 4px rgba(0, 0, 0, 0.2);
}

Use position properties and negative margins to raise elements higher than their natural starting point.

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

Build a 5 column grid with auto rows.."Awesome"

.wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: minmax(100px, auto);
  gap: 15px;

}

Apply transition effect.

.element {
  transition: all 0.3s ease-in-out;
}

.element:hover {
  transform: scale(1.1);
}

This grid allows you to define the size and placement of grid items within a grid container.

.grid {
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(250px, 1));
  grid-gap: 20px;
}

.grid img {
  width: 100%;
  height: auto;
}

This effect allows for a better UI/UX with the transition effect.

.button {
  background-color: #333; 
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #ff4b2b;
}

This provides a set of properties that allow you to control the size, order, alignment and spacing of elements in a container.

.nav {
  display: flex; 
  justify-content: space-between;
  align-items: center;
}

.nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
} 

.nav li {
  margin: 0 10px;
} 

.nav a {
  text-decoration: none;
  color: #333;
}

Centering an element vertically and horizontally within in its parent container .

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

Create a tool-tip on hover good for user experience.

.tooltip {
  position: relative;
}

.tooltip {
  content: 'Tooltip text';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px;
  background-color: #000;
  color: #fff;
  border-radius: 5px;
  font-size: 14px;
}

Designing typography that scales and adjusts based on the screen size and device. This can be achieved using units like 'em' 'rem' and 'vw'.

h1 {
  font-size: 6vw;
  line-height: 1.2;
} 

p{
  font-size: 3vw;
  line-height: 1.5;
}

Create a header that stays at the top of the screen even when you scroll down.

header {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 100;
}

Centering an element vertically and horizontally.

.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform; translate(-50%, 50%);
}

Hide an element visually but keep it accessible .

.element {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Add a simple hover on a button.

button:hover {
  background-color: #ff0000;
  color: #fff;
}

The 'text-shadow' property takes four values: horizontal offset, vertical offset, blur radius, and color.

text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);