CSS Art: June - 14 de Junho Dia Mundial do Doador de Sangue

#frontendchallenge #devchallenge #css #frontend

This is a submission for Frontend Challenge v24.04.17, CSS Art: June.

Inspiração

Aproveitando o tema livre para escolher algo que represente o mês de junho, podendo ser um lugar, lembrança ou até mesmo uma data, eu resolvi aproveitar para colocar esse tema em pauta que é tão importante e ajuda a salva milhões de vida por ano, que é o de doar sangue, e nada melhor do que aproveitar para falar e exaltar a todos os que se propõem a doar um pouco do que tem, para salvar vidas em todo mundo, não podia deixar passar essa data, que inclusive é a mesma do meu aniversário, e com isso tenho muito orgulho do movimento e apoio a todos que doam ;)

Demo

Inspiração

Pensando no dia mundial do doador de sangue, eu pensei em enfatizar o órgão responsável por fazer todo o bombeamento de sangue no nosso corpo, o mais importante para termos vida ou um dos mais, a partir dae achei interessante que fosse feito usando inteiramente o css.
Para isso eu utilizei das pseudo-classes before e after para criar as formas e para a animação trabalhei muito com os transforms dentro dos meus keyframes para criar toda essa animação de parecer que o coração está pulsando, alternando no seu tamanho de tempo em tempos e deixando com um time de infinite, para ser constante.

Feito essa parte que seria talvez a mais chamativa queria dar uma mensagem de conscientização, mas que não fosse apenas uma mensagem, mas algo funcional sem precisar ser uma aplicação grande seguindo o conceito se SPA, para isso adicionei um button e estilizei ele para que ficasse com a paleta que escolhi usando algumas fontes gratuitas no google fonts, com o link de redirecionar para a página do Hemorio que é uma instituição localizada aqui no estado do Rio de Janeiro no Brasil, que recolhe doação de sangue para o banco de sangue daqui.

Para o background achei interessante colocar uma imagem de fundo em vetor, que representa bem a mensagem da doação ser algo mundial e que independente de cor, gênero, religião entre outros, somos todos iguais, e isso só mostra que devemos nos unir em prol de salvar inúmeras vidas.

Além disso, queria colocar uma mensagem final e para isso nada melhor que a frase:

"Doe sangue, salve vidas. Seja a esperança hoje!"

E para combinar com essa frase animei usando o animation, para dar aquela impressão que tinha alguém digitando, além disso, achei interessante controlar essa animação com JavaScript para que pudesse aumentar ou diminuir o time da animação, para isso criei uma função que acessa o meu seletor ali na minha DOM e com o setTimeout define um time de animação.

Achei também para que não ficar um vazio a aplicação ficaria bacana com um Header bem sutil, e para isso eu fiz usando novamente os keyframes para alterar as cores da nossa paleta imitando uma artéria.

É isso galera espero que curtam, e lembre-se não só dia 14 de junho, mas todos os dias que quiserem os postos de cada cidade ficam sempre buscando novos doadores.
Grande abraço a todos e espero que curtam, todo o código segue livre no CodePen.