Here’s some form input checkboxes styled with CSS3 to look like iPhone style on/off buttons. Just messing about again with CSS3.

It’s all done with an input ‘checkbox’ an a couple of labels. There’s no javascript to add any classes and the on/off text is added using the :before and :after pseudo classes in CSS with generated content, there are also no images used. It should work cross browser although I haven’t tested IE and Opera. Shoudn’t take too much tweaking if you want to try, I just didn’t have time.

There’s some -webkit- animations for Chrome and Safari. The clever bit is using the label to switch the checkbox off and on using the ‘for’ attribute whick targets the ‘id’ of the checkbox. Like this:

<input id="1" checked="checked" name="1" type="checkbox" value="1" />

<label class="check" for="1"></label>

The label is then styled to have a different position using :checked. The checkbox itself is hidden.

input[type=checkbox]:checked + label.check {

    top: 0px;

    left: 38px;

}

This CSS looks at any checkbox that’s ‘checked’ and moves the next available label element with a class of ‘check’ 38px left. Pretty cool!! Check out the source for more detail!

View Demo

Ironically this doesn’t work on the iPhone!!?

P.S. This ‘experiment’ wasn’t intended to simulate any kind of ‘drag’ feature on the iPhone, it was just a try at making a pretty looking checkbox. It’s not a radiobox either, although you could probably use it for that too! All I was interested in was the CSS and just seeing if it was possible to achieve this kind of interface design without lots of extra bulky markup or JS. Sorry for any confusion or offence caused.

Update: Here’s a UI example that doesn’t look like the iPhone buttons. Maybe this is a bit clearer as to how it may be used.

View Demo

Here’s a cool thing you can do with the CSS3 animations behaviour. An infinitely scrollling header image!!

Take an image exactly 3 times the height of your header (make sure it tiles!! I use the ‘offset’ plugin in Photoshop ) and assign it to the background of the header. In this example my image is 450px high.

#header {

    height: 150px;

    background-image: url(cloud.png);

    background-position: 0% 0%;

}

You’ll need to assign ‘background-image’ and ‘background-position’ separately.

Now build a @-webkit-keyframes animation like so. The ‘moveIt’ is the name of the animation.

@-webkit-keyframes moveIt {

     0% {

          background-position: 0% 0%;

     }

     100% {

          background-position: 0% 150%;

     }

}

As of today Safari is the only browser that supports these types of animations so you’ll have to use it to view the demo.

Now assign the animation behaviours to the header CSS.

#header {

    height: 150px;

    background-image: url(cloud.png);

    background-position: 0% 0%;

    -webkit-animation-name: moveIt;

    -webkit-animation-duration: 20s;

    -webkit-animation-iteration-count: infinite;

    -webkit-animation-timing-function: linear;

}

You can see I’ve called the animation name ‘moveIt’. Then we have ‘duration’, count and timing. In the actual animation setup the image is being moved 150% of the height of the header. This seems to line up the images as it jumps back to zero. Don’t ask me how I worked this out I just got lucky!!!

View the Demo

This was a bit tricky to work out but I got there in the end. The idea is to get one image to slide in while the current image slides out. There’s a lot of z-index going on as well so the new image always appears to be at the top.

I’m not totally sure how I got the z-index to work or why it does! One thing I’m sure of is you have to use CSS Animations, not Transitions! There are two main @keyframe set ups for this webkit animation.

One to animate the :target image in

/* Animation for the :target image. Slides the image in. */



@-webkit-keyframes moveTarget {

    0% {

        left:-700px;        

    }

    

    100% { 

        left:0px;

    }

}





ul#slider li:target {

    -webkit-animation-name: moveTarget; 

    -webkit-animation-duration: .5s; 

    -webkit-animation-iteration-count: 1;

    top:0px;

    left: 0px;

    z-index: 10;

}

And one to move the current :target image out

/*

Animation for the current image. Slides it out and back to the starting position. 

Adds a lower z-index than the now current image.

*/



