Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

5 Useful Coding Solutions For Designers And Developers

This post is the the next installment of posts featuring “Useful Coding Solutions for Designers and Developers1“, a series of posts focusing on unique and creative CSS/JavaScript-techniques being implemented by talented professionals in our industry. A key talent that any Web designer must acquire is the ability to observe, understand and build on other people’s designs. This is a great way to develop the skills and techniques necessary to produce effective websites.

With that in mind, let’s look at some clever techniques developed and used by top professionals in the Web design industry. We can use their examples to develop our own alternative solutions.

1. Designing a Slick CSS Timeline Link

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.com2. While timelines are usually designed horizontally, this one is vertical, zig-zagging down each time slot.

Screenshot3

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.
See the demo4.

Screenshot5

Here is the HTML:

<div class="timeslot">
  <span>2009</span>
  <p>Duis acsi ullamcorper humo decet, incassum validus, appellatio in qui tation roto, lobortis brevitas epulae. Et ymo eu utrum probo ut, jugis, delenit.
  </p>
  </div>
  <div class="timeslot even">
  <span>2008</span>
  <p>Duis acsi ullamcorper humo decet, incassum validus, appellatio in qui tation roto, lobortis brevitas epulae. Et ymo eu utrum probo ut, jugis, delenit.
  </p>
</div>

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 (<span>) 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.

.timeslot {
  width: 235px;
  float: left;
  margin: 0 0 10px;
  padding: 10px 100px 0 0;
  border-top: 3px solid #ddd;
  position: relative;
}
.timeslot span {
  position: absolute;
  right: 0;
  top: 27px;
  font-size: 3em;
  color: #999;
}
.even {
  float: right;
  padding: 10px 0 0 100px;
  border-color: #ca0000;
}
.even span {
  left: 0;
  color: #ca0000;
}

2. Custom Page Styling, CSS Drop Caps and Footnotes Link

One website that is truly unique is Jason Santa Maria’s6. 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 Pop7,” we’ll go over a few techniques that stand out for us.

Screenshot8

1. Custom Page Styling in WordPress Link

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 fields9 in WordPress and understanding CSS specificity1110, 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 specificity1110, 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 <title> tag, add the following:

<?php $customStyles = get_post_meta($post->ID, "customStyles", true);
if (!empty($customStyles)) { ?>
<link rel="stylesheet" href="<?php echo $customStyles; ?>" type="text/css" media="screen" />
<?php } ?>

In this step, we’re checking if a custom field of “customStyles” exists. If it does, then it will inject the value within the href of the style sheet reference.

Custom field tutorials:

CSS specificity tutorials:

2. Creating Drop Caps Link

Screenshot

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.

Here is the HTML you would use:

<p><span class="dropCap">E</span>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. </p>

Plain-text drop caps
Plain-text drop caps can be achieved with just a few lines of CSS. Until Web typography advances, and the @font-face standard becomes more widely supported, this is probably the easiest way to achieve drop caps. See demo18.

Screenshot19

Here is the CSS:

.dropCap {
  float: left;
  font-size: 5em;
  line-height: 0.9em;
  padding: 0 5px 0 0;
  font-family: Georgia, "Times New Roman", Times, serif;
}

To jazz up your plain text, check out the following tutorials on enhancement:

Text-replacement drop caps
Here, we are simply substituting an image for a letter, using a combination of text-indent and background image. See demo22.

Screenshot23

Here is the CSS:

.dropCap {
  text-indent: -99999px;
  background: url(drop_cap_e.gif) no-repeat left 5px;
  height: 50px; width: 55px;
  float: left;
  display: block;
}

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 CSS sprites24. Mark Boulton25 offers a great example of this technique.

jQuery-based Drop Caps
A few years ago, Karl Swedberg26 of LearningjQuery.com27 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 drop-cap plugin 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:

Screenshot28

3. Footnotes Link

Footnotes are another interesting part of Jason’s post. The red stripe that bleeds across the page really accents the footnotes well here.

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.

Screenshot

3. Text Flow Link

Like Jason Santa Maria, Dustin Curtis 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.

How is this done? 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 large backgrounds, text replacement and relatively positioned text blocks.

Screenshot

Sample HTML:

<p class="small"
  style=" position: relative;top: 260px;width: 430px;left: 290px;">
    <strong>At its core, it is the "artful" hemisphere.</strong> Abstract thinking, intonation
    and rhythm of language, artistic ability, and the perception of joy from music are centered here.
    The right hemisphere specializes in thinking about big picture ideas and overarching themes holistically
    instead of linearly.
</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.). See demo32.

Screenshot33

CSS:

.textflow {
  font-size: 1.2em;
  color: #2d2d2d;
  margin: 20px 0;
  padding: 5px 0;
  position: relative;
}

HTML:

<div class="textflow" style="width:300px; left: 680px;">
  <p>Ad, natu virtus, ut ea, tristique aptent illum iustum abigo ad vulputate gravis melior quae.</p> 
