Skip to content

digitalbocca/Gradient

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Ultima Atualização na v3.15.1

Gradient

Uma Simples Implementação de Fundo Degradê

(c)2020-2021 Estúdio Digital Bocca


Gradient - README


EXEMPLO

https://digitalbocca.github.io/Gradient/

COMO USAR

Declare uma class contendo o background na cor escolhida. Não se esqueça de deixar um fallback para browsers antigos.

.edb-gradient{
  /**
   * Fallback para browser antigos que não suportam essa funcionalidade
   * Deve ser declarado primeiro, pois se o browser entender a
   * próxima linha ele sobrescreve a propriedade background.
   */
  background: #FF512F;
  /**
   * Chrome 10-25
   * Safari 5.1-6
   */
  background: -webkit-linear-gradient(to left, #FF512F , #F09819);
  /**
   * W3C
   * IE 10+/ Edge
   * Firefox 16+
   * Chrome 26+
   * Opera 12+
   * Safari 7+
   */
  background: linear-gradient(to left, #FF512F , #F09819);
}

Use sua class no elemento escolhido.

<body class="edb-gradient">
  <!--
    Neste caso estou usando no body,
    mas pode ser usado em outro elemento.
  -->
</body>

REGISTRO DE ALTERAÇÕES

Veja no arquivo CHANGELOG.

REFERÊNCIAS

Site onde escolho as Paletas de Gradient: Paletas de Gradiente por: http://uigradients.com

Outro ótimo site para montar sua Paleta: Grabient: https://www.grabient.com/

O selo que fica no canto superior direito com o link do repositório é: GitHub Corners por: http://tholman.com/github-corners/

A animação do texto é feita com TypedJS: TypedJS por: http://www.mattboldt.com/demos/typed-js/

LICENÇA

MIT

Este código tem somente finalidade didática e não deve ser usado em produção.

O código não seguem nenhuma padronização, servindo apenas para simular o funcionamento.

O objetivo é sugerir formas de usar gradient em páginas HTML na prática.

Envie sua sugestão ou correção.

Obrigado.