DevCourseWeb.com    Tutorials    Development    10 CSS Transitions with social Icons

10 CSS Transitions with social Icons

 Admin0,

Css animation

What you’ll learn

  • Learn CSS.
  • CSS Transitions.
  • CSS animations.
  • CSS Keyframes.

Course Content

  • Introduction –> 1 lecture • 2min.
  • Icons Grid –> 1 lecture • 7min.
  • Box Shadow transition –> 1 lecture • 4min.
  • Color Shadow Transition –> 1 lecture • 3min.
  • Floating Box transition –> 1 lecture • 5min.
  • Colorful button transition –> 1 lecture • 2min.
  • Gradient text and Zoom in transition –> 1 lecture • 5min.
  • Shaking animation –> 1 lecture • 3min.
  • Border radius transition –> 1 lecture • 3min.
  • Flip up transition –> 1 lecture • 5min.
  • Radial Gradient Background transition –> 1 lecture • 3min.
  • Zoom in and linear Gradient transition –> 1 lecture • 2min.

Auto Draft

Requirements

 

Hi Guys!

 

WELCOME TO THE COURSE  “10 CSS Transitions with social Icons”

This course is divided in 12 Sections:

1. Intro

2. Icons Grid

3. Minimal Shadow transition

4. Colorful shadow transition

5. Floating animation

6. Colorful button transition

7. Gradient Icon with zoom in transition

8. Shaking transition

9. Border radius transition

10. Flip up Transition

11. Radial and linear gradient background

12. Linear gradient transition and Zoom in text

 

In this course you will be learning the following topics:

 

-How to add Icons to HTML

– How to add animations with Keyframes

– How to add different transition styles and timing

-How to add a gradient text

– How to add a gradient linear background

– How to add a radial linear background.

– How to change your box background shape with a border radius transition

– How to change a position with the transform property.

– How to add a Zoom in transition to your box

– How to add a zoom in transition to your text

– How to make a grid with CSS

and much more…

 

HTML

Add text, titles, paragraphs, brackets, add class to the tags.

 

CSS PROPERTIES AND VALUES YOU WILL LEARN:

margin, padding, font-family, cursor, scale, transition, transform, animation, linear-gradient, radial gradient, border, border-radius, box-shadow, display, align-items, background-clip, text-fill-color and more…

 

THIS COURSE IS AIM TO BEGINNERS & INTERMEDIATE PROGRAMMERS, WEB DESIGNER, WEB DEVELOPERS.

NOT JAVASCRIPT IS USED IN THE COURSE ONLY HTML AND CSS

 

All the code is made under the html File including the Css Code.

A zip file is attached in the section “resources” on the last section of the course with the HTML file.

Please don’t forget to leave a review after you finish the course.

Thank you!

 

 

 

Get Tutorial