</div>

CSS positioning tutorials:

Over at Technikwürze37, 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.

Screenshot38

How is this done? As you can see, when clicking on a member’s thumbnail, three primary animations are triggered:

  1. The member bio slides in horizontally,
  2. The profile image slides in vertically,
  3. The grid of member photos updates, and the height of the container adjusts.

To begin, the full member profiles are floated so that they appear side by side. We use overflow: hidden; to mask the non-active profiles. Here is a visual demo of this carousel’s logic:

Screenshot

1. Horizontal animation
Each time a thumbnail is clicked, jQuery calculates how far the profiles need to slide over. This is the classic horizontal-sliding carousel39 effect.

Screenshot

2. Vertical animation
Once the active profile slides into position, the image for the profile slides down. To begin, all profile images are position -190px above the frame. When jQuery detects that the horizontal animation has been triggered, it slides the profile image down.

Screenshot

3. Vertical animation
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.

Screenshot

Carousel tutorials and plug-ins:

Graceful Degradation Link

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.

Screenshot

5. Beautiful Typographic CSS-Based Ratings Link

Over at Web Appstorm42, 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.

Screenshot43

Screenshot44

How is this done? Here is the HTML and CSS:

<span class="the_score">8</span>
<img class="ten" src="http://web.appstorm.net/wp-content/themes/appstorm_v2/images/ten.gif" alt="">
.tabdiv .the_score {
  font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
  font-size: 110px;
  line-height: 110px;
  font-weight: bold;
  position: absolute;
  top: 30px;
  right: 100px;
  color: #262626;
  text-align: center;
  letter-spacing: -17px;
}
.tabdiv .ten {
  position: absolute;
  top: 80px;
  right: 45px;
}

Alternative Solution Link

If you would like the maximum rating to vary, you can achieve this effect using the following alternative method.

Screenshot

HTML:

<div class="ratingblock">
  <span class="rating">8</span>
  <span class="max">10</span>
</div>

CSS:

As you can see, .max is absolute positioned, has a transparent background and is layered above .rating. That way, if you need to adjust the maximum rating, you can do so without modifying any images.

.ratingblock{
  position: relative;
  height: 100px;
}
.ratingblock .rating {
  font-size: 8em; 
  padding: 0 5px;
}
.ratingblock .max{
  display: block;
  background: url(rating_bg.gif) no-repeat;
  position: absolute;
  top: 0; left: 0;
  font-size: 5em; 
  width: 50px;
  height: 60px;
  padding: 40px 0 0 50px;
}

Final Thoughts Link

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!

(al)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2008/08/11/5-useful-coding-solutions-for-designers-and-developers/
  2. 2 http://37signals.com/about
  3. 3 http://37signals.com/about
  4. 4 https://www.smashingmagazine.com/wp-content/uploads/2009/11/timeline.htm
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2009/11/timeline.htm
  6. 6 http://jasonsantamaria.com/articles/mathematics-of-the-tootsie-pop/
  7. 7 http://jasonsantamaria.com/articles/mathematics-of-the-tootsie-pop/
  8. 8 http://jasonsantamaria.com/articles/mathematics-of-the-tootsie-pop/
  9. 9 http://codex.wordpress.org/Custom_Fields
  10. 10 https://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
  11. 11 https://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
  12. 12 https://www.smashingmagazine.com/2009/05/13/10-custom-fields-hacks-for-WordPress/
  13. 13 http://perishablepress.com/press/2008/12/17/WordPress-custom-fields-tutorial/
  14. 14 http://perishablepress.com/press/2008/12/22/WordPress-custom-fields-tips-tricks/
  15. 15 https://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
  16. 16 http://css-tricks.com/specifics-on-css-specificity/
  17. 17 http://snook.ca/archives/html_and_css/understanding_c/
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2009/11/dropcaps.htm
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2009/11/dropcaps.htm
  20. 20 http://line25.com/tutorials/create-a-letterpress-effect-with-css-text-shadow
  21. 21 http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2009/11/dropcaps2.htm
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2009/11/dropcaps2.htm
  24. 24 https://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
  25. 25 http://www.markboulton.co.uk/
  26. 26 http://www.karlswedberg.com/
  27. 27 http://www.learningjquery.com/
  28. 28 http://www.learningjquery.com/2006/09/fancy-drop-cap-part-1
  29. 29 http://www.learningjquery.com/2006/09/fancy-drop-cap-part-1
  30. 30 http://www.learningjquery.com/2006/10/fancy-drop-cap-part-2
  31. 31 http://www.learningjquery.com/2006/12/multiple-fancy-drop-caps
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2009/11/textflow.htm
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2009/11/textflow.htm
  34. 34 http://www.w3schools.com/Css/css_positioning.asp
  35. 35 http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
  36. 36 https://www.smashingmagazine.com/2009/10/05/mastering-css-coding-getting-started/#CSS-Basics7
  37. 37 http://technikwuerze.de/das-team/#teammod_dm
  38. 38 http://technikwuerze.de/das-team/#teammod_dm
  39. 39 http://zendold.lojcomm.com.br/icarousel/example6.asp
  40. 40 http://www.queness.com/post/923/create-a-simple-infinite-carousel-with-jquery
  41. 41 http://woork.blogspot.com/2009/05/7-powerful-image-carousels-for-web.html
  42. 42 http://web.appstorm.net/reviews/getting-started-with-google-wave-an-early-look/#summary
  43. 43 http://web.appstorm.net/reviews/getting-started-with-google-wave-an-early-look/#summary
  44. 44 http://web.appstorm.net/reviews/getting-started-with-google-wave-an-early-look/#summary
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement

