- Take the HTML5 template from the class website.
- remove the <nav> and <ul> so only the <header> and <h1> are left.
- Enter "CSS3 Exercise" in h1
- Remove the <p> and <figure> <img> and <figcaption> from the <article> tag.
- remove the <footer> tag.
- We will manipulate the HTML using only CSS styling. Remove the .example {} in the embedded style sheet.
- Give the section —the holding container — 100px margins on top and left to push the content away from the ends, and position it relative, in case you want to use absolute position at a later date.
- Give the header a 60 pixel margin at the bottom.
- The article will be given the style that will change as we move the window. The default style is a 200px square with a background color and a 1px border, positioned absolutely.
- Include a div element inside of the article element. Make sure you close the div. This div will be targeted by the transition from one picture to the other.
- We want to annotate what we are doing and will use the pseudo element header:after to tack on the word plain and set it below the header using relative positioning.
- header:after {content:"plain"; position: relative; top: 0px; color: hsla(0,100%,50%,.7); font-size: 1.2em;}
- Now comes the fun part. We are going to make this responsive, so that as we pull it past 400px, the style of the <article> element and the description in the title will change.
- First we make the @media block set to trigger at a window with greater than 400px: @media all and (min-width: 401px) {
} - Inside the @media block, we change the article using border radius to 50%. That turns a square into a circle.
- article {border: 20px solid #666; border-radius: 50%;}
- We want to change the description from plain to "border radius" header:after {content:"border radius";}
- Finally, place a number 1 in front of "CSS Exercise" header to keep track of the number that we complete.
- h1:before {content:"1. ";}
- Go back to your document and move the page width beyond the 400px threshold, and you should see the square change.
- You are now where you were in last week’s exercise, with an additional div element placed inside of the article element. This week, we experiment with transitions, transformations and animation.
- You can get the different properties for the demonstrations on the website.
- The procedure remains the same, with an incremental 100px jump with each new media query.
- Notice that there is no need to repeat properties if they are already defined. There is only a need to overwrite properties that will change.
- You can follow this step by step guide or experiment on your own
- @media (min-width: 500px) {
} - article {background: purple; -webkit-transition: all 2s ease-in-out;background-size: cover;}
- article:hover { background: blue;}
- header:after {content:"transition background color";}
- h1:before {content:"2. ";}
- @media all and (min-width: 600px) {
} - article {background: url(http://b.parsons.edu/~dejongo/12-fall/stuff/08_transition-2.jpg); opacity: 1;
-webkit-transition: all 2s ease-in-out;background-size: cover; border: none; border-radius: 0;} - article:hover {background: url(http://b.parsons.edu/~dejongo/12-fall/stuff/08_transition-2.jpg); opacity: 0; background-size: cover;}
- div {width: 400px; height: 400px; background: url(http://b.parsons.edu/~dejongo/12-fall/stuff/08_transition-1.jpg) center center; border: 1px solid silver; position: absolute; left; 0; opacity: 1.0; background-size: cover; }
- header:after {content:"transition between pictures";}
- h1:before {content:"3. ";}
- @media all and (min-width: 700px) {
} - article, div {-webkit-transform-origin: top left;
-moz-transform-origin: top left;
-webkit-transform: scale(1) rotate(45deg)
translate(100px, 0px) skew(0deg, 0deg);
-moz-transform: scale(1) rotate(45deg)
translate(100px, 0px) skew(0deg, 0deg);} - header:after {content:"2D (z-axis) rotate";}
- h1:before {content:"4. ";}
- @media all and (min-width: 800px) {
} - article, div {
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
-webkit-transform: perspective(305)
translate3d(100px, 0px, 30px)
scale3d(.5, .5, .7)
rotate3d(51, 49, 60, 49deg);
-webkit-transform-origin: 9% 51% 50%;
-webkit-transform-style: preserve-3d;
-moz-transform: perspective(305)
translate3d(100px, 0px, 30px)
scale3d(.3, .3, .5)
rotate3d(51, 49, 60, 49deg);
-moz-transform-origin: 9% 51% 50%;
-moz-transform-style: preserve-3d;} - header:after {content:"3D Transform";}
- h1:before {content:"5. ";}
@media all and (min-width: 900px) {
} - article, div {
-webkit-transform: none;
-moz-transform: none;} - header:after {content:"back to normal coordinates";}
- h1:before {content:"6. ";}
- @media all and (min-width: 1000px) {
}
- @-webkit-keyframes name-for-animation {
0% { top: 30px; left: 100%; }
10% { top: 100px; left: 90%; }
20% { top: −200px; left: 80%; }
30% { top: 100px; left: 70%;
width: 200px; height: 200px;
border-width: 100px;
}
40% { top: −200px; left: 60%;
width: 200px; height: 200px;
border-radius: 100%;
border-width: 0px;
}
50% { top: 50px; left: 50%;
width: 400px; height: 400px;
border-radius: 0%;
border-width: 100px;
}
60% { top: −200px; left: 40%; }
70% { top: 200px; left: 30%; }
80% { top: -200px; left: 20%; }
90% { top: 500px; left: 10%; }
100% { top: 30px; left: -10%; }
}
@-moz-keyframes name-for-animation {
0% { top: 30px; left: 100%; }
10% { top: 100px; left: 90%; }
20% { top: −200px; left: 80%; }
30% { top: 100px; left: 70%;
width: 200px; height: 200px;
border-width: 100px;
}
40% { top: −200px; left: 60%;
width: 200px; height: 200px;
border-radius: 100%;
border-width: 0px;
}
50% { top: 50px; left: 50%;
width: 400px; height: 400px;
border-radius: 0%;
border-width: 100px;
}
60% { top: −200px; left: 40%; }
70% { top: 200px; left: 30%; }
80% { top: -200px; left: 20%; }
90% { top: 500px; left: 10%; }
100% { top: 30px; left: -10%; }
}- article, div {
-webkit-animation: name-for-animation 10s linear infinite;
-moz-animation: name-for-animation 10s linear infinite;
position: absolute;
top: 30px;
left: 100%;
z-index: 50;
width: 400px;
height: 20px;
border: 4px solid yellow;
text-overflow: hidden;
text-align: center;}- header:after {content:"animation (hover over picture to transition to other picture)";}
- h1:before {content:"6. ";}
- You can explore this further in class or at home.
- @-webkit-keyframes name-for-animation {