Firefox CSS Trick


You may have noticed that Firefox outlines hyperlinks when you click on them. Personally I find this a little bit annoying, especially when the hyperlink happens to be an image or a website logo.

However, as a web developer you can easily change this behavior for your website.

Just add this little piece of CSS to the main CSS file for your website to remove the outline:

Understanding CSS Hierarchy


As websites and the applications that power them become more complex so to does the ability to easily change their appearance.

CSS (Cascading Style Sheets) are now extremely widely utilised for styling and controlling the layout of web pages, but not always easy to work with. Apart from browser inconsistencies (which we won't be discussing in this article) if you are using multiple style sheets and perhaps some inline styling how do you figure out what takes precedence over what?

PHP Zebra Striping


Alternating the colour of blocks of content (or zebra striping) can make things easy on the eyes for your website visitors and enhance their overall experience on your site.

Zebra striping may be the ideal solution for separating the comments on your blog. If you are using a PHP powered website such as Wordpress (or any other PHP powered site) this is extremely simple to implement.

Let's assume that we want to add an odd and an even CSS class to alternate comments.

Opacity without Scripting


First of all a quick explanation. Opacity can be described as the opposite of transparency. What I mean by this is, you can think of 20% opacity being the same as 80% transparency. An unaltered image has an opacity of 1.0 or is fully opaque.

An opacity hover effect can have a nice visual impact for your images. It is also an alternative than the traditional method of having 2 different images and having to use image pre-load techniques.

The below CSS3 method works in current versions of IE, Firefox and Opera. There is only a single image used each time (reduces page load times) and minimal HTML and CSS required to achieve the result. I have also added some padding and a background color for effect.

Pre Loading Images with CSS


In order to get a smooth rollover effect with your images you need some way of having them available and ready to be used. You don't want your visitors to hover over an image and wait for something to happen. It needs to be almost instant.

Traditionally this has been done using javascript. But, with some people choosing to disable javascript for security reasons you need to consider other options to assure accessibility. So, the only real choice is to use CSS to pre-load your images to your web browser and have them available when you need them.

Syndicate content