updates
This commit is contained in:
parent
5bb9a865b6
commit
7c36626819
3
icon-leaf.svg
Normal file
3
icon-leaf.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M41.0717 8.95871L41.0717 22.6941L27.3363 22.6941L27.3363 8.95871L41.0717 8.95871ZM41.0717 8.95871L8.95871 41.0717M41.1181 22.8297L28.3357 35.6121L14.4183 35.6121V21.6947L27.2007 8.91228M20.907 15.206V29.1234L34.8244 29.1234" stroke="black" stroke-width="3"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 371 B |
1310
index.html
1310
index.html
File diff suppressed because one or more lines are too long
202
pad.html
Normal file
202
pad.html
Normal file
@ -0,0 +1,202 @@
|
|||||||
|
<style>
|
||||||
|
|
||||||
|
.frame
|
||||||
|
{
|
||||||
|
position:relative;
|
||||||
|
width:500px;
|
||||||
|
padding:20px;
|
||||||
|
border-bottom: none;
|
||||||
|
box-sizing:border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame__image
|
||||||
|
{
|
||||||
|
position:relative;
|
||||||
|
z-index:20;
|
||||||
|
margin-bottom:19px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame__bar
|
||||||
|
{
|
||||||
|
position:relative;
|
||||||
|
bottom:0;
|
||||||
|
left:0;
|
||||||
|
width:100%;
|
||||||
|
height:44px;
|
||||||
|
overflow:hidden;
|
||||||
|
transform-origin: center 22.5px;
|
||||||
|
}
|
||||||
|
.frame__bar span
|
||||||
|
{
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: -10.5px;
|
||||||
|
left: 50%;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border: 5px solid #000;
|
||||||
|
border-right-color: transparent;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
transform: translate(-50%, 20px) rotate(45deg);
|
||||||
|
transition: left 0.4s;
|
||||||
|
}
|
||||||
|
.frame__bar span::before, .frame__bar span::after
|
||||||
|
{
|
||||||
|
content: " ";
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
width: 1000px;
|
||||||
|
height:0px;
|
||||||
|
border-top: 5px solid black;
|
||||||
|
transform:rotate(-45deg);
|
||||||
|
}
|
||||||
|
.frame__bar span::before
|
||||||
|
{
|
||||||
|
bottom: -0.5px;
|
||||||
|
right: 20px;
|
||||||
|
transform-origin: right bottom;
|
||||||
|
}
|
||||||
|
.frame__bar span::after
|
||||||
|
{
|
||||||
|
top: -4px;
|
||||||
|
left: 17px;
|
||||||
|
transform-origin: left top;
|
||||||
|
}
|
||||||
|
.frame__bar--down
|
||||||
|
{
|
||||||
|
transform: scaleY(-1);
|
||||||
|
}
|
||||||
|
.frame__bar--up
|
||||||
|
{
|
||||||
|
transform: scaleY(1);
|
||||||
|
}
|
||||||
|
.frame__bar--1-3 span
|
||||||
|
{
|
||||||
|
left:16.6%;
|
||||||
|
}
|
||||||
|
.frame__bar--2-3 span
|
||||||
|
{
|
||||||
|
left:50%;
|
||||||
|
}
|
||||||
|
.frame__bar--3-3 span
|
||||||
|
{
|
||||||
|
left:83%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame__bracket
|
||||||
|
{
|
||||||
|
position:relative;
|
||||||
|
display:block;
|
||||||
|
width:100%;
|
||||||
|
height:0px;
|
||||||
|
top:-200px;
|
||||||
|
z-index:10;
|
||||||
|
border-top:5px solid black;
|
||||||
|
}
|
||||||
|
.frame__bracket::before, .frame__bracket::after
|
||||||
|
{
|
||||||
|
content:" ";
|
||||||
|
display:block;
|
||||||
|
width:20px;
|
||||||
|
height:171px;
|
||||||
|
position:absolute;
|
||||||
|
top:-5px;
|
||||||
|
border:5px solid black;
|
||||||
|
}
|
||||||
|
.frame__bracket::before
|
||||||
|
{
|
||||||
|
border-right-width: 0px;
|
||||||
|
left:-20px;
|
||||||
|
}
|
||||||
|
.frame__bracket::after
|
||||||
|
{
|
||||||
|
border-left-width: 0px;
|
||||||
|
right:-20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame__button
|
||||||
|
{
|
||||||
|
position:relative;
|
||||||
|
display:block;
|
||||||
|
float:left;
|
||||||
|
padding:5px 0px 5px 0px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width:33.3%;
|
||||||
|
text-align:center;
|
||||||
|
cursor:pointer;
|
||||||
|
}
|
||||||
|
.frame__button:hover::before
|
||||||
|
{
|
||||||
|
content: " ";
|
||||||
|
display: block;
|
||||||
|
width: 7px;
|
||||||
|
height: 7px;
|
||||||
|
background: black;
|
||||||
|
position: absolute;
|
||||||
|
top: -12px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-5px) rotate(45deg);
|
||||||
|
transition: top 0.4s, bottom 0.4s;
|
||||||
|
}
|
||||||
|
.frame__button--upper:hover::before
|
||||||
|
{
|
||||||
|
top:auto;
|
||||||
|
bottom:-9px;
|
||||||
|
}
|
||||||
|
.frame__button[data-frame-active='true']:hover::before
|
||||||
|
{
|
||||||
|
bottom:auto;
|
||||||
|
top: -30px;
|
||||||
|
}
|
||||||
|
.frame__button--upper[data-frame-active='true']:hover::before
|
||||||
|
{
|
||||||
|
bottom: -26px;
|
||||||
|
top:auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="frame">
|
||||||
|
<div class="frame__image">
|
||||||
|
<img style="display:block; width:100%; height:auto;" src="https://via.placeholder.com/1024x512.png"/>
|
||||||
|
</div>
|
||||||
|
<div class="frame__button frame__button--upper">Cover</div><div class="frame__button frame__button--upper">Back </div><div class="frame__button frame__button--upper">Spine</div>
|
||||||
|
|
||||||
|
<div class="frame__bar"><span></span></div>
|
||||||
|
<div class="frame__bracket"></div>
|
||||||
|
|
||||||
|
<div class="frame__button">Intro</div><div class="frame__button">1 & 2</div><div class="frame__button">3 & 4</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function frame__setup(inFrame)
|
||||||
|
{
|
||||||
|
var buttons = inFrame.querySelectorAll(".frame__button");
|
||||||
|
var bar = inFrame.querySelector(".frame__bar");
|
||||||
|
var active = false;
|
||||||
|
|
||||||
|
function activate(inButton)
|
||||||
|
{
|
||||||
|
var index = parseInt(inButton.getAttribute("data-frame-index"));
|
||||||
|
var classX = "frame__bar--" + ((index % 3)+1) + "-3";
|
||||||
|
var classY = index > 2 ? "frame__bar--down" : "frame__bar--up";
|
||||||
|
|
||||||
|
bar.setAttribute("class", "frame__bar " + classX + " " + classY);
|
||||||
|
|
||||||
|
if(active)
|
||||||
|
{
|
||||||
|
active.setAttribute("data-frame-active", "false");
|
||||||
|
}
|
||||||
|
active = inButton;
|
||||||
|
inButton.setAttribute("data-frame-active", "true");
|
||||||
|
}
|
||||||
|
for(var i=0; i<buttons.length; i++)
|
||||||
|
{
|
||||||
|
buttons[i].setAttribute("data-frame-index", i);
|
||||||
|
buttons[i].setAttribute("data-frame-active", "false");
|
||||||
|
buttons[i].addEventListener("click", function(){ activate(this); });
|
||||||
|
}
|
||||||
|
|
||||||
|
activate( buttons[0] );
|
||||||
|
}
|
||||||
|
|
||||||
|
frame__setup(document.querySelector(".frame"));
|
||||||
|
</script>
|
||||||
12
svg.html
Normal file
12
svg.html
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 100 100" style="width:100px; height:100%; background:yellow;">
|
||||||
|
<defs>
|
||||||
|
<symbol id="diamond">
|
||||||
|
<g transform="rotate(45 10 10)">
|
||||||
|
<rect width="20" height="20"></rect>
|
||||||
|
</g>
|
||||||
|
</symbol>
|
||||||
|
</defs>
|
||||||
|
<use href="#diamond" x="0" y="0" />
|
||||||
|
<use href="#diamond" x="0" y="100%" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
After Width: | Height: | Size: 397 B |
Loading…
Reference in New Issue
Block a user