Iniciei o desafio após algumas postagens no linkendin com a #30diasdeCSS, com o intuito de aprender novas técnicas e desenvolver ainda mais as habilidades do front-end. Inspiração motivada por repositórios de Milena Carecho, Pamela Caffa e Juliana Pires.
Também aproveitei e segui alguns tutoriais dos canais abaixo 👇
DarkCode | Online Tutorials | Creative Creations | Coding Nepal
- Realizar um projeto por dia.
- Compartilhe seu progresso nas mídias sociais (Twitter, Facebook, Linkedin.), usando a hashtag #30diasDeCSS.
- O projeto deve ser concluído até 23:59.
- Criar uma página e disponibilizar todos os projetos.(Á desenvolver 🛠️)
- Compartilhar os projetos nas redes sociais.
- Projetos em inglês para treinar leitura e absorção do idioma.
- Estudar responsividade e adicionar aos projetos que ainda não tem.
Caso tenha gostado do projeto apresentado, acesse essa issue e participe também.
- Utilizar a tag
<span>para a criação das camadas dentro da tag<div>. - Tranformação 2D ou 3D de um elemento Transform
- Transições CSS
- Opacidade/Transparência do CSS
- box-shadow
- Hover
- :nth-child()
- Usar a linear-gradient no background
- Display
- Animations
- @Keyframes
- Utilizando position para definir a posição do avião e da grama
No HTML:
- Elemento filter dentro do elemento
<svg>associado aos elementos feTurbulence e feDisplacementMap para gerar o efeito trêmulo ao fundo do da imagem
No CSS:
- Nesse caso usado o filter na classe .text para utilizar a url como imagem no html.
- -webkit-box-reflect
- text-shadow para o efeito
- Hover
- Transform com scale
- transition
- -webkit-box-reflect
- text-transform
- @keyframes
- animation-delay utilizando junto á variável no index.
- clip-path
- content
- letter-spacing
- z-index
- backdrop-filter
- opacity
- flex-wrap
- flex-direction
- transition-delay
- object-fit
- text-transform
- transition-delay
- Transform com scale
- Transition usando transform
- Transform com rotate e translate
- -webkit-box-reflect
<script>para definir function dos efeitos em bolhas.- z-index
- opacity
- linear-gradient
- filter:hue-rotate
- -webkit-box-reflect
- :nth-child()
- :hover
- :after
- :before
- transition-delay
- border-bottom
- border-right
- min-height
- perspective
- transform-style
- max-width
- backdrop-filter
- backface-visibility
- transform-style
- text-shadow
- text-transform
- letter-spacing
- line-height)*
