I am a german web developer, web designer, css expert, php/mysql developer & ruby on rails enthusiast. I follow the latest web trends and develop stable web solutions using a combination of PHP5, MySQL, XHTML, CSS, and Javascript. » more about me
Not one week passes by where I have the recurring pleasure of meeting someone who thinks frontend development comes easy and he could teach himself CSS in a day or two. Especially print designers seem to have a pretty rough time understanding why the pixel-perfect design they've created with their DTP tools seems to be taking forever to get right in the web.
If you feel like CSS comes easy to you or you know someone who thinks that way - how about you let him explain to you what these few CSS snippets do?
If you have cool css snippets feel free to post them in the comments ...

My site as a "wordle cloud". Wordle is a toy for generating "word clouds" from text that you provide. The clouds give greater prominence to words that appear more frequently in the source text. You can tweak your clouds with different fonts, layouts, and color schemes. The images you create with Wordle are yours to use however you like. You can print them out, or save them to the Wordle gallery to share with your friends ...
With the line blurring between web developer & designer it is time that designers adapt established techniques from the developer world. A concept well established while developing in other languages is the concept of software deployment.
For CSS developers deployment should become second nature. A simple php snippet compresses your multiple css files into one file with one line of CSS. What is good enough for Microsoft or Google should be good enough for the rest of us.
<?php
header('Content-type: text/css');
ob_start("compress");
function compress($buffer) {
/* remove comments */
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
/* remove tabs, spaces, newlines, etc ...
Two of the things I really love about the web are data visualisations and mixing css with php. Unfortunately most of them seem to be Flash or JavaScript based - both of which I hate wholeheartedly and try to avoid as much as possible. For years I've been using little php snippets to spice up my css code. I even went so far as to write a piece of php code that scrapes all the html tags, id's and classes from an existing project or website and builds a css skeleton file ...
For everyone following my "CSS Anatomy" series where I examine how the big guns use CSS you might like this article "CSS Implementations of the Rich and Famous" by Jeff Star which is basically in the same style, only much more detailed and elaborate comparing the styles of Google, Yahoo!, MSN/Live, W3C, Twitter, Wordpress, CSS Beauty, CSS Ticks and the almighty CSS Zen Garden.
While I'm at it be sure to also check out the mother of all ...
PHP's HEREDOC syntax is - albeit only used by very few developers a very handy way to create strings in PHP. Even constants can (with a little trick) be used within HEREDOC syntax.
<?php
error_reporting(E_ALL);
/* define your constants as variables */
$_CONSTANTS['ORIGIN'] = 'Haiti';
$_CONSTANTS['MEANING'] = 'spirit or divine creature';
/* turn them into real constants */
foreach($_CONSTANTS as $key => $val)
define($key, $val);
/* sample class */
class voodoo {
public $voo;
public $doo;
function __construct($voo) {
$this->voo = $voo;
$this->doo = array('doo','dooo','doooo');
}
}
$voodoo = new voodoo('Voo');
$name = 'Bondyè';
echo <<<_HTML
<p>\x41 religion originating from {$_CONSTANTS['ORIGIN']}, Voodoo is a syncretistic religion ...What kind of web developer would I be if I would not test the new überhyped Google browser. You can read a lot of detailed reviews all around the web, here's what is relevant for me.
Excerpt from Google EULA: "By submitting, posting or displaying the content you give Google a perpetual, irrevocable, worldwide, royalty-free, and non-exclusive license to reproduce, adapt, modify, translate, publish, publicly perform, publicly display and distribute any content which you submit, post or display on or through, the services ...
In part 3 of the CSS anatomy series welcome the mother of web standards websites w3.org/Style/CSS, the World wide Web Consortiums's website on Cascading Stylesheets. Like you probably can guess, it's all there from browser hacks for IE3! to advanced CSS3 magic.
Someone knows their browser quircks
/* All other browsers */
/* Sent to all browsers except IE3 */
body {
font-family: Verdana, "Myriad Web", Syntax, sans-serif;
margin-top: 3em;
margin-bottom: 3em;
margin-left: 12%;
margin-right: 8%;
padding: 0;
}
:link, :visited {
/* text-decoration: none; */
/* font-weight: bold; */
}
h1:first-line {
border-bottom: none; /* bug in Konqueror 3 ...Whatever it is that led to someone using IE6, an almost 8 year old web browser in July 2008, pirated Windows with updates off, don't know how to upgrade, don't care about the hundreds of security issues, don't know what browser you have and don't care, well so do I from now on.
One small step for man ... (chachabyi)
In the light of recent events @ CSS Anatomy - a stylesheet deconstructed - nytimes.comWelcome to the 2nd article from the CSS Anatomy series - What can you learn in 10 minutes by analyzing the way in which big websites use CSS.. The first one shed some light on Apple, this one will be about the New York Times one of the best newspaper sites in the world.
The design director for NYTimes.com, Mr. Khoi Vinh says in this interview : "It’s our preference to use a text editor, like HomeSite, TextPad or TextMate, to “hand code” everything, rather than to use a wysiwyg (what you see is what you get) HTML and CSS authoring program, like Dreamweaver ...