Skip to content

Instantly share code, notes, and snippets.

@Poordeveloper

Poordeveloper/Items Options.markdown

Last active November 10, 2015 12:16
Show Gist options
  • Save Poordeveloper/b189aeac7844bde6e2d2 to your computer and use it in GitHub Desktop.
Save Poordeveloper/b189aeac7844bde6e2d2 to your computer and use it in GitHub Desktop.
Download ZIP
Items Options
Raw
index.html
<div id="gal1">
<article class="item">
<div class="picture">
<img src="http://dribbble.s3.amazonaws.com/users/4467/screenshots/1171624/popeye-classics-12_1x.jpg" />
<div class="underlay">
<a href="#" class="e"><span class="entypo-pencil"></span></a>
<a href="#" class="l" data-reveal-id="myModal" data-animation="fade"><span class="entypo-trash"></span></a>
</div>
</div>
</article>
</div>
<div id="gal2">
<article class="item">
<div class="picture">
<img src="http://dribbble.s3.amazonaws.com/users/4467/screenshots/1168462/ock.jpg" />
<div class="underlay">
<a href="#" class="e"><span class="entypo-pencil"></span></a>
<a href="#" class="l" data-reveal-id="myModal" data-animation="fade"><span class="entypo-trash"></span></a>
</div>
</div>
</article>
</div>
<div id="gal3">
<article class="item">
<div class="picture">
<img src="http://dribbble.s3.amazonaws.com/users/4467/screenshots/1116777/snout-spout_1x.jpg" />
<div class="underlay">
<a href="#" class="e"><span class="entypo-pencil"></span></a>
<a href="#" class="l" data-reveal-id="myModal" data-animation="fade"><span class="entypo-trash"></span></a>
</div>
</div>
</article>
</div>
<div id="gal4">
<article class="item">
<div class="picture">
<img src="http://dribbble.s3.amazonaws.com/users/4467/screenshots/680136/sloth-and-chunk.jpg" />
<div class="underlay">
<a href="#" class="e"><span class="entypo-pencil"></span></a>
<a href="#" class="l" data-reveal-id="myModal" data-animation="fade"><span class="entypo-trash"></span></a>
</div>
</div>
</article>
</div>
<div id="gal5">
<article class="item">
<div class="picture">
<img src="http://dribbble.s3.amazonaws.com/users/4467/screenshots/595005/emily.jpg" />
<div class="underlay">
<a href="#" class="e"><span class="entypo-pencil"></span></a>
<a href="#" class="l" data-reveal-id="myModal" data-animation="fade"><span class="entypo-trash"></span></a>
</div>
</div>
</article>
</div>
Raw
Items Options.markdown
Raw
script.js
var Flipper = {
tag: null,
do: function(o) {
Flipper.tag = o;
Flipper.load();
},
load: function() {
setTimeout(function() {
if(document.readyState === 'complete') {
Flipper.build();
return;
}
Flipper.load();
}, 10);
},
build: function() {
var obj, img, o;
obj = document.querySelectorAll(Flipper.tag);
for(i=0,l=obj.length;i<l;i++) {
o = obj[i];
img = o.getElementsByTagName('img')[0];
img.style.display = 'none';
img = img.src;
if(img) {
img = '<img src='+img+' />';
o.innerHTML = o.innerHTML + '\
<div class=slits> \
<div><b></b><em></em>'+img+'</div> \
<div><b></b><em></em>'+img+'</div> \
</div> \
<b></b>';
}
}
}
};
/* GO */
Flipper.do('.picture');
$(document).ready(function() {
$('.botao').on('click', function(){
$('#myModal').reveal({
animation: 'fadeAndPop',
animationspeed: 300,
closeonbackgroundclick: true,
dismissmodalclass: 'close-reveal-modal'
});
});
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
* {
border: 0;
font-size: 100%;
}
.entypo-pencil, .entypo-trash {
color: #ccc;
margin: 7px 0 0 -5px;
position: absolute;
text-decoration: none;
}
html, body {
background: #1d1e20;
font: normal 13px/1.5 Proxima Nova, Helvetica Neue, Helvetica, Arial;
height: 100%;
text-align: center;
width: 100%;
}
body > div {
cursor: pointer;
display: inline-table;
height: 174px;
padding: 20px;
position: relative;
width: 174px;
z-index: 30;
}
/* ITEM */
.item .picture {
background: rgba(0, 0, 0, 0.3);
box-shadow: 0 0 0 1px rgba(0,0,0,0.5),
0 1px 4px rgba(0,0,0,0.7),
0 0 0 1px rgba(255,255,255,0.04) inset;
border-radius: 3px;
height: 174px;
position: relative;
width: 174px;
-webkit-backface-visibility: hidden;
}
/* DEFAULT IMAGE */
.item .picture img {
border-radius: 3px;
position: relative;
z-index: 50;
}
/* SHADOW */
.item .picture > b {
background: #000;
bottom: 0;
border-radius: 100%;
box-shadow: 0 0 20px 10px #000;
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 99%;
-webkit-transition: all 0.485s cubic-bezier(0.075, 0.45, 0.165, 1);
-moz-transition: all 0.485s cubic-bezier(0.075, 0.45, 0.165, 1);
-o-transition: all 0.485s cubic-bezier(0.075, 0.45, 0.165, 1);
-ms-transition: all 0.485s cubic-bezier(0.075, 0.45, 0.165, 1);
}
/* SLITS WRAP */
.item .picture .slits {
bottom: 0;
left: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
z-index: 40;
-webkit-perspective: 700px;
-moz-perspective: 700px;
}
/* SLIT STYLE + POSITIONING */
.item .picture .slits > div {
bottom: 50%;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
-webkit-transition: all 0.485s cubic-bezier(0.075, 0.45, 0.165, 1);
-moz-transition: all 0.485s cubic-bezier(0.075, 0.45, 0.165, 1);
-o-transition: all 0.485s cubic-bezier(0.075, 0.45, 0.165, 1);
-ms-transition: all 0.485s cubic-bezier(0.075, 0.45, 0.165, 1);
-webkit-transform-origin: 50% 0;
-moz-transform-origin: top;
-o-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
}
/* BOTTOM SLIT POSITIONING */
.item .picture .slits > div + div {
bottom: 0;
top: 50%;
}
/* BOTTOM SLIT IMAGE POSITION */
.item .picture .slits > div + div img {
margin: -50% 0 0 0;
}
/* TOP SLIT RADIUS */
.item .picture .slits > div img, .item .picture .slits > div b, .item .picture .slits > div em {
border-radius: 3px 3px 0 0;
}
/* BOTTOM SLIT RADIUS */
.item .picture .slits > div img, .item .picture .slits > div b, .item .picture .slits > div em {
border-radius: 0 0 3px 3px;
}
/* SLIT GRAIDENT + INNER SHADOW */
.item .picture .slits > div b, .item .picture .slits > div em {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 70;
-webkit-transition: all 0.485s cubic-bezier(0.075, 0.45, 0.165, 1);
}
/* SLIT GRADIENT HIGHLIGHT */
.item .picture .slits > div em {
background-color: #000;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 0, 0)), to(rgb(255, 255, 255)));
background-image: -webkit-linear-gradient(top, rgb(0, 0, 0), rgb(255, 255, 255));
background-image: -moz-linear-gradient(top, rgb(0, 0, 0), rgb(255, 255, 255));
background-image: -o-linear-gradient(top, rgb(0, 0, 0), rgb(255, 255, 255));
background-image: -ms-linear-gradient(top, rgb(0, 0, 0), rgb(255, 255, 255));
background-image: linear-gradient(top, rgb(0, 0, 0), rgb(255, 255, 255));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#000000', EndColorStr='#ffffff');
opacity: 0;
}
/* TOP SLIT INNER SHADOW */
.item .picture .slits > div b {
border: 1px solid rgba(255, 255, 255, 0.3);
border-bottom: 0;
}
/* BOTTOM SLIT INNER SHADOW */
.item .picture .slits > div + div b {
border: 1px solid rgba(255, 255, 255, 0.3);
border-top: 0;
}
/* ITEM HOVER */
.item .picture:hover .slits > div + div {
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
-webkit-transform: rotateX(65deg);
-moz-transform: rotateX(65deg);
-o-transform: rotateX(65deg);
-ms-transform: rotateX(65deg);
}
.item .picture:hover .slits > div + div b {
background: rgba(0, 0, 0, 0.2);
}
.item .picture:hover .slits > div + div em {
opacity: 0.15;
}
/* SHADOW */
.item .picture:hover > b {
bottom: 25%;
left: 5%;
opacity: 0.65;
top: 70%;
right: 5%;
}
/* ITEM UNDERLAY */
.item .picture .underlay {
bottom: 6px;
height: 34px;
left: 0;
position: absolute;
right: 0;
transform: translate3d(0, 0, 0);
user-select: none;
-webkit-touch-callout: none;
-webkit-transform: translate3d(0, 0, 0);
-webkit-user-select: none;
-moz-transform: translate3d(0, 0, 0);
-moz-user-select: none;
-ms-transform: translate3d(0, 0, 0);
-ms-user-select: none;
-o-transform: translate3d(0, 0, 0);
}
.item .picture .underlay a {
background: #1b1d1e;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(53, 56, 59)), to(rgb(34, 36, 38)));
background-image: -webkit-linear-gradient(top, rgb(53, 56, 59), rgb(34, 36, 38));
background-image: -moz-linear-gradient(top, rgb(53, 56, 59), rgb(34, 36, 38));
background-image: -o-linear-gradient(top, rgb(53, 56, 59), rgb(34, 36, 38));
background-image: -ms-linear-gradient(top, rgb(53, 56, 59), rgb(34, 36, 38));
background-image: linear-gradient(top, rgb(53, 56, 59), rgb(34, 36, 38));
border-radius: 100px;
box-shadow: inset 0 0 1px 1px rgba(0,0,0,0.25), inset 0 1px 3px 0 rgba(0,0,0,0.4), 0 1px 0 0 rgba(255,255,255,0.07), 0 0 0 1px rgba(255,255,255,0.03);
display: inline-block;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#35383b', EndColorStr='#222426');
height: 34px;
margin: 0 8px;
position: relative;
transition: all 0.025s ease;
width: 34px;
-webkit-box-shadow: inset 0 0 1px 1px rgba(0,0,0,0.25), inset 0 1px 3px 0 rgba(0,0,0,0.4), 0 1px 0 0 rgba(255,255,255,0.07), 0 0 0 1px rgba(255,255,255,0.03);
-webkit-transition: all 0.025s ease;
-moz-box-shadow: inset 0 0 1px 1px rgba(0,0,0,0.25), inset 0 1px 3px 0 rgba(0,0,0,0.4), 0 1px 0 0 rgba(255,255,255,0.07), 0 0 0 1px rgba(255,255,255,0.03);
-moz-transition: all 0.025s ease;
-ms-transition: all 0.025s ease;
-o-transition: all 0.025s ease;
}
.item .picture .underlay a:hover {
background-color: #474a4e;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(71, 74, 78)), to(rgb(49, 51, 54)));
background-image: -webkit-linear-gradient(top, rgb(71, 74, 78), rgb(49, 51, 54));
background-image: -moz-linear-gradient(top, rgb(71, 74, 78), rgb(49, 51, 54));
background-image: -o-linear-gradient(top, rgb(71, 74, 78), rgb(49, 51, 54));
background-image: -ms-linear-gradient(top, rgb(71, 74, 78), rgb(49, 51, 54));
background-image: linear-gradient(top, rgb(71, 74, 78), rgb(49, 51, 54));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#474a4e', EndColorStr='#313336');
}
.item .picture .underlay a:active {
background: #1b1d1e;
box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 0 0 rgba(255, 255, 255, 0.07), 0 0 0 1px rgba(255, 255,255, 0.03);
-webkit-box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 0 0 rgba(255, 255, 255, 0.07), 0 0 0 1px rgba(255, 255,255, 0.03);
-moz-box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 0 0 rgba(255, 255, 255, 0.07), 0 0 0 1px rgba(255, 255,255, 0.03);
}
/* ITEM UNDERLAY BUTTONS */
/* EDIT */
.item .picture .underlay a.pencil-2:before, .item .picture .underlay a.trash-2:before {
color: #b2b5ba;
display: block;
font-size: 16px;
left: 50%;
margin: -8px 0 0 -8px;
position: absolute;
top: 50%;
}
.item .picture .underlay a.pencil-2:active:before, .item .picture .underlay a.trash-2:active:before {
color: #000;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment