html5 + css3 play


Attempting to see what Swiss design might look like on the web while beginning to learn HTML5 and CSS3

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.

event poster for Seven Montreal Painters using Swiss Design

Seven Montreal Painters

The poster that got me hooked. Chris demonstrated how to do the overlaying triangles with CSS3, which I copied to get started and the added the text blocks.

The Family of Man

With this poster I thought I would test Chris' method and attempt having images span and resize with the size of the canvas.

Nihon Buyo geisha poster

This poster seemed like a great challenge to get used to playing with CSS3 for shapes. It also challenges layout and order of sections to get everything to overlay effectively.

neue wirtshausschilder

More fun with shapes and placement of items.

ZÜrcher Künstler im Helmhaus

An attempt to play with overlaying opacity. The colours change from the poster showing the difference between the additive colour of screens and the subtractive colour of print.

Siet langem bewäht

A spoon seemed like a difficult challenge to attempt and it certainly turned out that way. It took a suggestion to think about taking away white space to figure out how to make it happen. It still doesn't come out perfectly because of how the browser render the code.

InterDesign Inc. poster

Just for fun as it allowed the changing of one corner at a time and provided the opportunity to try out the new element selection features (:nth-of-type(add math here)).

Massimo Vignelli's Unigrid

Testing laying out a large grid of elements and have them cut-off by the container to match the print design.

Projecta't cover

This project played with drop shadow to give the 3D effect of the overlaying squares.

Ruder's Typographie book cover

You can do a lot with CSS3 except flip letters vertically. Some day this feature will come.