Beautiful sunset wallpaper using only CSS3
by nikesh on 22/04/10 at 10:56 pm
Hello Friends ,
As we all know that CSS3 have some amazing features. So today I have decided to make some simple wallpaper using only CSS3 . And after devoting 1 and 1/2 hour with CSS3 I came up with this simple wallpaper. Below I have attached snapshot of the wallpaper , to view the original output visit DEMO ( although for now it is only visible in CHROME web browser).
For the above wallpaper I have used only CSS3 and some divs.
CODE :
HTML
<div class='sky-middle'></div>
<div class='sky'></div>
<div class='blue-orange'></div>
<div class='orange-red'></div>
<div class='sun'>
<div class='innerSunClass'></div>
</div>
CSS
.sky{
width:100%;
height:50%;
background-image:-webkit-gradient(linear,4% 0%,5% 85%,
from(#111), to(#506387), color-stop(.6,#3F3560));
}
.sky-middle{
width:968px;
height:50%;
background-image:-webkit-gradient(radial,-100 150,175,300 175,40,
from(#470705), to(#506387), color-stop(.4,#3F3560));
opacity:.2;
position:absolute;
}
.blue-orange{
height: 100px;
width: 100%;
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,
from(#506387), to(#A81C1C), color-stop(.6,#A4502A));
}
.orange-red{
height: 200px;
width: 100%;
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,
from(#A81C1C), to(#5C3939), color-stop(.6,#5C3838));
}
.sun{
width:200px;
margin-top:-250px;
margin-left:49%;
height:60px;
overflow:hidden;
}
.innerSunClass{
border:medium none;
height:100px;
width:100px;
margin-top:15px;
margin-left:15px;
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,
from(#fff), to(#A81C1C), color-stop(.4,#A81C1C));
-webkit-border-radius:50px;
}
As per now this example works only on Chrome web browser.To see the original file visit DEMO.
Please don’t forget to drop some comments.
Thanks.
Tweets that mention wallpaper using CSS3 | Nikesh Hayaran's Blog -- Topsy.com
Apr 22nd, 2010
[...] This post was mentioned on Twitter by nikeshhayaran, Nitin Hayaran. Nitin Hayaran said: Beautiful Sunset Picture using only CSS3 and no Images : Power of CSS3 : http://goo.gl/4mhc [...]
Vivek
Apr 23rd, 2010
Awesome buddy , I knew about gradients & shapes in CSS3 but you produced a live example Kudos
admin
Apr 23rd, 2010
thanks vivek…
SuperSonic
Apr 29th, 2010
ЎHola!
Estб not sure this is true:) but thanks to a post.
SuperSonic
ayliecy
Apr 29th, 2010
nice example .. keep it up …
Deepak kaletha
May 1st, 2010
impressive example
ivan
Nov 3rd, 2010
Nice and funny
You inspired me to make my own sunset: http://uglydesign.freehostia.com/design/sunset/sunset2.html
nikesh
Nov 18th, 2010
@ivan … great work ivan …. liked it very much ..
high quality pictures
Apr 19th, 2011
these are very nice and beautiful wallpapers..i really liked it.thanks to share with us…
Kavitkar uttam
Apr 22nd, 2012
awesom yaar