Ess - Sibran Lens » 2007

MillionClouds

Posted by Sibran - 18/10/07 at 09:10:00 am

MillionClouds

Good initiative, beautiful flash application and an original scrolling effect!
For every purchase, we go green and donate 2€ to help keep our skies clear.

http://www.millionclouds.com/

October 18, 2007 | In General | No Comments

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.

October 15, 2007 | In CSS | 16 Comments

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/

October 14, 2007 | In CSS | No Comments

The best of September 2007 by Smashing Magazine

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

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/