shadow syntax, ordering
This commit is contained in:
parent
52cf5f024d
commit
cc38a96ae9
BIN
book-page-1.jpg
Normal file
BIN
book-page-1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 465 KiB |
BIN
book-page-2.jpg
Normal file
BIN
book-page-2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 257 KiB |
BIN
book-page-3.jpg
Normal file
BIN
book-page-3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 401 KiB |
BIN
book-page-4.jpg
Normal file
BIN
book-page-4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 426 KiB |
75
index.html
75
index.html
@ -18,16 +18,16 @@
|
||||
text-align:center;
|
||||
transition: transform 1s;
|
||||
}
|
||||
.Shot[show="cover"]{ transform: perspective(1000px) rotateY(-70deg); }
|
||||
.Shot[show="spine"]{ transform: perspective(1000px) rotateY(-10deg); }
|
||||
.Shot[show="back" ]{ transform: perspective(1000px) rotateY(-235deg); }
|
||||
.Shot[show="pages"]{ transform: perspective(1000px) rotateY(-180deg); }
|
||||
.Shot[show="cover"]{ transform: perspective(1000px) rotateY(110deg); }
|
||||
.Shot[show="spine"]{ transform: perspective(1000px) rotateY(180deg); }
|
||||
.Shot[show="back" ]{ transform: perspective(1000px) rotateY(-60deg); }
|
||||
.Shot[show="pages"]{ transform: perspective(1000px) rotateY(0deg); }
|
||||
|
||||
.Book
|
||||
{
|
||||
height:100%;
|
||||
transform-style: preserve-3d;
|
||||
transform: translateZ(100px);
|
||||
transform: translateZ(-100px);
|
||||
position: relative;
|
||||
display:inline-block;
|
||||
}
|
||||
@ -48,12 +48,12 @@
|
||||
width:0;
|
||||
height:100%;
|
||||
position:relative;
|
||||
transform:rotateY(90deg);
|
||||
transform:rotateY(-90deg);
|
||||
transform-style: preserve-3d;
|
||||
transition: transform 0.4s;
|
||||
transition: transform 0.8s;
|
||||
}
|
||||
.Spine__Glue[swing='right']{transform: rotateY( 20deg );}
|
||||
.Spine__Glue[swing='left' ]{transform: rotateY( 160deg );}
|
||||
.Spine__Glue[swing='right']{transform: translateX(-3px) rotateY( -20deg );}
|
||||
.Spine__Glue[swing='left' ]{transform: translateX( 3px) rotateY( -160deg );}
|
||||
.Panel
|
||||
{
|
||||
height:100%;
|
||||
@ -83,13 +83,13 @@
|
||||
left:0;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
.Panel.Page::before, .Panel.Page::after
|
||||
.Shadow-Sheet-Before::before, .Shadow-Sheet-After::after
|
||||
{
|
||||
content:" ";
|
||||
|
||||
background-size: 100% 100%;
|
||||
background-position: 0px 0px;
|
||||
background-image: conic-gradient(from 0deg at 0% 0%, #00000000 33%, #000000FF 75%);
|
||||
background-size: 100% 100%;
|
||||
background-position: 0px 0px;
|
||||
background-image: conic-gradient(from 0deg at 0% 0%, #00000000 33%, #000000FF 75%);
|
||||
|
||||
display:block;
|
||||
position:absolute;
|
||||
@ -104,7 +104,7 @@ background-image: conic-gradient(from 0deg at 0% 0%, #00000000 33%, #000000FF 75
|
||||
{
|
||||
transform:rotateY(180deg) scaleX(-1);
|
||||
}
|
||||
.Shadow::after
|
||||
.Shadow-Drop-After::after, .Shadow-Drop-Before::before
|
||||
{
|
||||
transform: rotateX(90deg) translateY(-100px) translateZ(12px);
|
||||
box-shadow: 0px 100px 60px black, 0px 100px 20px black;
|
||||
@ -116,27 +116,40 @@ background-image: conic-gradient(from 0deg at 0% 0%, #00000000 33%, #000000FF 75
|
||||
height: 29px;
|
||||
border-radius: 39px;
|
||||
}
|
||||
.Shadow-Radiosity-Before::before, .Shadow-Radiosity-After::after
|
||||
{
|
||||
content: " ";
|
||||
background-size: 100% 100%;
|
||||
background-position: 0px 0px;
|
||||
background-image: radial-gradient(188% 24% at 50% 82%, #ffffff52 0%, #0000 100%);
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="Shot">
|
||||
<div class="Shot" show="cover">
|
||||
<div class="Book">
|
||||
<img style="display:block; height:100%; width:auto;" src="http://placekitten.com/20/200"/>
|
||||
<div class="Spine Shadow">
|
||||
<div class="Spine__Glue" swing="closed"><div class="Panel Cover Front Shadow"><img src="book-panel-cover.jpg"/><img src="book-panel-cover.jpg"/></div></div>
|
||||
<div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
|
||||
<div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
|
||||
<div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
|
||||
<div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
|
||||
<div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
|
||||
<div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
|
||||
<div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
|
||||
<div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
|
||||
<div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
|
||||
<div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
|
||||
<div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
|
||||
<div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
|
||||
<div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
|
||||
<div class="Spine__Glue" swing="closed"><div class="Panel Cover Back Shadow"><img src="book-panel-cover.jpg"/><img src="book-panel-cover.jpg"/></div></div>
|
||||
<div class="Spine Shadow-Radiosity-Before Shadow-Drop-After">
|
||||
<div class="Spine__Glue" swing="closed"><div class="Panel Shadow-Radiosity-Before Shadow-Drop-After"><img src="book-panel-cover.jpg"/><img src="book-panel-cover.jpg"/></div></div>
|
||||
<div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
|
||||
<div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
|
||||
<div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
|
||||
<div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
|
||||
<div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
|
||||
<div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
|
||||
<div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
|
||||
<div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
|
||||
<div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
|
||||
<div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
|
||||
<div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
|
||||
<div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
|
||||
<div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
|
||||
<div class="Spine__Glue" swing="closed"><div class="Panel Shadow-Radiosity-After Shadow-Drop-Before"><img src="book-panel-cover.jpg"/><img src="book-panel-cover.jpg"/></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user