Winnipeg Web Design

How To Create CSS3 Gradients Using An Image0 Comments »

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 Gradients0 Comments »

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.

Using Firebug To Modify :hover State5 Comments »

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!

Swamp Ass PSA starring Nathan Fillion0 Comments »

The Nerd Machine has created some pretty hilarious short videos. Check this one out for some tips on Swamp Ass

Getting started with YQL and AJAX0 Comments »

In this tutorial I will be showing you how to build a simple tool that will use Yahoo!’s YQL query tool to search for some tracks from their music website. These results will then be displayed on our website all using AJAX to make it seamless along with a link to buy the album off Amazon.
Live Demo
Download

What is YQL?

YQL stands for Yahoo! Query Language, it lets you query, filter, and join data across most of Yahoo!’s (and a few other’s) services with a similar structure to SQL. This is useful as its all written in one language making it easier to build sites and web apps that will use different services but join them all together. To get started with seeing what YQL looks like its a good idea to try out their YQL Console. From this we can see that it will deliver our content back in either XML or JSON, in this tutorial we will be using JSON. The format of YQL was built to be very similar to that of SQL so it makes learning it even easier.

Read more »