CSS Tutorials – CSSHelper.net

The WaterColored Portfolio Template is a Fixed Width layout with 2 Columns and uses an XHTML 1.0 Strict doctype.

It is a Mixed design developed by "PV.M Garage".

Demo & Download

Free Css Templates, Templates

Bored with the same old uninspiring, list-based sitemaps? If you’re like me, most likely you will find that creating better looking sitemaps can be quite time consuming. Thus, we end up having to settle for text-based unordered lists that look nothing like a map.

Well well well, worry not my friends, for now you can have a very beautiful and visual site map with nothing more than your standard unordered list and some CSS magic. Thanks to the efforts of Matt Everson of Astuteo, LLC, who released for public consumption what they call SlickMap CSS.

SlickMap CSS is “a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences.”

The first thing that really impressed me with SlickMap was the way data is visualized. The arrangment, grouping, and color coding of data makes it very easy to identify and find relevant data. The “Home link” is color blue and found at the top left most corner, immediately followed by the “Main links”, also colored blue. Level 2 and level 3 links can be found below them, each level having its own color, with a connector leading to each link. “Utility links” are grouped at the top right corner, separate from the main map.

What’s even more amazing about SlickMap is that everything is implemented in pure CSS. There is not a single line of JavaScript to be found anywhere. It’s also very easy to implement. Simply create an HTML file with an unordered set of links and import the slickmap.css file. Couple this up with an online site map tool like WriteMaps and you should be all set to rock and roll.

It supports most standards-compliant browsers, which means Safari, Firefox, and Opera. Sorry, IE but no love for you.

In the README file:

SlickMap CSS was created for web designers, and such was tested and developed for use with Safari, Firefox, Opera, and other standards-compliant browsers. Because of that, current versions of Internet Explorer (and probably IE versions long into the future) might look like sh*t.

The only downside I could think of right now is actually a strength in itself. While those large boxes would work for small to medium websites with a fairly standard site map layout like the one Astuteo has, it might do very well for larger websites with hundreds of links on their site maps. But then again there are methods to optimize and trim down those gigantic things.

It is a very well thought out and solid demonstration of the power of CSS, and for this reason I raise my glass and give my kudos to Matt Everson and the folks at Astuteo. Well done guys!

Share

Read More

CSS Blog

The Better Web Readability Project aims to promote screen-friendly and more readable fonts. The result is a CSS library that redefines, among others, the standard font size as well as leading (the amount of space between text). Other features of this library are:

• 16px default main text size
• Partial 26px baseline grid
• Serif for Heading, sans-serif for the paragraphs
• Lower color text contrast
• Intensified paragraph division (new line + indent)
• Bigger leading (line-height) 1.625

The original idea came from Vladimir Carrer, who also came up with the library. In his post entitled How we read on web and how can we improve that he reveals that most of us who use computers to read news, blogs, and various sites end up scanning rather than reading. He then compares reading a book to reading on the monitor, and provides three reasons why it is harder to read on a computer screen:

1. We maintain the book standards (12pt) for font size on the web (12px). But the distance from the monitor is triple. Just put your newspaper to your monitor and try to read. Hell! Is hard!
2. Additionally the paper reflects the light and monitor emits the light. If you have old “cathode” monitor it’s like looking directly in a light bulb.
3. You also have distraction noise: strong colors, links, flash animation, banners , not defined site architecture, click here, digg me, follow me on twitter, by my products… it’s fucking jungle out there.

He then comes up with a set of standards and rules that would allow for better and easier on-screen reading, and packages it as a CSS library. The resulting text is beautiful and pleasing to the eyes. One such example can be seen in the screen shot below. You should notice how your eyes would easily glide through the text:

You can head over to the project homepage, or click on the links below to view the library in action:

• Typography
• Absinthes to Go Mad Over – NY Times
• An American Prayer – The Doors
• Critique of Pure Reason – Immanuel Kant
• Excerpt from No Way To Paradise – Charles Bukowski
• How To Sniff Out A Liar – Forbes
• Hubble – Ars Technica
• One Day in Spring – Rabindranath Tagore
• Shaman’s Blues – The Doors
• Tarantino – NY Times
• The Alchemist – Paulo Coelho
• The Last Question – Isaac Asimov
• The Raven – Edgar Allan Poe
• Viva Las Vegas – Elvis Presley

You can also head over and download the full library here.

Share

Read More

CSS Blog

As self-proclaimed CSS experts, we must live, eat and breathe CSS – 25 hours a day. What better way to do this than by using a CSS + HTML calendar! Lovingly hand-crafted(tm) by Vladimir Carrer, the Grid Calendar is inspired by the Best of Calendar Design, and can be downloaded for free (can you believe it?)

This reminds me a lot of the designs posted on the 2007 elzr Infodesign challenge, as well as Adam Sporka’s Thumb Calendar which I am personally very fond of.

Perhaps there’s a designer out there with uber talent a lot of spare time who could take the Grid Calendar to the next level. It certainly could use a little more color, and those white spaces between the grids are making the nerve endings of my eyes do the polka dance. While we’re at it, let’s throw in a bunch of AJAX to turn our simple calendar into a leet app. Or maybe not.

