MX Cursos
enjoyCSS

EnjoyCSS – Criando efeito com CSS3 de maneira fácil

5/5 - (1 vote)

Todos que trabalham com desenvolvimento, sempre buscam otimizar o tempo. Focando em novas etapas, novas formas de aprendizado, melhorando assim o fluxo de trabalho.

Numa época não tão distante, criar determinados efeitos com CSS, só era possível com base na “gambiarra”. Uma simples borda arrendonda, era necessário utilizar um conjunto de span, ou imagens para chegar num efeito desejado.

Com o CSS3, isso mudou, porque foram incluídas novas funcionalidades e recursos que ajudaram muito a criar efeitos melhores, dependendo menos de outras tecnologias, como Javascript.

Apesar dessa evolução, muitas vezes demoramos para criar determinado efeito com CSS3, num processo de editar, salvar, atualizar, até chegar o efeito desejado.

EnjoyCSS

Com intuito de facilitar e agilizar essa criação, foi criado EnjoyCSS .

Ele te oferece uma ferramenta para criar de forma visual, toda a estilização, e depois basta apenas copiar o CSS3 gerado e implementar nos seus projetos.

As características principais são:

  • transições complexas múltiplas
  • múltiplos gradientes lineares e radiais
  • múltiplas sombras de caixa e texto
  • fontes personalizadas (incluindo fontes do google)

Galerias de efeitos prontos

E além do mais, existe uma galeria de vários efeitos prontos, que podem ser customizados de acordo com cada necessidade no CSS3.

Enjoy CSS

Você pode desde de criar até utilizar exemplos da galeria e realizar as modificações de acordo com seu projeto. Depois basta copiar o código CSS3 e utilizar em seu site.

Efeitos

Os ajustes são separados em Grupos e dentro desses grupos temos as propriedades:

  • Text
  • Background
  • Size, position, offset
  • Box Shadow
  • Text Shadow
  • Border and Radius
  • Transitions
  • Transforms

Para alterar o texto, basta clicar do lado esquerdo inferior (Settings) e em text, alterar o seu texto.

Alterar texto

E depois de finalizar, basta clicar me Get the Code.

Botão para gerar código

Abra a opção para copiar o código CSS3 e HTML.

O código CSS e HTML

Dessa forma, você pode além de aprender como fazer os efeitos, utilizá-los de forma customizadas, economizado assim, tempo.

Espero que tenham gostado, e até a próxima.

Clube de Cursos Clube de Cursos

Conheça nosso Clube de Cursos e potencialize suas habilidades em Produção e Edição de Vídeos, Design, Marketing Digital, Programaço, WordPress, 3D e Modelagem, Motion Graphics e muito mais!

CONHEÇA O CLUBE
Compartilhar
Twittar
Compartilhar