Swamp Ass PSA starring Nathan Fillion

Author Archive

How To Create CSS3 Gradients Using An Image

Monday, December 12th, 2011

Quick tip screencast on how to make easy CSS3 Gradients:

What do you guys think of this method? Or do you still use a repeating background image?

IE Filter Bug When Using Creating CSS3 Gradients

Wednesday, November 30th, 2011

Well it has been awhile since I have posted on this blog. I would love to be posting more, but my hectic work schedule isn’t allowing me much time at all.

Well enough of that. Today I am going to help you figure out how to fix an annoying little ie bug. If you haven’t already checked out my ie z-index bug page, do it now.

The Problem

Most of you by now I am guessing have started to implement CSS3 gradients in your projects instead of repeating background images. If not, I suggest you check out this handy css3 generator that converts an image into its very own CSS3 gradient.

Now in my example, I have a navigation bar that is using a CSS3 gradient, and then I also have an active state for a link that expands outside of the navigation’s boundaries. See below:

The following is the HTML code I used:

<div id="global-nav">
  <ul>
    <li><a href="index.html" class="active">Home</a></li>
    <li><a href="testimonials.html">Testimonials</a></li>
    <li><a href="contact.html">Contact Us</a></li>
  </ul>
</div>

and the import CSS relevant to our issue:

#global-nav ul {
    background: #d2d6da; /* Old browsers */
    background: -moz-linear-gradient(top, #d2d6da 0%, #c9ccd1 21%, #a1a3a7 75%, #95979a 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d2d6da), color-stop(21%,#c9ccd1), color-stop(75%,#a1a3a7), color-stop(100%,#95979a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #d2d6da 0%,#c9ccd1 21%,#a1a3a7 75%,#95979a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #d2d6da 0%,#c9ccd1 21%,#a1a3a7 75%,#95979a 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #d2d6da 0%,#c9ccd1 21%,#a1a3a7 75%,#95979a 100%); /* IE10+ */
    background: linear-gradient(top, #d2d6da 0%,#c9ccd1 21%,#a1a3a7 75%,#95979a 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2d6da', endColorstr='#95979a',GradientType=0 );

   height:54px;
   line-height:54px;
}
#global-nav li {
    display: inline;
    float:left;
}
#global-nav a.active {
    margin-top: -12px;
    background: url(../images/active-bg.png) no-repeat;
}

So in this case everything would look great except IE. Here is what would show up in IE:

The Solution

As you can see our nice overlapping feature is cut-off. To me I thought I must have assigned “overflow:hidden” to the ul as that is what it looks like. Turns out that is not the issue.

All you have to do to fix this error is remove the following line of CSS:

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2d6da', endColorstr='#95979a',GradientType=0 );

Now the problem is that you will not have your nice CSS3 gradient in IE, but in some cases the overlapping if more crucial to the design. Don’t ask me to explain why filter does this. Filter works great until you have to push out of the boundaries.

If you have any better solutions/fix for this issue, please let me know in the comments.

Posted in Web Programming | No Comments »

Using Firebug To Modify :hover State

Tuesday, August 2nd, 2011

I didn’t know for the longest time how to easily modify hover states on-the-fly. I thought Firebug had no features like this, but I guess I was wrong.

Take a look at this quick video that shows how this can be done!

If you have any other hidden Firebug secrets, please share them in the comments below!

Posted in Uncategorized | 3 Comments »