Soh Tanaka, based in Los Angeles, CA, is a passionate front-end developer and designer who recently launched a CSS Gallery called Design Bombs. He specializes in CSS driven web design with an emphasis on usability and search engine optimization. For more front-end Web development tutorials, check out his Web design blog.

  1. 1

    Nice, but very basic.
    Everyone could figure this out with a bit of logical thinking.

    -14
  2. 2

    Sorry to say this but i’m not really impressed by this post.. Not really smashworthy.

    0
  3. 3

    We’ll leave the advanced and innovative CSS techniques to you then, shall we? This blog’s for every one; not seasoned front-end developers who I’m sure aspire to have your mastery.

    13
  4. 4

    simple yet inspiring, thanks a lot!

    1
  5. 5

    Hi Soh,
    You wrote, “Please notice that using jQuery for presentational purposes is certainly not a good idea and contradicts the strict separation between the presentation and behaviour layers, but it does solve the problem nevertheless and is therefore worth mentioning in this context.”

    I agree that separation of concerns is important. As a bit of progressive enhancement, though, I don’t think the jQuery solution is that bad. After writing those posts, I put together a drop-cap plugin 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.

    Of course, the simplest solution would be to use the :first-letter CSS pseudo-element. According to PPK’s compatibility chart, it’s fairly widely supported. The main drawback to this is that you can’t have different styles based on which letter it actually is (e.g. if you wanted to use an image sprite and have different background-position based on the letter).

    0
  6. 6

    Darren Azzopardi

    November 23, 2009 5:09 am

    Well done on getting this together Soh. But expect a backlash in your first example. The time line looks like a list would have been a propriate. All the semantic gang will be on your back now.

    Again, well done for making the time to create an article.

    0
  7. 7

    Very very useful, Soh! Thank you very much! More similar articles, please!

    1
  8. 8

    Very nice. Thanks.

    1
  9. 9

    Webstandard-Team

    November 23, 2009 5:25 am

    For “Designing a Slick CSS Timeline” I would prefer a definition-list ( dt – 2009, dd – the lorem ipsum text ). Easier and with a touch of semantic?!

    0
  10. 10

    nice! (simple is nice a too!)

    1
  11. 11

    Agree with Baas.

    -4
  12. 12

    Smashing Editorial

    November 23, 2009 6:27 am

    Hi Karl,

    actually, this sentence was added by the Smashing Editorial team, not by Soh. Thank you for the detailed explanation! The article was updated.

    1
  13. 13

    nice tip

    :)

    0
  14. 14

    Agreed using jQuery for presentational purposes is perfectly acceptable, so long as it degrades gracefully. Sometimes css alone will not do the job so you need jQuery to intervene. For example, I have a site where an image sometimes floats to the right of the h1. Where there is no image the h1 expands the full width of the content area. This is done using jQuery by adding a class. Not a good idea? I happen to think it’s great and improves the readability of the page.

    0
  15. 15

    Nice article. Ref custom page style in WordPress , liked it so much that I hacked together a small plugin. Youl’ll find it at: http://www.soderlind.no/code/view/custom_style.php :)

    0
  16. 16

    Agreed, or at the very least an OL. Can’t really get more “ordered” than time.

    0
  17. 17

    Wow, that was fast! Thanks for the reply and the update.

    0
  18. 18

    Russell Heimlich

    November 23, 2009 7:36 am

    It’s worth mentioning you can do a drop cap effect without any extra HTML if you’re willing to ignore IE6 which doesn’t support the :first-letter pseudo class -> http://pixelspread.com/blog/324/easy-drop-caps

    Cool tricks. I think front end developers should share more tips and tricks like this so we can weed out bad practices. Here are a list of some of my favorite front end tips and tricks http://www.russellheimlich.com/frontend-tips/

    0
  19. 19

    There are only five solutions, as there is no number 3.

    0
  20. 20

    This comment wasn’t needed. Basic, a little, but not everyone is at the same elite coding level as you are.
    Soh, I like how you broke everything down so clearly. Articles like this really help me imagine bigger and better things for my websites.
    Thank you

    6

↑ Back to top