CSS: testing ground
Actually this whole site is a testing ground, but sometimes I'll be delving into something interesting but won’t have a place to actually use it … so I throw odds and ends of css experiments into this section of the site.
tooltip hovers using pure CSS
Admittedly the following content doesn’t look like much when viewed with Internet Explorer. For full effect it is best viewed using a standards compliant browser like Google Chrome, Firefox, or Opera.
This first one uses positioning to place the tooltip content out of the borders of the browser window. When the cursor hovers over the <a> tag the tooltip content is invoked by repositioning it in relation to the <a> tag.
- Lorem IpsumLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
- OriginsContrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
- Why Use It?It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
- Where to get ItThere are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
This second example uses the CSS attribute "display:none" to hide the tooltip. Hovering over the list item invokes the tooltip content by changing the CSS attribute to "display:block."
- Lorem IpsumLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
- OriginsContrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
- Why Use It?It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
- Where to Get ItThere are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
pill button using pure CSS and no images
If you're viewing with IE you are probably wondering what the fuss is all about. But if viewing with a WebKit-based browser like Google Chrome or Safari you're seeing something very different. Why bother if the majority of people use IE? Well, because as of the first half of 2010, analyst estimates place the cumulative number of mobile handsets shipped with a WebKit-based browser at 350 million. WebKit will continue to dominate the mobile industry as the market penetration of smartphones, the engine's primary contributors, increases.
