Explore the process of recreating a visually striking 3D grid layout in this comprehensive tutorial video. Learn how to tackle complex CSS challenges as you follow along with the step-by-step creation of HTML structure, implementation of CSS grid, and addition of 3D effects. Discover techniques for creating hover states, fixing border-radius issues, and achieving the desired perspective. Gain insights into problem-solving approaches and witness the iterative process of refining the design. By the end of this tutorial, acquire the skills to create an impressive 3D grid layout with sliding effects and dynamic shadows, enhancing your web design capabilities.
Overview
Syllabus
- Introduction
- What we're trying to build
- What we are starting with
- Writing the HTML
- Starting the CSS
- Creating the grid
- The hover states
- Submit ideas!
- Fixing the border-radius
- Trying to make the grid 3D
- Getting perspective to work
- Trying to slide the grid under the text
- Fixing the sliding behaviour
- Improving the perspective
- Adding the shadow
Taught by
Kevin Powell
