Business card style sites are nothing new. Tim Van Damme popularised them a while ago and they’re a handy tool for relaying the most basic and important information about yourself in a very short space of time. I made my own business card type site recently (and tweeted about its self-indulgence) and put some nifty CSS to work—a digital business card whose content changes when you rotate your mobile.
Here it is. Visit this on a desktop browser and in a smartphone (and then try rotating the device).
I was inspired after I saw Engage Interactive’s iPhone site in Paul Annett’s .net magazine article whilst on the train. I only had my iPhone with me which meant that, although in the ideal viewing medium, I wasn’t able to pick apart any source. As my mind so frequently does, I started coding up a ‘my version’ in my head.
After building mine I went and found that Engage’s iPhone site uses JavaScript and works solely on an iPhone (I imagine some for of browser sniffing is used to detect it). This gives them increased functionality as they have horizontal-left and horizontal-right; I only have horizontal but I wanted a device independent site that would work using only CSS.
Read on for the how-to…
The code
What we have here is a page with personal and contact information. We have three possible states: desktop, mobile-portrait and mobile-landscape.
The stacked paper effect is achieved by replicating the appearance of the page <div> in both a :before and :after pseudo-element, giving these a negative z-index and then rotating them. This effect is achieved with no extra markup or images.
<!-- Markup -->
<div id="page">
<div id="about">
[content]
</div>
<div id="contact">
[content]
</div>
</div>
/* CSS */
#page{
position:relative;
margin:0 auto;
padding:20px 20px 0 20px;
border:10px solid #f0f0f0;
background:#fff;
width:400px;
-moz-box-shadow:0 0 10px rgba(0,0,0,0.25);
-webkit-box-shadow:0 0 10px rgba(0,0,0,0.25);
-o-box-shadow:0 0 10px rgba(0,0,0,0.25);
box-shadow:0 0 10px rgba(0,0,0,0.25);
}
#page:before,
#page:after{
content:" ";
display:block;
border:10px solid #f0f0f0;
background:#fff;
z-index:-1;
position:absolute;
top:-10px;
right:-10px;
bottom:-10px;
left:-10px;
-moz-box-shadow:0 0 10px rgba(0,0,0,0.25);
-webkit-box-shadow:0 0 10px rgba(0,0,0,0.25);
-o-box-shadow:0 0 10px rgba(0,0,0,0.25);
box-shadow:0 0 10px rgba(0,0,0,0.25);
-moz-transform:rotate(1deg);
-webkit-transform:rotate(1deg);
-o-transform:rotate(1deg);
transform:rotate(1deg);
}
#page:after{
z-index:-2;
-moz-transform:rotate(-1.5deg);
-webkit-transform:rotate(-1.5deg);
-o-transform:rotate(-1.5deg);
transform:rotate(-1.5deg);
}Each type of content is wrapped in its own <div>. This may, at first, seem extraneous but these are the hooks used to toggle the content displayed on mobile devices in different orientations. If your browser is portrait then hide the contact <div>, if it is landscape them hide the about <div>.
I hide each <div> by absolutely positioning it way off to the left of the screen. This offers more accessibility than a simple display:none;:
@media (max-width: 480px) and (orientation: portrait){
#contact{
position:absolute;
left:-9999px;
}
}
@media (max-width: 480px) and (orientation: landscape){
#about{
position:absolute;
left:-9999px;
}
}Further, when the page loads on a mobile device an overlay animates in and out with some Webkit animations, telling the user to ‘Try rotating your phone…’
<!-- Markup -->
<div id="mask"></div>
<p id="instructions">Try rotating your phone…</p>
/* CSS */
/*------------------------------------*\
INSTRUCTIONS
\*------------------------------------*/
#mask,
#instructions{
display:block;
-webkit-animation-duration:3s;
-webkit-animation-iteration-count:1;
-webkit-animation-timing-function:linear;
}
#mask{
position:absolute;
left:-9999px;
background:rgba(0,0,0,0.75);
z-index:2;
-webkit-animation-name:mask;
}
@-webkit-keyframes mask{
0%{
opacity:0;
}
10%{
opacity:1;
top:0;
right:0;
bottom:0;
}
90%{
opacity:1;
top:0;
right:0;
bottom:0;
}
99%{
opacity:0;
top:0;
right:0;
bottom:0;
}
100%{
opacity:0;
}
}
#instructions{
font-family:Calibri, sans-serif; /* Using a non-Typekit face to try and alleviate the delay in text-display */
width:200px;
position:absolute;
top:-9999px;
left:50%;
background:rgba(0,0,0,0.75);
z-index:3;
padding:10px;
background:#fef8c4;
border:1px solid #d8d566;
margin:-12px 0 0 -100px;
font-weight:bold;
text-align:center;
-moz-box-shadow:0 0 10px rgba(0,0,0,0.75),0 1px #fff inset;
-webkit-box-shadow:0 0 10px rgba(0,0,0,0.75),0 1px #fff inset;
-o-box-shadow:0 0 10px rgba(0,0,0,0.75),0 1px #fff inset;
box-shadow:0 0 10px rgba(0,0,0,0.75),0 1px #fff inset;
-webkit-animation-name:message;
}
@-webkit-keyframes message{
0%{
opacity:0;
}
10%{
opacity:1;
top:50%;
left:50%;
}
90%{
opacity:1;
top:50%;
left:50%;
}
99%{
opacity:0;
top:50%;
left:50%;
}
100%{
opacity:0;
}
}
}
Another thing to note; the image in the page is used as an inline image, the favicon and the iPhone homescreen icon. The same image has been reused three times, this isn’t anything amazing but it means only one request over a mobile connection.
Issues
Suze bought me Typekit recently which I thought I’d try out, however there is a little bug on mobile whereby Typekit prevents any text from displaying for a moment. The length of this ‘moment’ depends on the speed of your connection.
Furthermore, the overlay mentioned previously is displayed with CSS based on resolution. Ideally you’d use a more robust method of writing this to the view than saying ‘if the screen is really this small then use CSS to display the markup that is there anyway regardless of the device’. Resolution dependence isn’t explicit enough because a) no matter what device you are on, the ‘rotate you phone’ text is always present in the markup and b) a 27″ iMac will display the text to the user is they resize their browser down far enough; a user can actually see the phone related text on a desktop if they resize enough.
However, this was just a proof-of-concept idea just to see if I could do it—I’m pretty pleased with the results.
By Harry Roberts on Tuesday, February 22nd, 2011 in Web Development. Tags: CSS, CSS3, iPhone, Mobile | 5 Comments »
+
Mark S said on 23 February, 2011 at 10:29 am
Great article, good information and code, but…
Why would hiding content (not menus/links) to the nether regions of the left be more accessible…
If it is not meant to be visible, it should be display:none / visibility:hidden… (Some screenreaders can still read this, I’m sure)
If it is not meant to be visible for “sight reading”, then yes, to the left is suitable.
(Oh also, if we’re talking about using it for accessibility, Right to left readers could then get a scroll bar aswell, which is hardly accessible)
Harry Roberts said on 23 February, 2011 at 10:44 am
Mark:
A lot of screen readers do not read content with
display:none;or similar which means that the content is essentially not there. By hiding the content off-screen you’re not making it disappear, you’re merely displaying it out of the viewport’s boundaries.It is purely a visual effect, the markup should remain intact but for ‘sight reading’ it just doesn’t want to be visible.
As for the RTL argument, that’s a very very slight edge case I feel…
Stu Robson said on 23 February, 2011 at 12:25 pm
I notice that you specify max-width so that it works in all browsers if you resize them rather than device-max-width which would work for iPhones etc. Was this intentional ?
Lovely execution as always, now to clean up my demo page using the paper stack idea from January – http://alwaystwisted.com/backstage/notes.html and do a little blog too.
That bug from @typekit is generic to any hosted font-face solution. Richard Rutter wrote a nice post about how to control this in last years @24ways blog collection (December 2nd I think).
Mark S said on 23 February, 2011 at 1:40 pm
Harry,
If the content is not visible to sight readers, why would it be read via screen readers…
Desktop users with screen readers would hear “Try rotating your phone…” which is surely incorrect.
If the content is hidden for other reasons (image replacement, skip to content links etc.) it makes sense to use margin-left, if it is because content is hidden from view… it should be hidden to screen readers too.
The RTL argument was flippantly thrown in as an extra point that could be considered. I agree, marginal edge case, good to know about though.
Drew said on 24 February, 2011 at 12:49 am
Or, you could just display the same content, regardless of orientation. There is absolutely no reason to hide it in portrait mode.