Ninja CSS Blog

CSS – image/background transparency

Cindy — Mon, 09 Nov 2009 14:59:36 +0000

filter:alpha(opacity=90);
-khtml-opacity: 0.9;
-moz-opacity:0.9;
opacity: 0.9;

Now for the different ways of setting opacity…

For Internet Explorer:

filter: alpha(opacity=90);

For Mozilla:

-moz-opacity: 0.9;

For Safari (current):

opacity: 0.9;

This is the important one. It is the current standard supported by Safari, Opera and Firefox

For Safari (old):

-khtml-opacity: 0.9;

This is for older versions of Safari, back before it adopted webkit (which is what you use for something like round borders).

CSS – Selector hacks

Cindy — Thu, 05 Nov 2009 16:30:02 +0000

.someClass {
  padding-top: 10px; /* shows in all browsers */
  *padding-top: 10px; /* shows in IE7 and below */
  _padding-top: 10px; /* shows in IE6 and below */
  *padding-top: 10px;_padding-top:10px; /*shows in IE7 and IE6 */

Curse you 2.8.5!

Cindy — Tue, 27 Oct 2009 13:31:04 +0000

I hate when I upgrade WP and my plugin(s) break. Please bear with me as I figure out how to fix my blog =)

CSS – image swap

Cindy — Thu, 16 Jul 2009 15:00:45 +0000

What You Want To Do: You have a horizontal (or vertical) menu list – when you hover over each item, you want it to “change” so that it indicates you’re mousing over it and you don’t want to use Javascript to accomplish this.

How To Do It: Instead of “swapping” out the original image and the image you see when you hover over, we’re going to make the original image go away. Think of this as a disappearing act.

First, I’ll show you what my horizontal list looks like:

The code:

So there I have inserted the images (normal state) into the

tags of my menu list. Next we’re going to add some CSS styles.

In my case, I want a horizontal list that does not have bullets, so I will need to make the

tags display inline, else it will give me a vertical list and style the list style type with none. Make sure you add the display block style to the li’s a element. If you don’t do that, the images will flicker when you hover over them. Try it with and without that style and you’ll see what I mean.

ul.headerMenuList li {
  list-style-type: none; //gets rid of the bullets next to each item
  float: left;
}

ul.headerMenuList li a {
  display: block; //make sure you add this style, else the images will flicker when you hover over them!
}

ul.headerMenuList li img {
  border: none;
}

You’re going to have different images for each menu item so you’ll have to give each item a separate class. Then in the CSS, you’ll give each of those classes a different background image to use which serves as the hover image.

Also, you’ll need to style the a element (with the image) when it’s being hovered over. When you hover over the item, you want to give it the effect of swapping/changing. What we’ll do here is add a visibility styling (hidden). That way, when you hover over the

(that already has a background image) it will hide the normal state image and display the hover image (background image).

Here’s my menu when you hover over “Home”:

The CSS looks like this:

ul.headerMenuList li.home {
  background-image: url(/imgs/home_on.jpg);
  background-repeat: no-repeat;
}

ul.headerMenuList li.home a:hover img {
  visibility: hidden;
}

ul.headerMenuList li.findProviders {
  background-image: url(/imgs/findProviders_on.jpg);
  background-repeat: no-repeat;
}

ul.headerMenuList li.findProviders a:hover img {
  visibility: hidden;
}

ul.headerMenuList li.findPayers {
  background-image: url(/imgs/findPayers_on.jpg);
  background-repeat: no-repeat;
}

ul.headerMenuList li.findPayers a:hover img {
  visibility: hidden;
}

ul.headerMenuList li.news {
  background-image: url(/imgs/news_on.jpg);
  background-repeat: no-repeat;
}

ul.headerMenuList li.news a:hover img {
  visibility: hidden;
}

ul.headerMenuList li.educationalTools {
  background-image: url(/imgs/educationalTools_on.jpg);
  background-repeat: no-repeat;
}

ul.headerMenuList li.educationalTools a:hover img {
  visibility: hidden;
}

With the Javascript method I previously posted, you have to preload the images. With this CSS method, you do not have to preload any images. The concept of this method is easy to grasp – you have an image and then you have a different image you want to reveal when you mouse over it. For people (like me) who don’t want to mess with Javascript, this is definitely a solid method!

Note: This method is not compatible with IE6 as it does not support attribute selectors (a:hover) nor context-dependent styles (a:hover img). To hell with IE6.

Javascript – image swap and preload

Cindy — Tue, 30 Jun 2009 12:47:00 +0000

What You Want To Do: you have a menu of items or a set of images that need to change when they are hovered over.

How To Do It: Use the MM Image Swap!

Put the following code between the tags or a Javascript file that is called on whichever page(s) you want to swap images on.

Now, for the section that has the menu items (or images) that you want to swap, you need to call the functions. The example I'm going to give is the menu list I used, so adjust accordingly. If you didn't use a

Finally, go to the tag and preload the images. Again, change the image file names to your own.

CSS – overflow: hidden; FTW!

Cindy — Mon, 29 Jun 2009 17:45:00 +0000

The Problem: The outer container was not wrapping around some text. It was clear in my code that the text should be inside the area with the grey border.

The Solution: Use the style “overflow: hidden;”

The CSS looked like this:

.container {
border: 1px solid #cccccc;
border-top: none;
}

So then, I was like: SHAZAM! and used “overflow: hidden;” and here is the result:

The CSS now looks like this:

.container {
border: 1px solid #cccccc;
border-top: none;
overflow: hidden;
}

Basically, whenever you have some type of content (image, text, div, anything!) that is outside of where it is supposed to be (like a container div), check that the code is correct. Check that there are proper opening/closing tags. If all else fails, try “overflow: hidden;” on the container div and it should do the trick!

乾杯!
Cheers!

Welcome

Cindy — Tue, 28 Apr 2009 16:04:00 +0000

This is where I will put up HTML/CSS/Javascript issues I come across. If I have a solution to the problem, I will also post that. I’ll also write about anything I come across that might be seen as helpful or cool to a front-end web developer (aka ME).