As I work on converting a PSD design into HTML/CSS, I've encountered an intricate shadow effect created by the designer. I am struggling to replicate it using CSS. Is there a way to achieve this? If yes, then how can it be done?
The shadow style is shown below:
According to the suggestion from thgaskell's provided link, you have the option to utilize #box:before and #box:after to insert two slightly smaller boxes with lower indices than 0 and apply shadows to them. The background color for these can be the same as the shadow's color.
For an example of how this could be implemented, you can take a look at this codepen (feel free to customize it to fit your needs): http://codepen.io/walmik/pen/fyidv
Here is another version adjusted to match the image you have provided: http://codepen.io/walmik/pen/eqpGk
HTML:
<div id='box'>Fancy Shadow</div>
CSS:
#box {
position: relative;
width: 600px;
height: 300px;
padding: 20px;
background: #fff;
text-align: center;
font-size: 24px;
color: #333;
font-family: Georgia. serif;
box-shadow: 0px 0px 2px #888;
}
#box:before, #box:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 0px;
left: 0px;
width: 45%;
height: 60%;
top: 15px;
max-width:300px;
background: #888;
-webkit-box-shadow: -2px -15px 30px #888;
-moz-box-shadow: -2px -15px 30px #888;
box-shadow: -2px -15px 30px #888;
}
#box:after
{
right: 3px;
left: auto;
-webkit-box-shadow: 2px -15px 30px #888;
-moz-box-shadow: 2px -15px 30px #888;
box-shadow: 2px -15px 30px #888;
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
-o-transform: rotate(1deg);
-ms-transform: rotate(1deg);
transform: rotate(1deg);
}
If you're seeking a way to create a drop shadow effect using CSS3, the attribute you need is box-shadow. The format typically looks like this:
box-shadow: h-shadow v-shadow blur spread color inset;
While creating a gradient drop shadow like the one shown in the image may not be achievable with current CSS capabilities, a similar shadow can be achieved with something along these lines:
box-shadow: -10px -10px 20px #000;
You'll have to experiment with the values to perfect the look you desire, but this should serve as a good starting point for your project.
I am looking to create a layout where two pieces of text are displayed side by side in columns using CSS. The left-hand column will have variable length text, while the right-hand column will have fixed length text. The desired layout should show the two ...
Is there a way to arrange 4 items inside a flex container in a 2 X 2 grid layout while ensuring that they all have the same width and height? I've tried using flex-grow: 1;, but since the children are in different flex containers, they do not obey th ...
I've been encountering an issue with my CSS file not working in Django, and I'm unsure of the reason behind it. Despite numerous attempts to troubleshoot, the problem persists. I have included {%load static%} at the beginning of my HTML file, and ...
I'm struggling to modify the color of the scrollbar in Bootstrap scrollspy despite having a functional scrollbar. Here is an example of my code: HTML: <body> <div class="container, scrollbar" id="myScrollspy"> <div class=" ...
I've been working on creating checkboxes for seat selection in Angular using a TypeScript file, but I'm facing an issue where the background color of the checkbox doesn't change after checking them. Here's my TypeScript function: gener ...
I am in need of assistance with a problem I am facing. Recently, I started learning the Vaadin framework and I am trying to apply CSS to the row headers (first cell of each row), but so far I have not had any success. Below is the code that I have been usi ...
I'm looking to create an origami-inspired effect on a div element, but I'm not sure where to start. To help illustrate what I mean, I will be sharing two images of a paper sheet: https://i.sstatic.net/5gRWd.jpg and https://i.sstatic.net/lL9Vd.jpg ...
Is there a way to change the src of an image in Nextjs by using state and add animations like fadein and fadeout? I currently have it set up to change the image source when hovering over it. const [logoSrc, setLogoSrc] = useState("/logo.png"); <Image ...
In the image below, you can see that the scrollable TreeView in the sidebar is not functioning properly. Additionally, I need to have a fixed footer for this sidebar that remains in place when users scroll through the content. How can I resolve this? http ...
I am currently developing a server using expressjs: 'use strict'; var express = require('express'); var logger = require('morgan'); var path = require('path'); var bodyParser = require('body-parser'); va ...
Is there a way to implement animations in this chart? https://i.sstatic.net/YpabJ.png ...
Attempting to adjust the size of the baseball field proved challenging, as it wasn't a simple task. Is there a way to achieve this effectively? Thanks, HTML - is using DIV the only method for resizing? I couldn't find a way to resize everything a ...
I have a scenario where I am storing an array in a button using Jquery's .data() method. If the array happens to be empty, I want the button to appear in red color. How can I target the button with an empty array using CSS? var values1 = []; var ...
I need to reorganize the columns for better responsiveness as the current order is not ideal. Below is the code snippet: <div class="tab-content" id="pills-tabContent"> <div class="tab-pane fade show active" id="pills-home" role="tabpanel" ari ...
Is there a way to apply bold styling to the text in the final row using @foreach in HTML? I am looking to emphasize the total sum of each column by displaying it in bold text. While I initially considered creating a new table below the current one solely ...
In the process of creating my website, I encountered an issue with the logo placement. I wanted the logo to be in the top left corner, similar to the one shown in this image. Initially, everything was working fine until I made some adjustments to move the ...
I'm currently working on implementing a sidebar navigation panel for my website using JavaScript, HTML, and CSS. However, I am facing an issue where the sidebar automatically opens when the page is first loaded, even before clicking on the icon to ope ...
I'm having trouble with the second sub-menu in this menu. It doesn't open the second sub-menu item. What can I do? <div id='cssmenu'> <ul> <li class='active'><a ...
I need help figuring out how to center a list of items on the page, but have them aligned left. I am using bootstrap. I want the text to be in the center of the page but aligned left. <ul class='text-center'> <li class=& ...
Having trouble converting HTML Static Sites to WordPress because images are hosted through HTML SRC Code. After conversion, no one can see the images in visual format on pages during editing. Is there a way to convert all image links inside pages to media ...