CSS Books

Developer

Size

7,833 Kb

Views

36,432

CSS Books Previews
CSS Books HTML Codes
CSS Books CSS Codes

How do I make an css books?

Inspired by: https://dribbble.com/shots/2485224-Inbox-Zero-Animation.Maybe I'll try and add the cat also at some point... ;-). What is a css books? How do you make a css books? This script and codes were developed by Mark Thomes on 04 July 2022, Monday.

CSS Books Previews

CSS Books - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Books</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/7534eb3fb62294822de9eace9.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ $COLOR_BOOK_COVER1: #FF5420;
$COLOR_BOOK_COVER2: #4D4D4D;
$COLOR_BOOK_COVER3: #2BA7FF;
$COLOR_BOOK_PAPER: #f1f1f1;
body { background-color: lighten($gray, 25%);
}
.container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: pointer; &:after { content: ''; position: absolute; right: -19px; bottom: -6px; left: -5px; height: 9px; border-radius: 50%; background-color: rgba(black, 0.25); z-index: -1; transition: background-color 0.5s cubic-bezier(0.77, 0, 0.175, 1); }
}
.book { position: relative; width: 120px; height: 30px; margin-left: 6px; background-color: $COLOR_BOOK_COVER1; border-radius: 5px; box-shadow: inset 0 -5px darken($COLOR_BOOK_COVER1, 5%); transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1); &:before, &:after { content: ''; width: 12px; height: 5px; position: absolute; left: -6px; border-radius: 5px; background-color: $COLOR_BOOK_COVER1; } &:after { bottom: 0; background-color: darken($COLOR_BOOK_COVER1, 5%); }
}
.book-paper { position: absolute; top: 5px; bottom: 5px; width: 40px; background-color: $COLOR_BOOK_PAPER; border-top-right-radius: 3px; border-bottom-right-radius: 3px; &:before, &:after { content: ''; position: absolute; right: 0; width: 20px; height: 6px; background-color: darken($COLOR_BOOK_PAPER, 8%); border-radius: 3px; } &:before { border-bottom-right-radius: 0; } &:after { bottom: 0; border-top-right-radius: 0; }
}
.book-paper-shadow { position: absolute; top: 6px; right: 0; width: 13px; height: 8px; background-color: darken($COLOR_BOOK_PAPER, 8%); &:before { content: ''; position: absolute; top: 0; bottom: 0; left: -3px; width: 8px; border-radius: 3px; background-color: $COLOR_BOOK_PAPER; }
}
.book:nth-child(1) { left: 6px;
}
.book:nth-child(2) { background-color: $COLOR_BOOK_COVER2; box-shadow: inset 0 -5px darken($COLOR_BOOK_COVER2, 5%); &:before { background-color: $COLOR_BOOK_COVER2; } &:after { background-color: darken($COLOR_BOOK_COVER2, 5%); }
}
.book:nth-child(3) { left: 8px; background-color: $COLOR_BOOK_COVER3; box-shadow: inset 0 -5px darken($COLOR_BOOK_COVER3, 5%); &:before { background-color: $COLOR_BOOK_COVER3; } &:after { background-color: darken($COLOR_BOOK_COVER3, 5%); }
}
.container:hover,
.container:focus { &:after { background-color: rgba(black, 0.18); } .book:nth-child(1) { transform: translate(6px, -37px) rotateZ(-13deg); } .book:nth-child(2) { transform: translate(9px, -11px) rotateZ(11deg); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container isActive"> <div class="book"> <div class="book-paper"> <div class="book-paper-shadow"></div> </div> </div> <div class="book"> <div class="book-paper"> <div class="book-paper-shadow"></div> </div> </div> <div class="book"> <div class="book-paper"> <div class="book-paper-shadow"></div> </div> </div>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/15979/footer-inject.js'></script>
</body>
</html>

CSS Books - Script Codes CSS Codes

$COLOR_BOOK_COVER1: #FF5420;
$COLOR_BOOK_COVER2: #4D4D4D;
$COLOR_BOOK_COVER3: #2BA7FF;
$COLOR_BOOK_PAPER: #f1f1f1;
body { background-color: lighten($gray, 25%);
}
.container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: pointer; &:after { content: ''; position: absolute; right: -19px; bottom: -6px; left: -5px; height: 9px; border-radius: 50%; background-color: rgba(black, 0.25); z-index: -1; transition: background-color 0.5s cubic-bezier(0.77, 0, 0.175, 1); }
}
.book { position: relative; width: 120px; height: 30px; margin-left: 6px; background-color: $COLOR_BOOK_COVER1; border-radius: 5px; box-shadow: inset 0 -5px darken($COLOR_BOOK_COVER1, 5%); transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1); &:before, &:after { content: ''; width: 12px; height: 5px; position: absolute; left: -6px; border-radius: 5px; background-color: $COLOR_BOOK_COVER1; } &:after { bottom: 0; background-color: darken($COLOR_BOOK_COVER1, 5%); }
}
.book-paper { position: absolute; top: 5px; bottom: 5px; width: 40px; background-color: $COLOR_BOOK_PAPER; border-top-right-radius: 3px; border-bottom-right-radius: 3px; &:before, &:after { content: ''; position: absolute; right: 0; width: 20px; height: 6px; background-color: darken($COLOR_BOOK_PAPER, 8%); border-radius: 3px; } &:before { border-bottom-right-radius: 0; } &:after { bottom: 0; border-top-right-radius: 0; }
}
.book-paper-shadow { position: absolute; top: 6px; right: 0; width: 13px; height: 8px; background-color: darken($COLOR_BOOK_PAPER, 8%); &:before { content: ''; position: absolute; top: 0; bottom: 0; left: -3px; width: 8px; border-radius: 3px; background-color: $COLOR_BOOK_PAPER; }
}
.book:nth-child(1) { left: 6px;
}
.book:nth-child(2) { background-color: $COLOR_BOOK_COVER2; box-shadow: inset 0 -5px darken($COLOR_BOOK_COVER2, 5%); &:before { background-color: $COLOR_BOOK_COVER2; } &:after { background-color: darken($COLOR_BOOK_COVER2, 5%); }
}
.book:nth-child(3) { left: 8px; background-color: $COLOR_BOOK_COVER3; box-shadow: inset 0 -5px darken($COLOR_BOOK_COVER3, 5%); &:before { background-color: $COLOR_BOOK_COVER3; } &:after { background-color: darken($COLOR_BOOK_COVER3, 5%); }
}
.container:hover,
.container:focus { &:after { background-color: rgba(black, 0.18); } .book:nth-child(1) { transform: translate(6px, -37px) rotateZ(-13deg); } .book:nth-child(2) { transform: translate(9px, -11px) rotateZ(11deg); }
}

