This is a crazy world we live in; we seek fun by screwing up things we see in our everyday lives, and this natural instinct serves the primary purpose for some creativists to twist professional and famous brand logos into something that are insanely funny, for sure.

Today you are guaranteed to have a good time from these 30 parodies of widely recognized brand logos such as Kentucky Fried Chicken, FedEx, and even World Wildlife Foundation! These logo parodies have 2 similarities in general, they are inspiring, and they try their best to make you laugh!

(Image Source: frontsideair)

We’ve accummulated 30 of the weirdest and wackiest logo parodies one can find on the Web. Without further ado, let’s have a look (and a laugh) at how they are poking fun at famous brands.

Recommended Reading: Logo Design Gone Wrong: 10 Offbeat Examples

KFC – McDonald’s Fried Chicken. It seems that Ronald McDonald and Colonel Sanders have just ended their final fight, similar to this, but apparently Ronald had the final victory. (Image Source: LordDavid04)

KFC – Kenpachi Fried Chicken. If you want to open a fake KFC restaurant in China, this is the best, coolest logo design for you. I personally feel that the Kakashi Fried Chicken’s logo will attract a lot of customers too, or a lot of Instagram photographers. Enjoy infringing 2 copyrights at once then! (Image Source: frontsideair)

McDonald’s – McDiabetes. The logo says it all! (Image Source: Viktor Hertz)

Burger King – Murder King. Probably the best logo to educate us that burgers are bad for our health! But I don’t think the artist twisted it for educational purposes, hmm. (Image Source: INSPIRE ONE)

Burger King – Tomato King. So if a burger is harmful to us, maybe we could try other healthier alternatives like… tomatoes? (Image Source: greateronion)

Snickers – Suckers. This logo could possibly create more buzz than the original one, especially when it’s featured on TV ads. (Image Source: OvejaNegra77)

Pepsi. Too much Pepsi could cause potential harm to our health, but only a genius could come up with this creative twist of the Pepsi logo! (Image Source: Lawrence Yang)

Starbucks Coffee – Star Wars Coffee. The coffee is strong in this one. If this one is too nerdy for you, check out the Starducks Coffee. (Image Source: rubyred)

Nescafe – Nocoffee. Agree or not, we all have the answer in our mind! (Image Source: arama alisa)

Facebook – Procrastination. And I’m one of the innocent victims, too. (Image Source: Viktor Hertz)

Facebook – Stalker. I have to admit that Facebook is the best place to stalk any person… well, so far it’s my best choice! (Image Source: arama alisa)

Myspace – Noplace. Sad truth, but so true. (Image Source: Viktor Hertz)

YouTube – YouSuck. There’s always a certain part in YouTube, where you shout this phrase to a certain video… no, I’m not thinking about a certain music video! (Image Source: Urbinator17)

Amazon.com – moneyzgone.com. Clever twist by just reversing the smiley illustration! Too bad that most Amazon products can’t be shipped to my country, so my money goes to eBay instead. (Image Source: Anna Podoleanu)

Windows 8. Every hardcore Windows user like me will know the message hidden in this brilliant logo! A salute to the creator, we all share the same pain. (Image Source: Tech Crunch)

IE6 – Idiot Explorer 6. Doubtless to say, web designers will agree. (Image Source: Tudorache Ion-Dragos)

Dell – Hell. You could even use this as your wallpaper, if you are not a Dell’s fan! (Image Source: preeemo)

HP – Harry Potter. I’ve always wondered what HP stands for, until I saw this logo! P.S. It’s Hewlett-Packard. (Image Source: Different Thinker)

LG. Life’s good or life’s tough? Only the LG user knows! (Image Source: Business Pundit)

Puma – Coma. I almost had a coma from laughing, when I first saw this logo. (Image Source: Kali-Yugadi)

Levi’s – Elvi’s. Perhaps Levi’s could make more sales by change their brand name to this clever piece! (Image Source: Urbinator17)

Playboy – PlayPokémon. So much cuteness in this sexy logo! (Image Source: Loncea Roxana)

American Idol – American Idiot. I might stand a chance to be the champion if I join this show! Alas, I’m not American. (Image Source: Urbinator17)

NBA – MBA. To attend work for 8 straight hours a day for several years is certainly a glorious record to your life, so be proud that you are one of the MBA champions… why are there tears flowing down my eyes? (Image Source: ChidoWear)

UPS – OOPS. For all the lost packages and the receivers who mourn their loss. Great impact! (Image Source: OvejaNegra77)

FedEx – FatEx. You better don’t let this image appear in any of your device if you are trying to recover your relationship with your ex! Smart mod from the original name, though! (Image Source: lulia)

Shell – Hell. This parody proves that no matter how boring the icon is, a creativist will always have an idea to make it fun. (Image Source: Urbinator17)

300 – LOL. It’s hard to skip this one, especially since the artist had used his mad skills to photoshop this logo into oblivion! (Image Source: Thundordan)

Jurassic Park – Yoshi’s Island. Prepare yourself to be invaded by massive clones of… cute Yoshi dinosaurs. Gotta catch ‘em all! (Image Source: MichaelMayne)

World Wildlife Foundation – WWF. The question of the century, now answered! Wildlife vs Wrestling? Just mash it together and voila! You could even buy a t-shirt with this logo on it if you follow the source link. (Image Source: DieHard Threads)

Reflection

These logos are surely funny, but they can’t be achieved without awesome skill, creativity and determination. That being said, a salute to all designers who came up with these amusing logos that make our day, we owe you so much fun!

