From the course: CSS Shorts

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

3D product box: Create the box sides

3D product box: Create the box sides - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

3D product box: Create the box sides

“

- [Chris] Hi, I'm Chris Converse, and welcome to part one of this three-part series on creating a 3D product box. In this series, we'll use HTML, CSS, and a spreadsheet graphic in order to make a 3D box graphic for your webpage. In this episode, part one, we'll create the necessary HTML and CSS in order to create the three visible sides of our product box. So if you'd like to follow along with me, download the exercise files, and let's begin by opening the HTML file named Box.HTML in a text editor. So, once you have the box.HTML file open, up in the head area, you'll see a link to style.cass. There's also an index to that HTML file in the exercise files. That file also links to this same style.CSS. But I wanna create the box in a blank file without any background settings so I have local override here. So that we can see how the box is actually constructed. Then, in part three, we will add the HTML code from this page into the index file. So to begin, let's add the HTML that we'll…

Contents