Read the full article.

Share

Read More

CSS Blog

The life of a CSS developer isn’t all about attending glamorous champagne parties, jet-setting around the world and hanging out with supermodels. In fact, when your CSS doesn’t behave the way it should, the job can be downright tedious. I’ve spent untold hours of my life debugging my code — and I’m guessing I’m not alone here.

But as silly as it may seem, some of the biggest CSS blunders stem from the simplest of errors. Knowing what some of those errors are and remembering to look for them can save you hours of wasted labor. Here are fifteen ways I’ve found to break my CSS for sure — and fifteen things I always look for whenever I have a problem in my code.

Missing a Semicolon

CSS rules are comprised of property-value pairs (declarations) followed by a semicolon. Accordng to the CSS specification, the last declaration doesn’t need a semicolon — because the closing brace effectively ends the declaration just as well. That means something like this is perfectly acceptable:

body {
	background-color: #444;
	color: #eee }

The only problem is, as soon as you decide to add another declaration to your previous rule, you’ve now made it all too easy to forget to add the semicolon to your once-last rule:

body {
	background-color: #444;
	color: #eee
font-family: Helvetica, Arial, sans-serif }

The result? Your font-family rule never gets applied, because the parser reads “font-family” as part of the color value. Which is why I make a habit of adding the final semicolon in a rule, no matter what.

Missing a Colon

I’ve seen this particular problem crop up frequently while teaching classes on CSS. People get excited when CSS starts to make sense, and their typing speed increases. The downside: this makes errors of omission much more likely. And a missing colon is particularly tough to see, since it sits right in the middle of a declaration. Consider the following two lines:

body { font-family Helvetica, Arial, sans-serif; }
body { font-family: Helvetica, Arial, sans-serif; }

It’s easy to see how the colon could get overlooked in the jumble of braces, hyphens, semicolons and cryptic words. As a rule of thumb, if you only have one declaration not behaving itself, this is a good place to start looking.

Missing a Brace

{Braces} around a CSS rule are like the circle of life: regular, natural, and expected. And if you ever miss a brace (generally a closing brace for whatever reason) — just like if you have a zombified corpse that refuses to die — you suddenly have all sorts of mayhem on your hands.

When an unsuspecting browser comes across a pair of rules like this:

body {
	font-family: Helvetica, Arial, sans-serif;
#wrap {
	width: 960px; }

The browser is going to choke. Two opening braces before a closing brace is right out: everything from your #wrap rule (in this example) on would be ignored.

However, this does make debugging easier. Do you have a whole chunk of CSS being ignored? Which is the first rule that is being neglected? There’s a good chance you have an uneven number of braces hanging out in the vicinity.

Misspelled Properties

I consider the following few errors the bane of dyslexic developers everywhere. Generally speaking, I’m a good speller. But when I’m “in the zone” and typing as fast as my fingers can carry me, I tend to transpose a few letters here and there. In writing, this isn’t such a big deal: people can generally figure out what I mean. Computers, sadly, are less discerning.

div { border-bototm: 5px; }

Now, I have no idea what a “bototm” is, but I do know I write the word at least one time in five when I’m trying to refer to the lower edge of an element. I’m lucky in that I have a decent eye for editing and often catch these mistakes as I make them. If you’re not so fortunate, using a program with code coloring like Notepad++ or Adobe Dreamweaver (my personal favorite) can make the job a lot easier: if a property isn’t colored like the other properties, than it’s probably not much of a property at all.

Misspelled Values

Misspellings aren’t limited to just properties. And sometimes a misspelled value can be even more difficult to notice:

#wrap { padding: 10px 20pz 25px 20px; }

Unfortunately for the rule above, I’m fairly sure only Snoop Dogg and I have ever tried to measure elements in pizzles. Instead of the generous padding you’d expect this rule to generate, this one misspelled unit renders the entire declaration invalid.

Misspelled Classes and IDs

No matter how often I create a div with an ID of “navigation,” I still find myself writing rules that look more like this:

#navigaiton { float: left; } 

This can be a frustrating error to track down, because color-coded editors won’t help you out here: you could just as easily purposefully name an element “navigaiton” if you really wanted. But I’d recommend against it.

Improperly Ordered Values

Some CSS properties have a built-in shorthand, which is a great way to save yourself a few lines of code. Unfortunately, most of the shorthand properties are very picky about the order of the property’s values. For example:

div { font: 2em Helvetica, Arial, sans-serif; }
a { font: "Times New Roman", serif 1.5em; }

The first rule will result in all divs gaining a specific typeface and size. The second rule will result in a debugging session — while it’s okay to leave some values out of the font declaration, changing up the order of the values will result in problems.

Measurement Values Without Units

CSS Newbie reader Justin reminded me of this problem the last time I wrote about CSS faux pas. With only a few limited exceptions, all measurement values in CSS need a unit of measurement associated with it. Take the following rule for example:

#wrap { margin: 3; }

Three what? Ems? Inches? Pizzles? The flexibility of CSS that allows us to pick from several units of measurement also means specifying a unit is fairly important.

Bonus — Two unit-agnostic measurements:

1. Values of zero don’t need a unit of measurement. Turns out, zero pixels and zero miles are exactly the same length.
2. Line heights needn’t have a specific unit. A line height of “1.5″, for example, will simply assume you meant “1.5 times my font size.” For more on this phenomenon, visit Eric Meyer’s article on Unitless Line Heights.

Competing Identical Rules

Once a stylesheet gets to be a certain length, it can be difficult to remember which rules you’ve already written unless your CSS is very well organized. And two identical rules at different spots in your CSS file can wreak havoc on your design and sanity alike.

ul li { margin: 0 2em; }
... 300 lines later ...
ul li { margin: 0; padding: 10px; }

In this scenario, the latter rule would win out over the former, thus removing the margin and applying padding instead. But if you’ve forgotten about this duplicity, you might go back into your CSS later and try editing the first rule only, and remain perplexed as to why, no matter how you tweak your margin, you can’t seem to make any difference.

Unintentionally Competing Rules

A similar problem could force your CSS to compete with itself in ways you didn’t expect. For example, if you had the following code in your XHTML:

<div id="navigation" class="nav">...</div>

You could refer to this element by either its class or its ID. The problem arises when you do both, and forget that you’ve done so:

.nav { width: 50%; }
... later in the code ...
#navigation { width: 500px; }

This code would result in a fixed-width navigation bar, even though the first rule would suggest a more flexible width. Again, having a well organized stylesheet is the easiest way to avoid this problem.

Calling a Class an ID (or vice-versa)

I fall into this particular trap all the time. I’ll write a rule like this:

.navigation {
	float: left;
	width: 100%;
	height: 4em; }

And nothing will happen! It often takes me a minute or two to realize that the real problem is that I’d given my navigation bar an ID, not a class. My best advice here is to pick a naming system that works well for you and be consistent. If you always call your top navigation bar “#topnav”, for example, you’re far less likely to misremember your element names.

Using a Nonexistent Property

Not all CSS properties are named the most intuitively. For example, this might look like a perfectly acceptable rule to someone new to CSS:

body { text-size: 3em; }

The problem is, while there are certainly several text-riffic properties, text-size isn’t one of them. Instead, we use font-size. Which means that the rule above wouldn’t do much of anything. Intelligent code-coloring editors like Dreamweaver usually make this sort of debugging much easier: if it’s not a real CSS property, it won’t be the same color as the surrounding properties. That’s usually my first clue I’ve done something wrong.

Using a Nonexistent Value

This is a sister stumbling block to the one above. Some values just seem to make sense, but will fail you nonetheless:

td { vertical-align: center; }

You would assume that this rule would vertically center your table text, right? Unfortunately, while “center” is indeed an acceptable value for text-align, vertical-align uses the perhaps less intuitive “middle” instead. And you’d have to ask a better educated rhetorician than me to figure out the difference between middle and center in this context, because I’m at a loss.

Improperly Matching Properties and Values

Certain CSS declarations can look correct even to the trained eye, unless that eye is paying particularly close attention. For example:

a { text-transform: italic; }

While this might look like a perfectly reasonable rule, you won’t end up with italicized text. That’s because “italic” belongs to the font-style property, not the text-transform property. But even most advanced editors won’t catch that bug, as you’ve used a perfectly reasonable property and value — you’ve just used them in an inappropriate combination.

Not Closing Comments

The gentle persons at BlogThemeMachine tipped me off to this common CSS problem. Can you spot the major difference between these two sets of rules?

/* Navigation goes here. */
#nav {
	float: left;
	width: 100%;
	height: 3em; }

