CSS blogs

QuickFlip is a jQuery plugin I wrote that uses a CSS trick to cause a div, paragraph or any other piece of HTML markup to flip like a card. With a result similar to the UI animation on the iPhone, this jQuery plugin is easily integrated into your webpage to make any portion appear to flip and show its back. When a flip occurs, the front panel is split in half with Javascript. The right and left halves slide into one another, and afterwards the opposite occurs with the back panel. While it’s not as smooth as some Flash animation, it all happens so quickly that it really looks like the panel is flipping over ... (more...)

Inevitably, when finishing development of a front-end, I find myself going through the painstaking process of cleaning up extraneous CSS styles. This style was for debugging, this block was for a page that got nixed, this piece I used when conceptualizing the site another way: I don't think it's possible to develop a website without removing some styles at the end. Dreading another round of CSS cleanup, I considered programming a tool to spider a site and tell me which parts of the stylesheets were used. It seemed a daunting task so I checked online, and sure enough, someone had already developed it, and far better than I could have. The tool ... (more...)

When I was seven, my all-time favorite video game was T&C Surf Designs for the 8-bit Nintendo® (NES). Feeling nostalgic this weekend, I developed a version of this old school game using jQuery and Javascript. Up and Down to move, Left and Right to skate faster or slower, Spacebar to jump ... (more...)

In the interest of following jQuery's motto of "writing less and doing more," let's write a simple slideshow using jQuery, JavaScript and a bit of CSS. For starters, our main goal should be keeping the markup as clean as possible: <div id="slideshow"> <img src="img/img1.jpg" alt="" class="active" /> <img src="img/img2.jpg" alt="" /> <img src="img/img3.jpg" alt="" /> </div> Now let's use CSS to position the images on top of each other and bring the active image to the top level with z-index: #slideshow { ... (more...)

It's a new year, and what better way to start off than with a lengthy rant. Strap yourself in. People often ask me why I am so concerned with writing standards compliant HTML, and they have good points, mainly that it takes longer to develop something that is compliant, and the only people who really know if it is are other developers. I've always been in favor of standards compliant code, but to be honest, for a long time I didn't even know why I did it, it was really just nerd lore to me, the big nerds wanted it, and I agreed blindly. You might think that a production environment with constantly encroaching deadlines would make me throw ... (more...)

I'm customizing this dating software for three different sites. Basically each site will have a different stylesheet and limited differences in functionality. It's somewhat difficult to develop since a lot of the core functions are hashed, so we've had to make some compromises on what we can and cannot modify. Overall I'm actually happy that we went down the software modification route, since developing this from the ground up would take much longer, especially the streaming flash video chat.