CSS3.1: The final depiction of the cards
This post follows on from “Working with CSS3: the shape of the web to come“.
Whilst it is the final state of the postcard scatter, it is the first stage of realising the overall design. Here we aim for a static layout matching the our original design sketch. There is no animation leading to the final design, and the layout is static, though the images are set at a high enough resolution to allow us to scale to larger displays later.
This stage is the most important for the micro-site, as it is the one that gets our message over to visitors. To achieve these aims we used the following CSS3 markup:
transform: rotation(); This permits us to place our rectangular cards at different angles. This syntax used with prefixes (-webkit- -ms- -moz- etc.) worked reproducibly all current browsers
border-radius: ; Giving the postcards rounded corners – not strictly essential to the effect we were looking for, but throws up some interesting exceptions. The radius applied to a parent div is not automatically applied to children in all browsers – in this instance we have a .postcard, which defines the block where the postcard content lives, and has a drop shadow (box-shadow) applied to it. Within this is the actual photograph (img). In Firefox this also has the border radius applied, in Chrome you have to apply the border-radius again to the img, even though it is a child element.
box-shadow: ; This allows us to have elements drop a shadow behind them, all browsers work will even though a border radius is applied to the postcards. If the shadow is offset, so the shadow appears to the bottom right of the object casting it, to give the impression of a casting light above and to the left of the object, the shadow painted is a solid block of colour. As we have underlying postcard(s), this is quite unsightly. There is no option for making the shadow transparent in CSS3 (it does not appear to be possible to specify colour as ‘rgba ‘etc.). To get round this the shadows are given zero width, but 5px feathering – which is semi transparent, and gives us an acceptable appearance for the end-state of the images.
Interaction using the :hover and :active states
The interaction needs to be really intuitive – none of our text is visible to the visitor when they arrive, and we are reliant on the appearance to suggest that more is available: When you receive a postcard you expect a message on the back, but online you can’t physically flip the cards over…
To get a simple and immediate interaction we use the :hover and :active states that were originally designed for web-links (anchors) – when you hover your mouse over a web-link it (usually) changes colour or form to indicate that there is a link present (and not just some underlined or funny-coloured text). A similar ‘active’ state indicates that you have clicked the link, and the browser is trying to find the resource you’ve asked for (strictly the W3C standard for CSS2 states that the active state persists from the time that you click on an element to the time that you release the mouse button).
Whilst usually used for anchors, it has been possible to use :hover and :active states for all elements (not just links or anchors) for a number of years, but implementation is still a bit variable across browsers. Our first attempt, setting the hover states to bring postcards to the top of the pile by changin their z-index worked well in all browsers. Using the :active state to ‘reverse’ the card worked as expected only in Firefox, however – see the analysis below…
Font choice
While not strictly CSS3, recent developments have made a large number of fonts widely available for free use on the web. Here we’ve used the font ‘Bilbo’ by TypeSETit (available through google.com/webfonts/). This is a pretty good script font that does not look out-of-place on the back of a postcard – if you were to take time to make your postcard legible!
Fonts do make downloads a little slower, and you may spot a flicker in the font when you load the page, moving from your standard cursive font face to Bilbo, particularly if you are on a slow internet connection.
Micro-site analysis
Bear in mind that we are not doing anything to make this micro-site compatible with older browsers, you can see our initial site at lochalinediveboats.co.uk/bak01.html (this URL will be updated as improved versions of the micro-site are completed), and as a very much reduced scale screen-shot above right.
- The layout for our first attempt works fine in all current browsers.
- All browsers bring cards to the front when your mouse (or finger) hovers over them
- Only Firefox (v.13.0.1) displays the reverse side for the card using the simple anchor active: selector.
- The active state in Chrome (20.0.1132.57 m) shows the reverse side of the card the first time the active state is called, but not subsequently – unless you right click then left click…
- IE9, Safari (5.1.7), Opera (12) and Webkit browsers do not show the active state at all
The problem we have encountered here is with CSS2, not CSS3. My reading of the W3C guidelines indicate that the active state is being correctly implemented in Firefox, but not the other browsers. With touch screen browsers, however, it is not entirely clear how the active state would be initiated as there is no activating mouse button on your finger, so clearly this aspect of our design will need to be re-thought…
Update 26th July 2012: Clearly we needed to change so that the card ‘reversed’ in the hover state, rather than the active state, and this, with a little tidying of the CSS now works in all current browsers (including on mobile devices), giving us our starting point for the rest of the development.
Articles in this series:
- Working with CSS3: the shape of the web to come the dive boat charter micro-site concept and sketch layout
- THIS ARTICLE CSS3.1: The final depiction of the cards showing the basic layout of the cards. The layout here copes with displays between 300px and 1200px wide. Wider displays leave the site stranded in the centre of the page see: CSS3.1 : Dive boat charters test site v1
- CSS3.2 Improved display on wide screens and mobile devices working with very wide displays using industry standard techniques, and looking at how we might future proof the design
