Snippets

Voici une petite collection de "snippets" CSS plutôt utiles.

Centrer un élément positionné en 'absolute'

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

Des formes en CSS

Un triangle

 #triangle-up {
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 100px solid red;
    }

Un cercle

    #circle {
      width: 100px;
      height: 100px;
      background: red;
      border-radius: 50%
    }
  

D'autres formes crées uniquement avec CSS

Un bouton "hamburger" animé

<div class="hamburger-menu">
  <div class="bar top"></div>
  <div class="bar middle"></div>
  <div class="bar bottom"></div>
</div>

.hamburger-menu {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 2.5rem;
  width: 2.5rem;
  cursor: pointer;
}

.hamburger-menu .bar {
  height: 5px;
  background: black;
  border-radius: 5px;
  margin: 3px 0px;
  transform-origin: left;
  transition: all 0.5s;
}

.hamburger-menu:hover .top {
  transform: rotate(45deg);
}

.hamburger-menu:hover .middle {
  opacity: 0;
}

.hamburger-menu:hover .bottom {
  transform: rotate(-45deg);
}