Saturday, November 12, 2011

5 Useful Coding Solutions For Designers And Developers

1. Designing a Slick CSS Timeline

Designing a timeline is one of the tasks that frequently need to be solved when it comes to the design of portfolios. Some designers present the timeline as an image, others use plain text or use a good old table. We found an interesting CSS-based solution of a timeline over at 37Signals.com. While timelines are usually designed horizontally, this one is vertical, zig-zagging down each time slot.
Screenshot
How is this done?
To achieve this zig-zag effect, we will be floating each row. By assigning an “even” class, we are able to specify a different style for the right-aligned time slots, controlling their colors and alignment.
Screenshot
Here is the HTML:
01<div class="timeslot">
02    <span>2009span>
03    <p>Duis acsi ullamcorper humo decet, incassum validus, appellatio in qui tation roto, lobortis brevitas epulae. Et ymo eu utrum probo ut, jugis, delenit.
04    p>
05    div>
06    <div class="timeslot even">
07    <span>2008span>
08    <p>Duis acsi ullamcorper humo decet, incassum validus, appellatio in qui tation roto, lobortis brevitas epulae. Et ymo eu utrum probo ut, jugis, delenit.
09    p>
10div>
And here is the CSS:
The default timeslot will float left and have a 100-pixel padding to the right. This leaves room for the year () to sit to its right. I also used absolute positioning for the year so that I could easily switch from left to right without worrying about colliding float issues.
Add a class of even to each even row, so that we get it right-aligned in red and the year positioned to the left.
01.timeslot {
02    width: 235px;
03    float: left;
04    margin: 0 0 10px;
05    padding: 10px 100px 0 0;
06    border-top: 3px solid #ddd;
07    position: relative;
08}
09.timeslot span {
10    position: absolute;
11    right: 0;
12    top: 27px;
13    font-size: 3em;
14    color: #999;
15}
16.even {
17    float: right;
18    padding: 10px 0 0 100px;
19    border-color: #ca0000;
20}
21.even span {
22    left: 0;
23    color: #ca0000;
24}

2. Custom Page Styling, CSS Drop Caps and Footnotes

One website that is truly unique is Jason Santa Maria’s. What’s impressive about Jason’s website is that each article and blog post is entirely unique, with its design tailored to the content. Looking at a recent article, “Mathematics of the Tootsie Pop,” we’ll go over a few techniques that stand out for us.
Screenshot

1. Custom Page Styling in WordPress

