10 Useful CSS/JS-Coding Solutions For Web-Developers

Advertisement

Often creative and truly remarkable design solutions remain unknown because we, designers, simply overlook them. Being busy with our own projects, we sometimes try to grasp the intuition behind (probably) complex and cluttered code of other designers to understand how they manage to implement particular design ideas. In fact, by just observing the code of other developers we can learn a lot from them; we can find interesting ideas and improve the quality of our work.

Over the last months we’ve been paying closer attention to interesting design techniques and coding solutions and tried to understand how each of these solutions work and how they can benefit other designers and developers. Such designs are often hard to find, so it would be great if you could suggest some solutions that are worth exploring in detail – we’ll certainly cover them in our next posts!

So let’s take a closer look at 10 useful CSS & Javascript techniques and coding solutions that can turn out to be useful for your next project. You should have at least a basic knowledge of CSS and JavaScript before you read the entire article.

You may be interested in the following related posts:

1. Inline Content Imagery

When viewing a blog post or an online article, we typically tend to find that most images which are “dropped” into the story’s actual content are often presented in a boring or bland manner.

However, it is actually quite easy to create attractive content imagery that maintains a strong sense of design and branding, yet still manages to flow naturally with the content of your site. UXBooth5 provides a clean and elegant example of this technique (scroll down until you see a silverback). In the screenshot below, notice how the Silverback6‘s image sits naturally in-line and in flow with the content on the page.

UxBooth Silverback7
UxBooth’s Inline Content Imagery in Action

How Is It Done?

At the first glance the silverback looks like a background image that has been positioned in the center of the content column with CSS or JavaScript (or a combination of the two); however, this is a pure CSS solution. A div wrapping the image of the silverback (a simple .png-image8) is floated to the right. Immediately after that in the HTML comes a paragraph and an ordered list. The “silverback”-div has a left-margin of 47px which keeps the p tag and the ol tag’s content from overlapping the image, thus providing good visual spacing and overall page flow.

HTML

<h3>Contest Details</h3>

<div class="imagery"">
  <img src="imagery.png" width="205" height="400" alt="Imagery" />
</div>

<p>...the introductory paragraph...</p>

<ol>
  <li>...various bullet points went here...</li>
</ol>

CSS

.imagery {

 /* The image is floated to the right */
  width: 205px;
  float: right;

 /* The image is positioned precisely, 
    by pushing it 20px from the right border */
  margin-right: -20px;

/* The image is pushed away from the text
    (to the right) with a left margin of 47px */
  margin-left: 47px;
}

2. Typographic Tricks

CommandShift39, self proclaimed hot-or-not of websites, uses an interesting typographic trick to display the vote results for each website in which you have submitted a vote. Obviously, this effect is achieved using only CSS.

Typographic Percentages10
Nice typographic effects to show percentages of votes

How Is It Done?

Each result line contains a “winning percentage”-div + screenshot as well as a “losing percentage”-div + screenshot (the image below should make it clear what is meant here). Each of the percentages blocks is given a width that is slightly smaller than the width it needs to display its full text. Besides, the CSS attribute overflow:hidden is applied to hide the content that is not needed.

This is all the code necessary for the “winning percentage”-div. The “losing percentage”-div gets the same bit of code with the addition of a negative margin to make it appear to slide behind the losing site’s thumbnail.

Typographic Percentages11

HTML

<div class="bar"> 
  <div class="screen-left loser choice">
  <div class="pct">
    <div>46<span>%</span></div>
    </div>
    <div>
      --the image goes here--
    </div>
  </div>
  <div class="screen-right winner">
  <div>
    --the image goes here--
  </div>
    <div class="pct">
      <div>54<span>%</span></div>
    </div>
  </div>

  <div class="legend">
      --You voted for text goes here--
     </div>
</div>

CSS

.result .pct {
  float:left;
  height:80px;
  margin:0;
  overflow:hidden;
  padding:0;
  white-space:nowrap;
  width:95px;
  }
.result .screen-left .pct div {
  margin:28px 0 0 10px;
  float: left;
  }
.result .loser .pct div {
  color:#84C3FF;
  } 
