A vCard with fold-out links
Dark Sharp Edges background from Subtle Patterns: http://subtlepatterns.com/dark-sharp-edges/
<div class="vcard"> | |
<div class="bio"> | |
<img src="http://ianlunn.co.uk/wp-content/uploads/avatar.jpg" alt="Ian Lunn" /> | |
<h1>Ian Lunn</h1> | |
<h2>Front End Developer</h2> | |
<p>Ian uses the latest web technologies to build creative and effective websites. Creator of open-source projects <a href="http://ianlunn.github.io/Hover/" target="_blank">Hover.css</a>, <a href="http://sequencejs.com/" target="_blank">Sequence.js</a>, and author of <a href="http://css3foundations.com/" target="_blank">CSS3 Foundations</a>.</p> | |
</div> | |
<ul class="links"> | |
<li><a href="http://codepen.io/IanLunn/" target="_blank"><i class="fa fa-codepen"></i></a></li><li><a href="https://twitter.com/ianlunn" target="_blank"><i class="fa fa-twitter"></i></a></li><li><a href="https://github.com/IanLunn" target="_blank"><i class="fa fa-github"></i></a></li><li><a href="https://plus.google.com/+IanLunn" target="_blank"><i class="fa fa-google-plus"></i></a></li><li><a href="http://ianlunn.co.uk/" target="_blank"><i class="fa fa-folder-open"></i></a></li> | |
</ul> | |
</div> |
// Add touch support in place of :hover | |
if (Modernizr.touch === true) { | |
var $vcard = document.querySelectorAll(".vcard")[0]; | |
$vcard.addEventListener("click", function() { | |
$vcard.classList.toggle("active"); | |
}); | |
} |
@import url(http://fonts.googleapis.com/css?family=Lato:400,900); | |
body, | |
html { | |
margin: 0; | |
padding: 0; | |
height: 100%; | |
} | |
body { | |
background: black url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/154/footer_lodyas.png"); | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
} | |
.no-touch .vcard:hover { | |
transform: translateY(1.5em) translateZ(0); | |
.bio { | |
transform: translateY(-3em) translateZ(0); | |
} | |
.links { | |
transform: rotateX(0deg); | |
background: white; | |
} | |
} | |
.vcard { | |
position: relative; | |
width: 100%; | |
max-width: 280px; | |
perspective: 800px; | |
font-size: 24px; | |
transition: transform .3s; | |
transform: translateZ(0); | |
-webkit-tap-highlight-color: rgba(0,0,0,0); | |
> * { | |
box-sizing: border-box; | |
} | |
&.active { | |
transform: translateY(1.5em) translateZ(0); | |
.bio { | |
transform: translateY(-3em) translateZ(0); | |
} | |
.links { | |
transform: rotateX(0deg); | |
background: white; | |
} | |
} | |
.bio { | |
overflow: hidden; | |
position: relative; | |
z-index: 1; | |
width: 100%; | |
padding: 1em; | |
padding-top: 2em; | |
border-top-left-radius: 2px; | |
border-top-right-radius: 2px; | |
background: white; | |
border-top: #159FCD solid 4px; | |
border-bottom: #ccc solid 2px; | |
font-family: sans-serif; | |
font-size: .625em; | |
line-height: 160%; | |
text-align: center; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
transform: translateZ(0); | |
transition-duration: .3s; | |
transition-properties: transform; | |
h1, | |
h2, | |
p { | |
font-family: 'Lato', sans-serif; | |
} | |
h1, | |
h2 { | |
margin: 0; | |
line-height: 140%; | |
font-weight: 900; | |
} | |
h1 { | |
font-size: 1.375em; | |
} | |
h2 { | |
font-size: 1em; | |
} | |
img { | |
display: block; | |
width: 80px; | |
margin: 0 auto; | |
margin-bottom: .725em; | |
border-radius: 50%; | |
} | |
a { | |
text-decoration: none; | |
color: #159FCD; | |
transition: .3s color; | |
&:hover { | |
color: #27589A; | |
} | |
} | |
} | |
.links { | |
position: absolute; | |
bottom: 0; | |
width: 100%; | |
margin: 0; | |
padding: 0; | |
background: black; | |
border-bottom-left-radius: 2px; | |
border-bottom-right-radius: 2px; | |
transform-origin: 50% 0%; | |
transform: rotateX(-90deg) translateZ(0); | |
transition-duration: .3s; | |
transition-properties: background transform; | |
} | |
li { | |
display: inline-block; | |
vertical-align: middle; | |
width: 20%; | |
list-style: none; | |
text-align: center; | |
} | |
li a { | |
display: block; | |
width: 100%; | |
height: 1em; | |
padding: .5em 0; | |
color: #222; | |
transition-duration: .5s; | |
transition-property: background; | |
&:hover { | |
background: #EEE; | |
} | |
} | |
} |
A vCard with fold-out links
Dark Sharp Edges background from Subtle Patterns: http://subtlepatterns.com/dark-sharp-edges/