30DaysOfCSS

Completing 30 CSS project challenges in 30 days

About

This project was created by MilenaCarecho which aims to improve the knowledge of CSS animations and effects without any framework.
Some of the ideas was from playlists of CSS animation effects , thanks for all the help!

Goal

Enhance my CSS skills to develop visually distinctive components with engaging animations, creating a more dynamic and interactive user experience.

Summary

n°	Challenges
1	Day 01 - Passing through divs
2	Day 02 - Animated loader
3	Day 03 - Layered social media icon
4	Day 04 - Toggle color change
5	Day 05 - Loading Animation
6	Day 06 - Animation hover navbar
7	Day 07 - Typewriter
8	Day 08 - Animated menu
9	Day 09 - Water effect
10	Day 10 - Fireworks
11	Day 11 - Animated search box
12	Day 12 - Neon Button
13	Day 13 - Lighting text effect
14	Day 14 - Pulsing effect
15	Day 15 - Preloader animation
16	Day 16 - Floating text
17	Day 17 - Button effect
18	Day 18 - Floating Leaves effect
19	Day 19 - Disc aligment
20	Day 20 - Square of dots
21	Day 21 - Preloader squares animation
22	Day 22 - Responsive menu with media queries
23	Day 23 - Icon background effect
24	Day 24 - 3D rotating square
25	Day 25 - Smoke animation
26	Day 26 - Rotating animation square
27	Day 27 - Share button tooltip
28	Day 28 - Social media buttons hover
29	Day 29 - Year cube
30	Day 30 - Floating lighting cube

Day 01 - Passing through divs

• My Code

What I learned:

• Animation using @keyframes and the transform() properties
• New features such as white spacing and absolute positions

Day 02 - Animated loader

• My Code

What I learned:

• Animations
• Transform properties such as rotate()
• Absolute positions

Day 03 - Layered Icons

• My Code

What I learned:

• :nth-child()
• Transform properties such as rotate(), skew() and translate()
• Absolute positions
• ::before and ::after

Day 04 - Toggle color change

• My Code

What I learned:

• :checked
• General sibling selectors (~)
• Cubic-benzier
• Work with a lot of shadows to achieve an amazing effect
• ::before and ::after
• Transitions

Day 05 - Loading Animation

• My Code

What I learned:

• :nth-child()
• Transform properties such as scale()
• Animation delay

Day 06 - Animation Hover Navbar

• My Code

What I learned:

• :nth-child()
• Transform properties such as scale()
• Transitions
• Transform-delay
• ::before and ::after
• Absolute positions

Day 07 - Typewriter

• My Code

What I learned:

• :nth-child()
• Animations

Day 08 - Animated Menu

• My Code

What I learned:

• :nth-child()
• Animations
• Transform properties such as rotate()
• Transitions
• Absolute positions

Day 09 - Water Effect

• My Code

What I learned:

• ::before and ::after
• Animations
• Transform properties such as rotate() and translate()
• Absolute positions

Day 10 - Fireworks

• My Code

What I learned:

• ::before and ::after
• @Keyframes
• Transform properties such as rotate() and translate()
• Absolute positions
• Usage of calc() and var() functions

Day 11 - Animated Search Box

• My Code

What I learned:

• Transitions
• hovers
• Absolute positions

Day 12 - Neon button

• My Code

What I learned:

• Transitions
• hovers
• Absolute positions
• :nth-child()

Day 13 - Lightining Text Effect

• My Code

What I learned:

• @keyframes
• Absolute positions
• :nth-child()

Day 14 - Pulsing Effect

• My Code

What I learned:

• @keyframes
• Transitions
• Absolute positions
• ::before and ::after
• Animation
• Transform properties such as skew() and scale()

Day 15 - Preloader Animation

• My Code

What I learned:

• @keyframes
• Animation delays
• Absolute positions
• :nth-child()
• Transform properties such as translate()

Day 16 - Floating Text

• My Code

What I learned:

• @keyframes
• Animation delays
• calc() and var() properties
• Transform properties such as translate()

Day 17 - Button Effect

• My Code

What I learned:

• :hover
• Transform properties such as translate() and skew()
• Absolute position

Day 18 - Floating Leaves Effect

• My Code

What I learned:

• @keyframes
• :nth-child()
• Transform properties such as translate(), skew() and rotate()
• Absolute position
• Animation-delay
• Filter blur()

Day 19 - Disc Aligment

• My Code

What I learned:

• @keyframes
• :nth-child()
• Transform properties such as rotate()
• Absolute position
• Animation-delay
• cubic-benzier()

Day 20 - Square of Dots

• My Code

What I learned:

• @keyframes
• calc() and var() properties
• Transform properties such as scale()
• Animation-delay

Day 21 - Pile of Blocks

• My Code

What I learned:

• @keyframes
• Transform properties such as translate() and skew()
• Absolute position
• Animation-delay
• Filter hue-rotate()
• calc() and var() properties
• Transform-origem
• :nth-child()
• ::before and ::after

Day 22 - Responsive Menu Media Queries

• My Code

What I learned:

• @keyframes
• @media()

Day 23 - Icon Background Effect

• My Code

What I learned:

• @keyframes
• Animation-delay
• Transform properties such as skew(), rotate() and translate()

Day 24 - 3D Rotating Square

• My Code

What I learned:

• @keyframes
• Animation-delay
• Transform properties such as rotate()
• nth-child()
• ::before and ::after

Day 25 - Particles Distorcion Effect

• My Code

What I learned:

• @keyframes
• Animation-delay
• Transform properties such as rotate() and translate()
• nth-child()
• filter

Day 26 - Rotating Animation Squares

• My Code

What I learned:

• @keyframes
• Transform properties such as rotate(), translate() and perpective()
• Tranform-style: preserve-3d;
• nth-child()
• filter blur()

Day 27 - Share Buttons Tootip

• My Code

What I learned:

• @keyframes
• Transition
• Transform properties such as translate()
• nth-child()
• ::before and ::after
• :checked and :hover

Day 28 - Social Media Button Hover

• My Code

What I learned:

• Transition
• nth-child()
• :hover
• Functions like var() features

Day 29 - Year Cube

• My Code

What I learned:

• Functions like var() and calc() features
• Transform properties such as rotate() and translate()
• Tranform-style: preserve-3d;
• last-child()
• filter blur()

Day 30 - Floating lighting cube

• My Code

What I learned:

• @keyframes
• Functions like var() and calc() features
• Transform properties such as rotate() and translate()
• Tranform-style: preserve-3d;
• ::before
• filter blur()