.result .pct div span {
  display:inline;
  font-size:55px;
  }
.result .screen-right .pct div {
  margin:28px 0 0 -8px;
  float: left;
  }
.result-first .pct div {
  color:#FFFFFF;
  }

3. Inline Informational Overlays

This 31three.com version of myfamily.com12 has an interesting use of icons sprinkled throughout the body text. If you roll over the calendar icon an informational overlay (very similar to a tooltip) is displayed – the latter one shows a graphic of what your potential calendar would look like when you sign up with myfamily.com. Notice the transparency effect and the arrow on the left side of the appearing block.

My Family Overlay13

How Is It Done?

When a user mouses over the calendar icon, JavaScript is used to show a hidden div that contains a transparent .png-image14. When your mouse moves away from the calendar icon, the div is hidden again. This particular example doesn’t use a JavaScript framework like jQuery or Prototype, instead it uses two custom functions to hide and show the div accordingly.

Please notice that this code does not adher to good coding practices as it does not separate JavaScript functionality from the styling of the site. You should never include Javascript events as inline attributes and this example is rather a quick prototype. It is better to encapsulate the JavaScript code in a single .js-file and embed it on your web page using the <script>-tag. Read more in our article jQuery: Examples and Best Practices15.

HTML

<div id="hover" onmouseover="showLayer('image')" onmouseout="hideLayer('image')"> </div>

<div id="image" style="visibility: hidden;">
  <img src="img/event_hover.png" alt="image" height="" width="">
</div>

Javascript

function showLayer(layerName, shadowLayerName)
{
    if (document.getElementById) // Netscape 6 and IE 5+
    {
        var targetElement = document.getElementById(layerName);
        targetElement.style.visibility = 'visible';
    }
}


function hideLayer(layerName)
{
   if (document.getElementById) 
   {
       var targetElement = document.getElementById(layerName);
       targetElement.style.visibility = 'hidden';
   }
}

4. Product Highlighting

Basecamp16, a 37signals product, chooses to highlight its most popular product plan in order to draw attention to it and hopefully create more conversions of visitors to customers. The featured product plan also has the added bonus of Javascript tooltips to offer more detail to the highlighted product features. Please notice that each link has its own tooltip that appears on the right hand side when a text link is hovered.

Featured Product Plans for Basecamp17
Featured Product Plans for Basecamp

How Is It Done?

The team at 37signals choose to use Prototype.js and CSS to achieve the tooltip effect, while relying on pure CSS to highlight the featured product plan. Each of the plans resides in its own div, with a class “short”; the highlighted plan replaces the short class with a class “tall”.

The divs to the left and right of the highlighted plan have additional CSS classes added to them to provide shadows on their left and right hand sides to give the appearance that the featured plan is rising off the page. The Javascript, written using prototype.js18, listens for each of the product features to be hovered over. When a feature is hovered over, the tooltips are all hidden, and then the appropriate tooltip is shown.

Featured Product Plans for Basecamp with Tooltip19
Product Plan Tooltips in Action

HTML (for the highlighted plan)

<div class="tall">
         <h1><a href="https://signup.projectpath.com/signup/Plus">Plus</a></h1>
         <h2>$49/month</h2>

         <h3>Most popular plan</h3>
         <ul class="highlight" style="margin-top: 12px;">
           <li>
             <a href="#" onclick="return false" class="hover_target" hover_container="users_bubble"><strong>35</strong> projects</a>
             <span class="hover_container" id="users_bubble">
               <div class="bubble hover_target"><div class="wrapper"><div class="content"><div class="inner">
                 <div class="arrow"></div>

                 <h2>What are active projects?</h2>
                 <p>..Content for the tool tip...</p>
               </div></div></div></div>
             </span>

           </li>
          ...code repeats for all product bullet points...
         </ul>

         <a href="https://signup.projectpath.com/signup/Plus" onClick="return ConversionCount()"><img src="/images/btn_signupchart_large.png" width="113" height="45" alt="Sign Up" />
       </div>

CSS

