css3 advanced, now with flair

Introduction

So now you've seen a box change colors and move in a particular pattern.  For this lesson's sample I borrowed heavily from Roman Cortes's pure CSS coke can sample

Onto some coding!

Quite a bit to implement (code/graphics/etc...), I'll let you download and run via VS Express 2013 for Web:  code to download

I will discuss one small section of code in particular:  overriding the internal div tag along w/ overriding the p tag.

        div div {
            background-image: url(scroll.png);
            background-repeat: no-repeat;
            background-position: 0 0;
            padding-left: 300px;
            width: 660px;
        }

        p {
            margin: 0;
            padding: 0;
            float: left;
            height: 336px;
            background-image: url(SamAdamsSummerAle.png);
            background-attachment: fixed;
            background-repeat: repeat-x;
            width: 1px;
        }

Without the background-repeat within the div div tag scroll.png shows up multiple times in your browser.  Removing background-repeat within the p tag has the same effect for SamAdamsSummerAle.png.  Removing background-attachment: fixed from the p tag doesn't give the cool scroll effect we're looking for, keeping it in the tag lets the graphic of choice achieve movement with the scrollbar.

When you run it you should see something like the following:

Scroll that slider and watch the magic happen.  Try some more advanced coding on your own: give the option to switch between bottles and cans, or even better another option to switch brands of the beverage of your choice.

Source Reference(s):

Roman Cortes Pure CSS Coke Can