Thursday, June 30, 2011

CSS3 Is Amazing

I'm going to Share some awesome code with you that I just discovered. I have been working on a project that required I use html 5 and Css3 and I have to say I'm very impressed at how many cool things Css3 is capable of.
Here is the first bit of code I used
1. body {
2. background: #000 url(bg.jpg)
3. center center fixed no-repeat;
4. -moz-background-size: 100% 100%;
5. background-size: 100% 100%;
6. }

7. @media only all and (max-width: 1024px) and (max-height: 768px)
8. {

9. body {
10. -moz-background-size: 1280px 1024px;
11. background-size: 1280px 1024px;
12. }
13. }
This is a new feature that is part of Css3 only and only compatible with newer versions of IE Netscape Chrome Safari and Firefox, and it actually has the ability to stretch and shrink your pages background image to any users screen resolution. No longer do you have to size your background image to fit what users screen resolution will most commonly be.
And from a design aspect this will really make a huge difference to the versatility of your web work . much more to come stay tuned

No comments:

Post a Comment