/* Navigation goes here. /*
#nav {
	float: left;
	width: 100%;
	height: 3em; }

The only difference is that the second rule has an improperly closed comment tag: /* versus */. That seemingly insignificant difference can result in entire swaths of your CSS suddenly not working. In fact, this tiny blunder will negate all your CSS from the start of your comment until you successfully close a second comment. Which if you’re using comments to organize your CSS means an entire section of your site will lose its styling.

These fifteen tiny blunders are sure to give you hours upon hours of CSS frustration… unless you know to watch for them. What are some other self-introduced bugs you often find in your code? I’d love to hear about them in the comments!

Read More

CSS Blog

Today’s article is probably not the most practical tutorial I’ve ever written, but it was definitely one of the most fun to create. It also shows that, while CSS is often treated as a straightforward web development workhorse (and it’s a great workhorse, at that), it can also have a lighthearted, eccentric side as well. Today’s tutorial is about how to use CSS to create art.

Now, as I’ve mentioned numerous times, I am not an artist. If true CSS artists were likened to Salvador Dali or someone similar, I’d be more akin to the guy watching Bob Ross on public television and following along at home, creating wobbly little smudges and pretending they’re happy little trees. But! What my example above (and you can skip ahead and see the final version) shows is that it doesn’t take very many CSS rules to create some pretty cool CSS art.

And the best part about tackling CSS art is you’re likely to learn a lot about CSS along the way. Sure, this art form is probably only a step or two above the ASCII art generated in the nineties – but playing around with ASCII art taught me a decent bit about letter forms, line lengths and the rest. Likewise, practicing CSS art will teach you an awful lot about sizing, positioning and the use of color to create an effect.

