Skip to content
Browse files

Commit CSS bookshelf to github

  • Loading branch information...
1 parent 1741d0b commit 631249d942dc684ed69722927957900f0a910708 @steveworkman committed
View
14 README.md
@@ -1,4 +1,14 @@
-cssbookshelf
+# CSS Bookshelf
============
-A bookshelf in CSS3
+## Intro
+The books on my shelf, in wonderful CSS3. Learn more about how this was made on the [CSS3 Bookshelf blog post](http://www.steveworkman.com/web-design/css3-web-design/2010/css3-bookshelf/). This is compatible with Safari 4 (OS X 10.6 and iOS), Opera 10.5+, IE10+ Firefox 5+ and Chrome 4+. IE9 works but without animations, and IE 10 works very well.
+
+## Usage
+Download the whole repo, make sure you include the bookshelf.css stylesheet and the bookshelf.js file. jQuery 1.4+ is required for the click events
+
+## Demo
+Check out the demo in demo.html and see it working on my blog at http://www.steveworkman.com/bookshelf
+
+### Author
+This demo was created by [Steve Workman](http://www.steveworkman.com)
View
248 bookshelf.css
@@ -0,0 +1,248 @@
+/* CSS Bookshelf */
+/* By Steve Workman - www.steveworkman.com */
+/* Full support in Safari 4 on OS X Snow Leopard and Opera 10.5 */
+/* Partial support in Firefox 3.6, full support in 4+ */
+/* Very little support in IE 8 and below, some support in IE 9, Good support in IE10 */
+/* For more details, see the blog post */
+
+dl.bookshelf {
+ display: block;
+ height:450px; /* height includes room for the description */
+ position: relative;
+ background: transparent url(img/shelf.png) 0 290px no-repeat; /* 300px is height of tallest book */
+}
+
+dl.bookshelf dt {
+ height:300px; /* Default height of books */
+ display: block;
+ float: left;
+ border:1px solid black;
+ font-size: 1.5em;
+ position: absolute; /* Using relative-absolute positioning */
+
+ -webkit-transition-property: left, webkit-transform, webkit-box-shadow; /* transition on two properties */
+ -webkit-transition-duration: 0.5s; /* take 0.5 seconds */
+ -webkit-transition-timing-function:ease-in; /* Ease in */
+ -webkit-transform-origin: left bottom; /* use the left, bottom of the element as the origin of transformation */
+ -webkit-transform:rotate(-4deg) translateY(10px);
+ -webkit-perspective:100;
+
+ /* Firefox supports transitions in 3.7+ */
+ -moz-transition-property: left, moz-transform;
+ -moz-transition-duration: 0.5s;
+ -moz-transition-timing-function:ease-in;
+ -moz-transform-origin: left bottom;
+ -moz-transform:rotate(-4deg) translateY(10px);
+ -moz-perspective:100;
+
+ -o-transition-property: left, o-transform;
+ -o-transition-duration: 0.5s;
+ -o-transition-timing-function:ease-in;
+ -o-transform-origin: left bottom;
+ -o-transform:rotate(-4deg) translateY(10px);
+ -o-perspective:100;
+
+ /* One day... */
+ -ms-transition-property: left, ms-transform;
+ -ms-transition-duration: 0.5s;
+ -ms-transition-timing-function:ease-in;
+ -ms-transform-origin: left bottom;
+ -ms-transform:rotate(-4deg) translateY(10px);
+ -ms-perspective:100;
+
+ /* prefix-less properties */
+ transition-property: left, transform;
+ transition-duration: 0.5s;
+ transition-timing-function:ease-in;
+ transform-origin: left bottom;
+ transform:rotate(-4deg) translateY(10px);
+ perspective:100;
+}
+
+dl.bookshelf dt span {
+ -webkit-transform: rotate(90deg); /* Rotate book title 90 degrees */
+ -moz-transform: rotate(90deg);
+ -o-transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+ transform: rotate(90deg);
+
+ display: block;
+ position: relative;
+ width: 300px; /* width is height of book */
+ top:150px;
+ right: 130px;
+ font-size:0.75em;
+}
+
+/* Each book is specified by class */
+/* Could be done with nth class, but not really necessary */
+
+dl.bookshelf dt.cssmastery {
+ background: url(img/cssmast-spine-full.png) 0 0 no-repeat,
+ url(img/cssmast-front.png) 40px 0 no-repeat; /* multiple backgrounds, one for spine, one for front cover */
+ left:10px;
+ width:260px; /* Actual full width of the book */
+ z-index:1; /* z index is the order of the book from left to right */
+}
+
+dl.bookshelf dt.beautwebdes {
+ background: url(img/beautdesign-spine.png) 0 0 no-repeat,
+ url(img/beautdesign-front.png) 40px 0 no-repeat;
+ left:52px;
+ width:280px;
+ z-index:2;
+}
+
+dl.bookshelf dt.dontmakemethink {
+ background: url(img/dontmakemethink-spine.png) 0 0 no-repeat,
+ url(img/dontmakemethink-front.png) 40px 0 no-repeat;
+ left:94px;
+ width:270px;
+ z-index:3;
+}
+
+
+dl.bookshelf dt.psforphotographers {
+ background:url(img/photoshop-spine.png) 0 0 no-repeat,
+ url(img/photoshop-front.png) 40px 0 no-repeat;
+ left:136px;
+ width:270px;
+ z-index:4;
+}
+
+dl.bookshelf dt.psforphotographers span {
+ color:#fff;
+}
+
+dl.bookshelf dt.webstandardsdesign {
+ background:url(img/webstandcreativity-spine.png) 0 0 no-repeat,
+ url(img/webstandcreativity-front.png) 40px 0 no-repeat;
+ left:220px;
+ width:305px;
+ z-index:6;
+ color: #fff;
+}
+
+/* Use of web fonts if you want to on the book titles */
+dl.bookshelf dt.webstandardsdesign span {
+ font-family: Helvetica;
+}
+
+dl.bookshelf dt.rightsideofbrain {
+ background:url(img/drawing-spine.png) 0 0 no-repeat,
+ url(img/drawing-front.png) 40px 0 no-repeat;
+ left:265px;
+ width:290px;
+ z-index:7;
+}
+
+dl.bookshelf dt.rightsideofbrain span {
+ font-family: "Times";
+}
+
+dl.bookshelf dt.learnedinarchitecture {
+ background:url(img/architecture-spine.png) 0 0 no-repeat,
+ url(img/architecture-front.png) 40px 0 no-repeat;
+ left:325px;
+ width:245px;
+ height: 150px; /* Smaller book */
+ top:150px;
+ z-index:8;
+ color: #fff;
+}
+
+dl.bookshelf dt.learnedinarchitecture span {
+ font-size:0.5em;
+ width: 130px;
+ right:50px;
+ top:60px;
+}
+
+dl.bookshelf dt.beginningphp {
+ background:url(img/php-spine.png) 0 0 no-repeat,
+ url(img/php-front.png) 40px 0 no-repeat;
+ left:178px;
+ width:270px;
+ z-index:4;
+}
+
+dl.bookshelf dt.beginningphp span {
+ top:140px;
+ color:#000;
+}
+
+
+dl.bookshelf dd {
+ position: absolute;
+ left: -9999px; /* off-screen at first */
+ font-size: 1em;
+ /* transition in from the left */
+ -webkit-transition-property: background, left;
+ -moz-transition-property: background, left;
+ -o-transition-property: background, left;
+ -ms-transition-property: background, left;
+ transition-property: background, left;
+}
+
+/* Hover over or focus on a book and have it pull out of the shelf */
+dl.bookshelf dt:not(.showBook):hover {
+ cursor:pointer; /* turn cursor to a hand */
+
+ -webkit-transform: rotate(-5deg) translateX(-30px) translateY(10px); /* Roate 5 degrees and pull out 30px */
+ -webkit-box-shadow:#000 1px 3px 5px; /* Add a box shadow so it looks like the book has depth */
+
+ -moz-transform: rotate(-5deg) translateX(-30px) translateY(10px);
+ -moz-box-shadow:#000 1px 3px 5px;
+ -o-transform: rotate(-5deg) translateX(-30px) translateY(10px);
+ -o-box-shadow:#000 1px 3px 5px;
+ -ms-transform: rotate(-5deg) translateX(-30px) translateY(10px);
+ -ms-box-shadow:#000 1px 3px 5px;
+ transform: rotate(-5deg) translateX(-30px) translateY(10px);
+ box-shadow:#000 1px 3px 5px;
+}
+
+/* When you click/touch the book, it animates out of the shelf to the front and center */
+dl.bookshelf dt.showBook {
+ -webkit-transform: translateZ(10px) scale(1.1) rotate(0); /* Come above all the books */
+ -webkit-box-shadow:#000 10px 10px 5px;
+
+ -moz-transform: scale(1.1) rotate(0); /* translateZ is -webkit only at the moment */
+ -moz-box-shadow:#000 10px 10px 5px;
+ -o-transform: scale(1.1) rotate(0);
+ -o-box-shadow:#000 10px 10px 5px;
+ -ms-transform:scale(1.1) rotate(0);
+ -ms-box-shadow:#000 10px 10px 5px;
+ transform: translateZ(10px) scale(1.1) rotate(0);
+ box-shadow:#000 10px 10px 5px;
+
+ left:335px; /*(page width / 2) - (book width / 2), or thereabouts */
+ z-index: 100; /* just incase the translateZ doesn't work */
+ padding-left: -80px;
+}
+
+/* Class applied to definitions when shown */
+dl.bookshelf dd.showBook {
+ display:block;
+ width:350px;
+ position: absolute;
+ top:310px;
+ left:250px;
+ background:rgba(0,0,0,0.8); /* RGBA background */
+ padding: 10px;
+ color:#fff;
+ -webkit-border-radius:10px;
+ -moz-border-radius:10px;
+ border-radius:10px; /* Opera and MS will support border radius without prefix */
+ text-shadow: #666 1px 1px;
+}
+
+dl.bookshelf dd.showBook a {
+ text-shadow: none; /* Remove the text shadow for the links */
+}
+
+/* Special case for amazon affliate links */
+dl.bookshelf dd .amazonLink {
+ float: right;
+ display: block;
+ margin: 10px;
+}
View
15 bookshelf.js
@@ -0,0 +1,15 @@
+// CSS Bookshelf JS
+// By Steve Workman - www.steveworkman.com/bookshelf
+// Requires jQuery, works with 1.4+
+function bookshelf() {
+ var className = '';
+ if (!$(this).hasClass('showBook')) {
+ className = $(this).attr('class');
+ $('.bookshelf .'+className).addClass('showBook');
+ } else {
+ $(this).removeClass('showBook');
+ className = $(this).attr('class');
+ $('.bookshelf .'+className).removeClass('showBook');
+ }
+ }
+$('.bookshelf dt').click(bookshelf);
View
51 demo.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html>
+ <head>
+ <title>CSS Bookshelf</title>
+ <link rel="stylesheet" href="bookshelf.css">
+ </head>
+ <body>
+ <h1>CSS Bookshelf</h1>
+ <p>The books on my shelf, in wonderful CSS3. Learn more about how this was made on the CSS3 Bookshelf blog post. This is compatible with Safari 4 (OS X 10.6 and iPhone/iPad), Opera 10.5+, IE10+ Firefox 5+ and Chrome 4+. IE9 works but without animations</p>
+ <dl class="bookshelf">
+ <dt class="cssmastery"><span>CSS Mastery</span></dt>
+ <dd class="cssmastery"><a class="amazonLink" href="http://www.amazon.co.uk/CSS-Mastery-Advanced-Standards-Solutions/dp/1590596145%3FSubscriptionId%3DAKIAJCFYSPA5V4ZSCM6Q%26tag%3Dstevwork-21%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D1590596145"><img src="http://ecx.images-amazon.com/images/I/4153AtAlT9L._SL160_.jpg" alt=""></a><br>
+ <strong>CSS Mastery</strong> by Andy Budd, Cameron Moll and Simon Collison.<br>
+ This was the book that taught me about CSS and I owe most of my<br>
+ career to it. Recently updated with a second edition covering CSS3 techniques, like the ones you see here!<br>
+ <a class="publisherLink" href="http://www.cssmastery.com/">Visit the CSS Mastery web site</a></dd>
+ <dt class="beautwebdes"><span>Beautiful Web Design</span></dt>
+ <dd class="beautwebdes"><a class="amazonLink" href="http://www.amazon.co.uk/Principles-Beautiful-Web-Design/dp/0975841963%3FSubscriptionId%3DAKIAJCFYSPA5V4ZSCM6Q%26tag%3Dstevwork-21%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D0975841963"><img src="http://ecx.images-amazon.com/images/I/41FxC9u%2B%2BVL._SL160_.jpg" alt=""></a><br>
+ <strong>Beautiful Web Design</strong> by Jason Beaird.<br>
+ This book teaches you a wide range of topics on how to make great web sites, covering layout styles, ratios and colour theory.<br>
+ <a class="publisherLink" href="#">Beautiful Web Design on SitePoint</a>.</dd>
+ <dt class="dontmakemethink"><span>Don’t Make Me Think</span></dt>
+ <dd class="dontmakemethink"><a class="amazonLink" href="http://www.amazon.co.uk/Dont-Make-Me-Think-Usability/dp/0321344758%3FSubscriptionId%3DAKIAJCFYSPA5V4ZSCM6Q%26tag%3Dstevwork-21%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D0321344758"><img src="http://ecx.images-amazon.com/images/I/51Qnk8fkFPL._SL160_.jpg" alt=""></a><br>
+ Steve Krug’s usability handbook is great to have around. Designed to be readable on a flight,<br>
+ this book teaches you the importance of usability and how to do the basics of UX design and user testing.<br>
+ <a class="publisherLink" href="#">Steve Krug’s web site</a>.</dd>
+ <dt class="psforphotographers"><span>Photoshop CS3 for Photographers</span></dt>
+ <dd class="psforphotographers"><a class="amazonLink" href="http://www.amazon.co.uk/Adobe-Photoshop-CS3-Photographers-Professional/dp/0240520289%3FSubscriptionId%3DAKIAJCFYSPA5V4ZSCM6Q%26tag%3Dstevwork-21%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D0240520289"><img src="http://ecx.images-amazon.com/images/I/51XbkxflGjL._SL160_.jpg" alt=""></a><br>
+ Photoshop is the design tool of choice for many web-related design tasks. This book teaches you everything<br>
+ you need to know from a photographer’s perspective. <a class="publisherLink" href="#">Publisher’s web site</a></dd>
+ <dt class="beginningphp"><span>Beginning PHP5, Apache, and MySQL Web Development</span></dt>
+ <dd class="beginningphp">Believe it or not, I learned how to code PHP and MySQL with this book. Taking you through the basics of a dynamic web site,<br>
+ this book teaches you everything in one place. <a class="publisherLink" href="#">APress web site</a></dd>
+ <dt class="webstandardsdesign"><span>Web Standards Creativity</span></dt>
+ <dd class="webstandardsdesign"><a class="amazonLink" href="http://www.amazon.co.uk/Web-Standards-Creativity-Innovations-Scripting/dp/1590598032%3FSubscriptionId%3DAKIAJCFYSPA5V4ZSCM6Q%26tag%3Dstevwork-21%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D1590598032"><img src="http://ecx.images-amazon.com/images/I/417REaeaS%2BL._SL160_.jpg" alt=""></a><br>
+ <strong>Web Standards Creativity</strong> is the follow-on book from CSS Mastery, taking the learnings and applying them<br>
+ through case studies by leading web developers.<br>
+ <a class="publisherLink" href="http://www.friendsofed.com/book.html?isbn=1590598032">Friends of Ed website</a></dd>
+ <dt class="rightsideofbrain"><span>Drawing with the Right Side of the Brain</span></dt>
+ <dd class="rightsideofbrain"><a class="amazonLink" href="http://www.amazon.co.uk/New-Drawing-Right-Side-Brain/dp/0007116454%3FSubscriptionId%3DAKIAJCFYSPA5V4ZSCM6Q%26tag%3Dstevwork-21%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D0007116454"><img src="http://ecx.images-amazon.com/images/I/5114QGDGH7L._SL160_.jpg" alt=""></a><br>
+ Before I read this book, I drew like a child. Now, I draw just that little bit better! For those people who love design<br>
+ but don’t know how to do it themselves, this is the book for you. <a class="publisherLink" href="#">Publisher’s web site</a></dd>
+ <dt class="learnedinarchitecture"><span>101 Things I Learned in Architecture School</span></dt>
+ <dd class="learnedinarchitecture"><a class="amazonLink" href="http://www.amazon.co.uk/101-Things-Learned-Architecture-School/dp/0262062666%3FSubscriptionId%3DAKIAJCFYSPA5V4ZSCM6Q%26tag%3Dstevwork-21%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D0262062666"><img src="http://ecx.images-amazon.com/images/I/41QwdQnDSDL._SL160_.jpg" alt=""></a><br>
+ Great short reading book with essential bits of information about design and expressing that design.</dd>
+ </dl>
+
+ <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+ <script type="text/javascript" src="bookshelf.js"></script>
+ </body>
+</html>
View
BIN img/architecture-front.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN img/architecture-spine.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN img/beautdesign-front.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN img/beautdesign-spine.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
248 img/bookshelf.css
@@ -0,0 +1,248 @@
+/* CSS Bookshelf */
+/* By Steve Workman - www.steveworkman.com */
+/* Full support in Safari 4 on OS X Snow Leopard and Opera 10.5 */
+/* Partial support in Firefox 3.6, full support in 3.7+ */
+/* Very little support in IE 8 and below, some support in IE 9 */
+/* For more details, see the blog post */
+
+dl.bookshelf {
+ display: block;
+ height:450px; /* height includes room for the description */
+ position: relative;
+ background: transparent url(bookshelf/shelf.png) 0 290px no-repeat; /* 300px is height of tallest book */
+}
+
+dl.bookshelf dt {
+ height:300px; /* Default height of books */
+ display: block;
+ float: left;
+ border:1px solid black;
+ font-size: 1.5em;
+ position: absolute; /* Using relative-absolute positioning */
+
+ -webkit-transition-property: left, webkit-transform, webkit-box-shadow; /* transition on two properties */
+ -webkit-transition-duration: 0.5s; /* take 0.5 seconds */
+ -webkit-transition-timing-function:ease-in; /* Ease in */
+ -webkit-transform-origin: left bottom; /* use the left, bottom of the element as the origin of transformation */
+ -webkit-transform:rotate(-4deg) translateY(10px);
+ -webkit-perspective:100;
+
+ /* Firefox supports transitions in 3.7+ */
+ -moz-transition-property: left, moz-transform;
+ -moz-transition-duration: 0.5s;
+ -moz-transition-timing-function:ease-in;
+ -moz-transform-origin: left bottom;
+ -moz-transform:rotate(-4deg) translateY(10px);
+ -moz-perspective:100;
+
+ -o-transition-property: left, o-transform;
+ -o-transition-duration: 0.5s;
+ -o-transition-timing-function:ease-in;
+ -o-transform-origin: left bottom;
+ -o-transform:rotate(-4deg) translateY(10px);
+ -o-perspective:100;
+
+ /* One day... */
+ -ms-transition-property: left, ms-transform;
+ -ms-transition-duration: 0.5s;
+ -ms-transition-timing-function:ease-in;
+ -ms-transform-origin: left bottom;
+ -ms-transform:rotate(-4deg) translateY(10px);
+ -ms-perspective:100;
+
+ /* prefix-less properties */
+ transition-property: left, transform;
+ transition-duration: 0.5s;
+ transition-timing-function:ease-in;
+ transform-origin: left bottom;
+ transform:rotate(-4deg) translateY(10px);
+ perspective:100;
+}
+
+dl.bookshelf dt span {
+ -webkit-transform: rotate(90deg); /* Rotate book title 90 degrees */
+ -moz-transform: rotate(90deg);
+ -o-transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+ transform: rotate(90deg);
+
+ display: block;
+ position: relative;
+ width: 300px; /* width is height of book */
+ top:150px;
+ right: 130px;
+ font-size:0.75em;
+}
+
+/* Each book is specified by class */
+/* Could be done with nth class, but not really necessary */
+
+dl.bookshelf dt.cssmastery {
+ background: url(bookshelf/cssmast-spine-full.png) 0 0 no-repeat,
+ url(bookshelf/cssmast-front.png) 40px 0 no-repeat; /* multiple backgrounds, one for spine, one for front cover */
+ left:10px;
+ width:260px; /* Actual full width of the book */
+ z-index:1; /* z index is the order of the book from left to right */
+}
+
+dl.bookshelf dt.beautwebdes {
+ background: url(bookshelf/beautdesign-spine.png) 0 0 no-repeat,
+ url(bookshelf/beautdesign-front.png) 40px 0 no-repeat;
+ left:52px;
+ width:280px;
+ z-index:2;
+}
+
+dl.bookshelf dt.dontmakemethink {
+ background: url(bookshelf/dontmakemethink-spine.png) 0 0 no-repeat,
+ url(bookshelf/dontmakemethink-front.png) 40px 0 no-repeat;
+ left:94px;
+ width:270px;
+ z-index:3;
+}
+
+
+dl.bookshelf dt.psforphotographers {
+ background:url(bookshelf/photoshop-spine.png) 0 0 no-repeat,
+ url(bookshelf/photoshop-front.png) 40px 0 no-repeat;
+ left:136px;
+ width:270px;
+ z-index:4;
+}
+
+dl.bookshelf dt.psforphotographers span {
+ color:#fff;
+}
+
+dl.bookshelf dt.webstandardsdesign {
+ background:url(bookshelf/webstandcreativity-spine.png) 0 0 no-repeat,
+ url(bookshelf/webstandcreativity-front.png) 40px 0 no-repeat;
+ left:220px;
+ width:305px;
+ z-index:6;
+ color: #fff;
+}
+
+/* Use of web fonts if you want to on the book titles */
+dl.bookshelf dt.webstandardsdesign span {
+ font-family: Helvetica;
+}
+
+dl.bookshelf dt.rightsideofbrain {
+ background:url(bookshelf/drawing-spine.png) 0 0 no-repeat,
+ url(bookshelf/drawing-front.png) 40px 0 no-repeat;
+ left:265px;
+ width:290px;
+ z-index:7;
+}
+
+dl.bookshelf dt.rightsideofbrain span {
+ font-family: "Times";
+}
+
+dl.bookshelf dt.learnedinarchitecture {
+ background:url(bookshelf/architecture-spine.png) 0 0 no-repeat,
+ url(bookshelf/architecture-front.png) 40px 0 no-repeat;
+ left:325px;
+ width:245px;
+ height: 150px; /* Smaller book */
+ top:150px;
+ z-index:8;
+ color: #fff;
+}
+
+dl.bookshelf dt.learnedinarchitecture span {
+ font-size:0.5em;
+ width: 130px;
+ right:50px;
+ top:60px;
+}
+
+dl.bookshelf dt.beginningphp {
+ background:url(bookshelf/php-spine.png) 0 0 no-repeat,
+ url(bookshelf/php-front.png) 40px 0 no-repeat;
+ left:178px;
+ width:270px;
+ z-index:4;
+}
+
+dl.bookshelf dt.beginningphp span {
+ top:140px;
+ color:#000;
+}
+
+
+dl.bookshelf dd {
+ position: absolute;
+ left: -9999px; /* off-screen at first */
+ font-size: 1em;
+ /* transition in from the left */
+ -webkit-transition-property: background, left;
+ -moz-transition-property: background, left;
+ -o-transition-property: background, left;
+ -ms-transition-property: background, left;
+ transition-property: background, left;
+}
+
+/* Hover over or focus on a book and have it pull out of the shelf */
+dl.bookshelf dt:not(.showBook):hover {
+ cursor:pointer; /* turn cursor to a hand */
+
+ -webkit-transform: rotate(-5deg) translateX(-30px) translateY(10px); /* Roate 5 degrees and pull out 30px */
+ -webkit-box-shadow:#000 1px 3px 5px; /* Add a box shadow so it looks like the book has depth */
+
+ -moz-transform: rotate(-5deg) translateX(-30px) translateY(10px);
+ -moz-box-shadow:#000 1px 3px 5px;
+ -o-transform: rotate(-5deg) translateX(-30px) translateY(10px);
+ -o-box-shadow:#000 1px 3px 5px;
+ -ms-transform: rotate(-5deg) translateX(-30px) translateY(10px);
+ -ms-box-shadow:#000 1px 3px 5px;
+ transform: rotate(-5deg) translateX(-30px) translateY(10px);
+ box-shadow:#000 1px 3px 5px;
+}
+
+/* When you click/touch the book, it animates out of the shelf to the front and center */
+dl.bookshelf dt.showBook {
+ -webkit-transform: translateZ(10px) scale(1.1) rotate(0); /* Come above all the books */
+ -webkit-box-shadow:#000 10px 10px 5px;
+
+ -moz-transform: scale(1.1) rotate(0); /* translateZ is -webkit only at the moment */
+ -moz-box-shadow:#000 10px 10px 5px;
+ -o-transform: scale(1.1) rotate(0);
+ -o-box-shadow:#000 10px 10px 5px;
+ -ms-transform:scale(1.1) rotate(0);
+ -ms-box-shadow:#000 10px 10px 5px;
+ transform: translateZ(10px) scale(1.1) rotate(0);
+ box-shadow:#000 10px 10px 5px;
+
+ left:335px; /*(page width / 2) - (book width / 2), or thereabouts */
+ z-index: 100; /* just incase the translateZ doesn't work */
+ padding-left: -80px;
+}
+
+/* Class applied to definitions when shown */
+dl.bookshelf dd.showBook {
+ display:block;
+ width:350px;
+ position: absolute;
+ top:310px;
+ left:250px;
+ background:rgba(0,0,0,0.8); /* RGBA background */
+ padding: 10px;
+ color:#fff;
+ -webkit-border-radius:10px;
+ -moz-border-radius:10px;
+ border-radius:10px; /* Opera and MS will support border radius without prefix */
+ text-shadow: #666 1px 1px;
+}
+
+dl.bookshelf dd.showBook a {
+ text-shadow: none; /* Remove the text shadow for the links */
+}
+
+/* Special case for amazon affliate links */
+dl.bookshelf dd .amazonLink {
+ float: right;
+ display: block;
+ margin: 10px;
+}
View
BIN img/cssmast-front.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN img/cssmast-spine-full.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN img/dontmakemethink-front.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN img/dontmakemethink-spine.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN img/drawing-front.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN img/drawing-spine.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN img/photoshop-front.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN img/photoshop-spine.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN img/php-front.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN img/php-spine.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN img/shelf.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN img/webstandcreativity-front.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN img/webstandcreativity-spine.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 631249d

Please sign in to comment.
Something went wrong with that request. Please try again.