Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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 not a finalized yet, we have these temporary selectors, that -webKit, -moz, -O.
-webKit works for Google Chrome and also for Apple Safari, -moz works for Mozilla Firefox and -O works for Opera, which doesn't support HTML5 drag and drop anyway. But we've included it here just so it's there for the future. And so by setting these transitions to transform with a .2 second ease out, when I set the class to moving, these things will happen with an animated effect. And so what is this? It's scaling by 80% and it's setting the opacity to a quarter.
So by invoking that selector, this transformation happens with a .2 second ease out and these are the things that are changes. It changes the scale and it changes the opacity. It's when I grab that that's what happens and it happens with nice cool animation. And likewise when I go and do the swap or even just drop it, that animation happens coming back and that happens in the dragEnd. The class name get set to undefined and when that happens, then this moving is no longer in effect and the default size and the default opacity comes back into effect and these transformations happen with the .2 seconds and so we get the nice bounce-back occurs.
So this demonstrates nicely just how much mileage you can get out of a few simple CSS effects. This simple Rock, Paper, Scissors application is a good example of how you can implement the HTML5 drag and drop with a few simple effects to create a compelling application. Again, feel free to use this code as a starting point for your own applications.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 93450 Viewers
82 Video lessons · 104362 Viewers
71 Video lessons · 76447 Viewers
56 Video lessons · 107785 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.