Utilidades CSS
===

### Utilizado quando se precisa carregar determinados seletores em dispositivos ou tamanhos de telas

@media only screen and (min-width:200px) and (max-width)
{ 
    .seletor{
        /*regras css*/
    } 
}

### CSS para degradê

.seletor{
    background:blue; /*segurança se não caregar*/
    background:linear-gradient(60deg, white, blue);
    background:-moz-linear-gradient(60deg, white, blue); /*mozilla*/
    background:-o-linear-gradient(60deg, white, blue); /*opera*/
    background:-webkit-linear-gradient(60deg, white, blue); /*safari*/
    /*degrade do fundo*/
}

### Animações mais simples em CSS, sem precisar de JQuery

#### Animação com KeyFrames

@keyframes nomeAnimacao{
    0%{background-color: red; top:0; left: 0;}
    25%{background-color: blue; top:0; left: 200;}
    50%{background-color: green; top:200; left: 200;}
    75%{background-color: yellow; top:200; left: 0;}
    100%{background-color: red; top:0; left: 0;}
}
.seletor{
    background-color: red;
    animation-name: nomeAnimacao;
    animation-duration: 2s; /*duração da animação total*/
    animation-delay: 1s; /*atraso para inicar a animação*/
    animation-iteration-count: 3; /*Quantidades de Vezes repete*/
}

#### Animação com transitions

.seletor{
    background-color: red; 
    transition: all 1s linear;
}
    
.seletor:hover{
    background-color: blue;
}

### Quebra palavras respeitando a largura
`.seletor{word-wrap: break-word;}`

### Efeito de botão descendo

.seletor:active{
transform: translatey(2px)
};