@-webkit-keyframes moveIt {

    0% {

        left:0px;   

    }

    50% {

        left:700px; 

    }

    100% { 

        left:-700px;

        z-index: 5;

    }

}



ul#slider li:not(:target) {

    -webkit-animation-name: moveIt; 

    -webkit-animation-duration: 1.5s; 

    -webkit-animation-iteration-count: 1;

    top:0px;

    left: 0px;

}

The first animation has one step over 0.5 secs. The second has three over 1.5secs. I’m sure you get the picture. The time it takes for the for the image to move in is the time it take for the other image to move out (50%) before it get’s returned to the start position ready to come in again. The image moving out is given a lower z-index so it isn’t seen moving behind the current image to the start position.

Here’s a picture!

Plays nice in Firefox and Opera too just without the animation. I’ve not looked at it in IE as I’m on a Mac and just can’t be arsed to deal with it as this is just a bit of fun. It doesn’t support :target so it won’t work anyway. Maybe in IE9?

Yes it looks like Galleria, needed some quick images. Maybe this could prove to be a leaner alternative in the future for image galleries and featured content sliders. I’ve no doubt this could be intergated into Wordpress very easily or some kind of dynamic PHP gallery (from a folder of images) script.

Anyway, you can have a look at the demo and decide for yourself.

Demo

Here’s a spicy little Wordpress loop that allows you to structure your latest posts in a different way.

The great thing about this is that it will only effect the first page of your posts. All subsequent posts on an ‘Older Posts’ page will not repeat the structure.

Here is the basic loop, by the way I can’t remember where this came from but I didn’t write it….but it’s bloody useful though!!!

<?php if (have_posts()) : ?>

<?php $post = $posts[0]; $i=0;?>

<?php while (have_posts()) : the_post(); ?>



<?php $i++; if( !$paged && $i == 1) :?>



    /*  Stuff for your Latest Post goes here!   */



<?php else  :?>



    /*  All other posts goes here!   */





<?php endif;?>



<?php endwhile; ?>



<?php endif; ?>

It basically counts through your posts, 1 is your latest post (0 being no posts) and lets you write a separate structure for it. The ‘else’ refers to all posts that aren’t 1 or the latest. The key is the ‘$paged’ bit which see if the pages are related.

I took this a step further (yep, I wrote this bit with my ropey PHP skills!!!) by adding an ‘elseif’ statement that lets you define another set of posts for further structuring. In the code below it say any post greater or equal to 2 but less than four should have it’s own loop structure. Now the ‘else’ refers to any post equal or greater than fourth in the list. Cool!

<?php if (have_posts()) : ?>

<?php $post = $posts[0]; $i=0;?>

<?php while (have_posts()) : the_post(); ?>



<?php $i++; if( !$paged && $i == 1) :?>



    /*  Stuff for your Latest Post goes here!   */





<?php elseif ( !$paged && $i >= 2 && $i < 4) :?>



    /*  Stuff for your the next two Latest Posts goes here!   */

    

    

<?php else  :?>



    /*  All other posts goes here!   */





<?php endif;?>



<?php endwhile; ?>



<?php endif; ?>

Here’s an example the different post structures you could achieve using this.

<?php if (have_posts()) : ?>

<?php $post = $posts[0]; $i=0;?>

<?php while (have_posts()) : the_post(); ?>



<?php $i++;

if( !$paged && $i == 1) :?>



    <div id="post-<?php the_ID(); ?>" <?php post_class('latest'); ?>>

        <?php the_post_thumbnail('full'); ?>

        <h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>  

        <div><?php the_content(); ?></div>  

    </div>





<?php elseif ( !$paged && $i >= 2 && $i < 4) :?>



    <div id="post-<?php the_ID(); ?>" <?php post_class('not-so-latest'); ?>>

        <?php the_post_thumbnail('medium'); ?>

        <h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

        <div><?php the_excerpt(); ?></div>

    </div>