Spotted some more logo parodies that are even funnier than the logos showcased above? We welcome you to challenge us by showing those logos in your comment! Awaiting for another dose of serious fun from you.

Related posts:

1. Logo Evolution of 25 Famous Brands
2. Logo Design Gone Wrong: 10 Offbeat Examples
3. 30 Famous Tech Gadgets Disassembled
4. 36 Clever (and Quirky) Packaging Designs

Gradient is a great color feature addition in CSS3. Rather than only add a single color, we can now add multiple color combinations in one declaration block without relying on images, which could decrease the HTTP request in our website allowing the website load faster.

If you have played around with gradients in CSS3 you are probably familiar with the two methods: radial and linear gradient. Today’s post will be about the latter.

Creating Gradients

As the spec says gradients in CSS3 is an image, it has no special property like other new feature addition, so it is declared using the background-image property instead.

If we take a look at the complete syntax for gradient, it looks a little overstuffed, which could lead to confusion for some people.

  div {  	background-image: -webkit-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);  	background-image: -moz-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);  	background-image: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);  	background-image: -o-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);  	background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);  }  

So let’s dig into each part of the syntax one by one to make things clearer.

First of all, linear gradient is declared with the linear-gradient() function. The function has three primary values. The first value defines the gradient starting position. You can use a descriptive keyword, like top to start the gradient flowing from the top;

  div {  	background-image: linear-gradient(top, #FF5A00, #FFAE00);	  }    

The snippet above is the official version from W3C to create gradients. It’s actually simpler and quite self-explanatory and it will also create the following gradient.

You can also use bottom to do the opposite, or else right and left.

• Start Position Demo

We can also create a diagonal gradient using angle degree as the gradient starting position. Here is an example:

  div {  	background-image: linear-gradient(45deg, #FF5A00, #FFAE00);  }  

The snippet above will create the following color gradient:

• Diagonal Gradient Demo

The second value of the function will tell the first color information and its stop position which is stated in percentage. The stop position actually is optional; the browser is clever enough to determine the proper position, so when we don’t specify the first color’s stop the browser will take 0% as the default.

And, the next value is the second color combination. It works like the previous value, only that if it is the last color applied, and we do not specified the stop position, a value of 100% will be taken as the default. Now, let’s look at the example below:

  div {  	background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);  }  

The snippet above will create a gradient like what we saw earlier (no difference) but now we specify the color stop position;

Now let’s change the color stop, and this time we will specify 50% for the first color and 51% for the second color, and let’s see how it turns out;

  div {  	background-image: linear-gradient(top, #FF5A00 50%, #FFAE00 51%);  }  

• Color Stop Demo

Transparency

Creating transparency in gradient is also possible. To create the effect we need to translate the color hex into rgba mode and lower the alpha channel.

  div {  	background-image: linear-gradient(top, rgba(255,90,0,0.2), rgb(255,174,0,0.2));  }	  

The snippet above will lower the color intensity by 20%, and the gradient will turn out like this:

• Transparent Gradient Demo

Multiple Colors

Should you want more colors to be added, just add the colors next to another with a comma delimiter and let the browser determine each color stop position.

  div {  	background-image: linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);  }  

The snippet above will create the following rainbow.

• Multiple Color Demo

Browser Compatibility

Unfortunately, at the time of this writing, all current browsers have yet to support the standard syntax. They still need the vendor prefix (-webkit-, -moz-, -ms- and -o-). So, that is why the complete syntax appears like this:

  div {  	background-image: -webkit-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);  	background-image: -moz-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);  	background-image: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);  	background-image: -o-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);  	background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);  }  

On the other hand, the Internet Explorer, specifically version 9 and lower, is far from the standard. The gradient in IE9 and below is declared with filter, so if we want to add gradient on those browsers, we have to write something like this;

  div {  	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF5A00, endColorstr=#FFAE00);  }  

The filter has its limitations: first, it does not allow more than three colors added, and creating the transparency effect is also a bit tricky – it does not allow rgba, but the IE filter uses #ARGB;

  div {  	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33FF5A00, endColorstr=#33FFAE00);  }  

Here is a tool to help you convert rgba to #ARGB.

• Demo
• Download Source

Writing the Syntax Faster

As you can see above, in order to maintain the gradient compatibility across browsers, we need to add five more lines of codes which is inefficient.

There are many ways we can do to simplify the task; such as using the Prefix-free, Prefixr, LESS or Sass to help compile the codes, but above all, we recommend using this tool, ColorZilla Gradient. This tool will simply generate all the necessary codes for the gradients to work in all browsers.

Final Words

Today we have discussed quite a lot on creating gradients, we have looked into each part of the syntax, creating transparent effects and maintaining browser compatibility. So, at this point, we hope that you already have a better understanding on the subject.

There are still many things we plan to explore on CSS3 Gradients in our future posts, so stay tune to Hongkiat.com. Lastly, thank you for reading this post, we hope you enjoyed it.

Further Reading

• Bullet Proof Cross Browser RGBA Backgrounds – Lea Verou
• CSS3 Image – W3.org
• When can I use CSS3 Gradients – CanIUse.com

Related posts:

1. CSS3 Attribute Selector: Targeting the File Type
2. How to Create Gmail logo with CSS3
3. Creating Stylish Responsive Form With CSS3 and HTML5
4. CSS3 Tutorial: Create A Sleek On/Off Button