Update reset.css from Eric Meyer

Posted by Sibran - 16/01/08 at 02:01:17 pm

Eric Meyer

He has made some updates of his reset.css file. The most important change is removing font-family: inherit; from the first block.

“[The inherit] effects, as seen in my development environment, will still serve the purpose of reminding me to build up the styles I actually want, and not use the browsers’ defaults as a crutch. There is the possibility of my forgetting that (for example) IE/Win italicizes em when I don’t want it to, but that’s something I’ll catch during the browser testing phase.”

http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/

Creating sexy stylesheets

Posted by Sibran - 18/12/07 at 04:12:42 pm

Great article about your css file from thinkvitamin.com

Being a CSS expert is more than just memorizing selectors. It’s also working to improve the maintainability and efficiency of your stylesheets, planning for the future and mastering your workflow. In this article Jina Bolton gives 10 CSS tips culled from surveys with 12 top designers.

http://www.thinkvitamin.com/features/design/creating-sexy-stylesheets

Print.css and your website’s logo

Posted by Sibran - 15/10/07 at 03:10:16 pm

Every website needs a print style sheet, especially informative websites. I thought about a little trick, to give you printed page the logo and/or url, or whatever picture you would like to see on the printed paper.

Preparation

Make a image in Photoshop that you want to be printed. You can use your company logo and/or the url.

Integration

1. At the print.css somewhere between the <head>-tag
<link href="/css/print.css" rel="stylesheet" type="text/css" media="print" />

2. Insert this code in your html/php/aspx/… file:
<div id="print-logo"><img src="/img/YOUR-IMAGE.gif" alt="Whatever" /></div>
OR a better solution is <img src="/img/YOUR-IMAGE.gif" alt="Whatever" id="print-logo" /> (thanks Nathan)

You can place this code wherever you want, I prefer after the <body>-tag of before the </body>-tag. This way, your logo will be presented at the top or bottom of your entire content.

3. Insert this code in your general style sheet:
#print-logo {display:none;}

4. Insert this code in your print style sheet:
#print-logo {display:block;}

Result

If someone prints your webpage, your logo and/or url is displayed on the printed page. Here are some examples that I made:

Google
Yourwebsite
Ess
Icons

You can find a lot of free icons on the web, check the post of Smashing Magazine “Freebies Round-Up“

If you define your print style sheet, don’t forget to define your body tag font size and font family. It’s more fun to read Tahoma or Arial, then Times New Roman.

Only print what is necessary. Navigation, footer or header are necessary in your website, but when you print a webpage, you only need the important content parts.

Diagnostic Styling

Posted by Sibran - 14/10/07 at 06:10:07 pm

Diagnostic Styling

Eric Meyer with CSS rules to apply during development which call attention to markup problems

Where does he get the ideas, why don’t I come up with them :’) ??

http://meyerweb.com/eric/thoughts/2007/09/07/diagnostic-styling/

The best of September 2007 by Smashing Magazine

Posted by Sibran - 11/10/07 at 01:10:25 pm

Smashing Magazine

Every month Smashing Magazine take a look around and select some of the most interesting web-development-related web-sites. You’ll find useful references, tutorials, services, tools, techniques and articles Smashing Magazine have found over the last 30 days.

Make sure you check:
- Dynamic CSS With Variables
- CSS List Expander
- rsizr - intelligent image resizing !!!
- CSS Sprite Generator
- New unobtrusive dynamic flickr badge
- Firebug Tutorial - Logging, Profiling and CommandLine Firebug
- Sizcons - Random Jabber
- Logo Trends 2007

http://www.smashingmagazine.com/2007/10/10/best-of-september-2007/

Facebook css group

Posted by Sibran - 02/10/07 at 08:10:42 am

Facebook css group

Everybody knows Facebook, I started a new group CSS. If you use Facebook and you love css, don’t hesitate to become member!

http://www.facebook.com/group.php?gid=6188112651

The best of August 2007 by Smashing Magazine

Posted by Sibran - 18/09/07 at 03:09:46 pm

Smashing Magazine

Every month Smashing Magazine take a look around and select some of the most interesting web-development-related web-sites. You’ll find useful references, tutorials, services, tools, techniques and articles Smashing Magazine have found over the last 30 days.

Make sure you check:
- CSS: The right sprite
- Creating a table with dynamically highlighted columns
- A Stripe of List Style Inspiration
- Fade Out Bottom
- CSS Sculptor
- Photoshop Secret Shortcuts
- DatePicker using Prototype and Scriptaculous
- Logo Trends 2007

Creating bulletproof graphic link buttons with CSS

Posted by Sibran - 24/05/07 at 08:05:27 am

Creating bulletproof graphic link buttons with CSS

Great article of 456bereastreet.com how to create a button. He uses a lot of code, but the result is perfect!

A successfull bulletproof image-based button should:
- Automatically grow horizontally to fit any amount of text
- Grow horizontally and vertically if text size is increased or if the text wraps to multiple lines
- Retain its appearance within reasonable limits
- Be able to have rounded (or other non-square) corners
- Have no unclickable areas
- Be readable when images are disabled

http://www.456bereastreet.com/

Powered by WordPress with GimpStyle Theme design by Horacio Bella.
Entries and comments feeds. Valid XHTML and CSS.