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…