body.signup4 div.tall {
  background-color:#FFFFFF;
  border:3px solid #3671A1;
  float:left;
  font-family:helvetica,arial,sans-serif;
  height:310px;
  padding:8px 10px 10px;
  text-align:center;
  width:220px;
}
body.signup4 div.tall h1, body.signup4 div.tall h1 a {
  color:#000000;
  font-size:42px;
  line-height:1em;
  margin:0;
  padding:0;
  text-decoration:none;
}
body.signup4 div.tall h2 {
  color:#000000;
  font-size:24px;
  font-weight:normal;
  margin:0 0 2px;
  padding:0;
}
body.signup4 div.tall h3 {
  border-bottom:1px solid #CCCCCC;
  color:#4582B5;
  font-size:16px;
  font-weight:bold;
  margin:0;
  padding:0 0 4px
  text-transform:uppercase;
} 
body.signup4 a.hover_target {
  border-bottom:1px dotted #888888;
  color:#64503F;
  margin-left:6px;
  text-decoration:none;
}
body.signup4 div.tall li strong, body.signup4 div.short li strong {
  color:#C33700;
}

Javascript

37Signals created a custom class HoverObserver (see the .js-snippet20) that uses the functionality from prototype.js. Note that there are other ways to achieve this same effect.

5. Sliding Menus

The portfolio section at Clear Focus Designs21 contains a nice menu on the right hand side of the page that follows you as you scroll down. This sliding menu with JQuery and CSS is an effective way to display a long list of information and still present a constant navigation choice to website visitors.

Sliding Menu Screenshot22
This menu detects when the page scrolls and follows it

How Is It Done?

This page uses a jQuery plugin called scrollFollow23 which allows a specified div to follow the page as the user scrolls through the page. In the Clear Focus Designs example, the right hand menu is being told by this plugin to follow the page.

HTML

<ul id="sites">
        <li><a href="#copperStone">CopperStone Partners<br />
          <span class="projectDesc">Development</span></a>
  </li>
        <li><a href="#vmg">Visionary Marketing Group<br />
          <span class="projectDesc">Development</span></a>
  </li>
  ...code repeats for all menu items...
  </ui>

Javascript

$( document ).ready( function ()
{ 
  $( '#ourWork' ).scrollFollow(
    {
      speed: 1000,
      easing: 'linear'
    }
  );
}
);

6. Authors "Flagging"

Placing avatars next to an individual's post in a comment thread is quite a common practice. UxBooth24 (again) has taken comment flagging a step further by allowing a user's thumbnail to float outside of his/her comments in the article. This allows a user to quickly scan the page and know who posted a response on that page. UxBooth does approach this method a little differently,25 as the article is written by several different authors. Using this 'flagging' method helps a user identify which author contributed which part of the article.

UxBooth Flags26
UxBooth's Using comment 'Flags' to show which author wrote the comment

How Is It Done?

On UxBooth, each author has his/her own div with a class named after the author. For example, the author, Andrew, has an author div with a class "author andrew". The "author" class sets up the basic styling that is common among all authors comments. The div is placed in the document using the relative positioning within the document's flow.

Inside of the div there is an image with a class of "avatar". The "avatar" class is positioned absolutely within the relatively positioned parent-element (using the classic Making the absolute, relative27-CSS-technique). The image is given a top value of 0, with a left value of -54px. Essentially, this technique sucks the image out of the content column and lays it over the container background color/image.

HTML

<div class="matt review-quote">
<p>...The user's comment went here...</p>
<p><img class="avatar" src="/images/matt.gif" alt="Matthew Kammerer"></p>
</div>

CSS

div#ux-booth div#content div.matt.review-quote {
  border-color:#FF9F26;
}
div#ux-booth div#content div.review-quote {
  border-left:6px solid #D8C9A1;
  margin:0 -21px 0 -24px;
  padding:0.5em 21px 1.5em 20px;
  position:relative;
} 
div#ux-booth div#content div.matt.review-quote img.avatar {
  border-color:#CC7200;
}
div#ux-booth div#content div.andrew.review-quote img.avatar{
  -moz-border-radius-bottomleft:9px;
  -moz-border-radius-topleft:9px;
  background:#888888 none repeat scroll 0 0;
  border:4px solid #4B6500;
  left:-54px;
  position:absolute;
  top:0;
}

