Overriding the Default Placeholder Styles for Loading and Broken Images in Firefox

A quick and dirty trick for overriding the system styles of the loading and broken image placeholders in Firefox in case you have ever wondered if it is possible:

Read Full Post »

Creating a Gaussian Blur Effect With CSS3

Unfortunately, CSS3 does not provide means for creating blur effects out of the box, however we can easily emulate Gaussian Blur by using text-shadow and setting the color of the element to transparent: The following markup: <p>Lorem ipsum dolor sit amet…</p> …And this CSS: p {     text-shadow: 0 0 8px #000;     color: transparent; /* other properties */ [...]

Read Full Post »

Creating a Web 2.0 Button with CSS3 and Minimal Markup

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 [...]

Read Full Post »

Creating a Speech Bubble With CSS3 and without Additional Markup

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 [...]

Read Full Post »

Using RGBA to Prevent the CSS Opacity Inheritance from Parent to Child Elements

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, [...]

Read Full Post »

CSS Hacks, Tricks and Proprietary Extensions

Below is a list of CSS hacks that can be used to filter out different browsers in cases when standard CSS does not work or the conditional comments of IE cannot be applied. Internet Explorer 6 * html .elementOrClassName { property: value; } .elementOrClassName { _property: value; } Internet Explorer 7 * + html .elementOrClassName [...]

Read Full Post »

CSS Hack for Safari and Google Chrome: Redux

As body:nth-of-type(1) and body:first-of-type are supported by FireFox 3.5x, the hack that I wrote about in this post cannot be used anymore. You may try the following one, which targets only Google Chrome and Safari: @media screen and (-webkit-min-device-pixel-ratio:0) {  div  {   color: red; /* The text will appear red only in Safari and Google [...]

Read Full Post »

CSS Hack for Internet Explorer 8

Notwithstanding the improvements in the CSS support in Internet Explorer 8, there may be cases when a CSS hack for that particular browser is necessary. Here is one that works in IE8 Standards Compliance Mode: .classnameOrElement {  color /*\**/: blue\9 } And another one that will be applied in all IE versions: .classnameOrElement {  color: [...]

Read Full Post »

10 Dirty CSS Tips and Tricks

Here is a collection of 10 CSS tips, tricks in blogposts I have written during the last year that you may find useful: 01. Better Image Scaling and Resampling in Internet Explorer 02. Setting Opacity and Other Filters in Internet Explorer 8 03. The 32 External CSS Files Limitation of Internet Explorer and More 04. Unobtrusive CSS Loading Indicator for Images 05. CSS: Filtering [...]

Read Full Post »

Better Image Scaling and Resampling in Internet Explorer

Oddly enough, but the image scaling by using bicubic interpolation is turned off in Internet Explorer. All other browsers have this turned on by default, because this is the only normal and expected behavior. Due to this badly chosen default, sometimes the images in Internet Explorer are not displayed as smooth as in other browsers. To [...]

Read Full Post »