The beauty of CSS3 is not just in the fancy effects, but also in the numerous ways it provides for styling your semantic, up to the point and concise markup. The solution below demonstrates how to create a imageless navigation bar with CSS3 gradients and shadows, and even apply icons by using generated content via the :before [...]
Archive for November, 2010
Creating a Web 2.0 Button with CSS3 and Minimal Markup
Posted in CSS, CSS Hacks, CSS3, Tips and Tricks, Web Development, tagged css after, css before, css3 generated content, css3 gradients, css3 multiple backgrounds on November 30, 2010 | 18 Comments »
Creating a Speech Bubble With CSS3 and without Additional Markup
Posted in CSS, CSS Hacks, CSS3, tagged css tooltip, css3 speech bubble, imageless tooltip, polygonal css on November 25, 2010 | 5 Comments »
Here’s a quick and easy way to create speech bubbles (or tooltips) with HTML and CSS3 without using additional markup or images. The solution is elegant and simple and utilizes the pseudo-element :after (or :before, if you prefer) and the fact that the borders in CSS are met in an angle. It works with all major browsers [...]
Using RGBA to Prevent the CSS Opacity Inheritance from Parent to Child Elements
Posted in CSS, CSS Hacks, CSS3, Tips and Tricks, Web Development, tagged cancel transparency propagation, control the alpha opacity filter in internet explorer, control the propagation of alpha opacity filter in inte, crossbrowser css rgba setting, crossbrowser rgba, css filters, css opacity, inheritance of opacity in html elements, override opacity, override transparency, rgba css3, rgba for internet explorer, stop opacity inheritance, stop opacity propagation on November 21, 2010 | 6 Comments »
This article is a follow up of another article of mine dealing with the same problem which was written two years earlier. Now, in the light of the increased support for CSS3 the solution I will offer is already fully supported by all major browsers. The new solution deals with RGBA CSS3 backgrounds for Mozilla FireFox, Google Chrome, [...]