All Projects → phedrakeson → 30diasDeCSS

phedrakeson / 30diasDeCSS

Licence: MIT license
Desafio criar 30 mini projetos utilizando HTML e CSS em 30 dias, participe também!

Programming Languages

CSS
56736 projects
HTML
75241 projects

Projects that are alternatives of or similar to 30diasDeCSS

Magic
CSS3 Animations with special effects
Stars: ✭ 7,253 (+18986.84%)
Mutual labels:  css3, css3-animations
css3-animation-generator
chrome plugin css3 animation generator
Stars: ✭ 93 (+144.74%)
Mutual labels:  css3, css3-animations
takefive.css
The most advanced pure CSS lightbox – not one single line of JavaScript has been wasted
Stars: ✭ 123 (+223.68%)
Mutual labels:  css3, css3-animations
css-collection
🧙‍♂️ CSS芸人への道(CSSでつくったもの集)| I want to be CSS Magician
Stars: ✭ 82 (+115.79%)
Mutual labels:  css3, css3-animations
Vivify
Vivify is free CSS animation library.
Stars: ✭ 1,651 (+4244.74%)
Mutual labels:  css3, css3-animations
Dynamic.css
🚀 Awesome Library of CSS3 animations 🎉
Stars: ✭ 38 (+0%)
Mutual labels:  css3, css3-animations
Landing-Page-Animation
Landing page animation made using CSS
Stars: ✭ 45 (+18.42%)
Mutual labels:  css3, css3-animations
youphonic
an online musical machine interface for building and sharing soundscapes and musical compositions
Stars: ✭ 28 (-26.32%)
Mutual labels:  css3
hovercraft-slides
🍪 A template for new Hovercraft presentation projects (impress.js slides in reStructuredText)
Stars: ✭ 12 (-68.42%)
Mutual labels:  css3
spotify-clone
🎶🎶Simple Spotify Clone using ReactJs. Here we are using the Official Spotify API to make calls. Here we can able to login, logout and gear the music.
Stars: ✭ 21 (-44.74%)
Mutual labels:  css3
File-Explorer
A File Manager with stunning design & astonishing develops, beautifully written in PHP, everything fused in a single file.
Stars: ✭ 31 (-18.42%)
Mutual labels:  css3
The-HTML-and-CSS-Workshop
A New, Interactive Approach to Learning HTML and CSS
Stars: ✭ 65 (+71.05%)
Mutual labels:  css3
udacity-fsnd
Udacity Full Stack Web Developer Nanodegree program (FSND) course materials
Stars: ✭ 66 (+73.68%)
Mutual labels:  css3
Hacktober-Fest-2021
📜This repository is created to welcome all the open source enthusiasts to get introduced to beginner friendly projects they could work with in the festive season of HacktoberFest 2021🎇🙌.
Stars: ✭ 23 (-39.47%)
Mutual labels:  css3
BabyBrowser
A Small Web Browser Built in Python
Stars: ✭ 21 (-44.74%)
Mutual labels:  css3
boss-lite
Boss Lite - React Redux Material Admin Template
Stars: ✭ 148 (+289.47%)
Mutual labels:  css3
science-fiction-magazines-blog
Blog template (concept) is inspired by stylish science fiction magazines of the 80-90s.
Stars: ✭ 24 (-36.84%)
Mutual labels:  css3
portfolio
My Personal Portfolio
Stars: ✭ 14 (-63.16%)
Mutual labels:  css3
javascript-book-reading
「前端书籍精读笔记系列」,整理的前端书籍清单阅读笔记
Stars: ✭ 58 (+52.63%)
Mutual labels:  css3
react-theme
Production ready Wordpress theme built with React, Redux, Redux-Thunk, Intl, React Router v4, etc... and packaged by Webpack 2. Enjoy!
Stars: ✭ 14 (-63.16%)
Mutual labels:  css3

🚀 30diasDeCSS 🚀

Faaaaaala Dev, decidi finalmente participar desse desafio para por em prática e estudar um pouco sobre as animações de CSS puro.

Objetivo

O desafio tem como objetivo manter uma prática e aprendizado sobre html e css puros, utilizando animações e efeitos. Vou começar esse desafio hoje (18 de Outubro de 2020) e pretendo terminá-lo em 30 dias seguidos, até o dia 16 de Novembro de 2020!

Te encorajo a realizar esse desafio, pois os mini projetos são rápidos e com muito aprendizado, dá para ser encaixado na sua rotina sim! E não precisa realizar na mesma data que eu, dê uma estrela nesse repositório e realize quando puder. 😉

Regras gerais

  • 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

Gostou da ideia?

Clique aqui para participar.

Youtube Referencias dos desafios

Online Tutorials - Creative Creations - DarkCode

Desafio dia 01 - Page Loading Animation

Dia 01

Meu codigo

Post LinkedIn

O que eu aprendi

@keyframes translate transform usando animações CSS

Primeira animação que faço na vida, dá pra acreditar?? kkk Achei bem bacana e simples de se fazer, ainda cheguei a fazer um estilo diferente dessa animação após ter acabado. Sugiro que você também dê uma brincada após terminar cada desafio ;)


Desafio dia 02 - 3D Social Media Hover Animation

Dia 02

Meu codigo

Post LinkedIn

Desafio dia 03 - Profile Card

Dia 03

Meu codigo

Post LinkedIn

Desafio dia 04 - Liquid Motion

Dia 04

Meu codigo

Post LinkedIn

Desafio dia 05 - Menu Hamburger Animado

Dia 05

Meu codigo

Post LinkedIn

Desafio dia 06 - Background Gradiente Animado

Dia 06

Meu codigo

Post LinkedIn

Desafio dia 07 - Video Inside Mockup

Dia 07

Meu codigo

Post LinkedIn

Desafio dia 08 - Jumping Text Animation

Dia 08

Meu codigo

Post LinkedIn

Desafio dia 09 - Search Box

Dia 09

Meu codigo

Post LinkedIn

Desafio dia 10 - Digital Clock

Dia 10

Meu codigo

Post LinkedIn

Desafio dia 11 - Infinite Road

Dia 11

Meu codigo

Post LinkedIn

Desafio dia 12 - Card Hover Effect

Dia 12

Meu codigo

Post LinkedIn

Desafio dia 13 - Input Animation

Dia 13

Meu codigo

Post LinkedIn

Desafio dia 14 - Menu Dropdown

Dia 14

Meu codigo

Post LinkedIn

Desafio dia 15 - Neon Light Button

Dia 15

Meu codigo

Post LinkedIn

Desafio dia 16 - 3D Layered Image

Dia 16

Meu codigo

Post LinkedIn

Desafio dia 17 - Spinning Loading Animation

Dia 17

Meu codigo

Post LinkedIn

Desafio dia 18 - Card Animation

Dia 18

Meu codigo

Post LinkedIn

Desafio dia 19 - Transparent Login

Dia 19

Meu codigo

Post LinkedIn

Desafio dia 20 - Card Toggle Effect

Dia 20

Meu codigo

Post LinkedIn

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].