CSS Snippets

Declarando sass

$layout-name: "l-footer";

.#{$layout-name} {
  height: 7em;
  &__info {
  
  }
}

Criando variaveis scss

$color_projects: (
    "orange": orange,
    "red": red,
);

:root {
    @each $name, $color in $color_projects {
        --color-#{$name}: #{$color};
    }
 }

Resulta

:root {
  --color-orange: orange;
  --color-red: red;
}

Cores

Cor Hexadecimal

#fff - branco
#000 - preto

#ff0000 vermelho rgb(255, 0, 0)  rgba(255, 0, 0, 0.8)
#00ff00 verde rgb(0, 255, 0)  rgba(0, 255, 0, 0.8)
#0000ff azul rgb(0, 0, 255)  rgba(0, 0, 255, 0.8)

#ffff00 amarelo
#ff00ff rosa
00ffff azul ceu

Gradiente

linear-gradient(to right bottom, rgba(128,213,111,0.8), rgba(40,180,131,0.8));

Sombra

box-shadow: 0 10px 20px rgba(0,0,0,.2);

Formas

Desenhar Poligono

clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);

Arredondando uma div

border-radius: 100px;

Centralizar divs com position absolute

<header class="header">
    <div class="header__logo-box">
        <img src="img/logo-white.png" alt="Logo" class="header__logo">
    </div>

    <div class="header__text-box">
        <h1 class="heading-primary">
            <span class="heading-primary--main">Outdoors</span>
            <span class="heading-primary--sub">is where life happens</span>
        </h1>

        <a href="#section-tours" class="btn btn--white btn--animated">Discover our tours</a>
    </div>
</header>

.header{ position: relative;}
.header__logo-box {
    position: absolute;
    top: 4rem;
    left: 4rem;
}
.header__text-box: {
  position: absolut;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50% ); // Agora este é o proprio elemento 
  text-align: center;
}

Animações

@keyframes moveInLeft {
    0% {
        opacity: 0;
        transform: translateX(-10rem);
    }

    80% {
        transform: translateX(1rem);
    }

    100% {
        opacity: 1;
        transform: translate(0);
    }
}

.heading-primary {
  &--main {
        animation-name: moveInLeft;
        animation-duration: 1s;
        animation-timing-function: ease-out;
        
        // ou
        
        // animation: moveInLeft 1s ease-out;
  }
}

renatoapcosta/css_snippet.md