7. Archive Page Layouts

Warpspire uses a different approach when it comes to the layout of their archive page28. Instead of a long list, they've chosen to use a column approach underneath each month in the archive.

Sliding Menu Screenshot29

How Is It Done?

Each entry in the archive contains a h3- and a p-tag inside of a listed item li. Each even numbered li is floated to the left, each odd numbered li is floated to the right. And that's it – as simple as that.

HTML

<div class="section-heading-small">
    <h2>February 09</h2>
</div>
<ul class="archives">
    <li class="odd">
      <h3>...title of archived article...</h3>
      <p>...summary and read more link for article...</p>
    </li>
    <li>
      <h3>...title of archived article...</h3>
      <p>...summary and read more link for article...</p>
    </li>
</ul>

CSS

ul.archives li.odd {
  clear:both;
  float:left;
  padding-right:20px;
}
ul.archives li {
  float:right;
  font-size:11px;
  list-style-type:none;
  margin:0 0 20px;
  padding:0;
  width:270px;
}

8. Transparent Rounded Rollovers

This is an example of another archive layout, this time from Particletree30, which uses transparent pngs as article title rollover backgrounds.

Transparent Rollovers31
Transparent Rollovers at ParticleTree

How Is It Done?

Each article title is placed inside of a h3-element that has an anchor (a) inside. The a tag has a transparent .png-background image that has its background-position shifted on hover as well as a background color.

The .png-image is positioned to the right hand side and sits above the tree image. The background color fills the space between the two, creating the illusion of 3D-dimension (the content block appear to be in front of the "tree"-image). Each link also uses CSS-based rounded corners (using -moz-border-radius).

HTML

<div class="red headline">
  <h3>
  The Importance of Design in Business
    <cite><b>By Chris Campbell</b> · Comments (<strong>15</strong>) · August 14th</cite>
  </h3>
</div>
  ...code repeats...

CSS

#features .red a:hover {
  background-position: 498px -30px;
}
#features .red a:hover{
  background-image:url(/images/fadetree.png);
  background-repeat:no-repeat;
}
#features[id] h3 a {
  height:auto;
  min-height:66px;
}
#features h3 a {
  -moz-border-radius-bottomright:30px;
  -moz-border-radius-topleft:30px;
  font-size:210%;
  height:66px;
  padding:11px 15px 3px 105px;
}
.red a:hover, a.red:hover {
  background:#5E2510 none repeat scroll 0 0;
  color:#FFFFFF;
}
.red a, .red cite strong {
  color:#843418;
}
h3 a {
  display:block;
  text-decoration:none;
}

9. Blending Flash and CSS

HunterBoot.com32 has wonderfully constructed black and white imagery on their homepage panel. This imagery is a part of a Flash movie that contains not only the imagery, but also nice hover-effects for the link lists at the bottom of the layout. See the screenshot below for a better understanding of what is going on structurally. When you mouse over one of the links in the four columns below the main image panel, you get a nice animated rollover in the background of that column.

Transparent Rollovers33

How Is It Done?

At first glance it appears that this is some type of jQuery plugin or something similar. However this is a pure CSS-based solution that uses Flash-elements for hover-effects. This technique starts out with some markup. There is a main div that contains the Flash movie (inside a containing div), then four distinct divs, one for each of the sections.

These four divs have a heading and then an unordered list containing the individual links. The main containing div is positioned relatively to its parent. These four URLs are positioned absolutely inside of the relative main container div – this puts the URLs on the top of the Flash movie. When you move your mouse over the four implied columns, this triggers a rollover animation in the Flash movie, because your mouse is actually over the Flash movie. Since the links sit above the Flash you can still click on them with no unfcomfortable side effects.

HTML

