Hardcover book cover effect for card views in Obsidian Bases based on iBooks

readme.md

A hardcover book effect for images in card views for Obsidian Bases with wooden bookshelf.

Save the CSS file below as a snippet and enable it in Obsidian.

It's not yet possible to target a specific base or view, but will add that in the future!

book-covers.css

/* Hardcover book cover effect for card views in Obsidian Bases */

.bases-view {
  --bases-cards-background: transparent;
  --bases-cards-cover-background: transparent;
  --bases-cards-shadow: none;
  --bases-cards-shadow-hover: none;
}
.bases-cards-group {
  gap: 24px;
  padding: 32px 28px 36px 28px;
  position: relative;
  background: linear-gradient(180deg, #dac092 80%, #a8833f 100%);
  border-radius: 16px 16px 30px 30px / 16px 16px 24px 24px;
  box-shadow: 0 16px 48px -4px #a8833f4d inset, 0 6px 36px #7b592c15;
}
/* Simulate wood shelf floor below books */
.bases-cards-group:after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -8px; height: 28px;
  background: linear-gradient(90deg, #c1995c 8%, #fae7bc 12%, #a37942 88%, #edd4a8 93%);
  border-radius: 0 0 30px 30px/0 0 19px 19px;
  box-shadow: 0 2px 16px 3px #a1794122 inset, 0 8px 36px #7b592c33;
  z-index: 1;
}
.bases-cards-label {
  display: none;
}
.bases-cards-item {
  overflow: visible;
  gap: 0px;
  contain: inherit;
}
.bases-cards-property.mod-title {
  padding-top: 10px;
}

/* Book shadow */
.bases-cards-cover {
  transition: transform 0.14s cubic-bezier(.32,1.36,.45,1), box-shadow 0.14s;
  border-radius: 4px 10px 10px 4px/4px 14px 13px 4px;
  box-shadow: 
    0 2px 10px 0 #80683840,
    0 10px 28px 0 #54371c33,
    -8px 9px 28px 0 #0003,
    inset 4px 0 12px -2px #fff8,
    1px 2px 0 0 #fff2,
    inset 0 0 0 2.5px #91734377;
  position: relative;
  overflow: visible;
  background: linear-gradient(115deg, #fffbe5 0 13%, #e0d3ac 17%, #ebbc71 90% 100%);
}

/* Book spine shading & gloss */
.bases-cards-cover:before {
  content: "";
  pointer-events: none;
  position: absolute; left: 0; top: 0; height: 100%; width: 17%;
  background: linear-gradient(to right, rgba(0,0,0,0.25) 0 16%, rgba(255,255,255,0.28) 37%, rgba(255,255,255,0.04) 70%, transparent 100%);
  border-radius: 4px 0 0 13px/10px 0 0 12px;
  z-index: 2;
}
.bases-cards-item:hover .bases-cards-cover {
  transform: translateY(-7px) scale(1.033);
  box-shadow: 
    0 12px 36px -3px #a179413d,
    0 20px 58px 0 #2d180b1a,
    -12px 20px 44px 0 #23211a36,
    0 6px 11px 0 #91734359,
    inset 6px 0 18px -3px #fffbe4,
    1px 2px 0 0 #fff3;
}

/* Show title on two lines */
.bases-cards-property.mod-title .bases-cards-line {
  font-size: var(--font-ui-small);
  font-weight: 500;
  line-height: 1.17;
  height: 2.7em;
  letter-spacing: 0.01em;
  color: #574223;
  text-shadow: 0 1px 0 #fff4, 0 2px 8px #996b2a0c;
  overflow: hidden;
  word-break: break-word;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}