March 13, 2011 by J.P.
CSS3 has a property called “webkitAnimationEnd” which can be used as an event lister in JavaScript.
function cssAnimationEnd() {
//looks for the ID box from the css and fires the event listen when the animation is complete.
box.addEventListener( 'webkitAnimationEnd', function( event ){
alert( "Finished animation!" );
}, false );
}
Working with event listers like this it is possible to chain CSS animations. This is a great method to use on IOS devices to improve animation frames compared to only working wth JavaScript.
March 3, 2011 by J.P.
Here is a rough proof of concept demo I created to show the CSS3 transform property.
Click here to see demo
by J.P.
Here is a quick example of how to use Pseudo elements “:before” and “:after” with css.
li{
display:block;
}
li:before{
content:"This is red from :before";
color:red;
}
li:after{
content:"This is blue from after";
color:blue;
}
Click here for the demo page
September 25, 2010 by J.P.
In CSS 2.1 the “first-child” and CSS 3 adds “last-child” pseudo-class implementation. These allow for specific stlyes to be added to beginning and ending elements. This can be extremely helpful for navigation and other common list types. The one draw back of using these pseudo-classes is ie6 will not support them. Here is a short script that can been used in the head of a page to support ie6.
$(document).ready(function() {
$('li:first-child').addClass('first-child');
$('li:last-child').addClass('last-child');
});
In CSS 3 “:nth-child(N)” was added. Here is a great read on SitePoint with examples of “:nth-child(N)”.
September 11, 2010 by J.P.
Checkout the CCS gradient code generator I created this morning.
Click Here
August 26, 2009 by J.P.
Here is a short and sweet post demonstrating the use of adjacent sibling combinators with text is an easy way to work with unique spacing with headers and copy in general.
Basic Example Code
h1 + p{
padding:20px 0 0;
}
h2 + p{
padding:0px 0 0;
}
h3 + p{
padding:0px 0 0;
}
Here is a link with 3 different headers and style demoing how convenient this approach is.
Eaching header has a unique spacing when followed by a <p/> tag.
July 17, 2009 by J.P.
Here is an updated version of the Naked WordPress theme to support HTML5.
WordPress Naked has been put together by us as a simple WordPress theme to assist developers that need to quickly implement a blog using WordPress but don’t really have the time to spend looking under the hood in any detail or reading documentation when it comes to applying a custom theme (e.g. their clients’ design).
Find out more about the original theme.
Download HTML5 Theme
July 16, 2009 by J.P.
Here is a download to the HTML 5 Bundle I have started for Textmate. This is my first attempt at creating a bundle from scratch please provide feedback and requests and I will add them.
Download Here
Update 7/19/2009
Updated 3/21/2010
Added localStorage Snippets
The bundle has also been uploaded to Github.
View Repository
June 16, 2009 by J.P.
With some of the latest browsers supporting HTML 5 I thought I go ahead and take a stab at trying to create a very basic video player using some of the new tags. What’s interesting is many times when flash would be needed for video and audio HTML 5 will be able to support such media types with just a little JS.
Here is a sample player using HTML 5 (Note this is at a very early stage and only has play/pause functionality).
<div id="myVideoContainer">
<video id="myVideo" src="../videos/WheretheWildThingsAre.mov" autoplay="autoplay">
<p>Sorry Your Browser Doesn't Support HTML 5. Safari 4 will support this video player, download it here</p>
</video>
</div>
Related information:
