Tutorial

  • Create your own jQuery Image Slider

    197

    I originally posted this article on 15 September 2010. This is an updated version.

    This tutorial is for beginners. The method for creating the slider could be done differently, but I feel this way is more simple to understand.

  • How to make the input placeholder more user friendly

    28

    I’ve always loved placeholder text for input fields. Not too long ago the only way to achieve this would be to create a special javascript function that enabled the desired functionality, but now it magically comes pre-built into HTML5. Incase you’re wondering, placeholder text is the text within an input field that disappears once you click on it. It’s often used in place of a label.

  • Create Accordions with CSS3, HTML5 and jQuery

    46

    First thing is first, let me clarify what I mean by Create an Accordion with CSS3, HTML5 and jQuery. I am talking about creating 3 different accordions, one which relies heavily on CSS3, one with jQuery and one with HTML5.

    If you haven’t already had to create some sort of accordion by now, I’m sure you will run into it sooner or later. It’s actually a very simple concept that requires very little script to create a fully functional accordion.

  • IE and rounded corners

    7

    Note: The original post was published March 19 2010. The original article’s CSS3 emulator of choice was CurvyCorners

    When someone uses the words “rounded corners” and “IE” in the same paragraph, rest assured a puppy has died somewhere.

    There are a few ways to achieve rounded corners in IE, unfortunately none of them are pain free. I usually like to use rounded corners as progressive enhancement, so IE8 and lower just have to deal with square corners. Luckily, IE9 has been released and it supports the border-radius CSS property. IE10 is already on the way and it should be released sometime at the end of this year. Go Microsoft.

  • Create a lightbox with CSS3

    9

    The days of using javascript lightboxes are over!

    Just kidding, javascript lightboxes remain a much more efficient and cross-browser friendly way of doing achieving the lightbox effect. This CSS3 lightbox tutorial is for demonstration purposes only. I’m doing this because it’s interesting to see how far you can push CSS and you end up learning quite a lot. I do at least.

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6