cssvault - inspiring creativity

I personally have always found tag clouds to be a mess. In fact, the seemingly random variation in font sizes to denote weight has made me avoid the tag cloud if possible. That is, until I stumbled upon a recent article by Anthony Zinni of Positive Space regarding a new technique which he dubs the “tag grid”.

You can view a live demo by visiting the Positive Space Blog and clicking on the link that says “Tag Grid” on the right menu under Visualize.

Unlike the tag cloud, the tag grid uses color-coded boxes, arranged by weight from highest to lowest. By using some basic concepts used in pattern recognition and applying it to the tag cloud, Anthony has pushed the tag cloud forward into something even more easily recognizable. I am sure this is just one among many other future attempts at pushing the borders of visualization even further. Have you made any such attempts yourself? If so, feel free to point the way!

Share

One of the greatest challenges of a CSS developer would be dealing with floated elements that “spill” its contents outside the parent element. This is known as the float bug. Fortunately there are many techniques to address this issue. One method involves creating an additional blank element, which I find semantically wrong but it does get the problem fixed.

A “semantically correct” fix should only involve elements that already exist. The quirksmode.org technique is probably the best way to achieve this.

The code looks like this:

div.container {
	border: 1px solid #000000;
	overflow: hidden;
	width: 100%;
}

div.left {
	width: 45%;
	float: left;
}

div.right {
	width: 45%;
	float: right;
}

It is a purely CSS solution that does not require any additional tags. All you need to do is add a width and overflow rule to the parent element. The technique works flawlessly on all the major browsers: Internet Explorer 6+, Firefox 2+, Safari, and Opera.

Happy coding!

Share

The latest and greatest version of our favorite browser Mozilla Firefox has now reached its final release state. So hurry over to the official website and grab it now!

Oh and don’t forget to check out this priceless Firefox vs IE comparison chart:

Hilarious! Also note that Safari and Opera were’t even listed. Does this mean that Mozilla does not even consider those two browsers as a threat?

Share

After experiencing some downtime, the site is back in business. We have upgraded the blog site to Wordpress 2.5 and the interface update is looking real slick.

Beyond being a simple facelift, Wordpress 2.5 offers a bunch of new updates in functionality. For example, I’m really enjoying the new image uploader, which shows up as a lightbox type popup dialog as opposed to the inline uploader in the previous versions:

There are still a ton of new options and I haven’t even had a chance to take a look at all of it but right now I just want to express how much I appreciate the work of our friends at Automattic.

Kudos!

Share

In case you haven’t noticed, we have been using this nifty little Wordpress plugin on this blog called iBegin Share. Released by iBegin (who provide US Yellow Pages and also for Canada), this nice little app adds a “Share” icon at the bottom of every post which opens a nice little window with a bunch of sharing tools:

Social Bookmarking
Saves and posts the page on major social bookmarking sites like Facebook, Digg, Del.icio.us, StumbleUpon, MySpace, etc.

Email
E-mails the page to a friend

My Comuter
Downloads the page as a PDF or Microsoft Word document where it can be stored for offline viewing

Printer
Prints the page to your printer

The app is fully AJAX driven, and installation is a snap. The latest version (1.3) even has a statistics page showing that shows user behavior.

iBegin Share comes in two flavors: stand-alone, and a Wordpress plugin. It is 100% open source, and uses the Open Share icon.

These are also the same guys behind iBox.Aún las puedes encontrar en las Slot Machines de los juegos casino gratis en línea.

Share

Jeff Starr of Perishable Press has written an interesting article outlining the patterns and trends of CSS code formatting. In it he gives some examples and shares his own peculiar way of formatting CSS code. In particular, he formats code in an inverted diagonal pattern, starting with the longest line at the top to the shortest one at the bottom, as in the following example:

div#example element {
	margin: 5px 15px 5px 0;
	border: 1px solid #444;
	line-height: 1.5em;
	text-align: center;
	background: #222;
	font-size: 10px;
	display: block;
	padding: 5px;
	color: #888;
	float: left;
	}
div#another div.example element {
	border: 1px solid #444;
	margin: 7px 0 17px 0;
	letter-spacing: 1px;
	font-weight: bold;
	background: #222;
	font-size: 1.1em;
	cursor: pointer;
	display: block;
	padding: 3px;
	width: 308px;
	color: #888;
	clear: left;
	float: left;
	}
div#another div.example element {
	text-indent: -9999px;
	overflow: hidden;
	position: fixed;
	display: block;
	z-index: 9999;
	padding: 0px;
	margin: 0px;
	bottom: 0px;
	right: 0px;
	}

In his latest article, he focuses on CSS indentations and spacing trends. He provides even more examples, some of which are quite interesting - such as the one below, which he calls “Meta-spacing for columnar organization”:

* {
	vertical-align: baseline;
	font-family:    inherit;
	font-style:     inherit;
	font-size:      100%;
	border:         none;
	padding:        0;
	margin:         0;
}

My personal favorite is the single line code blocks method, where each declaration is written on a single line. This method benefits from not having to scroll all the way down thus saving space. Also, this method allows one to easily and quickly sort through and find any delcaration that needs to be worked on.

The only disadvantage to placing everything on one line is that some of then often end up becoming very very long, as in the example below:

#containerHead { padding-top: 57px; position: relative; }
	#containerHead h1 a { display: block; width: 133px; height: 73px; position: absolute; right: 0px; top: 57px; background: url(../images/companyLogo.gif) no-repeat; }
	.homeBanner { height: 134px; width: 730px; margin-top: 193px; position: relative; }
		#homeBanner1 { background: url(../images/homeSplash1.gif) no-repeat; }
		#homeBanner2 { background: url(../images/homeSplash2.gif) no-repeat; }
		#homeBanner3 { background: url(../images/homeSplash3.gif) no-repeat; }
	#homeNext a { width: 730px; height: 40px; background: url(../images/homeNext.gif) no-repeat; display: block; }
	#homeNext a:hover { background: url(../images/homeNext.gif) bottom no-repeat; }

What is your favorite CSS coding convention? Do you use a special formatting method that is uniquely your own? I’d love to hear about them.

Share