<?php else  :?>



    <div id="post-<?php the_ID(); ?>" <?php post_class('just-plain-old'); ?>>

                <?php the_post_thumbnail('thumbnail'); ?>

        <h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

        <div><?php the_excerpt(); ?></div>  

    </div>





<?php endif;?>



<?php endwhile; ?>



<?php endif; ?>

Here’s a picture!!!!

The first post has a full size ‘post_thumbnail’ image, a post link and ‘the content’.

The second and third have a medium ‘post_thumbnail’ image, a post link and ‘the excerpt’. The fourth and any post after will have small thumbnail, a post link and ‘the excerpt’.

You’ll notice I’ve also added a custom class into the ‘post_class’ tag for easy styling.

<?php post_class('latest'); ?>

Here’s what you get!!!

I’m rolling out a new theme soon when Wordpress 3 is out. I’m really enjoying the new loop structure which is making theme development a lot easier. Will post up some more useful snippets that I’ve used in my new theme that is a lot simpler.

Hope this helps somebody out!!!

So I’ve been doing some more CSS3 experiments and I think I’ve cracked the Accordian thing. I actually tried this out ages ago 2008 Demo and ran into the same problems other people had later on, namely animating the height of an enclosing element couldn’t be dynamic it had to be fixed.

What do I mean? If your using CSS3 Transitions you have to have a start and end value, say.

div {

    -webkit-transition: all .5s ease-in-out;

    height: 0px

}



div:hover {

     height: 100px;

}

The issue was how do you know how high each of the accordian panels are that your animating? Each one might have a different number of elements. Now CSS doesn’t allow any sort of  loops or math like Javascript so you can’t find out the height based on the number of elements.

Then it hit me! Why bother with the container height and instead focus on the elements inside it! All the things you’d put inside a div are going to have static values right, like say an ‘a’ tags height. Why not animate that instead thus causing the container to collapse.

Let’s start with an Accordian menu. Here’s the basic markup, a simple ul with li’s.

<ul class="menu">

<li class="title"><a id="1" href="#1"><span>Stuff</span></a>

    <ul>

    <li><a href="#">list</a></li>

    <li><a href="#">list</a></li>

    <li><a href="#">list</a></li>

    <li><a href="#">list</a></li>

    <li><a href="#">list</a></li>

    <li><a href="#">list</a></li>

    <li><a href="#">list</a></li>

    <li><a href="#">list</a></li>

    </ul>

</li>



<li class="title"><a id="2" href="#2"><span>Stuff</span></a>

    <ul>

    <li><a href="#">list</a></li>

    <li><a href="#">list</a></li>

    <li><a href="#">list</a></li>

    </ul>

</li>

</ul>

You’ll notice that the ‘a’ has an ‘id’ and the ‘href’ is targeting that id. This allows us to use the CSS3 :target selector for our animation, you’ll notice it’s actually targeting itself! I’ve done this for a reason.

.title ul li a {

    -webkit-transition: all .5s ease-in-out;

    height: 0px;

    display: block;

    

 }



:target + ul li a {

    height: 30px;

    

}

In the above CSS you’ll see I’ve used the ‘+’ adjacent sibling selector when using :target. This says effect the next ul’s list items ‘a’ tags. When they shrink the enclosing ‘ul’ is then effectively invisible as there is no ‘height’ inside it.

Funnily enough it’s been two years since I tried the original CSS3 accordion with the height issues and this will still only render in Webkit browsers so you’ll need Safari or Chrome to view it properly, it will come up in Firefox but without all the CSS3 fluff! This is an example of a menu full of links.

Menu Demo

The next example is a text box accordian. This time instead of worrying about the container height I’ve targeted the paragraph tag. I’ve now put the ‘id’ in the list item and used the decendant selector ‘>’ to target all ‘p’ tags inside that list item.

<ul class="menu">

<li class="title" id="1"><a href="#1"><span>Stuff</span></a>

    <p>Lorem ipsum dolor sit amet........</p>

