This is just a little blit – so I can find this CSS code again if I ever forget it LOL.
Air Comfort Concepts - example of CSS rounding and CSS shadow
I like some rounded corners. And it used to be a real pain to have to do it in graphics. I wrote some serious code for a TV show website – not mentioning it here as it always draws attention and useless hits to my website – still love them , but they’re remain unnamed – to DO all those rounding on corners and it was sweet stuff, but a pain. It was handling some 10K to 20K hits per day with multiple calls per page load so it MUST have been pretty decent 🙂
There are a number of browsers out there that can handle this stuff now – used to be so hit and miss. It’s so disappointing to get everything looking just *so* in one browser and then have it completely fall apart in another – or require another dozen hours to get it right – and usually it makes little difference to the overall purpose of the site – it’s just an annoyance. BUT, with most browsers handling this code without issue, I’m now using some of that good CSS 3 code even beyond this simple code. Things like multiple images as background images and gradient backgrounds that I DON’T have to create by hand – EVER so sweet. I really could use more of it, but old habits die hard.
Anyway – include all these various things to ensure that all available browsers get hit with the proper CSS syntax. Use this for ensuring radius borders and box shadows with CSS in your next project!
border-radius: 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 2px 2px 2px #666;
-moz-box-shadow: 2px 2px 2px #666;
Shadow is horizontal | vertical | blur
Follow
