Facebook vs. Website

Do I need my website if I have a Facebook page with lots of fans?

I get this question asked a lot. Here’s my take on this, you decide:

At its most simplest, Facebook is just a website – one website among many.  It just happens to be a very popular website. Keyword here – popular.

Facebook needs the Internet to exist. The Internet does not need Facebook to exist.

Should Facebook, like so many websites before it, become unpopular then you’ve lost your online identity.

Will it last into perpetuity? Who knows. The typical lifespan of popular websites has been about 5 years. Think “My Space” – who is that? Let’s see what happens.

Websites offer a bit more than Facebook – the opportunity to expand on your services, products and mission. Don’t forget what Facebook is about – it’s the connection, the engagement, the instant gratification. It’s what you do in your own business. You go out and network. You talk to your customers. You engage with them. = Offline, you “Facebook.”

But, at the end of the day, you still come back to your office or your store where everything is stored, maintained and developed. That’s your website.

So, for now, consider your Facebook fan page a mini website where it’s a lot easier to engage with your customers and provide instant information in an online community.  It should lead back to your website where you can provide more in-depth information and content. Facebook gives you tools like apps and plugins to enhance it.  Use it but don’t forget that it’s one tool of many other online tools.

CSS background transparency without affecting child elements

Getting the desired effects for semi-transparency in CSS is harder than one might think.

1. Possibility would be using CSS and Opacity.

The problem with using opacity in CSS, besides the annoying syntax to cater to all web browsers, is that not only the background of the element will have transparency, but all of its child elements as well. This means that any text within will have the same opacity. You can cater to this problem with creating redundant elements, some tricky CSS positioning and such, but really, it’s a mess.

2. Possibility would be creating a 24-bit PNG background image

The problem with PNG images is, beside a superfluous HTTP request, that images are way more larger in file size than one or two lines of CSS code – especially considering that the image has to be a bit larger to avoid serious memory leak issues with 24-bit PNG images with alpha transparency in Internet Explorer.

The Solution

RGBa colors. The beauty in this is that you declare the normal RGB values + values for the level of transparency you want, resulting in a very easy way to declare transparency for a color. Making this happen with CSS, with a fallback for those web browsers that doesn’t support it, would look like this:

.alpha60 { /* Fallback for web browsers that doesn't support RGBa */ background: rgb(0, 0, 0); /* RGBa with 0.6 opacity */ background: rgba(0, 0, 0, 0.6); }  

 The transparency will only be applied to the background

A little caveat

Shockingly enough no version of Internet Explorer supports RGBa colors. However, and lucky for us, in year 2000 Microsoft went crazy with implementing various filters in IE. One of them are the gradient filter, and what we can do is use that and just define the same start and end color. “Ok, but how do I get the transparency”, you might be thinking now. The answer to that is that you will declare that as part of the color hex value. A CSS gradient filter achieving the same effect as the CSS code above would look like this:

.alpha60 { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000); } 
 

As you can see, it is actually declared as part of an 8-digit hex value, where the first two numbers is the alpha hex value, the next two is Red, and so on. The difference between how we do it with RGBa is that the hex value will range from 0 to 255, just as any color value. So, how do we convert an alpha level of 0.6 to its hex value?

This where a little Math comes in the picture. Basically, we take our desired alpha level, 0.6, and multiplies it with 255 – then we convert that result into hex.

A quick way is to use the beauty of JavaScript. Just open up Firebug and type this into the console:

// Replace 0.6 with your desired alpha level Math.floor(0.6 * 255).toString(16);
 

99 is then corresponding to 0.6, and becomes the first two digits of the start and end colors for the gradient filter.

Combining it all

.alpha60 { /* Fallback for web browsers that doesn't support RGBa */ background: rgb(0, 0, 0); /* RGBa with 0.6 opacity */ background: rgba(0, 0, 0, 0.6); /* For IE 5.5 - 7*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* For IE 8*/ -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; }

NOTE! You have to declare background: transparent for IE web browsers!

Spensa Basket Jerseys

Here are the Spensa Basket Jerseys for you to review.

Girls:

 Boys: