Tag: CSS3
CSS3 Tooltip Trick using CSS3 :before psuedo element, content attribute and custom data attributes
by webdood on Mar.03, 2011, under CSS3, Software Development
I was looking for a way to make an HTMLElement’s title appear faster in a WebKit application.
Turns out there is a way to capture the “title” attribute of an element using the :before pseudo element and content property, store that value in a div that only appears onhover over the original element. The problem with this technique was that the actual “title” attribute would eventually display.
Therefore, I made use of another CSS3 feature called “custom data attributes” and, rather than storing the title of the element in the “title” attribute, I used “data-title” instead.
Here is a quick example:
<!DOCTYPE html>
<head>
<style type="text/css">
.sprocket { position:relative;width:50px;height:50px;background-color:red; }
.sprocket:before { content:attr(data-title); display:none; }
.sprocket:hover::before{ width:160px; display:block; border-radius:3px; background-color:#fffdc7; padding:5px; color:black; margin-top:40px; margin-left:20px; -webkit-box-shadow: 3px 3px 3px rgba(193,193,193,.5);}
.sprocket:hover{ z-index:10; position:absolute; }
</style>
</head>
<body>
<div class="sprocket" data-title="Fancy Title Text">
</body>
</html>
Click here for an Example
Shannon Norrell
Canvas Progress Spinner
by webdood on Mar.01, 2011, under Some Examples
This dynamically-generated HTML5 Canvas Spinner will resize to it’s container. It is very clean, scales to any size and works against any background color. If you are one to use the typical “spinner” gif89a image, you will know that it does not work against colored backgrounds due to dithering issues around the edges of the blades within the image and there are only so many sizes available to “borrow” from the internet.
This HTML5 <CANVAS> tag-based spinner is scalable and works against ny background color:
HTML5 Showcase
by webdood on Jun.04, 2010, under CSS3, HTML5, Javascript, Software Development
The HTML5 demos we have been working on for Apple.com are now live!
http://developer.apple.com/safaridemos/
Most of the demos use the DHTML slider we developed and all examples use our library.js code
HTML5 is here to stay!