The first question that came to mind when visiting Jason’s blog was, “How did he give each post a unique design?” You can achieve this simply by referencing a custom style sheet to override the website’s default style. By using a combination of custom fields in WordPress and understanding CSS specificity, you can freely give each post a design of its own. So, how is this done?
Step 1. Customize post with custom style sheet
Start by creating a new style sheet, and name the file to match your post’s title. With a good understanding of CSS specificity, you can customize the look and feel of the post.
Step 2. Create custom field values
Log in to your WordPress admin area, and go to the edit page for the post. Scroll down to the “Custom Field” area, and enter a new custom field name called “customStyles”. Then, for the value of that custom field, enter the full URL of your custom style sheet.
Screenshot
Step 3. Call the custom style sheet
Open up the header.php file in your custom theme, and above your </code> tag, add the following:</p> <div class="syntaxhighlighter " id="highlighter_401725"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="plain"><?php </code><code class="variable">$customStyles</code> <code class="plain">= get_post_meta(</code><code class="variable">$post</code><code class="plain">->ID, </code><code class="string">"customStyles"</code><code class="plain">, true);</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="keyword">if</code> <code class="plain">(!</code><code class="functions">empty</code><code class="plain">(</code><code class="variable">$customStyles</code><code class="plain">)) { ?></code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="plain"><link rel=</code><code class="string">"stylesheet"</code> <code class="plain">href=</code><code class="string">"<?php echo $customStyles; ?>"</code> <code class="plain">type=</code><code class="string">"text/css"</code> <code class="plain">media=</code><code class="string">"screen"</code> <code class="plain">/></code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="plain"><?php } ?></code></td></tr></tbody></table></div></div></div> <p>In this step, we’re checking if a custom field of “customStyles” exists. If it does, then it will inject the value within the <code>href</code> of the style sheet reference.</p> <p>Custom field tutorials:</p> <ul><li><a href="http://www.smashingmagazine.com/2009/05/13/10-custom-fields-hacks-for-WordPress/">Custom Fields Hacks For WordPress</a></li><li><a href="http://perishablepress.com/press/2008/12/17/WordPress-custom-fields-tutorial/">WordPress Custom Fields, Part I: The Basics</a></li><li><a href="http://perishablepress.com/press/2008/12/22/WordPress-custom-fields-tips-tricks/">WordPress Custom Fields, Part II: Tips and Tricks</a></li></ul> <p>CSS specificity tutorials:</p> <ul><li><a href="http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/">CSS Specificity: Things You Should Know</a></li><li><a href="http://css-tricks.com/specifics-on-css-specificity/">Specifics on CSS Specificity</a></li><li><a href="http://snook.ca/archives/html_and_css/understanding_c/">Understanding CSS Specificity</a></li></ul> <h4>2. Creating Drop Caps</h4> <p class="showcase"><img src="http://coding.smashingmagazine.com/wp-content/uploads/2009/11/article_1_b.gif" alt="Screenshot"></p> <p>Drop caps are commonly seen in print design, but with the recent rise in popularity of Web typography, this technique seems to be becoming more common. We have various ways of achieving this technique.</p> <p>Here is the HTML you would use:</p> <div class="syntaxhighlighter " id="highlighter_446960"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="plain"><</code><code class="keyword">p</code><code class="plain">><</code><code class="keyword">span</code> <code class="color1">class</code><code class="plain">=</code><code class="string">"dropCap"</code><code class="plain">>E</</code><code class="keyword">span</code><code class="plain">>ros decet bis eligo jumentum brevitas vel abigo iusto commoveo ex abigo, euismod ulciscor. Bene enim vulputate enim, nisl illum patria. Enim te, verto euismod in nisl lucidus. Capio incassum quadrum nunc ex proprius praesent et quod. Autem in commoveo similis nostrud turpis paulatim quadrum, tristique. </</code><code class="keyword">p</code><code class="plain">></code></td></tr></tbody></table></div></div></div> <p><em>Plain-text drop caps</em><br>Plain-text drop caps can be achieved with just a few lines of CSS. Until Web typography advances, and the <code>@font-face</code> standard becomes more widely supported, this is probably the easiest way to achieve drop caps. <a href="http://coding.smashingmagazine.com/wp-content/uploads/2009/11/dropcaps.htm">See demo</a>.</p> <p class="showcase"><a href="http://coding.smashingmagazine.com/wp-content/uploads/2009/11/dropcaps.htm"><img src="http://coding.smashingmagazine.com/wp-content/uploads/2009/11/article_1_g.gif" alt="Screenshot" height="92" width="500"></a></p> <p>Here is the CSS:</p> <div class="syntaxhighlighter " id="highlighter_8882"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="plain">.dropCap {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces">    </code><code class="keyword">float</code><code class="plain">: </code><code class="value">left</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="spaces">    </code><code class="keyword">font-size</code><code class="plain">: </code><code class="value">5em</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="spaces">    </code><code class="keyword">line-height</code><code class="plain">: </code><code class="value">0.9em</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>5</code></td><td class="content"><code class="spaces">    </code><code class="keyword">padding</code><code class="plain">: </code><code class="value">0</code> <code class="value">5px</code> <code class="value">0</code> <code class="value">0</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>6</code></td><td class="content"><code class="spaces">    </code><code class="keyword">font-family</code><code class="plain">: Georgia, </code><code class="string">"Times New Roman"</code><code class="plain">, Times, </code><code class="color1">serif</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>7</code></td><td class="content"><code class="plain">}</code></td></tr></tbody></table></div></div></div> <p>To jazz up your plain text, check out the following tutorials on enhancement:</p> <ul><li><a href="http://line25.com/tutorials/create-a-letterpress-effect-with-css-text-shadow">Create a Letterpress Effect with CSS Text-Shadow</a></li><li><a href="http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/">CSS Gradient Text Effect</a></li></ul> <p><em>Text-replacement drop caps</em><br>Here, we are simply substituting an image for a letter, using a combination of <code>text-indent</code> and background image. <a href="http://coding.smashingmagazine.com/wp-content/uploads/2009/11/dropcaps2.htm">See demo</a>.</p> <p class="showcase"><a href="http://coding.smashingmagazine.com/wp-content/uploads/2009/11/dropcaps2.htm"><img src="http://coding.smashingmagazine.com/wp-content/uploads/2009/11/article_1_h.gif" alt="Screenshot"></a></p> <p>Here is the CSS:</p> <div class="syntaxhighlighter " id="highlighter_782461"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="plain">.dropCap {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces">    </code><code class="keyword">text-indent</code><code class="plain">: </code><code class="value">-99999px</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="spaces">    </code><code class="keyword">background</code><code class="plain">: </code><code class="value">url</code><code class="plain">(drop_cap_e.gif) </code><code class="value">no-repeat</code> <code class="value">left</code> <code class="value">5px</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="spaces">    </code><code class="keyword">height</code><code class="plain">: </code><code class="value">50px</code><code class="plain">; </code><code class="keyword">width</code><code class="plain">: </code><code class="value">55px</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>5</code></td><td class="content"><code class="spaces">    </code><code class="keyword">float</code><code class="plain">: </code><code class="value">left</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>6</code></td><td class="content"><code class="spaces">    </code><code class="keyword">display</code><code class="plain">: </code><code class="value">block</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>7</code></td><td class="content"><code class="plain">}</code></td></tr></tbody></table></div></div></div> <p>While this technique is perfect for Jason’s post (because he uses only one drop cap), if you plan to use multiple drop caps, you should look into using <a href="http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/">CSS sprites</a>. <a href="http://www.markboulton.co.uk/">Mark Boulton</a> offers a great example of this technique.</p> <p><em>jQuery-based Drop Caps</em><br>A few years ago, <a href="http://www.karlswedberg.com/">Karl Swedberg</a> of <a href="http://www.learningjquery.com/">LearningjQuery.com</a> introduced an awesome way to incorporate drop caps using jQuery. Please notice that using jQuery for presentational purposes may be not a good idea and contradicts the strict separation between the presentation and behaviour layers, but it does solve the problem nevertheless. You may want to check out Karl Swedberg’s <a href="http://plugins.learningjquery.com/fancyletter/">drop-cap plugin</a> that does a better job of keeping the presentation and behavior layers separate by simply wrapping a span around the first letter (with appropriate classes). That way you can style the letter however you like with CSS. Also check out the tutorials below:</p> <p class="showcase"><a href="http://www.learningjquery.com/2006/09/fancy-drop-cap-part-1"><img src="http://coding.smashingmagazine.com/wp-content/uploads/2009/11/article_1_e.gif" alt="Screenshot" height="163" width="500"></a></p> <ul><li><a href="http://www.learningjquery.com/2006/09/fancy-drop-cap-part-1">Fancy Drop Cap – Part 1</a></li><li><a href="http://www.learningjquery.com/2006/10/fancy-drop-cap-part-2">Fancy Drop Cap – Part 2</a></li><li><a href="http://www.learningjquery.com/2006/12/multiple-fancy-drop-caps">Multiple Fancy Drop Caps</a></li></ul> <h4>3. Footnotes</h4> <p>Footnotes are another interesting part of Jason’s post. The red stripe that bleeds across the page really accents the footnotes well here.</p> <p>That bleeding red stripe can be achieved by nesting two DIV tags: the parent DIV, which contains a repeating background image (positioned at the bottom), and a second DIV, which is the actual fixed container where the content lies. This way, the red stripe follows the end of the content and aligns perfectly with the footnotes.</p> <p class="showcase"><img src="http://coding.smashingmagazine.com/wp-content/uploads/2009/11/article_1_f.jpg" alt="Screenshot" height="408" width="500"></p> <h3>3. Text Flow</h3> <p>Like Jason Santa Maria, <a href="http://dustincurtis.com/a-tour-of-my-brain.html">Dustin Curtis</a> has his own way of giving each post a unique style. In the example below, you can see the interesting way in which the text flows down the page beside the pictures of the MRI. This technique is quite simple to do and is a good use of relative positioning.</p> <p><strong>How is this done?</strong> The text flow seen in Dustin’s design can be achieved by giving each text block a relative position, a fixed width and fixed coordinates. His post has a mix of <a href="http://dustincurtis.com/images/brain/brains.jpg">large backgrounds</a>, text replacement and relatively positioned text blocks.</p> <p class="showcase"><a href="http://dustincurtis.com/a-tour-of-my-brain.html"><img src="http://coding.smashingmagazine.com/wp-content/uploads/2009/11/brain.jpg" alt="Screenshot" height="398" width="500"></a></p> <p>Sample HTML:</p> <div class="syntaxhighlighter " id="highlighter_412958"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="plain"><</code><code class="keyword">p</code> <code class="color1">class</code><code class="plain">=</code><code class="string">"small"</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces">    </code><code class="color1">style</code><code class="plain">=</code><code class="string">" position: relative;top: 260px;width: 430px;left: 290px;"</code><code class="plain">></code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="spaces">        </code><code class="plain"><</code><code class="keyword">strong</code><code class="plain">>At its core, it is the "artful" hemisphere.</</code><code class="keyword">strong</code><code class="plain">> Abstract thinking, intonation</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="spaces">        </code><code class="plain">and rhythm of language, artistic ability, and the perception of joy from music are centered here.</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>5</code></td><td class="content"><code class="spaces">        </code><code class="plain">The right hemisphere specializes in thinking about big picture ideas and overarching themes holistically</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>6</code></td><td class="content"><code class="spaces">        </code><code class="plain">instead of linearly.</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>7</code></td><td class="content"><code class="plain"></</code><code class="keyword">p</code><code class="plain">></code></td></tr></tbody></table></div></div></div> <p>Although inline styles are typically not recommended, this would be a rare exception. Create a global class name for the default styling of all text blocks (margin, padding, text size, color, etc.), and use inline styling for the page-specific design (coordinates, width, etc.). <a href="http://coding.smashingmagazine.com/wp-content/uploads/2009/11/textflow.htm">See demo</a>.</p> <p class="showcase"><a href="http://coding.smashingmagazine.com/wp-content/uploads/2009/11/textflow.htm"><img src="http://coding.smashingmagazine.com/wp-content/uploads/2009/11/article_3_b.gif" alt="Screenshot" height="300" width="500"></a></p> <p>CSS:</p> <div class="syntaxhighlighter " id="highlighter_747948"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="plain">.textflow {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces">    </code><code class="keyword">font-size</code><code class="plain">: </code><code class="value">1.2em</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="spaces">    </code><code class="keyword">color</code><code class="plain">: </code><code class="value">#2d2d2d</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="spaces">    </code><code class="keyword">margin</code><code class="plain">: </code><code class="value">20px</code> <code class="value">0</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>5</code></td><td class="content"><code class="spaces">    </code><code class="keyword">padding</code><code class="plain">: </code><code class="value">5px</code> <code class="value">0</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>6</code></td><td class="content"><code class="spaces">    </code><code class="keyword">position</code><code class="plain">: </code><code class="value">relative</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>7</code></td><td class="content"><code class="plain">}</code></td></tr></tbody></table></div></div></div> <p>HTML:</p> <div class="bar show"><div class="toolbar"><a class="item viewSource" style="width: 16px; height: 16px;" title="view source" href="http://coding.smashingmagazine.com/2009/11/23/6-useful-coding-solutions-for-designers-and-developers/#viewSource">view source</a><a class="item printSource" style="width: 16px; height: 16px;" title="print" href="http://coding.smashingmagazine.com/2009/11/23/6-useful-coding-solutions-for-designers-and-developers/#printSource">print</a><a class="item about" style="width: 16px; height: 16px;" title="?" href="http://coding.smashingmagazine.com/2009/11/23/6-useful-coding-solutions-for-designers-and-developers/#about">?</a></div></div><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="plain"><</code><code class="keyword">div</code> <code class="color1">class</code><code class="plain">=</code><code class="string">"textflow"</code> <code class="color1">style</code><code class="plain">=</code><code class="string">"width:300px; left: 680px;"</code><code class="plain">></code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces">  </code><code class="plain"><</code><code class="keyword">p</code><code class="plain">>Ad, natu virtus, ut ea, tristique aptent illum iustum abigo ad vulputate gravis melior quae.</</code><code class="keyword">p</code><code class="plain">></code></td></tr></tbody></table></div><p><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="plain"></</code><code class="keyword">div</code><code class="plain">></code></td></tr></tbody></table></p><p><table><tbody><tr><td class="content"><code class="plain"> </code></td><td class="content"><h3>4. Combo Carousel Breakdown</h3> <p>Over at <a href="http://technikwuerze.de/das-team/#teammod_dm">Technikwürze</a>, we have found a carousel with a combination of animation effects. This is no ordinary carousel. For this example, rather than go over specific techniques, we’ll discuss the logic behind this unique carousel.</p> <p><a href="http://technikwuerze.de/das-team/#teammod_dm"><img src="http://coding.smashingmagazine.com/wp-content/uploads/2009/11/combo2.jpg" alt="Screenshot" height="352" width="500"></a></p> <p><strong>How is this done?</strong> As you can see, when clicking on a member’s thumbnail, three primary animations are triggered:</p> <ol><li>The member bio slides in horizontally,</li><li>The profile image slides in vertically,</li><li>The grid of member photos updates, and the height of the container adjusts.</li></ol> <p>To begin, the full member profiles are floated so that they appear side by side. We use <code>overflow: hidden;</code> to mask the non-active profiles. Here is a visual demo of this carousel’s logic:</p> <p class="showcase"><img src="http://coding.smashingmagazine.com/wp-content/uploads/2009/11/article_5_default.gif" alt="Screenshot" height="140" width="500"></p> <p><strong>1. Horizontal animation</strong><br>Each time a thumbnail is clicked, jQuery calculates how far the profiles need to slide over. This is the classic <a href="http://zendold.lojcomm.com.br/icarousel/example6.asp">horizontal-sliding carousel</a> effect.</p> <p class="showcase"><img src="http://coding.smashingmagazine.com/wp-content/uploads/2009/11/article_5_b.gif" alt="Screenshot" height="166" width="500"></p> <p><strong>2. Vertical animation</strong><br>Once the active profile slides into position, the image for the profile slides down. To begin, all profile images are position <code>-190px</code> above the frame. When jQuery detects that the horizontal animation has been triggered, it slides the profile image down.</p> <p class="showcase"><img src="http://coding.smashingmagazine.com/wp-content/uploads/2009/11/article_5_c.gif" alt="Screenshot" height="231" width="500"></p> <p><strong>3. Vertical animation</strong><br>During the transition to the active profile, its height is calculated and the container is adjusted. This way, the container stays snug and does not leave any excess white space at the bottom.</p> <p class="showcase"><img src="http://coding.smashingmagazine.com/wp-content/uploads/2009/11/article_5_d.gif" alt="Screenshot" height="163" width="500"></p> <p>Carousel tutorials and plug-ins:</p> <ul><li><a href="http://jqueryfordesigners.com/jquery-infinite-carousel/">jQuery Infinite Carousel</a></li><li><a href="http://www.queness.com/post/923/create-a-simple-infinite-carousel-with-jquery">Create a Simple Infinite Carousel with jQuery</a></li><li><a href="http://woork.blogspot.com/2009/05/7-powerful-image-carousels-for-web.html">Create a Simple Infinite Carousel with jQuery</a></li><li><a href="http://www.ndoherty.biz/demos/coda-slider/1.1.1/#5">Coda-Slider</a></li></ul> <h4>Graceful Degradation</h4> <p>The team at Technikwürze also implemented a fall-back option for this carousel. With a smart use of CSS, it crafted this page so that anything JavaScript-driven is tucked away. The resulting page is clean and accessible to all users.</p> <p class="showcase"><img src="http://coding.smashingmagazine.com/wp-content/uploads/2009/11/carousel_fallback.jpg" alt="Screenshot" height="201" width="500"></p> <h3>5. Beautiful Typographic CSS-Based Ratings</h3> <p>Over at <a href="http://web.appstorm.net/reviews/getting-started-with-google-wave-an-early-look/#summary">Web Appstorm</a>, we have an interesting way of showing ratings with CSS. This CSS-based system can be achieved using absolute positioning and an image of the maximum rating.</p> <p class="showcase"><a href="http://web.appstorm.net/reviews/getting-started-with-google-wave-an-early-look/#summary"><img src="http://coding.smashingmagazine.com/wp-content/uploads/2009/11/score.jpg" alt="Screenshot" height="305" width="550"></a></p> <p class="showcase"><a href="http://web.appstorm.net/reviews/getting-started-with-google-wave-an-early-look/#summary"><img src="http://coding.smashingmagazine.com/wp-content/uploads/2009/11/article_4_a.gif" alt="Screenshot" height="147" width="500"></a></p> <p><strong>How is this done?</strong> Here is the HTML and CSS:</p> <div class="syntaxhighlighter " id="highlighter_754454"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="plain"><</code><code class="keyword">span</code> <code class="color1">class</code><code class="plain">=</code><code class="string">"the_score"</code><code class="plain">>8</</code><code class="keyword">span</code><code class="plain">></code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="plain"><</code><code class="keyword">img</code> <code class="color1">class</code><code class="plain">=</code><code class="string">"ten"</code> <code class="color1">src</code><code class="plain">=</code><code class="string">"<a href="http://web.appstorm.net/wp-content/themes/appstorm_v2/images/ten.gif">http://web.appstorm.net/wp-content/themes/appstorm_v2/images/ten.gif</a>"</code> <code class="color1">alt</code><code class="plain">=</code><code class="string">""</code><code class="plain">></code></td></tr></tbody></table></div></div></div> <div class="syntaxhighlighter " id="highlighter_761750"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>01</code></td><td class="content"><code class="plain">.tabdiv .the_score {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>02</code></td><td class="content"><code class="spaces">    </code><code class="keyword">font-family</code><code class="plain">: </code><code class="string">"Myriad Pro"</code><code class="plain">, </code><code class="color1">Helvetica</code><code class="plain">, </code><code class="color1">Arial</code><code class="plain">, </code><code class="color1">sans-serif</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>03</code></td><td class="content"><code class="spaces">    </code><code class="keyword">font-size</code><code class="plain">: </code><code class="value">110px</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>04</code></td><td class="content"><code class="spaces">    </code><code class="keyword">line-height</code><code class="plain">: </code><code class="value">110px</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>05</code></td><td class="content"><code class="spaces">    </code><code class="keyword">font-weight</code><code class="plain">: </code><code class="value">bold</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>06</code></td><td class="content"><code class="spaces">    </code><code class="keyword">position</code><code class="plain">: </code><code class="value">absolute</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>07</code></td><td class="content"><code class="spaces">    </code><code class="keyword">top</code><code class="plain">: </code><code class="value">30px</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>08</code></td><td class="content"><code class="spaces">    </code><code class="keyword">right</code><code class="plain">: </code><code class="value">100px</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>09</code></td><td class="content"><code class="spaces">    </code><code class="keyword">color</code><code class="plain">: </code><code class="value">#262626</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>10</code></td><td class="content"><code class="spaces">    </code><code class="keyword">text-align</code><code class="plain">: </code><code class="value">center</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>11</code></td><td class="content"><code class="spaces">    </code><code class="keyword">letter-spacing</code><code class="plain">: </code><code class="value">-17px</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>12</code></td><td class="content"><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>13</code></td><td class="content"><code class="plain">.tabdiv .ten {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>14</code></td><td class="content"><code class="spaces">    </code><code class="keyword">position</code><code class="plain">: </code><code class="value">absolute</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>15</code></td><td class="content"><code class="spaces">    </code><code class="keyword">top</code><code class="plain">: </code><code class="value">80px</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>16</code></td><td class="content"><code class="spaces">    </code><code class="keyword">right</code><code class="plain">: </code><code class="value">45px</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>17</code></td><td class="content"><code class="plain">}</code></td></tr></tbody></table></div></div></div> <h4>Alternative Solution</h4> <p>If you would like the maximum rating to vary, you can achieve this effect using the following alternative method.</p> <p class="showcase"><img src="http://coding.smashingmagazine.com/wp-content/uploads/2009/11/article_4_b.gif" alt="Screenshot"></p> <p>HTML:</p> <div class="syntaxhighlighter " id="highlighter_738862"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="plain"><</code><code class="keyword">div</code> <code class="color1">class</code><code class="plain">=</code><code class="string">"ratingblock"</code><code class="plain">></code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces">    </code><code class="plain"><</code><code class="keyword">span</code> <code class="color1">class</code><code class="plain">=</code><code class="string">"rating"</code><code class="plain">>8</</code><code class="keyword">span</code><code class="plain">></code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="spaces">    </code><code class="plain"><</code><code class="keyword">span</code> <code class="color1">class</code><code class="plain">=</code><code class="string">"max"</code><code class="plain">>10</</code><code class="keyword">span</code><code class="plain">></code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="plain"></</code><code class="keyword">div</code><code class="plain">></code></td></tr></tbody></table></div></div></div> <p>CSS:</p> <p>As you can see, <code>.max</code> is absolute positioned, has a transparent background and is layered above <code>.rating</code>. That way, if you need to adjust the maximum rating, you can do so without modifying any images.</p> <div class="syntaxhighlighter " id="highlighter_301861"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>01</code></td><td class="content"><code class="plain">.ratingblock{</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>02</code></td><td class="content"><code class="spaces">    </code><code class="keyword">position</code><code class="plain">: </code><code class="value">relative</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>03</code></td><td class="content"><code class="spaces">    </code><code class="keyword">height</code><code class="plain">: </code><code class="value">100px</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>04</code></td><td class="content"><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>05</code></td><td class="content"><code class="plain">.ratingblock .rating {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>06</code></td><td class="content"><code class="spaces">    </code><code class="keyword">font-size</code><code class="plain">: </code><code class="value">8em</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>07</code></td><td class="content"><code class="spaces">    </code><code class="keyword">padding</code><code class="plain">: </code><code class="value">0</code> <code class="value">5px</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>08</code></td><td class="content"><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>09</code></td><td class="content"><code class="plain">.ratingblock .max{</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>10</code></td><td class="content"><code class="spaces">    </code><code class="keyword">display</code><code class="plain">: </code><code class="value">block</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>11</code></td><td class="content"><code class="spaces">    </code><code class="keyword">background</code><code class="plain">: </code><code class="value">url</code><code class="plain">(rating_bg.gif) </code><code class="value">no-repeat</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>12</code></td><td class="content"><code class="spaces">    </code><code class="keyword">position</code><code class="plain">: </code><code class="value">absolute</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>13</code></td><td class="content"><code class="spaces">    </code><code class="keyword">top</code><code class="plain">: </code><code class="value">0</code><code class="plain">; </code><code class="keyword">left</code><code class="plain">: </code><code class="value">0</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>14</code></td><td class="content"><code class="spaces">    </code><code class="keyword">font-size</code><code class="plain">: </code><code class="value">5em</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>15</code></td><td class="content"><code class="spaces">    </code><code class="keyword">width</code><code class="plain">: </code><code class="value">50px</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>16</code></td><td class="content"><code class="spaces">    </code><code class="keyword">height</code><code class="plain">: </code><code class="value">60px</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>17</code></td><td class="content"><code class="spaces">    </code><code class="keyword">padding</code><code class="plain">: </code><code class="value">40px</code> <code class="value">0</code> <code class="value">0</code> <code class="value">50px</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>18</code></td><td class="content"><code class="plain">}</code></td></tr></tbody></table></div></div></div> <h3>Final Thoughts</h3> <p>By examining the techniques others have used to achieve unique and inspirational results, we expand our foundation in Web design. It’s a great way to learn and push ourselves to ever-higher levels. Stay hungry and keep learning!</p><code class="plain"> </code></td></tr></tbody></table></p></DIV>

1 comment: