Thank you for this article! I have been always stressed and overwhelmed by the fact that i should master javascript and even jQuery to create a beautiful website. Also constantly having to use photoshop and jpegs to add refined typography or animations seemed to be a hassle. It is great to hear that CSS3 is continuing to provide new features to make websites look cool in an easier and simpler way.
Effects like text shadows, rounded corners, box shadows, gradients, and opacity are basic effects that designers often use to create websites. Why use multiple tools when it can be simply done with css?
Even though there are kinks with CSS3 such as blurry shadows and some pixelations, it is definitely the right direction to make web designing more simple and easier to do and it only seems to be minor.
And in terms of Internet Explorer, I wouldn’t count IE as a problem to CSS3 since IE seems to be unsupportive of a lot of new features. It is frustrating to constantly see new features one after the other stating “IE not supported” or “might not work as well under IE”
Copy & paste the code below to embed this comment.
hchung
For an amateur graphic designer such as myself, it is great to know that all of this information is readily available on the web. Thank you for the great article. It is great to know that you no longer have to deal with creating your own images and effects through image-editing programs like Photoshop. Small touches like rounded corners and drop shadows definitely have a huge effect on the overall aesthetic of any website, and it is great to be able to use these tools so easily through CSS. Although such simple effects are featured in your article, I am excited at the possibilities of new designs and tools to create a more aesthetically pleasing website through simple and pain-free additions to the code.
It is interesting to see the comparisons between the browsers and how they display the same information. It seems as though Internet Explorer is rather far behind in terms of integrating web design. It seems that most web designers are using other browsers any way, and IE will eventually become obsolete as design is rapidly becoming the “next big thing.” Hopefully some day in the near future they will all be more designer-friendly and make the web a much more visually appealing place to be!
Copy & paste the code below to embed this comment.
evelynt
I really appreciated the light-hearted and easily understandable way you have written this article in order to make head-scratching CSS for a beginner like me less intimidating. It is also great that you have linked to all examples where the CSS3 is running live. It is eye-opening to see all these new innovations and possibilities that can be done with CSS, no matter how eye-blinding and blingtastic they may be! The abilities to perform these little tricks live completely expand the way how website design can be presented. Nice that you also included the images of how it would look in different browsers incapable of handling all the blingtasticness, and how exactly to go about tackling this problem. It is sort of amusing even how much digging around and research has to be done in order to make the IE version the same as the others. As a web design beginner who does not know how to use jQuery or javascript at all, this is a wonderful way for me to increase my ability to create more dynamic-looking and appealing websites live without having to go back to Photoshop for every little change such as a color decision. Look forward to using these little tips and tricks soon in my own web design projects.
Copy & paste the code below to embed this comment.
hallie
It’s very exciting to see all the new things that can be done with CSS3, and great articles like this one make the cross-browser nightmare less daunting.
I hope that we don’t all go overboard with CSS3 giddiness; as the new features become common knowledge, I’m envisioning a CSS3-pocalypse of body text set in display faces at low opacity, embossed and drop-shadowed on top of a red to green gradient backgrounded box with four different corner radiuses as well as inner and outer drop shadows. And the whole thing does a 360 on mouseover.
I would love to see a companion piece to this on the aesthetics and tasteful application of CSS3 bling (is that an oxymoron?).
Copy & paste the code below to embed this comment.
dbryant
Thanks for an insightful article! I am also glad that CSS is allowing for cross-compatability on browsers and opening doors for the way people view web pages. What is interesting to me is that CSS feels like it is always catching up to photoshop, like an outdated civilization trying to tap into all these great technologies that adobe has. It’s funny that we can celebrate the advent of a gradient on CSS when it’s been around for so long. But I don’t want to be a debbie-downer; I’m certainly glad that things are becoming more efficient for us through CSS3!
I certainly enjoyed your ‘bling’ aesthetics in your post and laugh a little that that can come from simple coding. I’m slightly curious as to how many designers will begin decking out sights in gradients and drop-shadows just because they can. But who can blame them when it just looks so nifty?
Why is it some people still insist in using old versions of IE such as IE 6 and 7? All they do is cause problems for us all when it comes to styling, no matter what CSS you use :(
IE should just drop or kill anything below IE9 because thats the only version that dont take a long time to get to work with good standards.
In fact, everyone thats still using something below IE9 should get a message saying it will self destruct in 24 hours if not updated to IE9 or even a better browser such as FF.
36 Reader Comments
Back to the Articlesojinouh
Thank you for this article! I have been always stressed and overwhelmed by the fact that i should master javascript and even jQuery to create a beautiful website. Also constantly having to use photoshop and jpegs to add refined typography or animations seemed to be a hassle. It is great to hear that CSS3 is continuing to provide new features to make websites look cool in an easier and simpler way.
Effects like text shadows, rounded corners, box shadows, gradients, and opacity are basic effects that designers often use to create websites. Why use multiple tools when it can be simply done with css?
Even though there are kinks with CSS3 such as blurry shadows and some pixelations, it is definitely the right direction to make web designing more simple and easier to do and it only seems to be minor.
And in terms of Internet Explorer, I wouldn’t count IE as a problem to CSS3 since IE seems to be unsupportive of a lot of new features. It is frustrating to constantly see new features one after the other stating “IE not supported” or “might not work as well under IE”
hchung
For an amateur graphic designer such as myself, it is great to know that all of this information is readily available on the web. Thank you for the great article. It is great to know that you no longer have to deal with creating your own images and effects through image-editing programs like Photoshop. Small touches like rounded corners and drop shadows definitely have a huge effect on the overall aesthetic of any website, and it is great to be able to use these tools so easily through CSS. Although such simple effects are featured in your article, I am excited at the possibilities of new designs and tools to create a more aesthetically pleasing website through simple and pain-free additions to the code.
It is interesting to see the comparisons between the browsers and how they display the same information. It seems as though Internet Explorer is rather far behind in terms of integrating web design. It seems that most web designers are using other browsers any way, and IE will eventually become obsolete as design is rapidly becoming the “next big thing.” Hopefully some day in the near future they will all be more designer-friendly and make the web a much more visually appealing place to be!
evelynt
I really appreciated the light-hearted and easily understandable way you have written this article in order to make head-scratching CSS for a beginner like me less intimidating. It is also great that you have linked to all examples where the CSS3 is running live. It is eye-opening to see all these new innovations and possibilities that can be done with CSS, no matter how eye-blinding and blingtastic they may be! The abilities to perform these little tricks live completely expand the way how website design can be presented. Nice that you also included the images of how it would look in different browsers incapable of handling all the blingtasticness, and how exactly to go about tackling this problem. It is sort of amusing even how much digging around and research has to be done in order to make the IE version the same as the others. As a web design beginner who does not know how to use jQuery or javascript at all, this is a wonderful way for me to increase my ability to create more dynamic-looking and appealing websites live without having to go back to Photoshop for every little change such as a color decision. Look forward to using these little tips and tricks soon in my own web design projects.
hallie
It’s very exciting to see all the new things that can be done with CSS3, and great articles like this one make the cross-browser nightmare less daunting.
I hope that we don’t all go overboard with CSS3 giddiness; as the new features become common knowledge, I’m envisioning a CSS3-pocalypse of body text set in display faces at low opacity, embossed and drop-shadowed on top of a red to green gradient backgrounded box with four different corner radiuses as well as inner and outer drop shadows. And the whole thing does a 360 on mouseover.
I would love to see a companion piece to this on the aesthetics and tasteful application of CSS3 bling (is that an oxymoron?).
dbryant
Thanks for an insightful article! I am also glad that CSS is allowing for cross-compatability on browsers and opening doors for the way people view web pages. What is interesting to me is that CSS feels like it is always catching up to photoshop, like an outdated civilization trying to tap into all these great technologies that adobe has. It’s funny that we can celebrate the advent of a gradient on CSS when it’s been around for so long. But I don’t want to be a debbie-downer; I’m certainly glad that things are becoming more efficient for us through CSS3!
I certainly enjoyed your ‘bling’ aesthetics in your post and laugh a little that that can come from simple coding. I’m slightly curious as to how many designers will begin decking out sights in gradients and drop-shadows just because they can. But who can blame them when it just looks so nifty?
TME
Why is it some people still insist in using old versions of IE such as IE 6 and 7? All they do is cause problems for us all when it comes to styling, no matter what CSS you use :(
IE should just drop or kill anything below IE9 because thats the only version that dont take a long time to get to work with good standards.
In fact, everyone thats still using something below IE9 should get a message saying it will self destruct in 24 hours if not updated to IE9 or even a better browser such as FF.