Skip to content

Instantly share code, notes, and snippets.

@mhekel

mhekel/Modalindx.html

Last active April 5, 2026 19:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mhekel/d4a822d8e6209ecad4738bc404635697 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mhekel/d4a822d8e6209ecad4738bc404635697 to your computer and use it in GitHub Desktop.
Download ZIP
Book Shelf
Raw
index.html
<div class="case">
<div class="shelf">
<div class="book h4 w4" style="background:white; color:black">
<div>
<span class="vr fs sans">Олифер и&nbsp;Олифер</span>
</div>
<div>
<span class="vr sans">компьютерные<br>СЕТИ</span>
</div>
<div class="num fs sans" style="background:black; color:white; width:100%; height:1rem; margin-bottom:3px; margin-top:13px;">Питер</div>
</div>
<div class="book h2 w4 sans bold" style="background:DarkOliveGreen; color:white">
<div>
<span class="vr sans">.NET C#</span>
</div>
</div>
<div class="book h3 w3" style="background:MidnightBlue; color:white">
<div>
<span class="vr sans">Adobe Photoshop</span>
</div>
</div>
<div class="book h3 w3" style="background:#444; color:white">
<div>
<span class="vr sans">Adobe Lightroom</span>
</div>
</div>
<div class="book h4 w2 serif" style="background:SandyBrown; color:white">
<div>
<span class="vr">HTML 5</span>
</div>
<div class="num">1</div>
</div>
<div class="book h4 w3 serif" style="background:SandyBrown; color:white">
<div>
<span class="vr">CSS3, SCSS</span>
</div>
<div class="num">2</div>
</div>
<div class="book h4 w1 serif" style="background:SandyBrown; color:white">
<div>
<span class="vr">Bootstrap 4</span>
</div>
<div class="num">3</div>
</div>
<div class="book h4 w1 serif" style="background:SandyBrown; color:white">
<div>
<span class="vr">Tailwind</span>
</div>
<div class="num">4</div>
</div>
<div class="book h1 w4 serif" style="background:crimson; color:white">
<div>
<span class="vr">PHP 7</span>
</div>
</div>
<div class="book h2 w3 sans bold" style="background:green; color:white">
<div>
<span class="vr">SQL DataBases</span>
</div>
</div>
<div class="book h1 w1 sans" style="background:DarkSlateBlue; color:white">
<div>
<span class="vr">JavaScript</span>
</div>
<div class="num">1</div>
</div>
<div class="book h1 w1 sans" style="background:DarkSlateBlue; color:white">
<div>
<span class="vr">jQuery</span>
</div>
<div class="num">2</div>
</div>
<div class="book h1 w1 sans" style="background:DarkSlateBlue; color:white">
<div>
<span class="vr">Vue.js</span>
</div>
<div class="num">3</div>
</div>
<div class="book h1 w1 sans" style="background:DarkSlateBlue; color:white">
<div>
<span class="vr">Node.js</span>
</div>
<div class="num">4</div>
</div>
<div class="book h3 w2 sans bold" style="background:white; color:black">
<div>
<span class="vr">Ководство Лебедева</span>
</div>
<div class="num fs">издал</div>
</div>
<div class="book h1 w2" style="background:darkorange; color:black">
<div>
<span class="ve sans bold">Пиши, сокращай</span>
</div>
</div>
</div>
<div class="shelf">
</div>
<div class="shelf">
</div>
</div>
Raw
Modalindx.html
<form class="container">
<input type="radio" name="title" id="book1"/>
<input type="radio" name="title" id="book2"/>
<input type="radio" name="title" id="book3"/>
<input type="radio" name="title" id="book4"/>
<input type="radio" name="title" id="book5"/>
<input type="radio" name="title" id="book6"/>
<input type="radio" name="title" id="book7"/>
<input type="radio" name="title" id="book8"/>
<input type="radio" name="title" id="book9"/>
<input type="radio" name="title" id="book10"/>
<input type="radio" name="title" id="book11"/>
<div class="surface">
<div class="block b1">
<div class="block-inner">
<div class="back"></div>
<div class="bottom"></div>
<div class="front"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
</div>
</div>
<div class="block b2">
<div class="block-inner">
<div class="back"></div>
<div class="bottom"></div>
<div class="front"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
</div>
</div>
<div class="block b3">
<div class="block-inner">
<div class="back"></div>
<div class="bottom"></div>
<div class="front"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
</div>
</div>
<div class="block b4">
<div class="block-inner">
<div class="back"></div>
<div class="bottom"></div>
<div class="front"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
</div>
</div>
<div class="block b5">
<div class="block-inner">
<div class="back"></div>
<div class="bottom"></div>
<div class="front"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
</div>
</div>
<label class="block b6" for="book1">
<div class="block-inner">
<div class="back"></div>
<div class="bottom"></div>
<div class="front">
<div class="spine">The Color Chuck Norris</div>
</div>
<div class="left"></div>
<div class="right" data-title="The Color Chuck Norris">
<div class="cover"></div>
<div class="contents">
<h1>Chapter 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="top"></div>
</div>
</label>
<label class="block b7" for="book2">
<div class="block-inner">
<div class="back"></div>
<div class="bottom"></div>
<div class="front">
<div class="spine">The Phisherman and His Wife</div>
</div>
<div class="left"></div>
<div class="right" data-title="The Phisherman and His Wife">
<div class="cover"></div>
<div class="contents">
<h1>Chapter 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="top"></div>
</div>
</label>
<label class="block b8" for="book3">
<div class="block-inner">
<div class="back"></div>
<div class="bottom"></div>
<div class="front">
<div class="spine">The Little Browser Engine That Couldn’t</div>
</div>
<div class="left"></div>
<div class="right" data-title="The Little Browser Engine That Couldn’t">
<div class="cover"></div>
<div class="contents">
<h1>Chapter 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="top"></div>
</div>
</label>
<label class="block b9" for="book4">
<div class="block-inner">
<div class="back"></div>
<div class="bottom"></div>
<div class="front">
<div class="spine">The DOM-Tree</div>
</div>
<div class="left"></div>
<div class="right" data-title="The DOM-Tree">
<div class="cover"></div>
<div class="contents">
<h1>Chapter 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="top"></div>
</div>
</label>
<label class="block b10" for="book5">
<div class="block-inner">
<div class="back"></div>
<div class="bottom"></div>
<div class="front">
<div class="spine">Sliding Into Auto-DMs</div>
</div>
<div class="left"></div>
<div class="right" data-title="Sliding Into Auto-DMs">
<div class="cover"></div>
<div class="contents">
<h1>Chapter 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="top"></div>
</div>
</label>
<label class="block b11" for="book6">
<div class="block-inner">
<div class="back"></div>
<div class="bottom"></div>
<div class="front">
<div class="spine">Copying and Pasting from Stack Overflow</div>
</div>
<div class="left"></div>
<div class="right" data-title="Copying and Pasting from Stack Overflow">
<div class="cover"></div>
<div class="contents">
<h1>Chapter 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="top"></div>
</div>
</label>
Raw
style.css
$sqSize: 16px;
$contW: 100%;
$contH: 100%;
$xSpaces: 24;
$ySpaces: 14;
$zSpaces: 19;
$xAngle: 80deg;
$zAngle: 0deg;
$books: 11;
$bookStart: 6;
$trans: 0.25s;
// font sizing
$fFontSize: $sqSize*0.75;
$rFontSize: $sqSize*1.5;
$cntntFontSize: $sqSize*0.7;
// non-book colors
$btnColor: #c22;
$shelfColor: #441e12;
/* Block placement */
// parameters: x-pos,y-pos,z-pos, width,depth,height, color, is-book
$blocks:
// shelf
(2,1,1, 22,14,1, $shelfColor, false),
(1,14,1, 24,1,18, $shelfColor, false),
(1,1,1, 1,13,18, $shelfColor, false),
(24,1,1, 1,13,18, $shelfColor, false),
(1,1,19, 24,14,1, $shelfColor, false),
// books
(2,3,2, 2,11,14, #c00000, true),
(4,3,2, 2,11,15, #891a21, true),
(6,3,2, 2,10,16, #bf3e22, true),
(8,3,2, 2,10,14, #0e4326, true),
(10,3,2, 2,11,15, #0066cc, true),
(12,3,2, 2,11,16, #0f7b7e, true),
(14,3,2, 2,10,15, #084e6f, true),
(16,3,2, 2,11,16, #0b0823, true),
(18,3,2, 2,10,14, #38103d, true),
(20,3,2, 2,10,15, #443344, true),
(22,3,2, 2,10,16, #666777, true);
@mixin grid($c, $s) {
$fontS: $s/3;
$xC: #c00;
$yC: #080;
background-image:
repeating-linear-gradient(
180deg,
$c,
$c 1px,
transparent 1px,
transparent $s
),
repeating-linear-gradient(
-90deg,
$c,
$c 1px,
transparent 1px,
transparent $s
);
border-bottom: 1px solid $xC;
border-left: 1px solid $yC;
&::before, &::after {
display: block;
font-size: $fontS;
position: absolute;
text-align: center;
width: $fontS;
height: $fontS;
}
&::before {
color: $yC;
content: "y";
top: 0;
left: -$fontS;
}
&::after {
color: $xC;
content: "x";
right: 0;
bottom: -$fontS;
}
}
@mixin placeBlock($x, $y, $z, $w, $d, $h, $c, $isBook) {
display: block;
transform: translate3d(
$sqSize*($x - 1),
$sqSize*(-$y - ($d - 1)),
($sqSize*$z) + ($sqSize*($h - 1))
);
.block-inner > div {
background-color: $c;
&.top, &.bottom {
width: $sqSize * $w;
height: $sqSize * $d;
}
&.top {
transform: rotateX(-90deg) translateY(-$sqSize*($d - 1));
}
&.bottom {
transform: rotateX(-90deg) translateY(-$sqSize*($d - 1)) translateZ($sqSize*$h);
}
&.front, &.back, &.left, &.right {
&::before {
background-color: #000;
content: "";
width: 100%;
height: 100%;
}
}
&.front, &.back {
width: $sqSize * $w;
height: $sqSize * $h;
&::before {
opacity: 0.2;
}
}
&.front {
transform: translateZ($sqSize * ($d - 1));
}
&.left, &.right {
width: $sqSize * $d;
height: $sqSize * $h;
@if ($isBook == true) {
&::before {
opacity: 0;
}
}
@else {
&::before {
opacity: 0.4;
}
}
}
&.right {
transform: rotateY(-270deg) translate3d($sqSize, 0, $sqSize*($w - $d));
transform-style: preserve-3d;
@if ($isBook == true) {
background-color: #fff;
&::after {
background-color: $c;
content: attr(data-title);
}
}
}
@if ($isBook == true) {
$pgC: #aaa;
&.top, &.back, &.bottom, {
background: {
color: #fff;
image: repeating-linear-gradient(90deg,transparent, transparent 21%, $pgC 21%, $pgC 25%, transparent 25%, transparent 46%, $pgC 46%, $pgC 50%, transparent 50%);
size: $sqSize $sqSize;
};
}
}
}
}
:root {
font-size: 20px;
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body, input {
font-family: "Hind", sans-serif;
font-size: 1em;
}
body {
background-color: #ccc;
height: 100vh;
margin: 0;
}
input {
position: absolute;
}
input[type=radio] {
top: -20px;
left: -20px;
&:checked ~ input[type=reset] {
visibility: visible;
}
}
input[type=reset] {
background-color: $btnColor;
border: 0;
border-radius: 0;
color: #fff;
padding: 0.5em 0.75em;
bottom: 5%;
left: 50%;
visibility: hidden;
transform: translateX(-50%);
transition: background-color 0.2s;
-webkit-appearance: none;
appearance: none;
&:hover, &:focus {
background-color: lighten($btnColor,0.2);
}
&:active {
background-color: darken($btnColor,0.2);
}
}
.container {
animation: fadeIn $trans $trans linear forwards;
display: flex;
margin: auto;
opacity: 0;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: $contW;
height: $contH;
perspective: 800px;
transform-style: preserve-3d;
}
.surface {
//@include grid(#888, $sqSize);
display: block;
width: $sqSize * $xSpaces;
height: $sqSize * $ySpaces;
margin: auto;
transform-style: preserve-3d;
transform: translateY($sqSize * $zSpaces/2) rotateX($xAngle) rotateZ($zAngle);
transition: transform $trans;
will-change: transform;
}
.block {
display: none;
transform-style: preserve-3d;
position: absolute;
bottom: 0;
}
.block-inner div {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
position: absolute;
width: $sqSize;
height: $sqSize;
}
.block-inner {
position: relative;
width: $sqSize;
transition: transform $trans linear;
transform-style: preserve-3d;
transform: rotateX(-90deg) translateZ($sqSize);
}
.back {
transform: translateZ(-$sqSize) rotateY(180deg);
}
.left {
transform-origin: center left;
transform: rotateY(270deg) translateX(-$sqSize);
}
.right {
transform-origin: top right;
&::after, div {
top: 0;
left: 0;
transform-origin: 0 50%;
transition: transform $trans $trans linear;
}
&::after {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
color: #fff;
font-size: $rFontSize;
line-height: $rFontSize;
text-align: center;
padding: 20% 5%;
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
}
div {
width: 100%;
height: 100%;
}
}
.top, .bottom {
transform-origin: top center;
}
.spine, .right::after, .contents h1 {
font: {
family: "Lora", serif;
weight: bold;
};
-webkit-font-smoothing: antialiased;
}
.spine {
background: transparent;
color: #ccc;
font-size: $fFontSize;
line-height: $fFontSize;
top: 0;
left: 0;
transform: rotate(90deg) translate($sqSize*0.75,-50%);
white-space: nowrap;
width: 0;
height: $sqSize;
}
.cover {
background-color: #fff;
z-index: 1;
}
.contents {
font-size: $cntntFontSize;
padding: $sqSize;
h1 {
font-size: 2em;
}
p {
font-family: "Source Sans Pro", serif;
}
}
// * Render blocks *
// one block only
@if length(nth($blocks,1)) == 1 {
.b1 {
@include placeBlock(
nth($blocks, 1),
nth($blocks, 2),
nth($blocks, 3),
nth($blocks, 4),
nth($blocks, 5),
nth($blocks, 6),
nth($blocks, 7),
nth($blocks, 8)
);
}
}
// more than one block
@else {
@for $b from 1 through length($blocks) {
.b#{$b} {
@include placeBlock(
nth(nth($blocks, $b), 1),
nth(nth($blocks, $b), 2),
nth(nth($blocks, $b), 3),
nth(nth($blocks, $b), 4),
nth(nth($blocks, $b), 5),
nth(nth($blocks, $b), 6),
nth(nth($blocks, $b), 7),
nth(nth($blocks, $b), 8)
);
}
}
}
/* Book Viewing */
label:nth-child(n+#{$bookStart}):nth-child(-n+#{$bookStart + $books}):hover .block-inner {
transform: rotateX(-90deg) translateZ($sqSize*4);
}
@for $i from 1 through $books {
input[type=radio]:nth-child(#{$i}) ~ .surface {
label:nth-child(#{$i + $bookStart - 1}) .block-inner {
animation: returnBook $trans linear;
}
}
input[type=radio]:nth-child(#{$i}):checked ~ .surface {
transform: translate(50% - (0% + ((2/$xSpaces) * 100) * $i),$sqSize * $zSpaces/2) rotateX($xAngle) rotateZ($zAngle);
label:nth-child(#{$i + $bookStart - 1}) .block-inner {
animation: viewBook $trans $trans linear forwards;
&:hover {
.right::after, .cover {
transform: rotateY(-135deg);
}
}
}
}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes viewBook {
from {transform: rotateX(-90deg) translateZ($sqSize*4) rotateY(0);}
50% {transform: rotateX(-90deg) translateZ($sqSize*15) rotateY(0);}
to {transform: rotateX(-90deg) translateZ($sqSize*15) rotateY(-90deg) rotateZ(-90deg + $xAngle) translateZ($sqSize*-5);}
}
@keyframes returnBook {
from {transform: rotateX(-90deg) translateZ($sqSize*15) rotateY(-90deg) rotateZ(-90deg + $xAngle) translateZ($sqSize*-5);}
50% {transform: rotateX(-90deg) translateZ($sqSize*15) rotateY(0);}
to {transform: rotateX(-90deg) translateZ($sqSize) rotateY(0);}
}
Raw
style.scss
.case {
border: 2rem solid #ccc;
}
.shelf {
position: relative;
display: flex;
align-items: flex-end;
height: 15rem;
background: linear-gradient(to top, #666, #777 5%);
padding: 0;
&:before {
position: absolute;
top: 0;
content: "";
display: block;
width: 100%;
height: 50%;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
z-index: 100;
}
&:after {
position: absolute;
content: "";
bottom: -2rem;
height: 2rem;
width: 100%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}
& + .shelf {
margin-top: 2rem;
}
}
.book {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-around;
width: 2rem;
align-items: center;
border-radius: 5px;
&:before {
opacity: 0.9;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
background: linear-gradient(
to right,
rgba(0, 0, 0, 0.6) 0,
rgba(0, 0, 0, 0.1) 30%,
rgba(0, 0, 0, 0.1) 70%,
rgba(0, 0, 0, 0.6) 100%
);
border-radius: 4px;
border-top: 1px solid rgba(0, 0, 0, 0.4);
// box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
z-index: 2;
}
& > div {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
span {
display: flex;
line-height: 1em;
width: 100%;
&.vr {
transform: rotate(-90deg);
}
&.ve {
transform: rotate(90deg);
}
}
}
.num {
height: 4em;
}
}
.book {
&.h1 {
height: 75%;
}
&.h2 {
height: 80%;
}
&.h3 {
height: 85%;
}
&.h4 {
height: 90%;
}
&.w1 {
width: 2rem;
}
&.w2 {
width: 2.3rem;
}
&.w3 {
width: 2.5rem;
}
&.w4 {
width: 3rem;
}
&.w5 {
width: 3.5rem;
}
.sans {
font-family: Arial;
}
.serif {
font-family: Times;
}
.bold {
font-weight: bold;
}
.fs {
font-size: 0.8rem;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment