J.P. McGarrity.com » css/html http://jpmcgarrity.com/blog Focusing on the Front End Sat, 30 Apr 2011 16:40:56 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 JavaScript Event Listener with CSS3 Webkit Animations http://jpmcgarrity.com/blog/2011/03/javascript-event-listener-with-css3-webkit-animations/ http://jpmcgarrity.com/blog/2011/03/javascript-event-listener-with-css3-webkit-animations/#comments Sun, 13 Mar 2011 07:10:46 +0000 J.P. http://jpmcgarrity.com/blog/?p=743 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.

]]> http://jpmcgarrity.com/blog/2011/03/javascript-event-listener-with-css3-webkit-animations/feed/ 0 CSS Transform Tool http://jpmcgarrity.com/blog/2011/03/css-transform-tool/ http://jpmcgarrity.com/blog/2011/03/css-transform-tool/#comments Thu, 03 Mar 2011 19:35:15 +0000 J.P. http://jpmcgarrity.com/blog/?p=701 transfrom
Here is a rough proof of concept demo I created to show the CSS3 transform property.

Click here to see demo

]]> http://jpmcgarrity.com/blog/2011/03/css-transform-tool/feed/ 0 Pseudo Elements :before and :after with CSS 2.1 http://jpmcgarrity.com/blog/2011/03/pseudo-elements-before-and-after-with-css-2-1/ http://jpmcgarrity.com/blog/2011/03/pseudo-elements-before-and-after-with-css-2-1/#comments Thu, 03 Mar 2011 13:10:43 +0000 J.P. http://jpmcgarrity.com/blog/?p=698 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

]]> http://jpmcgarrity.com/blog/2011/03/pseudo-elements-before-and-after-with-css-2-1/feed/ 0 Pseudo CSS first-child, last-child http://jpmcgarrity.com/blog/2010/09/pseudo-css-first-child-last-child/ http://jpmcgarrity.com/blog/2010/09/pseudo-css-first-child-last-child/#comments Sun, 26 Sep 2010 04:24:46 +0000 J.P. http://jpmcgarrity.com/blog/?p=626 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)”.

]]> http://jpmcgarrity.com/blog/2010/09/pseudo-css-first-child-last-child/feed/ 0 CSS3 Gradient Code Generator http://jpmcgarrity.com/blog/2010/09/css3-gradient-code-generator/ http://jpmcgarrity.com/blog/2010/09/css3-gradient-code-generator/#comments Sun, 12 Sep 2010 04:44:57 +0000 J.P. http://jpmcgarrity.com/blog/?p=623 css3Generator

Checkout the CCS gradient code generator I created this morning.

Click Here

]]> http://jpmcgarrity.com/blog/2010/09/css3-gradient-code-generator/feed/ 0 CSS Adjacent Sibling Combinators With Text http://jpmcgarrity.com/blog/2009/08/css-adjacent-sibling-combinators-with-text/ http://jpmcgarrity.com/blog/2009/08/css-adjacent-sibling-combinators-with-text/#comments Wed, 26 Aug 2009 21:59:09 +0000 J.P. http://jpmcgarrity.com/blog/?p=538 siblings_01
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.

]]> http://jpmcgarrity.com/blog/2009/08/css-adjacent-sibling-combinators-with-text/feed/ 0 HTML 5 Wordpress Theme (Naked) http://jpmcgarrity.com/blog/2009/07/html-5-wordpress-theme-naked/ http://jpmcgarrity.com/blog/2009/07/html-5-wordpress-theme-naked/#comments Fri, 17 Jul 2009 20:07:53 +0000 J.P. http://jpmcgarrity.com/blog/?p=399 naked

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

]]> http://jpmcgarrity.com/blog/2009/07/html-5-wordpress-theme-naked/feed/ 14 HTML 5 Bundle For Textmate http://jpmcgarrity.com/blog/2009/07/html-5-bundle-for-textmate/ http://jpmcgarrity.com/blog/2009/07/html-5-bundle-for-textmate/#comments Thu, 16 Jul 2009 20:50:01 +0000 J.P. http://jpmcgarrity.com/blog/?p=395 html5_bundle_icon1

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

]]> http://jpmcgarrity.com/blog/2009/07/html-5-bundle-for-textmate/feed/ 6 Video Player with HTML 5 http://jpmcgarrity.com/blog/2009/06/video-player-with-html-5/ http://jpmcgarrity.com/blog/2009/06/video-player-with-html-5/#comments Tue, 16 Jun 2009 22:54:20 +0000 J.P. http://jpmcgarrity.com/blog/?p=341 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).

wildthingshtml5

<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:

]]> http://jpmcgarrity.com/blog/2009/06/video-player-with-html-5/feed/ 0