I’m working on building up a library of CSS templates for restaurants. I’ll be doing hundreds of restaurant sites for the rest of the year. I’m currently having bit of fun with a few CSS tricks on one of the sites….
- It’s an elastic layout
- Text-size is in EMs
- The header uses SIFR (Scalable Inman Flash Replacement) text
- The main image is set to a width of 100%
- I have different stylesheets for different size text
So when you resize the text, it has a knock on effect on everything else, the layout widths increase, the header re-scales, and the photo stretches. The overall effect is that you can zoom in and out of the site. Have a look.