0

linear gradient syntax not working in code playground

Not quite sure what I'm doing wrong. I am trying to create a linear gradient in the code playground. I have the code input into both html and css but the output isn't coming out like the example is showing me. I would really appreciate some insight! Thanks!

18th Apr 2017, 2:00 AM
Brandon Keith McFadden
Brandon Keith McFadden - avatar
5 Respostas
+ 7
vw stands for Viewport Width; vh stands for Viewport Height; Both units represent 1% of the total size, so 100vw is the available width and 100vh is the available height...
19th Apr 2017, 4:16 PM
visph
visph - avatar
+ 5
@Will Cavalcanti: Better practice to set 'body, div' instead '*', and you can even avoid it ( styling the body ) by just: div { position:absolute; left:0; top:0; width:100vw; height:100vh; background:linear-gradient(to bottom, red, yellow); }
18th Apr 2017, 4:38 AM
visph
visph - avatar
+ 2
// the html: <body> <div></div> </body> // the css: *{ margin:0px; padding: 0px; height: 100%; } div{ background: linear-gradient(to bottom, red, yellow); } i just did this right now and it's working pretty well, not sure how is the exemple that you said is showing it
18th Apr 2017, 2:29 AM
Welliton Malta
Welliton Malta - avatar
+ 1
thanks for sharing, @visph. i just forgot about "vw" and "vh" and couldn't remember it, but my main purpose was to show the linear-gradient could work on here :D
18th Apr 2017, 4:41 AM
Welliton Malta
Welliton Malta - avatar
0
Thank you both for the help. Not sure why what I was doing yesterday wasn't working. I tried both of your examples and they worked. Another quick question, what does vw and vh mean? I haven't seen those used yet.
18th Apr 2017, 6:25 PM
Brandon Keith McFadden
Brandon Keith McFadden - avatar