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

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!

Here’s a quick experiment I did with CSS3. Again I was just mucking about with CSS3 transitions which could one day replace all the fancy jQuery animation tricks people use. The outcome was a really simple animated sliding verticle menu.

If you want to view the demo you’ll need the lastest Safari version or even better go get the latest nightly build of webkit. This might even work in Chrome but I haven’t checked it. Oddly enough it didn’t seem to like it on OSX Tiger in Coda but in Leopard it was fine? This is all a long way off anyway but good fun to play with!

Menu Demo

First off in the demo you might notice the gradient which is CSS too. Really easy to do that with this….

body { background: -webkit-gradient

           (linear, left top, left bottom, from(#ccc), to(#fff));

}

Now we’ll style the un-order list with some padding and a background image to create a ridge like effect that our menu items will appear out of. The cool thing about this is by using -webkit-background-size’ the image is stretched if you add more items to it making the whole thing a bit more dynamic.

ul#nav {

    list-style: none;

    display: block;

    width: 200px;

    position: relative;

    top: 100px;

    left: 100px;

    padding: 60px 0 60px 0;

    background: url(shad2.png) no-repeat;

    -webkit-background-size: 50% 100%;

}

Everything else is pretty bog standard really. A simple un-ordered list and that’s about it. The styling for the list item anchor tags is where it all happens. The addition of the ‘-webkit-transition:’ is going to allow us to animate to the ‘:hover’ state.

ul#nav li a {

    -webkit-transition: all 0.3s ease-out;

}

It says ‘all’ animatable properties should animate over 300ms using ‘ease-out’, similar to jQuerys easing functions.

Next we’ll add the styling for the anchor tags with some fancy -webkit-border-radius and -webkit-box-shadow to give it some shape and depth and complete it with a backgroung image for each item to enhance our interface effect, making them look like their coming from underneath the ridge.

ul#nav li a {

    -webkit-transition: all 0.3s ease-out;

    background: #cbcbcb url(border.png) no-repeat;

    color: #174867;

    padding: 7px 15px 7px 15px;

    -webkit-border-top-right-radius: 10px;

    -webkit-border-bottom-right-radius: 10px;

    width: 100px;

    display: block;

    text-decoration: none;

    -webkit-box-shadow: 2px 2px 4px #888;

}

The properties we’re going to style are color, background-color and left-padding so let’s add them to the hover: state.

ul.nav li a:hover {

    background: #ebebeb url(border.png) no-repeat;

    color: #67a5cd;

    padding: 7px 15px 7px 30px;

}

That’s about it really. No javascript and exactly the same effect. Probably be easy to make this degrade nicely for “certain” browsers. Now all you have to do is wait!

I’ve been doing some other experiments recently with CSS3. Here’s a rather neat animation using transform:skew. Safari 3/4, Google Chome only!!!!

Cube animation

Probably not very exciting unless your into web stuff…which I am!

Doing a very bizarre gig tomorrow. See you then!

Chris’ blog CSS Tricks is one of my favorite blogs. He writes really useful tutorials and I’ve learned a great deal of cool stuff from him. Being a bit of a beginner at the Web Design thing having only been doing HTML stuff for a little over a year I was quite pleased (and a bit gobsmacked!) that what was a bit of an experiment learning jQuery turned into a full on CSS Tricks tutorial bonanza!!!

I couldn’t get it to work as a nav as my jQuery skills aren’t as good as Chris’ so again I’ll learn something from his tutorial. This is totally cool!!!!!

You can see the tutorial here.