To warn: my example flower makes extensive use of the border-radius property (which I’ve covered more in-depth here), which doesn’t work in Internet Explorer. The net result is that the IE version of my flower looks a bit Atari-esque… but the rest of the code still works fine.

So let’s get to the code!

The XHTML

I’ve attempted to keep my code as simple as possible, while still keeping each of my flower’s segments separated for easy adjustment. Here’s what my code looks like:

<div id="background">
	<div id="flower">
		<div id="topleft" class="petal"></div>
		<div id="topright" class="petal"></div>
		<div id="center"></div>
		<div id="bottomleft" class="petal"></div>
		<div id="bottomright" class="petal"></div>
		<div id="leftleaf" class="leaf"></div>
		<div id="stem"></div>
		<div id="rightleaf" class="leaf"></div>
	</div>
</div>

The “background” div creates the blue sky and green grass, while the “flower” div contains the rest of my work. Each petal and leaf gets its own ID, while each group shares a class to reduce the number of rules I have to write. The stem and center circle are unique, and thus don’t have a class assigned.

I’ve written my code in the same order that it is to appear on the screen (assuming I move top to bottom, left to right). However, if you were willing to make more extensive use of positioning than I have, you could conceivably place the individual divs in any order you so chose.

The CSS

And now for the fun part! I’ll break my CSS into several parts so you can see how it all comes together. First, we’ll set up the background and the main flower div:

#background {
	position: relative;
	background-color: #9cf;
	width: 600px;
	height: 476px;
	border-bottom: 10px solid #090;
	margin: 0 auto; }
#flower {
	position: absolute;
	top: 20px;
	left: 172px;
	width: 256px; }

The background has been relatively positioned so that I can absolutely position my flower inside it, using the relative-absolute positioning trick. I’ve also given it a width and height, to provide my image’s frame. Then I’ve used a background color to simulate the blue sky and a border to provide the ground. My flower is absolutely positioned (which also means it becomes the containing div for any positioned divs nested inside), and is placed on top of the background.

Then we have the flower petals:

.petal {
	background-color: #f33;
	float: left;
	margin: 1px 1px 0 0;
	width: 125px;
	height: 125px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px; }
#topleft {
	-moz-border-radius-bottomright: 0;
	-webkit-border-bottom-right-radius: 0;
	border-bottom: 2px solid #c33;
	border-right: 2px solid #c33; }
#topright {
	-moz-border-radius-bottomleft: 0;
	-webkit-border-bottom-left-radius: 0;
	border-bottom: 2px solid #c33;
	border-left: 2px solid #c33;  }
#bottomleft {
	-moz-border-radius-topright: 0;
	-webkit-border-top-right-radius: 0;
	border-top: 2px solid #c33;
	border-right: 2px solid #c33; }
#bottomright {
	-moz-border-radius-topleft: 0;
	-webkit-border-top-left-radius: 0;
	border-top: 2px solid #c33;
	border-left: 2px solid #c33; }

This is the largest chunk of CSS (because each petal is slightly different), but it’s fairly repetitive in nature (because each petal is fundamentally the same). The “petal” class sets our basic rules: our petals are dark red, floated left, have a tiny bit of space on their top and left sides, are 125 pixels wide and tall, and have rounded corners.

The following four sets of rules simply specialize each of the petals to make them unique. I’m doing two things. First, I’m removing the curved border on the innermost corner; technically the center circle covers almost the entire inner corner, but it looks cleaner without the curve, and it also allows me to resize the center area without worrying about whether the curved border will show through. Then I’m adding a 2-pixel wide darker red border to the inner two sides of the flower petals, which adds a sense of depth and a bit of visual interest.

Next we have the center circle and the stem:

#center {
		position: absolute;
		left: 112px;
		top: 112px;
		background-color: #ff3;
		width: 30px;
		height: 30px;
		-moz-border-radius: 15px;
		-webkit-border-radius: 15px; }
	#stem {
		float: left;
		width: 12px;
		height: 200px;
		margin: 0 1px;
		background-color: #093; }

Although the center area looks like a circle, like all XHTML elements, it is technically a rectangle. This particular rectangle is a square, 30 pixels wide and tall. And then all I’ve done is given each side a 15 pixel border radius, resulting in a perfect circle. Once the circle was made, I used absolute positioning to center the circle over the intersection of the four flower petals.

The stem was the most straightforward of my elements. It’s a true unrounded rectangle, given a green background color, a width, height, and margin, then floated left so I could place my leaves directly against it without having to resort to absolute positioning.

And speaking of the leaves, here’s how they were created:

.leaf {
	float: left;
	margin-top: 80px;
	background-color: #093;
	width: 60px;
	height: 30px; }
#leftleaf {
	clear: left;
	margin-left: 10px;
	-moz-border-radius-bottomleft: 30px;
	-webkit-border-bottom-left-radius: 30px;
	-moz-border-radius-topright: 30px;
	-webkit-border-top-right-radius: 30px; }
