Login Screen Design

It's been a long time since I created a page or a site... but now that I have no designer on the team and don't entirely want to trust all the details of the design to development timelines, here I am.

A few hours of searching for the various bits and pieces I needed to make my page, here I am, pleased with my-self for no real reason!

What and How:

Automatically Stretch Background Image to Fit Resolution

// HTML
<div align="center">
 <img src="...image file location..." class="bg">
<div>

// Stylesheet
.bg {
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 z-index: -1;
}

Login Box Background

• Placed in the center of the screen (horizontal and vertical)
• Rounded edges with a border

// Stylesheet, simply apply to DIV
.LoginBox {
 border: 3px solid white;
 border-radius: 15px;
 width:373px;
 height:250px;
 position:absolute;
 left: 50%;
   top: 50%;
 margin-left: -186px;
 margin-top: -125px;
 background: #032b4f;
 z-index: 10;
}

Reflection

I couldn't get the reflections working because I wanted to reflect a DIV and not an image. Played around with some links, gave up, and used an image instead:

• http://blog.gface.com/2012/02/22/crossbrowser-css3-reflections/
• http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/cross-browser-css-reflections-glows-and-blurs/

The Result

Download the HTML and CSS files

And finally, how do I display formatted code on this screen? 

1. Click on every button on the toolbar
2. Scratch head for 2 minutes
3. Google for help
4. Find help! http://www.craftyfella.com/2010/01/syntax-highlighting-with-blogger-engine.html

Page doesn't look exactly the same on IE 7, but I'm not officially supporting IE 7 and only need it to work.