Skip to content

Instantly share code, notes, and snippets.

/index.html

Created November 18, 2014 16:43
Show Gist options
  • Save anonymous/b6b0ddfe04c71c8646e4 to your computer and use it in GitHub Desktop.
Save anonymous/b6b0ddfe04c71c8646e4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.5.1/webcomponents.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/polymer/0.5.1/polymer.min.js"></script>
</head>
<body>
<style>
.image-container{
position:absolute;
left:50px
}
.move{
position:absolute;
top:10px;
left:-20px;
}
</style>
<!-- Define element -->
<polymer-element name="fold-over" noscript>
<template>
<style>
.shadow{
height:15px;
width:20px;
}
.grid{
background-color:#91C4A6;
color:#fff;
text-transform:uppercase;
font-family: Helvetica, Arial, Sans-Serif;
padding:5px 0px 5px 10px;
display:block;
float:left;
height:16px;
}
</style>
<div class="shadow">
<svg height="15" width="20">
<polygon points="20,05 20,20 0,15" style="fill:#6F908F;"></polygon>
</svg>
</div>
<span class="grid">
<content></content>
</span>
<svg height="26" width="30">
<polygon points="0,0 30,30 0,30" style="fill:#91C4A6;"></polygon>
</svg>
</template>
</polymer-element>
<!-- Use element -->
<div class="image-container">
<fold-over class="move">Meow Hello World</fold-over>
<img src="http://dummyimage.com/300x300/333333/333333">
</div>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.5.1/webcomponents.min.js"><\/script>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.5.1/polymer.min.js"><\/script>
</head>
<body>
<style>
.image-container{
position:absolute;
left:50px
}
.move{
position:absolute;
top:10px;
left:-20px;
}
</style>
<\!-- Define element -->
<polymer-element name="fold-over" noscript>
<template>
<style>
.shadow{
height:15px;
width:20px;
}
.grid{
background-color:#91C4A6;
color:#fff;
text-transform:uppercase;
font-family: Helvetica, Arial, Sans-Serif;
padding:5px 0px 5px 10px;
display:block;
float:left;
height:16px;
}
</style>
<div class="shadow">
<svg height="15" width="20">
<polygon points="20,05 20,20 0,15" style="fill:#6F908F;"></polygon>
</svg>
</div>
<span class="grid">
<content></content>
</span>
<svg height="26" width="30">
<polygon points="0,0 30,30 0,30" style="fill:#91C4A6;"></polygon>
</svg>
</template>
</polymer-element>
<\!-- Use element -->
<div class="image-container">
<fold-over class="move">Meow Hello World</fold-over>
<img src="http://dummyimage.com/300x300/333333/333333">
</div>
</body>
</html></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment