I want to create a box .
I want remove a part of my box that is at the right bottom of my box .
And i need to place a box shadow at the removed part like this cyan part:
*I don't want rounded corner .
Try it example. But as the guys said, first try it yourself then something yourself before just asking us to do it.
.box{
position:relative;
width:300px;
height:300px;
background: #2B5891;
}
.box:before {
content: '';
position: absolute;
bottom: 0; right: 0;
border-bottom: 80px solid rgba(255, 255, 255, 0.94);
-webkit-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
border-left: 80px solid #2B5891;
width: 0;
}
.shadow{
position: absolute;
width: 100px;
height: 110px;
background: #2B5891;
bottom: 20px;
right: 25px;
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(45deg);
box-shadow: 10px 0px 9px -6px rgba(0,0,0,0.5);
}
Related
I am looking to have a left arrow that is 40px by 20px with a box-shadow. I have tried
The single right border approach -- the dimensions work perfectly, but then there is a square box border:
.item {
...
&::before {
content: '';
border-bottom: 20px solid transparent;
border-right: 20px solid #fff;
border-top: 20px solid transparent;
box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4);
height: 0;
left: -20px;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 0;
}
}
and the double border approach -- box shadow works great, but the dimensions are incorrect since it needs to be a perfect square for the triangle to work:
.item {
...
&::before {
border: 20px solid black;
border-color: transparent transparent #fff #fff;
transform-origin: 0 0;
transform: rotate(45deg);
box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4);
}
}
Is it possible to achieve with CSS or do I just need to a use an SVG?
You can use filter: drop-shadow instead of box-shadow:
filter: drop-shadow(-3px 3px 3px rgba(0, 0, 0, 0.4));
ref: https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow
Many times I created simple shadows but now I need to create rounded shadow. Like on the picture
Is it possible to do this with CSS??
THIS IS MY CODE:
-webkit-box-shadow: -2px 0px 79px -2px rgba(0,0,0,0.75);
-moz-box-shadow: -2px 0px 79px -2px rgba(0,0,0,0.75);
box-shadow: -2px 0px 79px -2px rgba(0,0,0,0.75);
It looks like your example image is a linear gradient in a round container, so do that:
.round-shadow-clip {
overflow: hidden;
}
.round-shadow {
background-image: linear-gradient(rgba(0, 0, 0, 0.6), transparent 20%, transparent 80%, rgba(0, 0, 0, 0.6));
border-radius: 100%;
height: 0;
margin-left: -10%;
padding-bottom: 25%;
width: 120%;
}
html {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAALklEQVQ4y2N89+4dA24gKCiIR5aJgQIwqnlkaGb8//8/Hun379+PBtioZko0AwAA0Ajuvut+RAAAAABJRU5ErkJggg');
height: 100%;
}
<div class="round-shadow-clip">
<div class="round-shadow"></div>
</div>
With pseudo you can do this
div {
position: relative;
height: 100px;
border-radius: 50%/40%;
overflow: hidden;
}
div::before,
div::after {
content: '';
position: absolute;
left:0; right:0; top: -5px; height: 0;
box-shadow: 0 0 25px 15px rgba(0,0,0,.5);
}
div::after {
top: auto; bottom: -5px;
box-shadow: 0 0 -25px 15px rgba(0,0,0,.5);
}
<div></div>
I have an element on which i add two box-shadows and I want the corners of the element AND the box shadows to have the same border-radius. Somehow it's not happening.
The element appears with a different border-radius than the first box-shadow, and the first box-shadow appears with a different border radius than the second box-shadow.
Here's the code:
.stack_item{
overflow: hidden;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
transform: translate(-50%, 9%);
-webkit-box-shadow: 0px -15px 0px -7px rgb(206, 204, 204), 0px -29px 0px -13px rgb(168, 168, 168);
-moz-box-shadow: 0px -15px 0px -7px rgb(206, 204, 204), 0px -29px 0px -13px rgb(168, 168, 168);
box-shadow: 0px -15px 0px -7px rgb(206, 204, 204), 0px -29px 0px -13px rgb(168, 168, 168);
}
Since you are making your shadow shrink, the border-radius is also shrinking.
Set it on a larger pseudo-element and it will be ok
.stack_item{
width: 200px;
height: 100px;
position: relative;
border: solid 1px black;
border-radius: 10px 10px 10px 10px;
margin-top: 50px;
background-color: white;
}
.stack_item:before,
.stack_item:after {
content: "";
position: absolute;
top: 0px;
bottom: 50px;
border-radius: inherit;
}
.stack_item:before {
left: 7px;
right: 7px;
box-shadow: 0px -8px 0px 0px rgb(206, 204, 204);
z-index: -1;
}
.stack_item:after {
left: 13px;
right: 13px;
box-shadow: 0px -16px 0px 0px rgb(168, 168, 168);
z-index: -2;
}
<div class="stack_item"></div>
I am currently coding a PSD file in HTML/CSS, and the designer used a somewhat fancy shadow. I can't figure a way to do it in CSS - is it possible? - If so, how?
Here's the shadow:
Based on thgaskell's suggested link, you can use #box:before and #box:after to add 2 slightly smaller boxes with indices lower than 0 and add shadows to them. Use the shadow's color for the background color for these as well.
Here's a codepen that attempts to do this (you can tweak it to suit your purpose):
http://codepen.io/walmik/pen/fyidv
Here's another one tweaked more to the image you ve attached:
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
{
/*this is like appending a div element before the box:*/
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
{
/*this is like appending a div element after the box:*/
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);
}
What you're looking for is the CSS3 attribute box-shadow. The syntax goes something like this:
box-shadow: h-shadow v-shadow blur spread color inset;
The drop shadow you're doing in the image above has a gradient, which is not possible with CSS currently, but a similar shadow would probably be something like this:
box-shadow: -10px -10px 20px #000;
You'll need to play with the numbers to get it to where you like it, but this should help you to start.
I'm trying to change Chris's corner ribbon snippet at http://jsfiddle.net/chriscoyier/H6rQ6/1/. I want the ribbon to be at left instead of right
This is what i have done so far http://jsbin.com/imUQula/1/ the upper part & lower part of ribbon are not changing . I want the upper part flat horizontal & bottom flat vertical
css
.wrapper {
margin: 50px auto;
width: 280px;
height: 370px;
background: white;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90;
}
.ribbon-wrapper-green {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
left: -3px;
}
.ribbon-green {
font: bold 15px Sans-Serif;
color: #333;
text-align: center;
text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
position: relative;
padding: 7px 0;
left: -5px;
top: 15px;
width: 120px;
background-color: #BFDC7A;
background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
color: #6a6340;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.ribbon-green:before, .ribbon-green:after {
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position:absolute;
bottom: -3px;
}
.ribbon-green:before {
left: 0;
}
.ribbon-green:after {
right: 0;
}
Assuming I understood your question correctly, do the below changes to your CSS to get it working the way you want:
.wrapper {
margin: 50px auto;
width: 280px;
height: 370px;
background: white;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90;
overflow: hidden; /* added to hide the part of the green ribbon which goes out of the wrapper */
}
JSBin Demo
EDIT: Actually, the earlier changes that I had mentioned to the .ribbon-wrapper-green is not required. You could simply do the below instead.
.ribbon-green {
left: -28px; /* changed from left -5px for the purpose of positioning */
}
like this?
http://jsfiddle.net/sudheer105/Fnpn7/
.wrapper {
margin: 50px auto;
width: 280px;
height: 370px;
background: white;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90;
}
.ribbon-wrapper-green {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
left: -3px;
}
.ribbon-green {
font: bold 15px Sans-Serif;
color: #333;
text-align: center;
text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
position: relative;
padding: 7px 0;
right: 30px;
top: 15px;
width: 120px;
background-color: #BFDC7A;
background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
color: #6a6340;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.ribbon-green:before, .ribbon-green:after {
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position:absolute;
bottom: -3px;
}
.ribbon-green:before {
right: 0;
}
.ribbon-green:after {
left: 0;
}