Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Flip avatar on hover thanks to CSS transforms.

  • Loading branch information...
commit 36b202ddf5071ba109f3d86adcffc8dba6cb788d 1 parent 557c3c7
@kdeldycke authored
Showing with 70 additions and 6 deletions.
  1. +64 −5 theme/static/css/style.css
  2. +6 −1 theme/templates/base.html
View
69 theme/static/css/style.css
@@ -31,18 +31,77 @@ body {
color: #2D2D2D;
}
.page-header a:hover {
- color: #666;
+ color: #005580;
text-decoration: none;
}
-.page-header .avatar {
+
+
+/* Card flip inspired by http://learn.shayhowe.com/advanced-html-css/transitions-animations */
+.page-header .avatar-container {
float: left;
- overflow: hidden;
- border-radius: 16px;
width: 80px;
height: 80px;
+ margin: 0 20px;
+ position: relative;
+ -webkit-perspective: 600;
+ -moz-perspective: 600;
+ -ms-perspective: 600;
+ -o-perspective: 600;
+ perspective: 600;
+}
+.page-header .avatar {
+ height: 100%;
+ width: 100%;
+ position: absolute;
+ -webkit-transform-style: preserve-3d;
+ -moz-transform-style: preserve-3d;
+ -ms-transform-style: preserve-3d;
+ -o-transform-style: preserve-3d;
+ transform-style: preserve-3d;
+ -webkit-transition: all .3s ease-in-out;
+ -moz-transition: all .3s ease-in-out;
+ -ms-transition: all .3s ease-in-out;
+ -o-transition: all .3s ease-in-out;
+ transition: all .3s ease-in-out;
+}
+.page-header .avatar .side {
border: solid 3px white;
box-shadow: 0 1px 6px rgba(0, 0, 0, .25);
- margin: 0 20px;
+ border-radius: 16px;
+ overflow: hidden;
+ height: 100%;
+ width: 100%;
+ position: absolute;
+ -webkit-backface-visibility: hidden;
+ -moz-backface-visibility: hidden;
+ -ms-backface-visibility: hidden;
+ -o-backface-visibility: hidden;
+ backface-visibility: hidden;
+}
+.page-header .avatar:hover, .page-header .avatar .back {
+ -webkit-transform: rotateY(180deg);
+ -moz-transform: rotateY(180deg);
+ -ms-transform: rotateY(180deg);
+ -o-transform: rotateY(180deg);
+ transform: rotateY(180deg);
+}
+.page-header .avatar .side:hover, .page-header .avatar .back {
+ border-color: #005580;
+}
+.page-header .avatar .back {
+ background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));
+ background-image: -webkit-linear-gradient(#eeeeee,#dddddd);
+ background-image: -moz-linear-gradient(#eeeeee,#dddddd);
+ background-image: -o-linear-gradient(#eeeeee,#dddddd);
+ background-image: linear-gradient(#eeeeee,#dddddd);
+ -webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.1);
+ -moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.1);
+ box-shadow: inset 0 0 25px rgba(0,0,0,0.1);
+ font-size: 13px;
+ line-height: 20px;
+}
+.page-header .avatar .back p {
+ padding-top: 8px;
}
View
7 theme/templates/base.html
@@ -70,7 +70,12 @@
<header>
<div class="page-header">
- <div class="avatar"><img src="/static/uploads/2006/05/avatar-orig.png"/></div>
+ <a href="{{ SITEURL }}" class="avatar-container">
+ <div class="avatar">
+ <div class="side"><img src="/static/uploads/2006/05/avatar-orig.png"/></div>
+ <div class="side back"><p class="text-center">Official avatar since MMIV</p></div>
+ </div>
+ </a>
<h1><a href="{{ SITEURL }}">{{ SITENAME }}</a> <small>{{ SITESUBTITLE }}</small></h1>
</div>
Please sign in to comment.
Something went wrong with that request. Please try again.