Dribbble member card concept
A Dribbble member card concept, with infinite shits slider in full CSS
<div class="background">
<div class="background">
<div id="card">
<input type="checkbox" name="dropshots" id="dropshots" >
<div class="member-infos">
<h1><a href="http://dribbble.com/One_div" class="member-name" target="_blank">One div</a></h1>
<h2 class="member-location"><a href="" class="entypo-location" target="_blank">Nantes, France</a></h2>
<div class="member-parameters">
<a href="" class="follow entypo-plus"></a>
<a href="" class="options entypo-cog"></a>
<ul class="member-socials">
<li class="member-shots-number"><a href="http://dribbble.com/One_div">3 <span class="shots-number">shots</span></a></li>
<li class="member-follower"><a href="http://dribbble.com/One_div/followers">12 <span class="followers">followers</span></a></li>
</ul>
</div>
<ul class="member-contact">
<li class="member-website" ><a class="entypo-globe" target="_blank" href="http://one-div.com" ></a></li>
<li class="member-twitter" ><a class="entypo-twitter" target="_blank" href="https://twitter.com/One_div" ></a></li>
<li class="member-hire"><a class="entypo-mail" target="_blank" href="http://dribbble.com/One_div" ></a></li>
</ul>
<div class="member-photo">
<div for="dropshots" class="wrapper-img">
<img src="http://dribbble.s3.amazonaws.com/users/242529/avatars/small/273b902fd1562700d99b15f3c00d600d.png?1353934890" alt="" />
</div>
<label for="dropshots" class="labelimg entypo-picture">
</label>
</div>
</div>
<div class="member-shots">
<input type="radio" name="next" id="next1" checked >
<label for="next1" class="next entypo-loop" ></label>
<input type="radio" name="next" id="next2">
<label for="next2" class="next entypo-loop"></label>
<input type="radio" name="next" id="next3">
<label for="next3" class="next entypo-loop"></label>
<ul>
<li class="shot s1">
<div class="shot-stats"><span class="shot-views entypo-eye">225</span><a href=""><span class="shot-comments entypo-comment">4</span></a><a href=""><span class="shot-like entypo-heart">35</span></a></div>
<a href="http://dribbble.com/shots/1075243-CSSNES?list=users" target="_blank" > <img src="http://dribbble.s3.amazonaws.com/users/242529/screenshots/1075243/cssnes.png" alt="" class="shot-preview" /> </a>
</li>
<li class="shot s2">
<div class="shot-stats"><span class="shot-views entypo-eye">225</span><a href=""><span class="shot-comments entypo-comment">4</span></a><a href=""><span class="shot-like entypo-heart">35</span></a></div>
<a href="http://dribbble.com/shots/1075219-Thank-You-jayemsee" target="_blank" >
<img src="http://dribbble.s3.amazonaws.com/users/242529/screenshots/1075219/thank-you.png" alt="" class="shot-preview" />
</a>
</li>
<li class="shot s3">
<div class="shot-stats"><span class="shot-views entypo-eye">1</span><a href=""><span class="shot-comments entypo-comment">0</span></a><a href=""><span class="shot-like entypo-heart">0</span></a></div>
<a href="http://dribbble.com/shots/1083632-Dribbble-Member-Card-Concept" target="_blank" >
<img src="http://dribbble.s3.amazonaws.com/users/242529/screenshots/1083632/dribbble_member_card.png" alt="" class="shot-preview" />
</a>
</li>
</ul>
</div>
</div>
</div>
@import url(http://fonts.googleapis.com/css?family=Raleway);
@import url(http://fonts.googleapis.com/css?family=Raleway);
@import url(http://weloveiconfonts.com/api/?family=entypo);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html,body,.background {
height: 100%;
width: 100%;
font-family: 'Raleway', sans-serif;
color: #999;
}
a {
text-decoration: none;
color: #999;
}
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
[class*="entypo-"] {
width: 1em;
height: 1em;
}
a:hover {
color: #777;
}
.background {
background: url('http://one-div.com/codepen/bg.jpg') no-repeat;
background-size: cover;
background-size: cover;
background-size: cover;
text-align: center;
}
.background:before {
content: "";
height: 100%;
display: inline-block;
vertical-align: middle;
}
#card {
width: 300px;
display: inline-block;
vertical-align: middle;
background: #F0F0F0;
border-radius: 3px 3px 4px 4px;
box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box;
border-top: 1px solid white;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}
.member-infos {
padding: 10px;
text-align: left;
position: relative;
}
h1 {
margin-bottom: 0.5em;
}
h1 a {
color: #4083A9;
font-weight: bold;
font-size: 1.4em;
}
h1 a:hover {
color: #205F82;
}
.member-location a:before {
margin-right: 5px;
}
.member-location {
text-indent: 2px;
}
.follow,.options {
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
background: #D3D3D3;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
box-shadow: 0 2px 0 0 #C0C0C0;
box-shadow: 0 2px 0 0 #C0C0C0;
border-radius: 3px;
}
.follow:hover,.options:hover {
box-shadow: 0 1px 0 0 #C0C0C0;
box-shadow: 0 1px 0 0 #C0C0C0;
box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box;
vertical-align: bottom;
margin-bottom: -1px;
}
.member-parameters a {
display: inline-block;
}
.member-parameters {
margin-top: 0.5em;
}
.member-photo {
position: absolute;
border-radius: 50%;
overflow: hidden;
right: 10px;
bottom: -40px;
z-index: 3;
width: 80px;
height: 80px;
}
.member-photo img {
display: block;
font-weight: bold;
border-radius: 50%;
}
.member-socials {
display: inline-block;
font-weight: bold;
vertical-align: bottom;
line-height: 8px;
}
.member-socials li {
display: inline-block;
}
.shots-number,.followers {
font-weight: normal;
display: block;
margin-top: 10px;
font-size: 0.9em;
}
.member-contact {
position: absolute;
right: 10px;
top: 10px;
}
.member-contact li {
display: inline-block;
margin-left: 10px;
}
.member-shots {
height: 0px;
overflow: hidden;
border-radius: 0 0px 3px 3px;
position: relative;
transition: all 1000ms cubic-bezier(.45,.17,.39,1.39);
transition: all 1000ms cubic-bezier(.45,.17,.39,1.39);
transition: all 1000ms cubic-bezier(.45,.17,.39,1.39);
transition: all 1000ms cubic-bezier(.45,.17,.39,1.39);
transition: all 1000ms cubic-bezier(.45,.17,.39,1.39);
}
.shot-comments {
margin: 0 15px;
}
.shot-stats a:hover span {
color: #4083A9;
}
.member-shots:before {
content: "";
position: absolute;
width: 100%;
height: 16%;
background: linear-gradient(to bottom, rgba(0,0,0,0.10) 0%,rgba(0,0,0,0) 31%,rgba(0,0,0,0) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.10) 0%,rgba(0,0,0,0) 31%,rgba(0,0,0,0) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.10) 0%,rgba(0,0,0,0) 31%,rgba(0,0,0,0) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.10) 0%,rgba(0,0,0,0) 31%,rgba(0,0,0,0) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.10) 0%,rgba(0,0,0,0) 31%,rgba(0,0,0,0) 100%);
left: 0;
top: 0;
z-index: 2;
}
input {
position: absolute;
left: -9999px;
}
.shot {
overflow: hidden;
height: 100%;
width: 100%;
position: absolute;
left: -100%;
transition: all 800ms cubic-bezier(.58,-0.67,1,.83);
transition: all 800ms cubic-bezier(.58,-0.67,1,.83);
transition: all 800ms cubic-bezier(.58,-0.67,1,.83);
transition: all 800ms cubic-bezier(.58,-0.67,1,.83);
transition: all 800ms cubic-bezier(.58,-0.67,1,.83);
}
.shot-stats {
position: absolute;
left: 10px;
top: 10px;
color: #FFF;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
z-index: 2;
}
.shot-stats:after {
position: absolute;
content: "";
width: 110%;
height: 120%;
left: -5%;
top: -5%;
background: rgba(0, 0, 0, 0.4);
border-radius: 3px;
}
.shot-like.entypo-heart,.shot-comments.entypo-comment,.shot-views.entypo-eye {
z-index: 1;
position: relative;
}
.shot-stats a {
color: #FFF;
}
.shot-stats span:before {
margin-right: 2px;
}
.member-shots-number {
padding-right: 6px;
border-right: 1px solid rgba(0, 0, 0, 0.06);
margin-right: 6px;
margin-left: 6px;
}
.shot img {
width: 120%;
min-height: 100%;
position: absolute;
left: -10%;
}
#next1:checked ~ ul .s1,#next2:checked ~ ul .s2,#next3:checked ~ ul .s3 {
left: 0;
}
.member-shots label {
background: #F5F5F5;
height: 40px;
width: 40px;
position: absolute;
bottom: -20px;
z-index: 8;
border-radius: 50%;
left: 50%;
margin-left: -20px;
line-height: 25px;
cursor: pointer;
text-align: center;
text-shadow: 0 1px 0 #FFF;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.18);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.18);
}
.member-shots input:checked + label + input + label {
z-index: 10;
}
.member-shots label:nth-of-type(1) {
z-index: 9;
}
.next:hover {
color: #777;
}
.wrapper-img {
position: absolute;
top: 0;
height: 100%;
width: 100%;
z-index: 2;
cursor: pointer;
transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
transform-style: preserve-3d;
transform-style: preserve-3d;
transform-style: preserve-3d;
transform-style: preserve-3d;
backface-visibility: hidden;
transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.member-photo:hover .wrapper-img {
transform: rotateX(180deg);
transform: rotateX(180deg);
transform: rotateX(180deg);
transform: rotateX(180deg);
transform: rotateX(180deg);
}
.member-photo:hover .labelimg {
transform: rotateX(0deg);
transform: rotateX(0deg);
transform: rotateX(0deg);
transform: rotateX(0deg);
transform: rotateX(0deg);
z-index:3;
}
.labelimg {
position: absolute;
top: 0;
height: 100%;
width: 100%;
left: 0;
z-index: 1;
cursor: pointer;
transform: rotateX(-180deg);
transform: rotateX(-180deg);
transform: rotateX(-180deg);
transform: rotateX(-180deg);
transform: rotateX(-180deg);
transform-style: preserve-3d;
transform-style: preserve-3d;
transform-style: preserve-3d;
transform-style: preserve-3d;
backface-visibility: hidden;
background: #4083A9;
color: #F0F0F0;
text-align: center;
line-height: 80px;
font-size: 40px;
border-radius: 50%;
transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
#dropshots:checked ~ .member-shots {
height: 250px;
}
#dropshots:checked + .member-infos .wrapper-img {
transform: rotateX(180deg);
transform: rotateX(180deg);
transform: rotateX(180deg);
transform: rotateX(180deg);
transform: rotateX(180deg);
}
#dropshots:checked + .member-infos .labelimg {
transform: rotateX(0deg);
transform: rotateX(0deg);
transform: rotateX(0deg);
transform: rotateX(0deg);
transform: rotateX(0deg);
z-index:3;
}
//https://twitter.com/One_div
//https://twitter.com/One_div
//http://one-div.com <-- CSS3 single element database