
Published 1/2023MP4 | Video: h264, 1280x720 | Audio: AAC, 44.1 KHzLanguage: English | Size: 818.77 MB | Duration: 1h 22m
Learn how to add animations and transitions for your menu Icons What you'll learn Learn how to create menu icons for your website Improve your Css skills Learn how to create animations for your menu Improve your programming skills Requirements Some programming knowledge Description Hi Guys!WELCOME TO THE COURSE "14 Menu icon animations with CSS"This course is divided in 5 Sections:1. Introduction2. Icons Grid3. Top Icons 4. Bottom Icons 5. Summary- You will be learning how to create the following Icons:Hamburger, Veggie Hamburger, Hotdog, Blinds, Sandwich, Cross, Kebab, Candy box, and chocolate box.Some of them will transition into an "X" others into arrows, minus symbol and others.In this course you will be learning the following:HTML- Create a container, sections, boxes and the Icons lines adding the class to the tags with two words.- Add Id's to the tags.- Add the center tags.- Add a title.CSS- Add style to the container, section and boxes and lines.- Create a grid using the properties display, align-items, float andjustify content.- Add 14 Icon boxes with a background color- Add a gradient background when hover on the icon boxes.- Use the property display to create the lines for the Icons.- Create the animations when hover on the Icons using the properties transform and transition and the values rotate and translate.- Add the style of an specific line using the property nth-child- Add a and transition style using the values cubic-Bezierand the in seconds.-Use keyframes to add an animation to your Icons. THIS COURSE IS AIM TO BNERS & INTERMEDIATE PROGRAMMERS, WEB DESIGNER, WEB DEVELOPERS.All the code is made under the html File including the Css Code.NOT javascript IS USED IN THE COURSE.A zip file is attached in the section "resources" on the last section of the course. Overview Section 1: Introduction Lecture 1 Introduction Section 2: Create the Icons grid Lecture 2 Create the Icons grid Section 3: Icon animations Top section Lecture 3 Icon animations Top section Section 4: Bottom Icon animations Lecture 4 Bottom Icon animations Section 5: Summary Lecture 5 Summary CSS and HTML Bners HomePage:
Top Rated News
- Sean Archer
- AwTeaches
- Learn Squared
- PhotoWhoa
- Houdini-Course
- Photigy
- August Dering Photography
- StudioGuti
- Creatoom
- Creature Art Teacher
- Creator Foundry
- Patreon Collections
- Udemy - Turkce
- BigFilms
- Jerry Ghionis
- ACIDBITE
- BigMediumSmall
- Boom Library
- Globe Plants
- Unleashed Education
- The School of Photography
- Visual Education
- LeartesStudios - Cosmos
- All Veer Fancy Collection!
- All OJO Images
- All ZZVe Vectors