help with an assignment.., Changing some color gradients |
help with an assignment.., Changing some color gradients |
avtfmex87@gmail.com |
Oct 12 2013, 01:46 PM
Post
#1
|
Group: Members Posts: 1 Joined: 12-October 13 Member No.: 19,847 |
<!DOCTYPE html>
<html> <head> <meta charset="UTF-8" /> <title>CSS3 Multiple Backgrounds and Media Queries</title> <!-- This page uses CSS3's multiple backgrounds to position two images on the page. The embedded style uses media queries to find the width of the user's viewport. Based on the viewport width the background color and the position of one of the images will change. YOUR CHALLANGE: Add to the style provided to create a unique looking page when the viewport is atleast 400px. Add another statement for viewports that are 960px or more. Test your results in multiple browsers. Validate both the HTML and CSS. --> <style type="text/css"> * { margin:0; padding:0; } html, body { height: 100%; min-height: 100%; } .container { min-height:100%; } #expander { height:500px; } @media all and (min-width: 200px) { /* If the viewport is atleast 200px wide the browser will use this style */ .container { background-color: #C6F6FF; background-image: url(images/grassyknoll.png), url(images/sun.png); background-position: bottom left, top left; background-repeat: repeat-x, no-repeat; } } @media all and (min-width: 640px) { /* If the viewport is atleast 640px wide the browser will use this style */ .container { background-color: #6CF; background-image: url(images/grassyknoll.png), url(images/sun.png); background-position: bottom left, center center; background-repeat: repeat-x, no-repeat; } } @media all and (min-width: 800px) { /* If the viewport is atleast 800px wide the browser will use this style */ .container { background-color: #09F; background-image: url(images/grassyknoll.png), url(images/sun.png); background-position: bottom left, bottom right; background-repeat: repeat-x, no-repeat; } } .cloud { font-family: Tahoma, Geneva, sans-serif; font-size: 12px; background-color: #FFF; margin: 20px 40px; padding: 20px; float: right; -moz-border-top-left-radius: 10px 50px; /* Repeat these radius for each corner */ -moz-border-top-right-radius:10px 50px; -moz-border-bottom-right-radius:10px 50px; -moz-border-bottom-left-radius:10px 50px; border-top-left-radius: 50px 50px; /* Repeat these radius for each corner */ border-top-right-radius:50px 50px; border-bottom-right-radius:50px 50px; border-bottom-left-radius:50px 50px; min-width:100px; max-width:400px; min-height: 100px; overflow:hidden; background-image: -webkit-gradient( /* With these settings the gradient looks a bit purple, change the colors to make the bottom of the "cloud" more blue-gray. Can you make the gradient mover from top left to bottom right? */ linear, left top, right bottom, color-stop(0.06, rgb(51,78,102)), color-stop(0.22, rgb(173,216,230)), color-stop(0.72, rgb(252,252,252)) ); background-image: -moz-linear-gradient( /* This is the Mozilla variation of the same gradient. With these settings the gradient looks a bit purple, change the colors to make the bottom of the "cloud" more yellow-gray. Can you make the gradient mover from top right to bottom left? */ linear, right top, left bottom, rgb(185,186,134) 6%, rgb(195,200,224) 22%, rgb(252,252,252) 72% ); opacity:0.8; filter:alpha(opacity=80); } .cloud p { margin: 0px; padding: 10px 20px; font-size: 1.5em; } </style> </head> <body> <div class="container"> <div class="cloud"> <p>Use CSS3's rounded corners and gradient to make this area more cloud-like and less purple. </p> </div> <p id="expander"> </p> </div> </body> </html> |
Frederiek |
Oct 13 2013, 04:12 AM
Post
#2
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
And your question is ...?
Maybe some useful resources: - http://www.d.umn.edu/itss/support/Training...ign/css.html#mq - http://css3generator.com - http://www.colorzilla.com/gradient-editor/ |
Lo-Fi Version | Time is now: 29th March 2024 - 06:31 AM |