Jump to content
Sal's RuneScape Forum
Sign in to follow this  
chaosor

html/css

Recommended Posts

I am almost done with the assignment, but there is 1 part of the case problem I don't get.

 

"5. Add a horizontal background gradient to the blockquote element with the following properties: a) Set the gradient to go from the left to the right starting with the color value (160,230,230), having the color stop at 5% point with a value (231,231,231), and ending with the color value (255,255,255) 15% of the way across the blockquote; b) create the same color gradient using the webkit gradient() function with a color stop for the middle color occuring at the 33%point and; c( using the using the internet explorer Gradient filter create a horizontal gradient that starts with the hexidecimal color value DEF4F4 and ends with the value FFFFFF"

Share this post


Link to post
Share on other sites

A few lines of CSS will cover this.

 

Using the 'linear-gradient' tag, you can define the charactaristics of your gradient, in this case, your background.

 

syntax:

background: linear-gradient(direction, color-stop1, color-stop2, ...)

 

Using the w3 resources available, you should be able to do this with ease.

 

Here is a source: http://www.w3schools.com/css/css3_gradients.asp <---- refer to the 'using multiple color stops' and 'trasnparency'

 

Hope this helps!

 

Edit: Pay attention to your webkit and ie browser types as you clearly need one for each :P use w3's validator to make sure it is correct :)

Edited by Iamyouronly

Share this post


Link to post
Share on other sites

A few lines of CSS will cover this.

 

Using the 'linear-gradient' tag, you can define the charactaristics of your gradient, in this case, your background.

 

syntax:

background: linear-gradient(direction, color-stop1, color-stop2, ...)

 

Using the w3 resources available, you should be able to do this with ease.

 

Here is a source: http://www.w3schools.com/css/css3_gradients.asp <---- refer to the 'using multiple color stops' and 'trasnparency'

 

Hope this helps!

 

Edit: Pay attention to your webkit and ie browser types as you clearly need one for each :P use w3's validator to make sure it is correct :)

 

Well, I got that Part but the gradient is supposed to appear on the left side of the block quote, and not cover the whole block quote. And not understanding the last part

Share this post


Link to post
Share on other sites

Referring to w3c again, you can use the property 'background-size' and enter it as a percentage.

 

example:

grad
{
background: linear-gradient;(direction, color-stop1, color-stop2, ...)
background-size:15%;
}

 

Source: http://www.w3schools.com/cssref/css3_pr_background-size.asp

 

chopped up lol

Edited by Iamyouronly

Share this post


Link to post
Share on other sites

Referring to w3c again, you can use the property 'background-size' and enter it as a percentage.

 

example:

grad
{
background: linear-gradient;(direction, color-stop1, color-stop2, ...)
background-size:15%;
}

 

Source: http://www.w3schools...ground-size.asp

 

chopped up lol

oh!!! thanks lol, I completely missed that. Tbh, it wasn't my assignment, it was one of my best friends, she's taking html this year, and asked me for help since I already took the class, but I never did that assignment so I looked for it, and had checked w3schools, and google, but couldn't find it. I completely missed the size. Oops. But I noticed Stop1 and 2 worked for her, but not stop 3. It's too late now, as she already turned it in, but was just wondering if you know why that would be. it was the same format as stop 1 and 2.

Edited by chaosor

Share this post


Link to post
Share on other sites

Was the syntax correct? Post the code if you want now that the project is over. You should be able to add a lot of different stops for them...

 

I was able to create what i believe you mean....let me know if i am correct...

 

http://i.gyazo.com/e1404d46e790c565924f181465b63685.png

 

<style>
#grad1
{
height:200px;
background: -webkit-linear-gradient(left, red 15%, blue 50%, green 75%); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(left, red 15%, blue 50%, green 75%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(left, red 15%, blue 50%, green 75%); /* For Firefox 3.6 to 15 */
background: linear-gradient(left, red 15%, blue 50%, green 75%); /* Standard syntax (must be last) */
background-size:100%;
background-repeat:no-repeat;
}
</style>

 

i did not use your colors or variables, i just used basics to show the possibility of adding more than one stop to a gradient...as far as i know, there is no virtual limit to the number of stops you can make. :)

 

I love Cascading Style Sheets :)

Edited by Iamyouronly

Share this post


Link to post
Share on other sites

Was the syntax correct? Post the code if you want now that the project is over. You should be able to add a lot of different stops for them...

 

