I've seen quite a few examples of people who have recreated the Twitter login form with CSS and JavaScript, but never seen one that uses only CSS. There probably are a fair few examples out there but I thought I'd create my own and see if I could do anything to improve the form in anyway. There is no JavaScript on this page!
This works by using the :target psuedo class applied in CSS3. It basically allows you to style elements that are referenced by the hashed element in the URL, such as 'http://www.devseo.co.uk/examples/css-only-twitter-login-form/#lightbox' would allow me to style the lightbox at this URL differently than just visiting this page without the '#lightbox' at the end. When you click on the sign in button it adds the id of the form to the URL, at which point I move this form into the correct position.
To create the 'off' effect, when the form is 'active', another empty anchor tag with an id of 'lightbox' is set to display: block and expanded to fill the whole visible area so that anywhere you click that isn't in the form will change the URL to #lightbox at which point the form is no longer in the visible position but goes back to being 99999px off to the right of the page. See below for the CSS and visit the blog to add comments and let me know how to keep the active state on the sign in button when the form is visible!
The only issue I have with this is that the markup is not valid because in order to get the correct effect I have had to nest the sign in form inside an <p> tag, which is a big no-no. I rather stupidly could just replace this with a <div>, which I have, so the markup is valid, if not semantic. Plus the fact that I can't get the hover/focus/active effect on the sign in button to remain as active when the form is visible.