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 12, 2011 by J.P.
Here is an example of a basic fade animation using a CSS3 fade using “-webkit-transition: opacity” property. Please note you need to use a webkit browser to view the animation working.
View the example Here.
Here is the code used to create the animation:
#box {
width:500px;
height:500px;
background:#fff;
padding:0;
margin:0 auto;
/*begin animation properties*/
-webkit-animation-name: Navfade;
-webkit-animation-duration: 2s;
}
@-webkit-keyframes Navfade {
from {
opacity: 0;
-webkit-transition: opacity;
}
to {
opacity: 1;
}
}
Here is a link to another CSS3 animation post I created using the rotate with mask.
March 6, 2011 by J.P.
This is the first part of a series of CSS webkit animations.
#spinner {
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -256px;
height: 256px;
width: 256px;
text-indent: -999em;
white-space: nowrap;
overflow: hidden;
-webkit-mask-image: url('../images/spinner.png');
-webkit-animation-name: spinnerRotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
background:#ccc;
}
@-webkit-keyframes spinnerRotate {
from {
-webkit-transform:rotate(0deg);
}
to {
-webkit-transform:rotate(360deg);
}
}
View the animation here.
This original code was take from 24ways.org and modified.
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
September 27, 2010 by J.P.
“:traget” One of the new pseudo classes implemented in CSSS 3. Combined with CSS animation. It is very cool and easy to feature to implement.
First lets define a css keyframe that will work with “target” (Not this will only work on webkit browsers. It is possible to run on FF maybe IE9? although I haven’t gone this deep with this POC.
@-webkit-keyframes target {
from { background:#fff;}
50% { background:#ccc;}
to { background:#fff;}
}
The next step is to apply the “animation” to the class with pseudo “:target”
article{
padding:4px;
border:3px solid #e1d8c4;
margin:4px;
}
article:target{
border:10px solid #9f8b5e;
-webkit-animation:target 4.0s linear;
}
Here is a full working example. With just a few lines of code you can see how easy
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
March 14, 2010 by J.P.
Recently a back end developer asked me with there was a way to use a wild card in CSS that would allow him to generate ID’s on the fly. The solution I came up with was to use an attribute selector.
When using attribute selectors in CSS the name before the “|” is the attribute targeted. In this case “id” is used but we could have just as easily used “rel”, “input”, “value” etc.
The text after the “|” is what the attribute must start with to be read. The example uses “section”. Each “id” in the html that starts with “section” will be styled. Some id’s use more specific code in certain div’s to give them unique colors showing how the cascading works in the CSS file.
Here is the solution:
View the Demo
CSS Code
[id|="section"]{
border: 10px solid #999;
margin:10px 0;
background:black;
width: 200px;
height: 200px;
}
[id|="section-item"]{
background:green;
}
#section-1{
background:red;
}
#section-2{
background:blue;
}
#section-3{
background:yellow;
}