I was able to create what i believe you mean....let me know if i am correct...

 

http://i.gyazo.com/e...81465b63685.png

 

<style>
#grad1
{
height:200px;
background: -webkit-linear-gradient(left, red 15%, blue 50%, green 75%); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(left, red 15%, blue 50%, green 75%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(left, red 15%, blue 50%, green 75%); /* For Firefox 3.6 to 15 */
background: linear-gradient(left, red 15%, blue 50%, green 75%); /* Standard syntax (must be last) */
background-size:100%;
background-repeat:no-repeat;
}
</style>

 

i did not use your colors or variables, i just used basics to show the possibility of adding more than one stop to a gradient...as far as i know, there is no virtual limit to the number of stops you can make. :)

 

I love Cascading Style Sheets :)

 

Well, that looks like the code we used, except instead of the parenthesis , we used rgb() and the color values I mentioned above. and the 3rd rgb() didn't work.




background: -webkit-linear-gradient(left,rgba(160,230,230,5%), rgb(231,231,231),rgba(255,255,255)); /*Safari 5.1-6*/
background: -o-linear-gradient(right,rgba(160,230,230,5%), rgb(231,231,231),rgba(255,255,255)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(160,230,230,5%), rgb(231,231,231),rgba(255,255,255)); /*Fx 3.6-15*/
background: linear-gradient(to right, rgba(160,230,230,5%), rgb(231,231,231),rgba(255,255,255)); /*Standard*/
background-size:100%;
background-repeat:no-repeat;

Edited by chaosor

Share this post


Link to post
Share on other sites

Was the syntax correct? Post the code if you want now that the project is over. You should be able to add a lot of different stops for them...

 

I was able to create what i believe you mean....let me know if i am correct...

 

http://i.gyazo.com/e...81465b63685.png

 

<style>
#grad1
{
height:200px;
background: -webkit-linear-gradient(left, red 15%, blue 50%, green 75%); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(left, red 15%, blue 50%, green 75%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(left, red 15%, blue 50%, green 75%); /* For Firefox 3.6 to 15 */
background: linear-gradient(left, red 15%, blue 50%, green 75%); /* Standard syntax (must be last) */
background-size:100%;
background-repeat:no-repeat;
}
</style>

 

i did not use your colors or variables, i just used basics to show the possibility of adding more than one stop to a gradient...as far as i know, there is no virtual limit to the number of stops you can make. :)

 

I love Cascading Style Sheets :)

 

Well, that looks like the code we used, except instead of the parenthesis , we used rgb() and the color values I mentioned above. and the 3rd rgb() didn't work.




background: -webkit-linear-gradient(left,rgba(160,230,230,5%), rgb(231,231,231),rgba(255,255,255)); /*Safari 5.1-6*/
background: -o-linear-gradient(right,rgba(160,230,230,5%), rgb(231,231,231),rgba(255,255,255)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(160,230,230,5%), rgb(231,231,231),rgba(255,255,255)); /*Fx 3.6-15*/
background: linear-gradient(to right, rgba(160,230,230,5%), rgb(231,231,231),rgba(255,255,255)); /*Standard*/
background-size:100%;
background-repeat:no-repeat;

 

You put the stop % inside of the color code, that is why it does not stop. The stop variable must but outside the RGB parenthesis. I was able to create it with your colors using the w3 practice codes

 

http://i.gyazo.com/749cb687b38bf892eff456e7e4f04beb.png

 

height:100px;
background: -webkit-linear-gradient(right,rgb(160,230,230) 15%, rgb(231,231,231), rgb(255,255,255) 85%); /*Safari 5.1-6*/
background: -o-linear-gradient(right,rgb(160,230,230) 15%, rgb(231,231,231), rgb(255,255,255) 85%); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgb(160,230,230) 15%, rgb(231,231,231), rgb(255,255,255) 85%); /*Fx 3.6-15*/
background: linear-gradient(right,rgb(160,230,230) 15%, rgb(231,231,231), rgb(255,255,255) 85%); /*Standard*/
background-size:100%;
background-repeat:no-repeat;

 

Also: The code you posted had no defined dimension, you need to at least define 1 axis or select to inherit the properties (i defined height for the example) or the blockquote will show absolutely nothing. :P

 

I put the last 85% in to show that you can put it on the third one, 4th one, even 10th one if you write enough in to the line :)

 

Hope this helped!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×

Important Information

By using this site, you agree to our Guidelines and Privacy Policy.