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.
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.
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.
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.
Grids are very popular among web designers. While working on my current project I decided to use a grid for the background. Normal grids didn’t give my design the edge I was looking for. I wanted to add a diagonal grid. Normal grids usually get associated with technical, futuristic design, where as diagonal grids give a more funky, modern feel to a design.