Our typography instructor, Christopher Swift, introduced us to the potential joys of CSS3. He was always interested in showing us anything he thought was AWESOME, which included the ability to place type on an angle. My first attempt at a portfolio site used angled type. While Chris was interested in the typographic potential of the web, I was drawn in by the opportunity to start making circles and other shapes without using an image. So I started playing around and began to test what I could do with CSS3 and HTML5.
Chris' view: "...explore the translation and scale aspects of the works. I think translating them for the web in a 'what would Emil Ruder have done if he had the internet?' kind of thinking is very interesting." In other words, use the proportions of the design and apply it to the entire webpage. Don't worry about horizontal or vertical sizing, just use the page (i.e., the entire screen) as the canvas. So 1/3 of the height is 1/3 of the screen whether thats 600px or 1200px.
My view: Originally Swiss designers determined the grid and then designed on the grid; therefore I thought it was important to keep the proportions including the verticalness of the design. The thought was that if they had the ability to design for the internet, they would still develop a grid and design upon that. At the same time I wished to play with the drawing of shapes and borders that CSS3 has to offer. So I looked for Swiss style examples on the web and chose the ones I wanted to attempt to recreate. It was a mix of modern work and some Emil Ruder works for some variety.
So the plan was to keep the proportions consistent to the original layout, and make it scalable where possible, especially when using images that spanned the page. Most of the scalability of the pieces only occurs when zooming in and out on the page so that everything remains proportional and together. Unless it is an actual photograph, all other shapes are created and placed with CSS3. It's a fun exercise and one I'll continue to add to over time as it provides practice with code.
Unfortunately, not every browser will display these creations equally. The horror that is Internet Explorer will simply show hard corners where curves should be and solid colours instead of opacity. It is very unfriendly to the wonderful things that can be done with CSS3. So it's best to view the designs in Safari, Firefox, Opera or Chrome. All wonderful web browsers that work to allow wonderful things to happen on the internet. Otherwise, view in horror.
The images below are copies of the actual work I was trying to reproduce and clicking the image will show what I was actually able to recreate. They have been borrowed from A1/AisleOne and Smashing Magazine.