</li>



<li class="title" id="2" ><a href="#2"><span>More Stuff</span></a>

    <p>Lorem ipsum dolor sit amet.........</p>

    

    <p>Lorem ipsum dolor sit amet..........</p>

</li>

</ul>

Here’s the CSS. The target parameters are padding, line-height and margin-bottom. The line-height and margin-bottom are doing all the work and the ‘p’ tag is given overflow:hidden; to make it disappear.

.title p {

    

    -webkit-transition: all .5s ease-in-out;

    background: #fff;

    padding: 0em 20px 0em 20px; 

    line-height: 0em;

    margin-bottom: -1.9em;

    overflow: hidden;

    color: #fff;    

 }

 



:target > p {

    padding: .5em 20px 1em 20px;

    line-height: 1.2em;

    margin-bottom: 0em;

    color: #070707;

}

Here’s the demo. Even works with an image. Check the scource! This is totally fucked in Firefox as yet so don’t bother.

Menu Demo

Sorry for the scrappy code but this was only an experiment (proof of concept) which works for now only in Webkit, as yet to my knowledge this is the only accordian that can generate dynamic heights for panels. And yes, it looks shit in IE8!!

Any thoughts or improvements welcome!

No computers, no phone (I am taking it but won’t answer!). Back on 18th of March….with a tan!

I’ve used the new ‘Post Thumbnail’ feature in 2.9 to link to the child pages from the ‘Parent’ page using the Post Thumbnail as an image link. The reason for this is the client no longer has to faff about with customs fields, which are confusing to non-web savvy users.

This might be useful for people building portfolio sites for artists.

The code I’d previously been dabbling with pulled in a custom field called ‘Imagelink’ from all the child pages associated with the parent page providing an image link to that child page.

The code below uses ‘get_the_post_thumbnail()’ so all the client has to do is upload an image using the new ‘Post Thumbnail’ feature in every new page as the link image.

Insert it into a page template in wordpress called ‘childLinks’ or something like that.

Pretty handy and more CMS like.

Got back from my yearly stint at Bath Spa University teaching for the International Guitar Foundation. A good time was had by all as usual and great to see some old faces and catch up.

Some great gigs were provided during the week by John Wheatcroft, Stanton Moore and old BIMM friend Guthrie Govan with the Fellowship. Here’s a couple of pics of the week. Looking forward to next time!

My class - Classic Rock!

Tutors eating a well deserved curry!

Guthrie and the Fellowship rip it up!

Jim Clarke, Guthrie Govan and Martin Goulding. Guitar heaven!

In other news apart from being snowed on a lot I’ve been learning Adobe After Effects and making some promos for my secret web project. Making good progress with it but knowing Photoshop animation already has really helped. VideoCopilot.com has been a real help learning After Effects and Andrew Kramer is a good coach.

Just got Stormdrum 2 for the studio rig and I’m loving it. The drum sounds are massive! Here’s a little orchestral demo I threw together while I was trying it out. It’s called Attack of the Dung Beetles as I couldn’t think of a better title! There’s a scary thought!

Till next time!

As far as this year goes with this blog I’m planning to do loads more guitar tutorials. I have about three big topics I want to cover so they may come in a few parts each. You can expect a small tutorial pretty soon on some useful pentatonic ideas.

2008 was a bit of a strange one for me as far as guitar goes as I was doing quite a bit of web stuff but I’m going to be scaling that back and really getting back to some good old playing this year. I guess I’d just burnt out a bit on music but that seems to be over now and I’m starting to feel a lot more creative musically ( lot’s of tunes rattling round the noggin! ).

In fact the only web stuff I’m planning is the launch of a new site aimed directly at guitar players. Can’t say much at the moment but it’s going to be amazing. Most of the material is written and I’ll start building the site soon. I’m hoping it’s going to be a big hit in the world of guitar, so stay tuned!!

You can check out the Logic tutorial here.