Home Page	Home
Developer	Mark Thomes
Username	WithAnEs
Uploaded	July 04, 2022
Rating	4
Size	7,833 Kb
Views	36,432

Do you need developer help for CSS Books?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mark Thomes (WithAnEs) Script Codes

Name	Size
Save Bar	2,719 Kb
Sidebar Nav	3,808 Kb
Hiding in a box	3,138 Kb
Popup Footer	3,488 Kb
Running Character	6,843 Kb
Social Icons	8,247 Kb
Beer Color	7,886 Kb
Basic Menu CSS	2,787 Kb
CSS Birthday Cake	8,353 Kb
Pharmacy Loader	3,425 Kb

Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
Vanilla modal window	Jasonhowmans	3,554 Kb
Flat iOS 7 Safari Icon	Rss	3,332 Kb
A Pen by Miro Olma	Programiro	2,342 Kb
Resume	Rottingroom	5,483 Kb
FCC Portfolio	Cmwebby	4,304 Kb
We Simplify animation	Meodai	48,169 Kb
Scrolling Horizontal Isotope	Bramus	2,017 Kb
Pattern lab logo	TimPietrusky	3,666 Kb
About Mazano	Kiti	2,585 Kb
Animated SVG stroke-dasharray	Netsi1964	3,179 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!