<!-- the flash container -->
  <div id="featurePanelHomeFlashBoxCntr">
     ...the flash movie is inserted here via SWFObject...
     ...it's important to note that the .swf's wmode is set to transparent...
  </div>
  
  <!-- the product category links -- >
  <div class="homeFlashListFun">
  <ul>
    <li><a href="/product/link/goes/here" >Link Text</a></li>
    ...repeat li's for each link
  </ul>
  </div>
  <div class="homeFlashListSport">
  <ul>
    <li><a href="/product/link/goes/here" >Link Text</a></li>
    ...repeat li's for each link
  </ul>
  </div>
  <div class="homeFlashListWork">
  <ul>
    <li><a href="/product/link/goes/here" >Link Text</a></li>
    ...repeat li's for each link
  </ul>
  </div>
  <div class="homeFlashListKids">
  <ul>
    <li><a href="/product/link/goes/here" >Link Text</a></li>
    ...repeat li's for each link
  </ul>
  </div>

CSS

.featurePanelHomeFlashBox { margin: 0px; padding: 0px; float: left; height: 528px; width: 720px; position: relative; }
#featurePanelHomeFlashBoxCntr { width: 720px; height: 528px; position: absolute; top: 0px; left: 0px; background: #ffffff; z-index: 300; }
  
