Join Bill Weinman for an in-depth discussion in this video Exploring the RPS CSS, part of HTML5: Drag and Drop in Depth.
The Rock, Paper, Scissors application uses a small amount of CSS3 for some…very effective effects.…First of all, let's just take a look at some of the basic formatting that's done…and you'll notice here in the RPS.html I'm just going to scroll quickly all the…way down to the bottom.…We have this outer div called columns and here in rps.css we use that for its…descendent selectors, so the div that are inside of columns and the footer that…inside of columns get these formats and this is really quite simple.…
Each of the divs has a margin right of 20 pixels and it has a white solid…border and so if we look at this in the browser you see that by having them…float left they create columns. You see they have 20 pixels in between and…that's the right margin and you notice that their footers are formatted with…this bold font, and the white border of course you cannot see because it…against a white background.…But this sets it up for some of the magic that happens later.…You'll also notice we have these transitions. Because this is CSS3 and it's…
- Detecting drag and drop support
- Using the HTML5 draggable and dropzone attributes and onDragStart event
- Exploring different events
- Receiving drops with or without a drop zone
- Creating a simple game