Apply box shadow to a transformed box

I have been working on creating a three-dimensional book using only CSS. I am now at the final stage, where I need to add box-shadow to it.

How can I apply 

box-shadow:10px 10px 30px rgba(0,0,0,0.3)
to achieve the desired effect? Should I make adjustments to the div setup?

Take a look at the visuals on this jsFiddle link.

.book-image-wrap {
  margin: 25px auto;
  height: 346px;
  width: 230px;
  position: relative;
  -webkit-perspective: 1200px;
  -moz-perspective: 1200px;
  perspective: 1200px;
}

.book-image {
  background: #000;
  height: 346px;
  width: 230px;
  position: absolute;
  left: 16px;
  top: 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-border-radius: 0 7px 7px 0;
  -moz-border-radius: 0 7px 7px 0;
  border-radius: 0 7px 7px 0;
  -webkit-perspective: 1200px;
  -moz-perspective: 1200px;
  perspective: 1200px;
  -webkit-transform: rotateY(30deg);
  -moz-transform: rotateY(30deg);
  transform: rotateY(30deg);
}

.book-image-cover {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 230px;
  max-width: 230px;
  max-height: 346px;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-border-radius: 0 4px 4px 0;
  -moz-border-radius: 0 4px 4px 0;
  border-radius: 0 4px 4px 0;
  -webkit-transform-origin: 0;
  -moz-transform-origin: 0;
  transform-origin: 0;
}

.book-image-cover:after {
  background: rgba(0, 0, 0, 0.06);
  box-shadow: 1px 0 3px rgba(255, 255, 255, 0.1);
  content: '';
  position: absolute;
  top: 0;
  left: 10px;
  bottom: 0;
  width: 3px;
}

.book-image-spine {
  background: darkred;
  width: 40px;
  height: 344px;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  transform: rotateY(90deg);
  -webkit-transform-origin: 0;
  -moz-transform-origin: 0;
  transform-origin: 0;
}
<div class="book-image-wrap" style="width:250px;height:400px;">
  <div class="book-image" style="width:250px;height:400px;">
    <div class="book-image-cover" style="background:url(https://d202m5krfqbpi5.cloudfront.net/books/1347457482l/13248057.jpg);max-width:250px;max-height:400px;width:250px;"></div>
    <div class="book-image-spine" style="width:40px;height:400px;"></div>
  </div>
</div>

htmlcss

Answer №1

To enhance the visual appeal, consider incorporating 

filter:drop-shadow(-10px 10px 10px rgba(0,0,0,0.8));
into your CSS for the .book-image-wrap element.

For a live example, refer to: https://jsfiddle.net/tpw85kLb/3/

You can customize the pixel values based on your specific preferences and requirements.

Answer №2

Following the suggestion of @Guillaume Roche-Bayard, I have implemented the box-shadow property for .book-image as well as for .book-image-cover.

.book-image-wrap {
  margin: 25px auto;
  height: 346px;
  width: 230px;
  position: relative;
  -webkit-perspective: 1200px;
  -moz-perspective: 1200px;
  perspective: 1200px;
}

.book-image {
  background: #000;
  height: 346px;
  width: 230px;
  position: absolute;
  left: 16px;
  top: 0;
  box-shadow:-25px 10px 30px rgba(0,0,0,0.3);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-border-radius: 0 7px 7px 0;
  -moz-border-radius: 0 7px 7px 0;
  border-radius: 0 7px 7px 0;
  -webkit-perspective: 1200px;
  -moz-perspective: 1200px;
  perspective: 1200px;
  -webkit-transform: rotateY(30deg);
  -moz-transform: rotateY(30deg);
  transform: rotateY(30deg);
}

.book-image-cover {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  box-shadow:-25px 10px 30px rgba(0,0,0,0.3);
  width: 230px;
  max-width: 230px;
  max-height: 346px;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-border-radius: 0 4px 4px 0;
  -moz-border-radius: 0 4px 4px 0;
  border-radius: 0 4px 4px 0;
  -webkit-transform-origin: 0;
  -moz-transform-origin: 0;
  transform-origin: 0;
}

.book-image-cover:after {
  background: rgba(0, 0, 0, 0.06);
  box-shadow: 1px 0 3px rgba(255, 255, 255, 0.1);
  content: '';
  position: absolute;
  top: 0;
  left: 10px;
  bottom: 0;
  width: 3px;
}

.book-image-spine {
  background: darkred;
  width: 40px;
  height: 344px;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  transform: rotateY(90deg);
  -webkit-transform-origin: 0;
  -moz-transform-origin: 0;
  transform-origin: 0;
}
<div class="book-image-wrap" style="width:250px;height:400px;">
  <div class="book-image" style="width:250px;height:400px;">
    <div class="book-image-cover" style="background:url(https://d202m5krfqbpi5.cloudfront.net/books/1347457482l/13248057.jpg);max-width:250px;max-height:400px;width:250px;"></div>
    <div class="book-image-spine" style="width:40px;height:400px;"></div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the rationale behind positioning the closing right angle-bracket of an HTML tag next to the opening left angle-bracket of a different HTML tag?

I came across a clever trick using this coding structure where the ending tag 'angle bracket' is placed at the beginning of a new left 'angle-bracket' tag opening. Unfortunately, I can't recall why it was done or where I saw it. I ...