#rightleaf {
	-moz-border-radius-bottomright: 30px;
	-webkit-border-bottom-right-radius: 30px;
	-moz-border-radius-topleft: 30px;
	-webkit-border-top-left-radius: 30px; }

I was particularly proud of how the leaves turned out, even though they’re fairly simple in design. The leaf class sets some defaults: they’re floated left, given a top margin to push them down the stem, the background color matches the stem color, and the width and height give them a long, slender (if blocky) appearance.

The individual leaf IDs are what make them look so nice. Each leaf has two rounded corners on opposite sides. The rounded corners continue for exactly half the width of the box. The result is a very visually appealing curve. The left leaf also received two additional treatments: it gets a clear to ensure it doesn’t show up to the right of the petals, and has a left margin to push the stem exactly where I wanted it.

And that’s all there is to this flower! Even though it may seem complex, I’ve really only used a dozen or so CSS properties in a variety of different ways. As I said, this is a great exercise to tackle in order to gain a greater understanding of how positioning elements works (and it’s a lot of fun for the border-radius property as well).

Additional Challenges

So that’s what I was able to accomplish in less than 100 lines of code. So what can you do? I encourage you to show me up and share links to your masterpieces in the comments below. Here are some suggestions for challenges:

• Recreate my flower using proportional units instead of pixels. That would allow you to resize the flower and still keep it looking pretty!
• With a bit of absolute positioning and more rounded corners, try adding clouds to the otherwise bland background.
• My flower’s leaves remind me of cat eyes. Try creating a cat or similar beast using pure CSS.

And no matter what: have fun!

Read More

CSS Blog

The longer a site has been around, the more content it tends to accumulate. As website operators, we walk a fine line: too much content on every page and your site will look cluttered. Too little, and users won’t be able to find all your website has to offer. A tabbed box like the one pictured above is a nice bridge between the two extremes. It allows you to show off a large amount of content without cluttering up a lot of space. And this tabbed box has extra niceties that are sure to help your content get noticed.

What it Does

At the end of this two-article series, you’ll be able to build a tabbed content box of your own that:

• Is easily customized to fit the size and color scheme of your website.
• Is either fixed or variable height.
• Can automatically rotate through the tabs to draw interest.
• Pauses its rotation when the user interacts with it.

This article will show you how to take the tabbed box from Photoshop to XHTML and CSS, and how to apply the basic jQuery functionality to make the tabs operate. The next article will show you some advanced jQuery techniques to make your tabbed box even more dynamic and eye-catching.

The Photoshop Mockup

Like most of my projects, this one started life as a drawing roughly sketched out on a piece of paper. Despite all the cool tools we web developers have at our disposal, paper and pencil are still by far the fastest way to rapidly prototype a new idea. Here’s a crappy iPhone photo of the drawing:

This is what I mean when I say I’m not a designer, people.

Once you have a good idea as to what you’re looking to do with your tabbed box, it’s time to move into Photoshop (or a similar editing tool). If you’re looking for an extremely barebones tabbed interface you can probably skip this step entirely, but I wanted my tabs to have a little pizzazz. Here’s a look at my Photoshop document:

It’s nothing fancy: just two layers with gradients, a layer creating my borders, and my text. Of course, your layout may be more complex than mine.

When I’m working in Photoshop, I like to stop and think about how I’m going to actually develop what I’m building (and I’d advocate you do the same!). In this case, I knew that I wanted gradients on both my unselected tabs as well as the content box and that my unselected tabs should appear faded. Once I had a pretty good mockup in place, I could start to visualize how my XHTML and CSS would work together to produce the result I was looking for.

The XHTML

Here’s the basic XHTML I decided on for my tabbed box:

<div class="tabbed-box">
	<ul class="tabs">
		<li><a href="#">Tab #1</a></li>
		<li><a href="#">Tab #2</a></li>
		<li><a href="#">Tab #3</a></li>
	</ul>
	<div class="tabbed-content">
		<p>Here's my content for tab 1</p>
	</div>
	<div class="tabbed-content">
		<p>Here's my content for tab 2</p>
	</div>
	<div class="tabbed-content">
		<p>Here's my content for tab 3</p>
	</div>
</div>

I wanted to keep my XHTML as simple as possible, so that if I ever wanted to update the content my tabbed box, I wouldn’t have to dig through a lot of extra code to do so. The box has three basic components: a wrapper div (tabbed-box) that holds my entire box together, an unordered list with links that will function as my tabs, and a series of divs (tabbed-content) to function as the containers for my tabbed content.

I decided early on to stay away from extra IDs on all my elements as much as possible, to keep the updating process as simple as possible. Of course, that meant my jQuery would have to work smarter to figure out how the box works… but we’ll get to that later.

The CSS

Developing the CSS for this box does take a little math and a good understanding of the box model, but it’s not overly complex. First we’ll style our container box:

