Blog do MX Cursos

EnjoyCSS – Criando efeito com CSS3 de maneira fácil

EnjoyCSS – Criando efeito com CSS3 de maneira fácil

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.

Leia também  Framework's CSS - Crie sites de forma rápida

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.

Gostando do conteúdo de CSS3 do Blog do MX?

CONHEÇA NOSSOS CURSOS ONLINE EM VÍDEO AULAS

TESTE GRÁTIS
David CHC

David CHC

Trabalha com programação há mais de 10 anos e atualmente é líder técnico do MX Cursos, empresa onde atua desde 2010.

Comente!

15 Shares
Share12
Tweet3
+1
Share