REPOSITORY OVERVIEWLive repository statistics
★ 7Stars
⑂ 0Forks
◯ 0Open issues
◉ 7Watchers
32/100
OPENREPOHUB HEALTH SIGNALLimited signals
A transparent discovery signal based on current public GitHub metadata.
Recent activity35% weight
10 Community adoption25% weight
13 Maintenance state20% weight
100 License clarity10% weight
0 Project information10% weight
51 This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
README preview
🚀 Desafio: 30 dias de CSS
🎯 Objetivo
Repositório destinado aos projetos do desafio de 30 dias de CSS. O objetivo é construir 30 mini projetos, a partir do dia 27 de abril de 2021, utilizando HTML e CSS, para desenvolver as habilidades de codificação do front-end.
Link da ideia do projeto
📋 Regras
- Realizar um projeto por dia;
- Compartilhe seu progresso nas mídias sociais (Twitter, Facebook, LinkedIn etc.) usando a hashtag #30diasDeCSS;
- O projeto deve ser concluído até 23:59.
🖥 Projetos desenvolvidos
Ícone de mídia social em camadas
O que aprendi:
skew()rotate()nth-child()- Criação das camadas com a tag
<span></span> e com o :hover
Loader animado
O que aprendi:
- Propriedade
border-top
- Criação de animações
Mudança de cor de texto quando entra em outra div
O que aprendi:
- Efeito de marquee com CSS
- Propriedade
mix-blend-mode
- Animação com
translateX()
Botão com animação na borda
O que aprendi:
::before e ::after- Manipular elementos SVG com as tags
<svg> e <rect>
- Propriedades CSS para manipular elementos SVG:
strokestroke-widthstroke-dasharraystroke-dashoffset
Botão com efeito de pulsar
O que aprendi:
Efeito lightning text
O que aprendi:
- Animação com delay
text-shadow
Preloader animado
Ideia original
O que aprendi:
- Animação com
::before e delay
- Porcentagem no
@keyframes
Coração batendo
O que aprendi:
- Animação com a função
scale() da propriedade transform do CSS
Pêndulo de Newton
O que aprendi:
transform-origin- Animação com a função
rotate()
::after
Animação com texto alternando
O que aprendi:
::after- Propriedade
content
Botão com efeito de preenchimento no hover
O que aprendi:
- Transição no
:hover com variação de altura do elemento ::after
Efeito de preenchimento do texto ao passar o mouse
O que aprendi:
- Transição no
:hover com variação do tamanho do elemento ::after
- Propriedade
white-space
Loader animado
Ideia original
O que aprendi:
- Animação com
translateX() e animation-delay
Background de texto animado
O que aprendi:
background-clipbackground-position
Ilustração com efeito líquido
O que aprendi:
- Efeito líquido utilizando
::after, ::before, animation e transform
Botão animado com hover e transform
Ideia original
O que aprendi:
hover- Propriedade
transform e suas funções scale(), rotate() e translate()
Relógio com design de neomorfismo
Ideia original
O que aprendi:
- Propriedade
box-shadow com valores negativos
- Sombra interna (
inset)
Switch para o modo claro/escuro
Ideia base para a estilização do switch
O que aprendi:
- Substituir estilização padrão do
input do tipo checkbox
Chat de mensagens com indicador de que alguém está digitando
O que aprendi:
- Animação com
scale() do transform
- Referência unicode de emojis no HTML
Virar cartão
O que aprendi:
rotateY()transform-stylebackface-visibility
Loader animado
O que aprendi:
translateY()- Animação com variação de tamanho de elementos
Card com efeito vidro
Ideia original
O que aprendi:
- Função
blur() da propriedade backdrop-filter
- Propriedade
align-items para o display grid
Animação do sistema solar
O que aprendi:
- Animação com diferentes durações para cada elemento
rotate(360deg)- Posicionamento
Preloader
Ideia original
O que aprendi:
To-do list
O que aprendi:
- Alterar estilização padrão do checkbox com pseudo-elementos e
:checked
Botão de download animado
Ideia original
O que aprendi:
- Posicionamento com valor negativo
- Animação com pseudo-elementos
- Barra de progresso
Animação para alterar cor do gradiente
O que aprendi:
background-size- Animação com
background-position
Animação da vela queimando
O que aprendi:
- Animação com
border-radius e scale()
Menu responsivo
O que aprendi:
Animação de fogos de artifício
O que aprendi:
- Mais de um valor para o
box-shadow
Feito com ❤ por Fabiana Pereira