.tabbed-box {
	width: 302px;
	background: #fff url(tabbed-body-bg.jpg) repeat-x bottom;
	border: 1px solid #ddd; }

The width here is the most difficult number to determine. To come up with the number, I need to know two things: how much space I have to work with, and the number of tabs I plan to have. (I could probably calculate all this dynamically in jQuery, but I prefer to use CSS to accomplish as much as possible before turning to scripting.)

The space allotted is determined by the size of the tabbed box’s containing element: I built this box with CSS Newbie’s sidebar in mind, which gave me just over 300px of breathing room. Next up, I need to consider the number of tabs I’ll have. My box will have three tabs. If each of those tabs are 100px wide, they then use 3 * 100 (300) pixels of space. But don’t forget: according to our design, two of those tabs will need a border on one side to create the tabbed effect. This results in another two pixels added to our width, for a total of 100 * 3 + 2 (302) pixels. But remember, with the borders I added to my tabbed-box class, my final overall width is 100 * 3 + 2 + 2 (304) pixels.

Next up, we’ll style our tabs:

.tabbed-box .tabs li {
	list-style: none;
	float: left; }
.tabbed-box .tabs li a {
	display: block;
	width: 100px;
	padding: 5px 0;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	color: #888;
	background: #fff url(tabbed-tab-bg.jpg) repeat-x bottom;
	border-left: 1px solid #ddd;
	border-bottom: 1px solid #ddd;}
.tabbed-box .tabs li:first-child a {
	border-left: none; }

First I’m removing the list style and floating my tabs to the left to get them lined up horizontally. Next I’m making them block-level, so the entire tab becomes clickable. Then I’m setting them to the appropriate width (100px in this case), giving them some padding, styling the text, applying my gradient background, and applying my borders to the left and bottom sides.

Next I have a rather specific rule: I’m removing the left border on the first-child element: this means that my very first tab won’t have a border on its left side, since the containing box has a border there and we don’t want to double up. Of course, first-child isn’t supported by Internet Explorer 6… but don’t worry, we’ll account for that in our jQuery.

Then all we have left to get our tabs in working order is to set how they behave in three states: hover, focus, and “active”:

.tabbed-box .tabs li a:hover {
	color: #333; }
.tabbed-box .tabs li a:focus {
	outline: none; }
.tabbed-box .tabs li a.active {
	background: #fff;
	color: #333;
	border-bottom: 1px solid #fff; }

I’m giving my tabs a slightly darker text color in the hover state, to help the user see when they’re hovering. The focus state is there simply to remove the resulting outline in Firefox when the user clicks a tab: if you’re one of those who insist on having a focus state, feel free to leave this rule out. And finally, we have an active class. This class will be applied by our jQuery to the tab that is currently open. Here we’re removing the bottom border and changing the background color to give it the appearance of an open tab.

And last but not least, we need to apply some styles to our tabbed-content divs:

.tabbed-content {
	padding: 3em 1em 1em 1em;
	display: none; }

The padding simply pushes the content away from the edges of our box. You can set this to whatever you wish. And our display rule hides all our content, until it’s called upon by our jQuery.

The jQuery

Since we’re using the jQuery library to do most of our heavy lifting here, you’ll need to include the jQuery library somewhere above the following code.

Because I decided to write my XHTML without a lot of extra IDs and classes, my jQuery is going to have to be a lot smarter when it comes to figuring out which tabs display which content. My rationale is pretty straightforward: the first anchor in my unordered list should open the first tabbed-content div, the second one the second, and so on down the line. Because our logic is so straightfoward, I can rely on the jQuery index functionality to do a lot of the hard math.

var currentTab = 0; 

function openTab(clickedTab) {
	var thisTab = $(".tabbed-box .tabs a").index(clickedTab);
	$(".tabbed-box .tabs li a").removeClass("active");
	$(".tabbed-box .tabs li a:eq("+thisTab+")").addClass("active");
	$(".tabbed-box .tabbed-content").hide();
	$(".tabbed-box .tabbed-content:eq("+thisTab+")").show();
	currentTab = thisTab;
}

I start out by declaring a global variable that I’ll use throughout the script: currentTab. The currentTab variable will hold the index (an internal counter, like in an array) of the tab we’re currently on. It will also serve later to decide which tab we open by default.

Our function looks more complicated than it is. It requires one variable to be passed it: the clickedTab variable, otherwise known as the tab the user just clicked on. It then calculates the index of that tab (if it was the 3rd tab, the index would be 2) and saves that number as thisTab.

Next, the script cycles through all our tabs and removes any instances of the “active” class if finds, before cycling through a second time and applying the active class to the tab that has the same index number as the tab that was clicked on (in other words, the same tab). This ensures we only ever have one active tab at a time. Then we cycle through our content boxes, hiding them all before cycling through again and showing only the one box that has the same index as our tab… meaning if the third tab was clicked, the third box will open. That bit of math is what saves us from having to apply IDs to all of our tabs and content boxes. Then we set the currentTab variable to our newly open tab’s index.

Now that our function is written, we can get our tabbed box ready for prime time:

$(document).ready(function() {
	$(".tabs li:eq(0) a").css("border-left", "none");

	$(".tabbed-box .tabs li a").click(function() {
		openTab($(this)); return false;
	});

	$(".tabbed-box .tabs li a:eq("+currentTab+")").click()
});

The first line in our document ready function removes the left border of the first tab. Our CSS handled this for all browsers but IE6, but this bit of code takes care of IE6 as well.

Next, I’ve written a click function that will fire any time anyone clicks on any of our tabs. It only has two parts. First, it fires the openTab function, sending it a variable called “$(this)”. In jQuery, the $(this) variable in a function is always populated with the element on which the function was applied. So if the user clicks on the 2nd tab, our $(this) variable would contain that element. The “return false” after our function prevents the browser from trying to go to whatever we put in our anchor’s href.

And last but certainly not least, our final line forces a click on the tab with an ID that matches currentTab. In my example, that’s the first tab, but you can set currentTab to whatever you’d like to start, so long as currentTab is at least one less than the total number of tabs (since we start counting at zero).

And with that, we have a functioning tabbed box!

You can see this box in action here. The demo contains all the XHTML, CSS and jQuery you need to get this box up and running on your own site.

My next article will cover some advanced tricks you can do with this box, like getting it to cycle through automatically to catch the user’s eye… and how to stop the box from cycling once it has the user’s attention. To be sure to catch the article, you may want to subscribe to my newsfeed.

Read More

CSS Blog

If CSS properties attended high school, you would never expect to see the border property sitting at the cool kids’ table. Sure, it’s a useful property and all — as long as you’re looking accentuate the boxiness of a design, right?

Actually, you’d be surprised at just how cool the border property can be. Please take the following dozen exhibits as proof that the CSS border property is a lot cooler than we give it credit for.

Jazzing Up Anchors

I’ve written here before about jazzing up anchor tags by changing the color, removing the underline, and adding background images. But border can be a great way to add a bit of visual style to your anchors without adding that great bit of accessibility that the underline provides. For example, CSS Newbie’s article links are currently styled with a dotted border, like so:

.entry a {
	color: #253c93;
	text-decoration: none;
	border-bottom: 1px dotted #253c93; }
.entry a:hover {
	border-bottom: 1px solid #253c93; }

That gives me a nice dotted border that turns solid when the user hovers over the link. All sorts of style and accessibility without that so-’90s underline.

Build a Postage Stamp

A while back, I ran across a cool little technique for faking a postage stamp using the CSS border property. The original link seems to have been lost from the web, but here’s the basic technique, in XHTML:

<div class="stamp">
	<p>99&cent;</p>
</div>

And CSS:

.stamp {
	width: 500px;
	height: 414px;
	background: #fff url(george.jpg) no-repeat;
	border: 12px dashed #1b1a19; }
.stamp p {
	color: #fff;
	margin: 10px 10px 0 0;
	font: bold 60px Georgia, "Times New Roman", Times, serif;
	text-align: right; }

Now, you could obviously take this even further with a bit of skill and a degree in something other than Rhetoric, but I think you get the idea. You can see the example live here.

Prettier Images

Borders are a great way to make your excellent images stand out even more. I wrote an article on the subject a while back, but here’s the basic idea:

img.photo {
	border: 1px solid #999;
	background-color: #fcfcfc;
	padding: 4px;}

You can see a similar technique used on CSS Newbie’s current design around all of the images in the articles, as well as the ads in the sidebar. As you can see, the technique can be subtle but visually pleasing if used properly.

Homemade Coupons

If you’re ever required to design an online coupon, you needn’t turn straight to Photoshop or the like. You can craft a coupon easily with just a bit of CSS:

.coupon {
	width: 250px;
	padding: 10px;
	text-align: center;
	border: 3px dashed #ccc; }

Just that speck of code gives me a nice coupon that looks something like this:

You’ll have your readers printing and clipping in no time.

Better Blockquotes

Blockquotes are often useful, seldom used. But if you have a website that often refers to the words of others, a well-styled blockquote will go a long way towards impressing your readers with your borrowed prose:

blockquote {
	margin: 1em 3em;
	color: #999;
	border-left: 2px solid #999;
	padding-left: 1em; }

Just a touch of code, and voila… instant credibility!

Hunt Archaic Code

If you ever take over a website (or perhaps built a website) that is still using the Code of Yesteryear, consider turning to CSS and the border property for help hunting down bits of HTML soup that could use a bit less seasoning:

font, center, s, u, b, i {
	color: #000;
	font-weight: bold;
	background-color: #f99;
	border: 3px solid #c00; }

For more information on this useful technique, see my article on finding deprecated elements with diagnostic CSS highlighting. It just might save your life someday. But I doubt it.

Round the Bend

So far, all of our techniques have had one thing in common: boxy edges. But if you’re using a browser developed within the last five or so years (read: not IE6), you’re not limited to those same old dull right angles. This article from last August shows us that CSS3 offers us a way of breaking out of — or at least bending the corners of — the CSS box:

div.rounded {
	background-color: #666;
	color: #fff;
	font-weight: bold;
	padding: 10px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px; }

The border-radius properties allow us to round the corners of elements without having to resort to images. Cool indeed!

Angle it In

Of course, not all angles are bad angles… if used properly. Way back in the day, CSS guru Eric Meyer pointed out a way to use borders to create some pretty wicked angles. If you’d like to learn more about this technique, his site is a great place to start.

CSS Drawings

And now for a bit of fun! The following excellent (and cool) examples are all drawn using the CSS border property.

This functional LCD-style digital clock was built using CSS borders to create the lines of the LCD. Check out tanfa.co.uk to see it in action!

There’s something very pop-art about this CSS skyline. It leans heavily on the border property to create the buildings and windows.

Here’s a random art generator that combines HTML, JavaScript, and the CSS border property to create random examples of modern art. If you hit the “update” button long enough, you’re bound to find something worthy of hanging on your (cubicle?) wall.

Christopher Hester is a man with fantastic CSS skill, incalculable patience, and presumably no girlfriend — at least until he started impressing the ladies with this house he built with the CSS border property. And be sure to check out his second CSS house, which he built using background colors and approximately 50 gazillion non-semantic divs.

If you know of any other fantastic uses for the CSS border property, be sure to mention them in the comments!

Read More

CSS Blog

Recently I have been working on a social networking site that was experiencing downtime due to the amount of stress its users were putting on the server. I spent a good amount of time looking for ways to improve the speed of the site, and one of this was through CSS optimization.

Structure your CSS and HTML elegantly
“CSS” Stands for Cascading Style Sheets. Notice the first word, “Cascading”? The power of this language is readily available, and it is up to you, the designer, to maximize its use. It is an interesting concept that is not too difficult to grasp. Try to find instances wherein this can be applied.

For example, the code below:

<p class="someClass">First</p>
<p class="someClass">Second</p>
<p class="someClass">Third</p>
<p class="someClass">Forth</p>
<p class="someClass">Fifth</p>


Can be rewritten this way:

<div class="someClass">
<p>First</p>
<p>Second</p>
<p>Third</p>
<p>Forth</p>
<p>Fifth</p>
</div>


But what if our code looks like this:

<p class="firstClass">First</p>
<p class="someClass">Second</p>
<p class="someClass">Third</p>
<p class="someClass">Forth</p>
<p class="someClass">Fifth</p>


We can take advantage of CSS by rewriting HTML this way:

<div class="someClass">
<p class="firstClass">First</p>
<p>Second</p>
<p>Third</p>
<p>Forth</p>
<p>Fifth</p>
</div>


Then, cascade rules defined in “firstClass” to overwrite styling principles in “someClass”.

This is just one simple example, and I hope you understand what I’m trying to get at. Just keep in mind the concept of cascading rules and it won’t be long before things like this become second nature and automatic.

Re-structure your CSS
I am a huge fan of single line CSS style. Not only does it save up space, it is also more readable. The readability bit is debatable, though. Simply put, I find it easier to locate relevant tags if the tag names are all on the same left-hand side and I do not have to scroll so much to find what I need to change. After all, designers are only concerned with CSS selectors, not the rules that are applied to it.

Optimize Your CSS
Some time ago, I wrote an article about improving website performance using CSS optimizers. I still use CSS Optimiser up to this day. For very large CSS files it is a quick and easy way to rewrite things that may otherwise prove too time-consuming to optimize manuallyt.

Use CSS Shorthand Rules
When I was still learning CSS, I found shorthand rules to be quite daunting and confusing at times. But I strived to learn the shorthand syntax for every rule simply because I am lazy and do not want to bother typing the same thing over and over not to mention having to memorize all the rule names.

Compare the example longhand its equivalent shorthand below.

Original longhand:

#someid {
background-attachment: fixed;
background-color: #000000;
background-image: url(images/image.png);
background-repeat: no-repeat;
background-position: left bottom;
}


Shorthand version:

#someid { background: #000 url(images/image.png) no-repeat fixed left bottom; }


The folks over at SitePoint has a good introduction to the art of CSS Shorthand that I can recommend to anyone who’s willing to learn.

Server-side Compression
Server-side compression techniques have long been put to use by large scale applications for two main reasons. First, bandwidth is precious and expensive. Second, it does not require having to modify code for it to work. What it does require, however, is supported server software (or hardware). Hence the term “server-side”.

One such solution can easily be deployed on Apache servers. Once again SitePoint has written an introduction to server-side compression using Apache and mod_gzip.

The drawback to this is increased CPU load. Indeed, server-side compression is a double-edged sword, but usually the pros far outweigh the cons.

Share

Read More

CSS Blog

It’s true that IE is the most notorious browser for inconsistencies, incompatibilities, and bugs. But the fact remains that no two browsers are created equal, and while IE is the most likely to cause headaches in the course of development, other browsers can be culprits, as well.

If you run into a major roadblock, Rafael Lima’s CSS Browser Selector could be your saving grace. A tiny bit of Javascript (less than 1kb!) determines the user’s browser and creates an accordingly-named class. From there, it’s simply a matter of applying the styles that were written for that particular browser. For example:

.ie .example {
background-color: yellow
}
.gecko .example {
background-color: gray
}
.opera .example {
background-color: green
}
.konqueror .example {
background-color: blue
}
.webkit .example {
background-color: black
}
.example {
width: 100px;
height: 100px;
background-color: brown;
}

The colored box on the CSS Browser Selector page gets the point across better than anything else, though. Open the page in a few different browsers to see for yourself.

Read | Permalink | Email this | Linking Blogs | Comments

Read More

CSS Blog