Blog do MX Cursos

EnjoyCSS – Criando efeito com CSS3 de maneira fácil

Avaliar post

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.

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.

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.

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

Abra a opção para copiar o código CSS3 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.

Your Header Sidebar area is currently empty. Hurry up and add some widgets.

Newsletter

Newsletter

Receba em seu e-mail conteúdos semanais sobre desenvolvimento, design, audiovisual e tecnlogia.

Inscrição realizada com sucesso!