New Theme

I did a soft launch of my new WordPress theme last week. There are a few things I’d like to point out. First is the decision to go to HTML5. HTML5 (combined with the HTML5 Shiv) actually made writing the styles quite a bit simpler. It’s a bit of adjustment after writing XHTML for so long, but when it came time to write the styles the new tags meant fewer ids and classes. I found that very handy.

Also I’m using less JavaScript than I was before. Instead the hover effects are accomplished using CSS3 transitions.

For instance, here is the CSS for the hover effect on the sidebar nav:

-webkit-transition-property: background, margin-left;
-webkit-transition-duration: 0.5s, 0.5s;
-webkit-transition-timing-function: linear, ease-in;
-moz-transition-property: background margin-left;
-moz-transition-duration: 0.5s, 0.5s;
-moz-transition-timing-function: linear, ease-in;
-o-transition-property: background margin-left;
-o-transition-duration: 0.5s, 0.5s;
-o-transition-timing-function: linear, ease-in;
transition-property: background margin-left;
transition-duration: 0.5s, 0.5s;
transition-timing-function: linear, ease-in;

Then I simply redefine the background, right and left margins for the hover state:

background: #0D7B15;
margin-left: -1em;

The browser then just takes 0.5 seconds to transition from the default state to the hover state.

I also added some other transitions as well. For instance, you can delay when the transition starts. See if you can spot this one:

-webkit-transition-property: top, left;
-webkit-transition-duration: 5s, 5s;
-webkit-transition-timing-function: linear, linear;
-webkit-transition-delay: 32s, 32s;
-moz-transition-property: top, left;
-moz-transition-delay: 32s, 32s;
-moz-transition-duration: 5s, 5s;
-moz-transition-timing-function: linear, linear;transition-property: top, left;
transition-duration: 5s, 5s;
transition-delay: 32s, 32s;
transition-timing-function: linear, ease-in-out;

This effect is attached to an ‘animate’ class that is triggered by JQuery when the page loads. There’s a 32 second delay and then the transition between states begins. It’s pretty fun stuff.

Caveat: Transitions are only supported in Firefox 4+, but they’ve been supported in WebKit browsers for a long time. Internet Explorer will not support them until version 10.

Similar Posts:

• New Theme
• No Flash Required
• Using Impress.js
• Fun With JQuery Tubular
• Blueprint: Taking a Close Look at grid.css

Categorised in: css, html, web development

This post was written by admin