htmldomhtml-parsing

I am facing an issue with my navbar image not aligning properly when using the

I have created a navbar using Bootstrap with the following code: <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Complete Bootstrap 4 Webs ...

htmlcssbootstrap-4

items within an unordered list that can be collapsed

Answer: Nikhil was on the right track with his solution, but I had to make some modifications. Specifically, I needed to create and initialize an empty array to display the details properly. Here's the updated code: if (this.name.toLowerCase() == va ...

htmlcssangulartypescript

An unexpected identifier error occurred following an Ajax request

Below is the HTML code that I am working with: <div id="texttheory" class="centertext">'. $short .' </div>'; <button id="thbutton" class="theory_button" onclick="javascript:changetheory('.$long.')"> <im ...

javascriptphphtmlajax

Add a custom filter to the active route for a stylish look

I am trying to dynamically change the color of elements in my navbar by creating a filter in my typescript code. I have a string with values like 'greyscale(73%) saturate(1400%)'. How can I apply this string to the fa-icon's filter property ...

htmlcssangular

Centering dilemma in the div

I have a main container with a width of 940 pixels. Inside the main container, there are two divs with a width of 250px each. My goal is to center align these boxes within the main container. However, the issue arises when the second div is added dynamic ...

jquerycsshtmlcenter

Is there a way to create a Swipe slideshow without relying on plugins or external tools?

How can I create a responsive swipe image slideshow using CSS and JQuery that changes the image when swiping from right to left? I want it to work seamlessly on both computer and mobile screens. ...

jqueryhtmlcss

creating PHP buttons to update inventory

As a newcomer to AJAX and PHP, I am facing some challenges with an inventory management system built using phpmyadmin and wamp. The registration/login system is functioning well. However, upon user login, a table displaying all inventory items is generated ...

phphtmlmysqlajax

What is the process of implementing a particular FormControl from a FormArray in my HTML file?

My FormArray initialization code is as follows: this.contents.forEach(content=> { this.formArray.push( new FormControl(content.text, Validators.required)); }); Now, I am trying to associate a specific FormControl with my textarea by using i ...

htmlangularformstypescript

Issues with displaying video content and controlling the Bootstrap 5 video carousel

I have encountered an issue while coding a website for a friend's company. He requested a video carousel to be added to his existing site, so I incorporated links and scripts for Bootstrap in order to create a gallery for his products and a carousel t ...

htmlcssbootstrap-4bootstrap-5

CSS non-adaptive layout

I am looking to maintain consistency in the appearance of my website across all devices, including PCs, iPads, and Galaxy S4s. I am aware of breakpoints, but I am specifically seeking a solution that does not require me to consider them. Is there a strai ...

css

Laravel application faces issues with URL rewriting generating incorrect URLs in compiled CSS files

Having some trouble compiling Font Awesome SCSS files in my Laravel application. I installed Font Awesome using NPM, and the compiled CSS is stored in the 'public/css/' folder while a 'public/fonts/' folder was also created. However, th ...

csslaravelsass

impact on the shape of the region's map

Is it possible to add an effect like a border or opacity when hovering over an area in an image map? I've tried using classes and applying hover effects with borders or opacity, but nothing seems to work as expected. Here's my code: <img src= ...

htmlcssdictionary

Tips for including an external babel JS (ES6) file in an HTML document:

To include the babel js file in an HTML file, take a look at the code snippet below: <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudfl ...

javascriptjqueryhtmlecmascript-6babeljs

Delivering HTML, CSS, and JS through the power of Node.js and Express.js

const express = require('express'); const path = require('path'); const app = express (); app.use(express.json('public')) app.get('/PKorn/zealtech', function(req, res) { res.sendFile(path.join(__dirname, &a ...

htmlcssnode.js

The jQuery toggleClass() function is not being applied successfully to content that is dynamically generated from

I've created an awesome collection of CSS-generated cards containing icons and text with a cool animation that expands upon tapping to reveal more icons and options. I carefully crafted the list to look and behave exactly how I wanted it to. But now, ...

javascriptjqueryhtmlcssjson

Display or Conceal Multiple Divisions Using Angular 2

I am looking to implement a functionality using Li lists to toggle the visibility of multiple divs in Angular 2. Initially, all divs on the page will be visible. When viewing on a smaller screen, I want to hide some divs and show a specific div when a cor ...

htmlangulartypescript

Display One Div at a Time in Sequence on Page Load Using jQuery

I have come across this question multiple times: How to Fade In images on page load using JavaScript one after the other? Fade in divs sequentially Using jQuery .fadeIn() on page load? Despite trying various recommended methods, I'm still unable t ...

javascriptjqueryhtmlcss

Div's external dimension not being computed

I am attempting to calculate the overall height of the div content in order to expand the sticky-container and create the appearance that the image is tracking the user. Unfortunately, using outerHeight does not seem to be effective for some reason. While ...

javascriptjqueryhtmlcss

How can I create my own unique scrolling behavior in JavaScript?

Looking to create a similar effect as seen on this website: where the vertical scrollbar determines the movement of the browser "viewport" along a set path. I believe that using Javascript to track the scroll bar value and adjust background elements acco ...

javascripthtmlcssinteractive