Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS BOOKMARK WITH SHADOW BISH
/* CSS BOOKMARK WITH SHADOW BISH */
.bookmark {
position: absolute;
top: 50px;
left: 150px;
background: rgba(15,135,85,.5);
width: 140px;
height: 350px;
}
.bookmark .stripe {
position: absolute;
top: 0;
right: 3px;
bottom: -18px;
left: 3px;
border: 1px solid rgba(255,255,255,.5);
border-bottom: 0;
border-top: 0;
z-index: 1;
pointer-events: none;
}
.bookmark:after {
content: "";
position: absolute;
bottom: -20px;
left: 0;
border: 70px solid rgba(15,135,85,.5);
border-top: 0;
border-bottom: 20px solid transparent;
}
.bookmark .shadow {
position: absolute;
top: 0;
right: 0;
bottom: -21px;
left: 0;
box-shadow: -2px 0 2px -1px rgba(0,0,0,.5), 2px 0 2px -1px rgba(0,0,0,.5);
z-index: -1;
}
.bookmark .shadow:before,
.bookmark .shadow:after {
content: "";
position: absolute;
display: block;
bottom: 11px;
width: 77px;
height: 6px;
background: transparent;
box-shadow: 0 3px 3px -2px rgba(0,0,0,.5);
}
.bookmark .shadow:before {
left: -4px;
transform: rotate(-16deg)
}
.bookmark .shadow:after {
right: -4px;
transform: rotate(16deg)
}
<div class="bookmark">
<div class="stripe"></div>
<div class="shadow"></div>
</div>
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment