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

As people who slice and dice PSDs and convert them to elegant XHTML and CSS code, often we are expected to tiny bits of SEO as well. I found this guide, posted on Web Designer Wall, to be very helpful and informative, especially since I plan to conquer the world with my SEO prowess one day!

From the article:

компютриWhy Should You Learn About SEO?

• SEO isn’t only for online marketers. As a web designer or frontend developer, most on-site SEO is your responsibility.
• If your site is not search engine friendly, you might be losing a lot of traffic that you’re not even aware of. Remember, besides visitors typing in “www.yourwebsite.com” and backlink referrals; search engines are the only way people can find your site.
• There are many benefits of getting a high ranking site. Let’s use ndesign-studio.com for example. I have, on average, about 14,000 visitors a day. About 40 - 45% of that traffic comes from search engines (about 6000+ referrals a day). Imagine, without search engine referrals, I would be losing thousands of visitors everyday. That means, I’m risking losing potential clients too.
• SEO is also a value-added service. As a web designer/developer you can sell your SEO skills as an extended service.

Share

Antionio Lupetti has come up with a real nice tutorial on creating pagination styles using CSS like the ones being used in Digg and Flickr. Something to keep in mind on your next design project: avoid boring pagination!

Share

Okay so you’re a CSS expert and using sprints to create image mouseover menus are no challenge anymore. Why not take it to the next level and add animation to your menus? This nice article on Nettuts gives a step by step, illustrated premier on how to do just that.

Check out the full article and give it a spin!

Or if you’re simply curious, you can check out the live demo.

Share

When designers with no HTML knowledge come up with unorthodox layouts, the one slicing the design gets burdened with the task of keeping the HTML version faithful to the original design without breaking the layout, often at the cost of one’s sanity. The task is sometimes complicated by other factors such as maintaining ease of updating the content (whether it be via manual entry or CMS), accessibility requirements, usability, JavaScript / AJAX, browser rendering quirks, idiotic clients, hard to please bosses, etc etc.

Many of us has shared this experience in one form or another. The beauty of the experience is that lightbulb moment where you suddenly figure it out and after 4 hours you now have a working, hand-coded, tableless CSS you can be proud of. Turns out it wasn’t so impossible, after all!

There are many ways to fix impossible CSS layouts:

1. Background image trick - background images coupled with positioning tricks can be utilized to give the illusion that an element is where it’s supposed to be.
2. Positioning - relative and absolute positioning when used correctly with the proper nesting can place an element almost anywhere you need it to.
3. Transparent images - transparent GIF’s and PNG’s can be used to simulate layers just like in Photoshop. There is still a lot of stigma against PNG due to the lack of alpha transparency support in IE6, but this is easily fixed using IE PNG Fix, which requires very little effort and almost no modification to the HTML code.
4. Z-index - the CSS z-index is a tiny gem that helps tame multi-layered CSS, ordering them the way it should be.
5. Image editing - when all else fails, there is nothing easier than editing the image to make it CSS friendly. A common issue that benefits from editing are designs with non-repeatable background patterns. Usually, fading the pattern to the background color would solve this issue.

Personally, I have yet to encounter a design that cannot be encoded into HTML. I invite you all to share your experience. Got an impossible CSS design to layout? Let us take a look at it. It might not be as hard as you think.

Share