Blog

This notepad table is the coolest little piece of furniture. Looks like it was made for kids. Furniture you can draw on would be great in any studio lounging and waiting areas.

Via @balsamiqVal

http://www.flickr.com/photos/49333842@N00/2108954609/

Chance favors the connected mind.

I just picked up Steven Berlin Johnson's Where Good Ideas Come From after watching this sketch-note summarization of the ideas in the book.

I became a fan of Steven's after reading the New Yorker article "Watching TV Makes you Smarter" and his book, Everything Bad is Good for You. This one looks like it will be an interesting read. I'm hoping it's full of stories of long drawn out infancy of ideas, and the collisions and connections that make ideas succeed.

Found via Caterino's Deli

https://www.youtube.com/watch?v=NugRZGDbPFU

I've been using some new CSS techniques lately, and thought it was time to start experimenting with ideas. One thing that I thought was really cool was that you could use the :before and :after pseudo-classes to create boxes before and after an element and position those. I did that on the little screenshot images on this product page, to position the little + icons.

I was also interested in how I could replace some of the jQuery techniques I was using to make tooltips in myBalsamiq. One thing that bothered me about the technique in jQuery UI was that I had to use an image to create a triangle below the tool tip box. A quick search turned up a technique for creating a triangle with CSS on a demo by Jon Rohan. Jon's technique uses a few spans to create the awesome outlined bubble. I thought I'd go simpler and just put a box shadow on the main part of the bubble so I could get rid of the spans, and then I'd just use the :after pseudo-class to position a box that created the triangle below the bubble. The result is below. This has been tested in Webkit only.

Speech Bubble

Demo

Mikey sez

Code

<div class="bubble">Hi there. I like turtles.</div>
<p style="margin-left: 1em;">Mikey sez</p>

.bubble {
  position: relative;
  background-color:#eee;
  margin: 0;
  padding:10px;
  text-align:center;
  width:180px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  -webkit-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
  -moz-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
  box-shadow: 0px 0 3px rgba(0,0,0,0.25); 
}
.bubble:after {
  position: absolute;
  display: block;
  content: "";  
  border-color: #eee transparent transparent transparent;
  border-style: solid;
  border-width: 10px;
  height:0;
  width:0;
  position:absolute;
  bottom:-19px;
  left:1em;
}

Tool Tip Try 1

This one is a little trickier, because the browser will display the yellow tooltip fro the anchor as well. You could hide the title attribute by using $("a.tip").removeAttr("title"); but that's where I'm getting the tip from. This is one case where using a hidden span nested in the link might be smarter.

Demo

Hover over me!

Code

<a href="#" class="tip" title="Hi, There. I like turtles.">Hover over me!</a>

a.tip {
  position: relative;
  text-decoration: none;
}
a.tip:hover:before {
  display: block;
  position: absolute; 
  padding: .5em;
  content: attr(title);
  min-width: 120px;
  text-align: center;
  width: auto;
  height: auto;
  white-space: nowrap;
  top: -32px;
  background: rgba(0,0,0,.8);
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;    
  color: #fff;
  font-size: .86em;
}
a.tip:hover:after {
  position: absolute;
  display: block;
  content: "";  
  border-color: rgba(0,0,0,.8) transparent transparent transparent;
  border-style: solid;
  border-width: 10px;
  height:0;
  width:0;
  position:absolute;
  top: -8px;
  left:1em;
}

Tool Tip Try #2

This time using a span without the pesky anchor tooltip.

Demo

Hover over me!Hi, There. I like turtles.

Code

<a href="#" class="tip2">Hover over me!<span>Hi, There. I like turtles.</span></a>

a.tip2 {
  position: relative;
  text-decoration: none;
}
a.tip2 span {display: none;}
a.tip2:hover span {
  display: block;
  position: absolute; 
  padding: .5em;
  content: attr(title);
  min-width: 120px;
  text-align: center;
  width: auto;
  height: auto;
  white-space: nowrap;
  top: -32px;
  background: rgba(0,0,0,.8);
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;    
  color: #fff;
  font-size: .86em;
}
a.tip2:hover span:after {
  position: absolute;
  display: block;
  content: "";  
  border-color: rgba(0,0,0,.8) transparent transparent transparent;
  border-style: solid;
  border-width: 10px;
  height:0;
  width:0;
  position:absolute;
  bottom: -16px;
  left:1em;
}