---This chunk of CSS is repeated for each of the lists, with the difference being the positioning of the ul---
.homeFlashListFun ul { position: absolute; top: 380px; left: 15px; z-index: 599; width: 100px; background: transparent; list-style: none; list-style-image: none; list-style-type: none; margin: 0px; padding: 10px 0px 0px 0px; }
.homeFlashListFun ul li { margin: 0px; padding: 0px 0px 6px 0px; background: transparent; text-decoration: none; line-height: 1em; }
.homeFlashListFun ul li a { text-decoration: none; color: #999; font-size: 0.95em; letter-spacing: -0.00em; background: transparent; }
.homeFlashListFun ul li a:hover { text-decoration: underline; color: #bf0000; }

10. Popular Tags Graphs

Ogilvy34 chooses to display their popular tags with a graph-like background (scroll all the way to the bottom to see the "Top 5 Tags").

Popular Tags35

How Is It Done?

The tag list is a simple unordered list; each list item has an inline style with a hard coded width given to it (not really a good coding solution). This seems like it is coming from a server side calculation and being outputted inline on the element. Oglivy uses PHP, but this could be done in pretty much any server side language, or it could even be done with JavaScript if necessary. Each of the li's has its own background color and because they all have different widths this gives the appearance of a graph.

HTML

<ol class="transGreen">
  <li style="width: 242px">
    <a href="" style="display:block;width:100%;color:#fff" class="tag tag_1">work</a>
  </li>
  <li style="width: 216px">
    <a href="" style="display:block;width:100%;color:#fff" class="tag tag_2">philosophy</a>
  </li>
  <li style="width: 153px">
    <a href="" style="display:block;width:100%;color:#fff" class="tag tag_3">agency</a>
  </li>
  <li style="width: 104px">
    <a href="" style="display:block;width:100%;color:#fff" class="tag tag_4">culture</a>
  </li>
  <li style="width: 77px">
    <a href="" style="display:block;width:100%;color:#fff" class="tag tag_5">maslow</a>
  </li>
</ol>

CSS

#top5 li a.tag {
  padding: 1px 5px;
  margin-bottom: 2px;
  color: #fff;
  text-transform: uppercase;
  font-weight: normal;
}

#top5 li a.tag:hover { background: #000; }

.tag_1 { background: #c12; }
.tag_2 { background: #990000; }
.tag_3 { background: #ee6666; }
.tag_4 { background: #ee2222; }
.tag_5 { background: #cc6666; }

What coding solutions should we cover next?

Please feel free to suggest interesting, unusual, creative, advanced techniques in the comments to this post! We'll do our best to take a closer look at them and explain them in details in one of our upcoming posts!

Related posts

You may be interested in the following related posts:

↑ Back to topShare on Twitter

Justin Johnson is Rich Media / UI Developer at E-dreamz an established Web Development company in Charlotte, NC. He spends his days meticulously hand crafting CSS and Javascript as well as tinkering with PHP, MySQL, SQL, ColdFusion & Flex. Justin spends his spare time with his wife and son.

  1. 1

    Awesome! Excellent list, very useful.

    0
  2. 2

    Good list.. =)

    0
  3. 3

    hey great stuff here. I really want you guys to do this one. I tried looking at the js code but its all jumbled up and confusing to look at. here’s a link to it: http://www.rezoactif.com/ you have to click clients and the slider will appear.

    0
  4. 4

    Thanks for the shoutouts to UX Booth. <3 Andrew for his awesome CSS and design!

    0
  5. 5

    Quite a usefull list, I like these quality posts unlike the ” tools for mac ” posts :P

    0
  6. 6

    The MyFamily (#3) could be done with strict code:

    (I replace the tag-brackets by () in order the code does not get interpreted)

    (p)bla bla bla (a href=”#”)(img src=”cal-icon.png /)(span class=”calendar”)Here the calender content as text(/span) bla bla bla(/p)

    Set .calendar to “display:none” and “display:block” on hover. Absolute positioning, text-indent -9999px and the big calendar-png as background, moreover fixed width and height according to the png.

    By doing so, machines can read the content of the calendar which is not the case on MyFamily. Even the plain text is no real text.

    0
  7. 7

    Good article. But “However this is a pure CSS-based solution that uses Flash-elements for hover-effects.” sentence is not true. It is Flash not pure CSS.

    0
  8. 8

    I like this list, but I have to make a comment about Command Shift 3. I went through some of the sites and how can these sites be judged by first look?? This post is called 10 Useful CSS/JS-Coding Solutions For Web-Developers, yet Command Shit 3 is a “hot or not” for websites, so I have to disagree with this post in regards to Command Shift 3, mainly because that site is geared 100% towards just first looks, not relevant to useful CSS/JS-Coding Solutions. Other than that great post

    0
  9. 9

    This is the first time I’m gonna say a post on Smashing Magazine is ‘smashing’,because this one is!

    0
  10. 10

    I really enjoyed this post! Stimulated my designer brain just perfectly and proves once more that there is still so much to discover in the world of web design.

    0
  11. 11

    great post.

    I would like to see coding solutions for flash and html aligning techniques

    0
  12. 12

    I wish to see 90 more solutions like this. Very excellent list!

    0
  13. 13

    unlike the other comments i really dislike this post. Its not the worst i have read on SM but this is just for beginners.

    Everthing used in this post is or 1) plain basic and nothing spectaculair, which you suggested in the opening.

    Often creative and truly remarkable design solutions remain unknown because we, designers, simply overlook them

    2) it is nothing new. the topic about the basecamp firm is like talked about for 100 times.

    In my opinion posts like this make the community more for beginners and not those who allready standartly implement these kind of teqnics.

    (apologize for my not to great english)

    0
  14. 14

    Nice selection of 10.

    0
  15. 15

    Love these posts!

    0
  16. 16

    Item 1 – Are you serious? If anyone didn’t know how to float an image right they wouldn’t be reading this website. I also didn’t like the example, it doesn’t work in IE6 and there’s no reason why it shouldn’t, just bad design.

    The my family.com website gets the thumbsdown for the same reason, there’s no reason not to make a version that works in IE6, just use a different style sheet that replaces the pngs with gifs or jpgs.

    At least articletree.com had an alternate version, but given the layout is fixed there’s no reason not to create a gif version of the site, the user wouldn’t notice the difference.

    It’s one thing to use the latest browser techniques but you need to look at user stats and realise just how many nuffnuffs there are out there with old browsers. Thecounter.com says a THIRD of the internet is still IE6.

    0
  17. 17

    Meh.

    Terrible markup on more or less all examples.

    0
  18. 18

    inline CSS and javascript? non-standard CSS? non-semantic HTML?

    poor post :(

    0
  19. 19

    Francis Belisle

    July 6, 2009 6:03 pm

    @Okibi

    Your very pretentious. I’m a web developer/designer since many years and i’m helping a lot of young and inexperienced web prospect.

    Smashing is for everyone and we’re lucky to have a smashing resource. (Skilled or not). Since the beginning Smashing Magazine are the best web magazine by far offering us on regular base a huge collection of professional posts.

    Please stop complaining or join the Dukmar Shift club : « i’m just wanna be popular by giving my negative opinion on everything »

    Comments are important, but don’t discriminate beginners or novice web designer.

    Be positive
    :)

    0
  20. 20

    Some useful examples in there. For those who didnt see it already, the first example can also be achieved by applying the float to the image itself – thus avoiding the additional div markup. love the product highlighting example – going to find its way into my work somewhere for sure.

    @Franics – seconded. Too much of that around here lately.

    0
  21. 21

    Good post, and because you asked, I’m going to through my obscure pain in the ass dev problem on the table:

    I’m building a website to sell independent films – huge files kept on an Amazon S3 server. I set the MIME Type to force downloads, which appeases IE6, Firefox, Safari, Chrome, etc. IE7 and 8 still insist on disregarding MIME Type and try to open a 2GB file in QuickTime.

    The typical solution is to use a PHP download script, but those would funnel the file through the “slow” server, which would kill the download speed.

    Good luck.

    0
  22. 22

    Great article .. some nice items that can be used in all sorts of places.

    How about “large sub-nav” menus like the one the Chicago Bears site

    0
  23. 23

    Is it possible for you to cover SilverLight based website solutions?

    0
  24. 24

    Great post! More like this

    0
  25. 25

    it was a very pleasant reading. Thank you Justin. I enjoy these type of articles. I’d like to see more on the same theme, since HTML CSS and Jquery seem to be the base of the majority of websites these days.

    I never used SilverLight so I don’t know if Harish’s proposal is really great.

    All the best!

    0
  26. 26

    Nice little commercial show!

    And floating pics is nothing new or hard.

    0
  27. 27

    This is great. Thanks for sharing

    0
  28. 28

    awesome list. Thanks a bunch!

    0
  29. 29

    I wish you showed us those examples and offered a better solution for achieving them. I have been learning html and CSS for two months now, and I can do a much better job then some of the examples. This leads me to the conclusion that the author and maybe the editor are not very experienced, or just needed a quick material for the Monday’s post.

    Also why was example 10′s inline style a bad coding solution? Did you mean using % instead of pixels, or there is a better way. I would be interested to see it. Thanks

    I liked example #6. The pictures do not appear on a small screen size due to the negative positioning, which is cool.

    Is there a way to make #5 scroll only when the lower part of the element is above the fold. This could be helpful for dynamic menus, where the height could be unpredictable.

    0
  30. 30

    Jay (blaszta.com)

    July 6, 2009 11:10 pm

    Interesting! Not all is new, but still good to refresh the memory :-)

    0
  31. 31

    great post. Thanks

    0
  32. 32

    Great article … particularly the Hunter Boot reference (hee hee). The guys in the studio were pretty pleased with themselves after seeing it this morning!

    0
  33. 33

    Great article!

    My only concern is that in some of the examples you say that they don’t adhere to good goding practices but then don’t display a possible, more standards compliant workaround.

    Also… what I’d love to see is a breakdown of how the vines are done on the silverback site. You resize the browser along the X and the vines move in different ways, give it a go. :)

    0
  34. 34

    @Emil if you don’t know why inline style is a bad idea, you’re nowhere near as experienced as you think you are.

    0
  35. 35

    Are all these techniques compatibles with all browsers including the pain-in-the-ass IE6? Would be nice if in next article you precise the supported browsers for each of your tricks.
    Nice post however.

    0
  36. 36

    This post just yells hidden advertisement :))

    0
  37. 37

    one of the worse articles i’ve read on smashing magazine; number 1 in particular is terrible…
    quote:
    “At the first glance the silverback looks like a background image that has been positioned in the center of the content column with CSS or JavaScript (or a combination of the two);”

    what?! at first glance it looks like an image floated to the right (if it was a background the text would overlap it)…. i mean common … among the first things you learn is to float images in the content

    0
  38. 38

    sry but 8. Transparent Rounded Rollovers in IE rounded dont work :)

    0
  39. 39

    How to make website plz

    0
  40. 40

    Jacob McDaniel

    July 7, 2009 6:21 am

    Would love to see an in depth tutorial on WordPress, start to finish from PSD to approving comments. I have seen some good starts but never seem to find one that goes far enough in depth for a designer.

    Thanks so much and keep the tuts coming!

    0
  41. 41

    I really enjoy the ability to create css styles with php allowing for the dynamic creation of the visuals of sites. It still seems that few people know this is a possibility. Its great because it opens up so many more options for the dynamic aspect of web design.

    0
  42. 42

    Great article and nice list of tips. I suggest jquery in depth article next time. ;-)

    0
  43. 43

    This was a very inspirational post, I sincerely enjoyed the examples. Especially #5 (Sliding Menus ) . I find it amazing what you can do with just a little javascript . Keep it up !

    0
  44. 44

    Great list! All seem very useful.

    0
  45. 45

    Thanks Justin, really usefull…

    0
  46. 46

    Thanks for sharing, I am learning html and css. This post will help me to learn more.

    aR
    Bangla Blog Tips

    0
  47. 47

    Thanks for sharing. It will be useful for my css learning

    aR
    banglablogtips.blogspt.com

    0
  48. 48

    Authors “Flagging”
    When resize browser with small size, the avatar will disappear :). That’s not good enough.

    0
  49. 49

    Nice article. One “super cool” and super helpful information you could add in this type of articles is compatibility issues: “How well do these visual tricks work among different browsers?”

    0
  50. 50

    I thought this was a great post. sometimes it is good to see things applied to a project and how it was done, and how someone utilizes them.

    0
  51. 51

    @Francis Belisle you call me pretentious for pointing out very obvious issues caused by using the examples given. Issues that effect 1/3 of internet users.

    You say that you help lots of young designers, point out one example of mine that isn’t helpful to other designers?

    Comments are here for feedback, not for people to begin name calling or flame wars just because they disagree with the professional opinion of others.

    I love smashing and I support it’s writers, I was doing my best to help them in the education process.

    0
  52. 52

    Tejendra Shandilya

    July 7, 2009 7:58 pm

    good post

    0
  53. 53

    Cool man!

    0
  54. 54

    Quote:

    “Silviu (July 7th, 2009, 2:53 am)

    This post just yells hidden advertisement :))”

    Just as I said.

    0
  55. 55

    Hi,

    some more useful div and css tricks.

    How to add a youtube style play button or a transperant title overlay of an image.

    Also soem tips on making a table like grid with divs is always useful.

    0
  56. 56

    This is quite a misleading article i would say.

    @Okibi
    I totally agree with you. Fixing IE is crucially important, at least IE7. But the floating technique shown at no1 just doesnt work.

    @Francis Belisle
    “Be positive”? Giving personal opinion is “be positive” to you?

    Indeed Smashing magazine is a fantastic site for all sort of programmers, i read (almost) all their articles, and the Item no1 and Item 8 is NOT A GOOD WAY FOR BEGINNER to start with. They will sink even deeper.

    We are here to give our opinions to the author, hoping a better fix to this article.

    @Author
    Anyhow, its a great article. I like the format:

    {title}
    {example}
    {explanation}
    {solution}

    Good job!

    0
  57. 57

    thx you for usefull article

    0
  58. 58

    Why are you guys all over Silverback’s nuts? It seems like you post an article referring to their website every week.

    0
  59. 59

    This is very interesting,i see why is difficult for me to choose software development over web development.You know what web development comes with flair

    0
  60. 60

    @Peter Yee

    Thanks. :)

    0
  61. 61

    thanks for the post..

    0
  62. 62

    Cool article! jQuery slideshows are popping up left and right lately, it would be nice to have a post on designing a bunch of different types of slide shows.

    0
  63. 63

    Great article as always..
    Is there anyway to play a continuous background music on a website without stop/restart between pages using jquery? I know music is not popular. Still…
    Thanks a million.

    0
  64. 64

    simply amazing. XD

    0
  65. 65

    this is very good,very usefull

    0
  66. 66

    This is great! Can’t wait for more.

    0
  67. 67

    this is totally amazing list, nice and clean code. i really love your article totally useful. I appreciate your effort!

    0

↑ Back to top