SethTrowbridge/css-3d-book
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

nice shadows

Browse Source
This commit is contained in:
TreetopFlyer 2021-08-12 10:53:23 -04:00
parent 1148549159
commit b00b2712c3
1 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
index.html
View File

@ -89,7 +89,7 @@
left:0;
transform: rotateY(180deg);
}
.Panel::before, .Panel::after
.Panel.Page::before, .Panel.Page::after
{
content:" ";
@ -110,14 +110,26 @@ background-image: conic-gradient(from 0deg at 0% 0%, #00000000 33%, #000000FF 75
{
transform:rotateY(180deg) scaleX(-1);
}
.Shadow::after
{
transform: rotateX(90deg) translateY(-80px) translateZ(12px);
box-shadow: 0px 80px 60px black, 0px 80px 20px black;
display: block;
position: absolute;
top: 100%;
content: " ";
width: 100%;
height: 29px;
border-radius: 39px;
}
</style>
<div class="Shot">
<div class="Table" show="cover">
<div class="Book">
<img style="display:block; height:100%; width:auto;" src="http://placekitten.com/20/200"/>
<div class="Spine">
<div class="Spine__Glue" swing="closed"><div class="Panel Cover Front"><img src="book-panel-cover.jpg"/><img src="book-panel-cover.jpg"/></div></div>
<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>
@ -131,7 +143,7 @@ background-image: conic-gradient(from 0deg at 0% 0%, #00000000 33%, #000000FF 75
<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"><img src="book-panel-cover.jpg"/><img src="book-panel-cover.jpg"/></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>
</div>
</div>