disguises - a layout archive

Version 15: Passionate Light

Layout Structure

  • Absolutely centered title and navigation
  • Absolutely positioned divs at bottom left and top right
  • Hidden clickable divs for colleagues, joined sites, and featured sites

New Techniques

  • Using CSS' linear-gradient property for the background colors
  • Implementing text-shadow EVERYWHERE
  • Hiding and showing divs with a jQuery animated collapse script
  • Absolutely centering things with just CSS
  • Implementing Google Fonts (what a lifesaver!)


  • This design is deceptively simple-looking; it actually took a lot of CSS and jQuery tricks to make this one come alive, as noted in the Credits list.
  • The layout's title, "Passionate Light," is my favorite phrase in the English language. (No idea why, just always has been!)
  • After learning about Google Fonts, I quite happily dispensed with the cumbersome @font-face rule that I had implemented in version 14. BYE FELICIA!!! ROFL
  • What started the ball rolling for this design: the animated collapse script in use over at a dear Internet friend's site. When I saw that, I just HAD to find out how that was done. That led to Googling and learning more tricks, which led to this design!
  • I love the background gradient of blue to green to white--it makes me think of being underwater and looking up at the sky through the water's surface.