Simple Slide Out Content

This is a super simple CSS example (backed up with just enough JS to show it off), but its still fun. I have a requirement for a specific animation - the team wanted the panel to slide open, but the content to already be there, at normal size in the panel, and they wanted that content to be attached to the side that was sliding.

Nothing fancy. The only real trick is the float-right so that the content is attached to the right side. I could also have looked at something where the content had a negative margin and the that animated so it slid in, or translatedY so it moved in, but that wasn't necessary for this solution.

 


jsFiddle Example: Controlling Masking Layers with AngularJS

More in my series showing how to do small things with AngularJS. This time its controlling masking layers "the Angular way" but using ng-class to apply the masking layer. The CSS code is largely just your bog standard masking layer code with a centered alert box, but I've added a CSS3 animation for the opacity to make it fade in and out.

 

Great Article on IE's hasLayout Property

If you've ever had to tangle with triggering hasLayout in IE6/7 then this article at www.satzansatz.de is for you. I've been working a 90 day contract to developer HTML/CSS/JS templates based on PSDs and wireframes, and I can tell you that hasLayout has become the bane of my life. Its a running joke that to debug the page you should just "apply zoom:1; liberally and see if it works". Now after reading about hasLayout in more depth, I've got some more sophisticated tricks up my sleeve.

 

CSS Sprites for Hover Effects Tutorial

While I'm a web developer, I often delve into the world of a web designer as well, specially when it comes to optimizing performance and user experience. That, and my love of techniques used in 8-bit games, is why I love CSS sprites, and why I put together a tutorial on how to create and use a CSS sprites for menu backgrounds, like in this demo. Click on the "More" link below to view the tutorial.

 

Simplified User Interface

Ever wasted time trying to figure out how to do something in an application? I know I've sat and cursed at badly designed user interfaces, just as everyone else has, and thanks to an awesome book, Designing the Obvious by Robert Hoekman Jr., I've been thinking about user interface design nearly every day.

Whether we like to admit it or not, every page on the internet is at heart a user interface; a website's design really isn't anything other then a UI for that site's content. Sure its not an application, but hard to find buttons and links are just as annoying as hard to find settings and options.

 

Reusable CSS Design

One of my favorite things about the web is seeing the transformation from the 'ancient', flat text of the early 90s into the slick, beautiful web designs that modern users expect. The wonders of CSS have unlocked amazing new potential for design, and created some wonderfully clean and usable site desins like Web 2.0 at http://www.openwebdesign.org/. This design is appealing, clear, and the content can really shine. Unfortunately, CSS people seem to have no idea what a pain it is to work with designs like this.

 

More Entries

Jon Hartmann, July 2011

I'm Jon Hartmann and I'm a Javascript fanatic, UX/UI evangelist and former ColdFusion master. I blog about mysterious error messages, user interface design questions, and all things baffling and irksome about programming for the web.

Learn more about me on LinkedIn.