Blog

CSS Techniques for Horizontal Rules

I like to use HR tags. I use the technique in the first example below, but occasionally want a nicer separator, and hate having to use a graphic to show that chiseled aqua-style divider or to created the faded line of a gradient. Examples 2 and 3 use background gradients in webkit and mozilla. All versions of IE just show the solid rule.

Normal

Demo


HTML & CSS

<hr />


hr {
  background: #ddd; 
  clear: both; 
  float: none; 
  width: 100%; 
  height: 1px;
  margin: 0 0 1.4em;
  border: none; 
}

With Faded Edges

Demo


HTML & CSS

<hr class="faded" />


hr.faded {
  clear: both; 
  float: none; 
  width: 100%; 
  height: 1px;
  margin: 1.4em 0;
  border: none; 
  background: #ddd;
  background-image: -webkit-gradient(
      linear,
      left bottom,
      right bottom,
      color-stop(0, rgb(255,255,255)),
      color-stop(0.1, rgb(221,221,221)),
      color-stop(0.9, rgb(221,221,221)),
      color-stop(1, rgb(255,255,255))
  );
  background-image: -moz-linear-gradient(
      left center,
      rgb(255,255,255) 0%,
      rgb(221,221,221) 10%,
      rgb(221,221,221) 90%,
      rgb(255,255,255) 100%
  );
}

Carved

Demo


HTML & CSS

<hr class="carved" />


hr.carved {
  clear: both; 
  float: none; 
  width: 100%; 
  height: 2px;
  margin: 1.4em 0;
  border: none; 
  background: #ddd;
  background-image: -webkit-gradient(
      linear,
      left top,
      left bottom,
      color-stop(0.5, rgb(221,221,221)),
      color-stop(0.5, rgb(255,255,255))
  );
  background-image: -moz-linear-gradient(
      center top,
      rgb(221,221,221) 50%,
      rgb(255,255,255) 50%
  );
}

Being Without Chasing: The Grateful Dead vs. The Top 40

Seth Godin's blog entry, "The Grateful Dead and the Top 40," looks at a band that only ever had 1 "hit record," but who were very succesful at what they did. They may have not hit the Top 40 more than once, but one thing is true, they knew themselves as artists, and were true to that.

In terms of chart success, Elton John is probably the polar opposite of The Grateful Dead. He's #2 on the list of most hits on the Billboard Top 40. The Grateful Dead and Elton John are very different artists and have sold records to very different audiences. Elton John has a bigger share of the mainstream and the Billboard charts. I would doubt that either of those attributes were ever a goal of the Grateful Dead, yet they commanded a loyal following who connected with them, and got their music to millions of fans through record sales, touring, and the bootlegs.

I'm not a fan, but so many of my friends in college were that I couldn't help but be aware of the phenomenon that is the Dead. Yet to the mainstream pop music listener, they may seem like small potatoes, and I've heard a few people in my time dismiss their music without acknowledging the rarity of their following.

Dismissive criticism was probably a much easier thing to avoid before the Internet. Godin points out that social media today makes it easy to notice the passing mutterings of the critics who aren't clued in to what makes you special in the market. To those finding themselves receiving this kind of attention and wanting to be reactive in order to reach Elton-status, he offers this advice.

The next time you have a choice between chasing the charts (whichever charts you keep track of) and doing the work your customers crave, do the work instead.

Doing important work on a product that isn't on the charts might be tough. You might be doing work that goes unseen compared to products that are easily noticeable and press-worthy. Every product is going to find a critic. If you're making a product, being Elton-famous shouldn't be your goal. Knowing yourself and your product, and being true to that are better ways of doing something meaningful.

Via Seth's Blog: The Grateful Dead and the Top 40.

http://sethgodin.typepad.com/seths_blog/2011/06/the-grateful-dead-and-the-top-40.html