Pure CSS3 Animated Tooltips I know I know, old dog can’t learn new tricks. You all have seen that CSS3 can do amazing inline tooltips, so what makes my bone any different from anyone else’s. My bone is white and chewed on just like everyone’s but it has one amazing thing that I couldn’t find anywhere else. Every where I looked for Animated CSS3 Tooltips, they all only worked for block level elements, so I couldn’t have and tooltips in the middle of my sentence? Well to me that just [...]

Pure CSS3 Image Fade In after Page Load I was recently proposed with the question: Is it possible to have images fade in shortly after the page has loaded and stay faded in and can the images fade in at different rates and times? This automatically made me think of the jQuery fadeIn feature. Does this mean jQuery is soon to be replaced by CSS as well! Is it Possible? I have not actually seen anyone try to make this using pure CSS, most just revert to jQuery. So I [...]

css 3d cube A CSS 3d cube? Yes… I’ve seen quite a few versions of a CSS 3d cube. Here are some examples. Paul Hayes Loe Lambert dessandro net tuts + css 3d dice A dice?… Isn’t a dice a cube? Well yes, of course a dice is a cube but a real dice has rounded corners… right? Rounded corners are very easy to apply to a box using CSS’s border-radius but how about making a pure CSS 3d cube?. Well it’s generally not to hard to do right?. We [...]

Yesterday I wrote an article about overlapping transparency values. See this post Overlapping transparent divs with one border This tutorial is made with -webkit- CSS3. The complete set (bottom of the post) is compatible with Opera, Firefox and webkit-browser though. pure CSS tooltips I have seen quite a few methods to create pure CSS tooltips but none of them allowed having a transparent background AND tip. Not to talk about a box-shadow or a border… Is it possible Yes it is in fact possible. Not only is it possible to [...]

Overlapping transparent divs I recently came upon a question on http://stackoverflow.com. A user asked if it was possible to have two transparent divs that overlap and force the overlapping section to have the same opacity. His example looked like this: <div id="foo"> <div id="bar"> </div> </div> FIDDLE This was a very interesting question, because I had the same problem once, but I didn’t bother about it, because I could just make the box solid and then add opacity: 0.6 It looks like this: FIDDLE But this user needed to have [...]

the iOS split page effect in HTML with CSS3 -webkit-animations… The demo should be viewed in webkit browsers… Safari on Mac OS X does the best job. The iPhone has a late start but the animations look sweet. Chrome is a little slow on 3d transformation and transitions. iOS 5 webapp I am currently working on a webapp framework that mimics iOS 5. So I needed to create the effect of the folders on the iPhone’s Springboard. Splitting a page was not the problem. I am using two divs with [...]

A few days ago I thought about making a flipbook animation in CSS3. I have seen quite a few approaches, yet none with a decent 3d effect. jQuery examlpe the best jQuery page flip I could find is: builtbywill.com CSS3 examlpe The best CSS3 page flip I could find: romancortes.com HTML5 examlpe And this one using HTML5 canvas is really amazing: 20thingsilearned.com 3d flipbook without a HTML5 canvas? But how would we go about a 3d effect with a bent page without the use of a HTML5 canvas? Well CSS3 [...]

VERSION 2 COMING SOON.. SEE THE FIDDLE ON THE BOTTOM OF THE PAGE I added a third version without the use of -webkit-mask-image on request. (Compatible with Firefox and Opera) I recently needed to make CSS arrow buttons for iOS devices. There are a few examples and sourcecodes on the www, but they all don’t seem perfect. They all basically rotate a square and then use a mask to hide the unneeded part. This square is added with the pseudo-class :before or :after. Sencha Touch css3wizardry hedgerwow jeffbatterton However a [...]

I recently felt like doing something fun. I was thinking about making a piano… in jQuery HTML5 and CSS3… All the sweets of web programming… “Sweets?” I thought.. “Why not add some chocolate?”. Sounds confusing enough? Well the final product is a chocolate theme piano written in jQuery HTML5 and pure CSS3 GUI (using LESS). The Demo does not use any images. This is pure CSS. Supported Browsers: Chrome, Safari, Opera, Firefox (Firefox does not render the dotted rounded borders on the red label {“100% CSS”} correctly) Internet Explorer is [...]

flash is dead Alright, so we all know by now, Flash is dead… Really who uses it anymore. Whats hot and on the stove cooking right now is jQuery, AJAX, CSS3, and HTML5. So I have been looking into keeping up with all the new recipes in web development and trying to create small little applications that would help m become a great cook in website development. javascript Last night I was working on a lockscreen for my jailbroken iPhone and I thought it would be really cool to have [...]