Neste post vamos listar um componente criado por nós usando CSS puro, com animação e com um designer moderno.
O componente está disponível, totalmente gratuito para testes, usar em projetos ou usar de inspiração para criação de um projeto de chat.
Criamos para mostrar que é possível resolver bastante problemas usando apenas CSS sem usar JS. Porém provavelmente se você for criar um chat com esse componente precisará usar algum Javascript para melhorar o comportamento.
O primeiro modelo abaixo é apresentado uma tela inicial, onde os usuários podem preencher o formulário para entrar no chat.
See the Pen widget chat pure css by Cupcom Codes (@cupcomcodes) on CodePen.
Este segundo modelo é uma representação do chat, a foto mostrada seria o atendente e a interação que não possui foto seria o seu cliente.
See the Pen widget chat interaction by Cupcom Codes (@cupcomcodes) on CodePen.
Aqui no site ainda temos alguns outros componentes exclusivos. Header completo usando apenas CSS.
Espero ter ajudado 🙂
