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

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

The bookmarklet at toolbar is also available for you quickly editing the current website displayed in your browser. This awesome tool is designed for web designers and developers. Use it for developing, testing or checking your projects or just take a look your favorite websites. Besides, it’s completely free to use and no any registration is needed.
http://www.cssfly.net

Share This

Share This

Share This

• Full scalability in all directions;
• Using of one single PNG image for the button;
• Possibility to change background colors behind the image;
• Clean HTML markup;
• Unobtrusive Javascript;
• Pure CSS for easily styling;
• Possibility to style anchors as well as form buttons;
• Full degradability for web browsers without images or Javscript.

Share This

Share This

Share This

Share This