Css Gallery - Appealing Web Design Gallery for Webdesign Inspiration » blog

Simple IE6 Blocker/ IE6 Alert using CSS

Alaik — Sun, 31 Jan 2010 05:08:06 +0000

If you’re a web designer or a web developer, I believe, IE6 is one of your nightmare
I won’t explain what the reason are, because most of you probably know better than me.
But for those of you who really-really don’t know (oh .. c’mon guys :p) you can find the answer from one of these websites : IE6 no more, Bring down IE6 , IE6 must die , etc

Yes, we should stop supporting IE6! It is wasting time and effort just to find a way to make your website work properly in IE6 , because the problem is with the browser, not you.
But should we do nothing? I mean, really do nothing technically? Then leave the website be broken in IE6?
Then, I think I agree with chris. The better way is, we should inform our visitor that we are going to stop supporting IE6.

Ok, So how’s to do that?

There’s a few methods available out there. Few of them using javascript and some were using php. And maybe you also have found your own method.
But now I am here want to share about how to create IE alert / IE6 blocker script using just 1 (one ) CSS + 1 (one) image file (which is I think is the lightetst, fastest and easiest method).

Ok. let’s do it

Firstly, we need to create an image file with your IE6 warning message inside, such as “hey you’re using an old, crappy browser”, or “Your browser is outdated” or anyelses. You can use photoshop, GIMP or any other image editing software you like to make it and you can save the format in .jpg, png or .gif.

Stop IE6

Take alook at my IE6 warning image above, it’s simple, right? ( I’ve included the psd source files for this image, so you can easily edit it using photoshop or GIMP and make your own version)

Ok, next.

Now we need to create a css file that will call the image when IE6 used.
You can name it ie6.cvss, ie6hack.css or any else then copy paste these lines to the file :

body , div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { display: none; } body { background: url(../images/ie6.png) center no-repeat ; }
The last step, we need to include the css file, and make the image appear only when visitor opening your website with IE6.
Add this IE6 css conditional comment to the section of your html file :

And, tadaa !! It finished Now your visitors who still using IE6 will no longer see your content.
It’s super easy right?

You can see the demo here or download the source file from here

* Credits : Eric meyer for css reset rules and morcha for nice and modern, glossy browser icons

20+ CSS Gallery feeds you should subscribe to

Alaik — Wed, 25 Nov 2009 10:33:02 +0000

Download CSSGallery OPML

I love cssgallery. When I’m running out of inspiration, I do not go to the beach, but I’ll open my feed reader, spending time there, watching latest design submission of my favorite css gallery feeds.
Within 15-30 minutes I usually will feel more refreshed and got new inspiration that can be poured into a new design idea / mockup. Pretty simple, huh?

I am sure that some of you may have done the same way, and I think you will agree with me that this method is far more efficient when compared to, go to the beach, mountains (unless otherwise using this way you still do not get your inspiration, then go ahead, just go to the beach or mountain ), meet someone specials, or other inspirational events / places, that may more time consuming and also need more money :p

However, there is a problem. Not all CSS Galleries have a good feed format for rss fans.
I’ve tried and reviewed more than 200 css gallery feeds and found the fact that only a few of them, using a good feed format. Some of them displaying their gallery items as a “too” small image thumbnail (that is difficult to see the details of design without visiting the websites), or some of them even just simply put a description text of each item without showing any images (I certainly was not going to subscribe to feed like this).

In my opinion, a good format for a css gallery is, the gallery items/images should be displayed in a sufficient images dimension (having minimum 400 px width is a good start ), to let users able to see the detail of the design item without having visiting the related website (unless when you find a design that really makes you amazed)

From the criteria above, I decided to compile a list of css galleries (see below) that meet my requirement and then share it with you

You can click the RSS link that I put in the end of each CSS Gallery item, to subscribe to the CSSGallery. Or alternatively, just download my CSS Gallery OPML file.

This OPML file will allow you to import all CSSGallery feeds listed below, into your favorite feedreader such as Google reader, FeedDemon, netvibes etc., at one time. Simply import it from your favorite feed reader. This should be easy. Good luck

	Css Gallery	Screenshot Size (px)	Feed
1	unmatchedstyle	453 x 291
2	cssremix	902 x 320
3	cssstyle.me	400 x 300
4	designbombs	611 x 238
5	cartfrenzy	560 x 320
6	minimalexhibit	560 x 320
7	foliofocus	560 x 320
8	blogdesignheroes	560 x 320
9	cssfreshbelend	570 x 270
10	cssburst	710 x 533
11	swellcss	500 x 351
12	cssdance	422 x 242
13	bestcssgallery	513 x 320
14	dot-design	440 x 300
15	cssdsgn	420 x 320
16	bestwebgalllery	470 x 160
17	mobileawesomeness	416 x 318
18	onepagelove	400 x 211
19	wookies	500 x 300
20	cssbuilt	638 x188

Other great resources

These following websites are also worth it to subscribe to (because of their popularity and quality), but I didn’t include them in the OPML file, just because of their size of feed images are smaller than 400 pixels. So it’s up to you

	Css Gallery	Screenshot Size (px)	Feed
1	WebCreme	200 x 88
2	Creattica	320 x 360
3	Cssmania	320 x 217

* Did I not include your favorite feeds? Please let me know by writing a comment below. If it meets the criteria, I’ll inlude it the next post updates

New Design, New Features

Alaik — Mon, 23 Nov 2009 09:44:25 +0000

Old and New

As you have probably noticed on Twitter, CssDance finally has got its new design. Hooraay
Generally, there are not many significant changes, because the mission behind this revamps is, I just want to make CSSDance becoming a more usable css gallery, easier to use and give more benefits for its visitors and, of course for me too

As a start, the gallery items are now having a bigger screenshot size. It will be easier for you now to see design items, without further clicks or pop up windows.

Under each item, you will see few informations related to the design itself, consist of the number of ratings for related items (obtained from visitors of CSSDance), the delicious saved number, and also the amount of tweets for the items (based on bit.ly count) to let visitors know, how popular the design is.
The screenshots size changes will also make the feed more usable. Because you will see a bigger screenshot in your feed reader so you don’t have to visit this website every time just to see new items. CSSDance ‘ll take them all to your desktop *

* For you who have subscribed with CSSDsnce feed before, please update your feed url because we currently have moved to feedburner.

In addition, I also made some small changes such as changing the logo design, increasing font size base, enabling search form, adding new cssdance badge and other minor changes. I tried to make them all simple, easy to use but powerful.

And the last one. As you can see at the top right of page, there is a new menu item called ‘Blog’. What does it mean?

Yeah, I do blogging now
Haha Not a really big thing. Who doesn’t have blog in this internet age? However this is a good start for me

Ok, last but not least, I hope you all will enjoy it, and if you have a website, and you thought it’s a beautiful website, don’t hesitate to submit it to CSSDance. I will review it first, and if it’s approved, you can put CSSDance badge on your website, to let your visitors know that your website has been recognized as a “true appealing website” by CssDance

Have fun !