The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> help with an assignment.., Changing some color gradients
avtfmex87@gmail.com
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post 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/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 06:31 AM