Creative Css Code: Accordion Animation with Simple Hand Coding | Luis Carlos | Skillshare

Creative Css Code: Accordion Animation with Simple Hand Coding

Luis Carlos, Engineer, Web Developer and Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
3 Lessons (14m)
    • 1. Trailer

      0:53
    • 2. Dynamic Navigation Menu / Image accordion slider (Part 1) - Layout Creation

      6:53
    • 3. Dynamic Navigation Menu / Image accordion slider (Part 2) - Tuning Layout

      5:51

About This Class

For this new class i want to share the great power of HTML using flexbox and css properties to create a dynamic menu navigation with great effects giving a great interaction to this webpage component.

This project can also be used only as creation of a simple  accordion image gallery without functions of main menu.

The principles of flexbox are detailed in the class Learn CSS3 Flexbox & Build Responsive Websites in 2018, where I explain in detail the functioning of this model created in version 3 of css. 

f1c9f3ba

 

This class is divided in two main videos:

  • Planning and creation of the "main layout" of the page
  • Fine tune of the layout with advanced css effects (transition, hover effects and others) 

At the end of this class you are able to create your dynamic navigation menus than also can works as an accordion gallery, that you can share with community.

Enjoy it.