Lately, I wrote more about CSS3 features and its awesomeness. Today’s article is about Internet Explorer common CSS bugs and how to solve them.
You may ask me “why this article?” and you have all the reasons to do that. If you read some of my previous articles, then you know I’m a CSS3 addicted. But sometimes, when working on some projects that require cross-browser compatibility, you need to know how to action when you encounter IE bugs.
Modern browsers are constantly evolving and their bugs or strange behaviors are always fixed due new version releases. But what about old browsers like Internet Explorer 6/7? As they are not maintained anymore, their rendering bugs became sort of “de facto”.
Drop shadows and inner shadows are some of the effects I learned to apply using Photoshop’s Blending options. But now, since CSS3 “hit the charts”, you don’t need Adobe’s design tool to add a drop shadow or an inner shadow to a box.
Nowadays, the cool thing is that you create beautiful CSS3 shadows without actually needing Photoshop anymore.
You may already know what a ribbon is and how it looks. Nowadays, the CSS ribbon effect is a web design trend. It’s cool and it can help you by adding a 3D effect to your design.
So, in this article you’ll learn how to create CSS ribbons, without any images and minimal HTML markup.
In my previous article,
box-shadow properties were used to create a slick HTML5 search box. As you may know, when using all these together, a well-known Chrome bug is triggered.
Although this bug was fixed in the latest Chrome beta releases, below you’ll see the strange (may I call it like that?) or should I better say different behavior: