Its a whole bunch of cool css stuff with links to each of them by smashing magazine, check it out here:

http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/

A couple of the links are broken, CSS-Submit Buttons and Drop Cap – Capital Letters with CSS – if you have these on your hard disk, give us a shout and we can repost it here for everyone to see (we’re never going to shut this site down).

One of my favourites is this one, just a simple nice alert message, looks nice and clean – great stuff:

http://www.bioneural.net/2006/04/01/create-a-valid-css-alert-message/

And the css tabs are nifty as well:

http://exploding-boy.com/images/cssmenus/menus.html

Ok, time for some tea, i’ll be posting back again soon.

Share This

Pages don’t render 100% exactly the same on these browsers compared to Firefox, Opera and Internet Explorer – treat it as a completly new browser with its own quirks. Mainly pages render fine but tend to fail when positioning textual elements, as well as differences in the way padding works. Its weird, but you will see tiny errors which will bug the hell out of you in Chrome / Safari but don’t know how to fix.

Enter the Safari hack – shake this baby into line for we’ve got a hack coming and its not easy to remember, so best copy and paste this in your notebook for future reference (or bookmark this page).

Say you’ve got a class yourclass and you want to alter what happens in safari, its not playing ball, this is what you do:

/*\*/
html>body*.yourclass {padding:6px;font-size:13px;}
/**/

You can add additional elements within the comments to save your sanity:

/*\*/
html>body*.yourclass {padding:6px;font-size:13px;}
html>body*.yourborderclass {border-width:10px;}
html>body*.yourotherclass {padding:10px;}
/**/

Thats all for now, i hope it saves your sanity like it did mine, its not easy work hacking css, a designers life is not the easiest but this should help!

Share This

Check it out – NicEdit.

Share This

There is another site with exactly the same idea, called savethedevelopers.org that has a more subtle warning which scrolls down at the top-right of the page:

Is it our job to hastle users to upgrade to IE6, you might be asking?  Well, yes and no.

It really is the vendor’s job of notifying the user, but since some folk just don’t bother updating their system and probably have a load of trojans and spyware on their machine, there can’t be a lot done about these folk!  Until they loose their system completely and have to re-install there isn’t a lot that can be done.

But at least warning people from your own websites could be something to save a few from this lackluster browser – i prefer the first option of getting them to choose a new browser but on some sites where discretion is advised the second option is a better one.

Ok, i’m away to insert this into the site

Share This

Taking a fresh look at things once in a while is a great thing, breaking away from the norms and “Web 2.0” as its coined is one of those evolutions in consciousness that was just waiting to happen (to this day we’re still waiting for Economy 2.0, since you can’t ignore to see the downturn kicking in).

So a fresh new look was required.. and fonts for your logo are one part of the picture but one that cannot be overlooked. 

I really advise at this point not to just go and pick a font that someone big used just because you like it.

Finding the “right” font for your logo is a pretty difficult thing to do, and its got to mean something emotionally and reflect what your service is all about.  I’ve spent countless hours looking for the right font for some of my websites, then sometimes, you just stumble upon it by accident.

The way that i approach it is to go and look for some new fonts that you like; and build up your collection so that you’ve got a canvas to start from. 

Think about this:  The Wordpress logo looks wordy! Google looks googley!  The Financial Times is very rigid and upstanding, my dear boy!  Digg looks techy.. TechCrunch has a techy-come-business look.  43Things has a notebook-kind of travel look to it.  Bloglines, because of its rounded corners, think bloggy, but a bit of newspaper! Rollyo, rolly and rounded!

So don’t look at these lists and just use one of those fonts, go pick your own! If you’re looking for something a bit more corporate you might want to look here.

It will be a lot more fun and be daring.. 

I did with my Boogla – kinda booglaish?

Share This

Theres a few options these days, such as taking a template and customizing it, or finding a layout that you like online and adapting it. 

But what if you want to start from scratch?  I usually go to a website that i’ve done in the past and take the html headers from it, and copy it into a new html document, and start off with a blank css file.

But it seems that there are a few websites on the net offering default styles, somewhere to start off without cutting pasting and amending existing documents (stick that in your textpad clip library!)

Shapeshed go one step further than everyone else with a version, date, author, email, website and version history in their default css file!

Check it out .. Default Styles for CSS

I would say now, add a good CSS Reset to this and you’re laughing..

Share This

This is one of my favourites in the picture called mediagroove by mayumi takami, its got a nice fresh web 2.0 look to it.

All of the designs were contributed by members across the internet, so if you have any to share be sure to share it with the guys at icant.

Share This

Share This

For the purists, look away now – for here is a dirty, low down css hack!

Basically, comments in CSS are handled differently, we all know that – i’ve found yet another (easier) way to hack IE that no-one else has noticed (?)

Here’s an example, this is a table that i’m styling, but the header doesn’t want to play ball in IE, so look at the line in the middle of the code:


.list th[scope=col] {
background: url(images/tablerowcol.png) repeat-x #F8F8F8;
color:#FFF;
//line-height:19px;
border-bottom: 1px solid #faa;
padding-bottom:0px;
}


Notice the // commented out line? It gets ignored on all browsers apart from every version of Internet Explorer. It does cause a warning to be shown in Mozilla Firefox if you have the web developer’s toolbar installed, but its non-intrusive and nothing pops up to say its an error.

Of course, this isn’t the purest method of getting cross-browser css compatibility, the ubiquitous CSS Reset is another way to get easier cross-browser satisfaction, with Yahoo and Google providing their own versions of the original hack by Eric Meyer.

Share This

Share This

Share This

Share This

Share This

Share This

Share This