Related
Is there a way to convert box-shadow property value to filter drop-shadow?
I have tried doing this:
.boxes-container {
display: flex;
justify-content: center;
}
.boxshadow-box,
.filter-dropshadow-box {
display: block;
background-color: green;
margin: 50px;
padding: 50px;
width: 150px;
box-sizing: border-box;
}
.boxshadow-box {
box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.filter-dropshadow-box {
filter: drop-shadow(5px 5px 3px rgba(0, 0, 0, 0.2)) drop-shadow(8px 10px 1px rgba(0, 0, 0, 0.14)) drop-shadow(3px 14px 2px rgba(0, 0, 0, 0.12));
}
<div class="boxes-container">
<div class="boxshadow-box"></div>
<div class="filter-dropshadow-box"></div>
</div>
But I can't reach the same results for drop-shadow as box-shadow.
Can you please check the below code? Hope it will work for you. By Mistake, you passed the wrong value in filter drop-shadow.
.boxes-container {
display: flex;
justify-content: center;
}
.boxshadow-box,
.filter-dropshadow-box {
display: block;
background-color: green;
margin: 50px;
padding: 50px;
width: 150px;
box-sizing: border-box;
}
.boxshadow-box {
box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.filter-dropshadow-box {
-webkit-filter: drop-shadow( 0px 5px 5px rgba(0, 0, 0, 0.2)) drop-shadow( 0px 8px 10px rgba(0, 0, 0, 0.14));
filter: drop-shadow( 0px 5px 5px rgba(0, 0, 0, 0.2)) drop-shadow( 0px 8px 10px rgba(0, 0, 0, 0.14));
}
<div class="boxes-container">
<div class="boxshadow-box"></div>
<div class="filter-dropshadow-box"></div>
</div>
I'm trying to style a div that I shaped with the clip-path: polygon CSS property. I want to give it some shadows so it looks a bit three dimensional.
The problem is that the shadow property doesn't work. When I inspect the element in the browser, the CSS code for shadow is grayed out.
I tried to make the shadow the following ways and none of them worked
box-shadow: 0 -2px 2px 0 rgba(0, 0, 0, 0.14), 0 -3px 1px -2px rgba(0,
0, 0, 0.12), 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
filter: drop-shadow(0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px
rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2));
filter: box-shadow 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px
rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
Here is the HTML code:
<div id="first" class="row">
<div class="container-fluid">
...some content inside...
</div>
</div>
And SCSS code:
#first {
padding-top: 60px;
padding-bottom: 30px;
-webkit-box-shadow: 0 -2px 2px 0 rgba(0, 0, 0, 0.14), 0 -3px 1px -2px rgba(0, 0, 0, 0.12), 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 -2px 2px 0 rgba(0, 0, 0, 0.14), 0 -3px 1px -2px rgba(0, 0, 0, 0.12), 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
.container-fluid {
background: red;
clip-path: polygon(0 0%, 100% 0%, 100% 88%, 0 100%);
}
}
Try instead with filter: drop-shadow()
#first {
padding-top: 60px;
padding-bottom: 30px;
filter: drop-shadow(4px 4px 1px rgba(0, 0, 0, 0.3));
}
#first .container-fluid {
background: red;
clip-path: polygon(0 0%, 100% 0%, 100% 88%, 0 100%);
}
<div id="first" class="row">
<div class="container-fluid">
...some content inside...
</div>
</div>
It's working fine. Try changing the h-offset, v-offset, blur spread, color
#first {
padding-top: 60px;
padding-bottom: 30px;
/*-webkit-box-shadow: 0 -9px 9px 0 rgba(0, 0, 0, 0.14), 0 -3px 1px -2px rgba(0, 0, 0, 0.12), 0 -1px 5px 0 rgba(0, 0, 0, 0.2);*/
/*box-shadow: 0 -2px 2px 0 rgba(0, 0, 0, 0.14), 0 -3px 1px -2px rgba(0, 0, 0, 0.12), 0 -1px 5px 0 rgba(0, 0, 0, 0.2);*/
-webkit-box-shadow: 5px 10px 18px rgba(0, 0, 0, 0.14), 5px 10px 18px rgba(0, 0, 0, 0.12), 5px 10px 18px rgba(0, 0, 0, 0.2);
box-shadow: 5px 10px 18px rgba(0, 0, 0, 0.14), 5px 10px 18px rgba(0, 0, 0, 0.12), 5px 10px 18px rgba(0, 0, 0, 0.2);
}
.container-fluid {
background: red;
clip-path: polygon(0 0%, 100% 0%, 100% 88%, 0 100%);
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div id="first" class="row">
<div class="container-fluid">
...some content inside...
</div>
</div>
I have a 3D button with different background styles. I want to set a small icon to it. But some ways it wont show and other ways the background colors changes or disappears
.button {
text-decoration: none;
color: white;
padding: 18px;
width:170px;
text-transform: uppercase;
display: inline-block;
text-shadow: -2px 2px 0 rgba(0, 0, 0, 0.2);
font-weight: bold;
padding-right: 50px;
margin: 10px;
margin-top:15px;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
-webkit-transition: all 0.1s linear;
transition: all 0.1s linear;
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-webkit-transform: translateZ(0);
transform: translateZ(0);
/*
Kinda replicates keyline but looks dumb.
#include filter(
drop-shadow(0 1px 0 rgba(blue, 0.2))
drop-shadow(0 -1px 0 rgba(blue, 0.2))
);
*/
}
.button.blue {
background: -moz-linear-gradient(top, #a2d3e9, #7abedf);
background: -webkit-linear-gradient(top, #a2d3e9, #7abedf);
background: linear-gradient(to bottom, #a2d3e9, #7abedf) ;
box-shadow: -1px 0px 1px #6fadcb, 0px 1px 1px #54809d, -2px 1px 1px #6fadcb, -1px 2px 1px #54809d, -3px 2px 1px #6fadcb, -2px 3px 1px #54809d, -4px 3px 1px #6fadcb, -3px 4px 1px #54809d, -5px 4px 1px #6fadcb, -4px 5px 1px #54809d, -6px 5px 1px #6fadcb, -6px 7px 0 rgba(0, 0, 0, 0.05), -5px 8px 0 rgba(0, 0, 0, 0.05), -3px 9px 0 rgba(0, 0, 0, 0.04), -2px 10px 0 rgba(0, 0, 0, 0.04), -1px 11px 0 rgba(0, 0, 0, 0.03), 0px 12px 0 rgba(0, 0, 0, 0.03), 1px 13px 0 rgba(0, 0, 0, 0.02), 2px 14px 0 rgba(0, 0, 0, 0.02), 3px 15px 0 rgba(0, 0, 0, 0.01), 4px 16px 0 rgba(0, 0, 0, 0.01), 5px 17px 0 rgba(0, 0, 0, 0.01), 6px 18px 0 rgba(0, 0, 0, 0.01), inset 0 4px 5px -2px rgba(255, 255, 255, 0.5), inset 0 1px 0 0 rgba(0, 0, 0, 0.3);
}
.button.yellow {
background: -moz-linear-gradient(top, #f2d851, #ecc92b);
background: -webkit-linear-gradient(top, #f2d851, #ecc92b);
background: linear-gradient(to bottom, #f2d851, #ecc92b);
color: black;
text-shadow: -2px 2px 0 rgba(255, 255, 255, 0.3);
box-shadow: -1px 0px 1px #d9b826, 0px 1px 1px #b1961d, -2px 1px 1px #d9b826, -1px 2px 1px #b1961d, -3px 2px 1px #d9b826, -2px 3px 1px #b1961d, -4px 3px 1px #d9b826, -3px 4px 1px #b1961d, -5px 4px 1px #d9b826, -4px 5px 1px #b1961d, -6px 5px 1px #d9b826, -6px 7px 0 rgba(0, 0, 0, 0.05), -5px 8px 0 rgba(0, 0, 0, 0.05), -3px 9px 0 rgba(0, 0, 0, 0.04), -2px 10px 0 rgba(0, 0, 0, 0.04), -1px 11px 0 rgba(0, 0, 0, 0.03), 0px 12px 0 rgba(0, 0, 0, 0.03), 1px 13px 0 rgba(0, 0, 0, 0.02), 2px 14px 0 rgba(0, 0, 0, 0.02), 3px 15px 0 rgba(0, 0, 0, 0.01), 4px 16px 0 rgba(0, 0, 0, 0.01), 5px 17px 0 rgba(0, 0, 0, 0.01), 6px 18px 0 rgba(0, 0, 0, 0.01), inset 0 4px 5px -2px rgba(255, 255, 255, 0.5), inset 0 1px 0 0 rgba(0, 0, 0, 0.3);
}
.button.yellow:after, .button.yellow:before {
background: black;
}
.button.yellow:after {
-webkit-filter: drop-shadow(-2px 0 0 rgba(255, 255, 255, 0.4));
filter: drop-shadow(-2px 0 0 rgba(255, 255, 255, 0.4));
}
.button.yellow:before {
-webkit-filter: drop-shadow(0 -2px 0 rgba(255, 255, 255, 0.35));
filter: drop-shadow(0 -2px 0 rgba(255, 255, 255, 0.35));
}
.button.yellow .arrow {
-webkit-filter: drop-shadow(-2px 0 0 rgba(255, 255, 255, 0.4));
filter: drop-shadow(-2px 0 0 rgba(255, 255, 255, 0.4));
}
.button:active {
box-shadow: none;
-moz-transform: translate3d(-6px, 6px, 0);
-ms-transform: translate3d(-6px, 6px, 0);
-webkit-transform: translate3d(-6px, 6px, 0);
transform: translate3d(-6px, 6px, 0);
}
.button .arrow {
-webkit-filter: drop-shadow(-2px 0 0 rgba(0, 0, 0, 0.2));
filter: drop-shadow(-2px 0 0 rgba(0, 0, 0, 0.2));
}
.button:after {
-webkit-filter: drop-shadow(-2px 0 0 rgba(0, 0, 0, 0.2));
filter: drop-shadow(-2px 0 0 rgba(0, 0, 0, 0.2));
}
.button:after, .button:before {
position: absolute;
content: " ";
right: 15px;
top: 14px;
width: 6px;
height: 18px;
background: white;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
display: block;
z-index: 2;
}
.button:before {
height: 14px;
top: 26px;
right: 16px;
z-index: 3;
-moz-transform: rotate(-137deg);
-ms-transform: rotate(-137deg);
-webkit-transform: rotate(-137deg);
transform: rotate(-137deg);
-webkit-filter: drop-shadow(0 -2px 0 rgba(0, 0, 0, 0.15));
filter: drop-shadow(0 -2px 0 rgba(0, 0, 0, 0.15));
}
<div class="row">
CARDLESS<br>
VIDEO CONFERANCE<br>
</div>
when i add background: url();
to .button.blue {}
if i add it before the last background nothing happens
if i add it after it , the background color disappear and the image appear
Try this
background: linear-gradient( rgba(122, 122, 126, 1), rgba(122, 122, 126, 0.65) ), url(../images/bg/bg10.jpg) no-repeat top center fixed;
i added this to html and it worked
<div class="" style="height:13%;width:100%;bottom:0;left:0;position:absolute;opacity:1;background-color:Silver;z-index:1000">
<div class="row">
<a href="#" class="button blue" onclick="javascript:onKeyPress('B')">
<img src="images/gesture.png" style="position:absolute;right:50;width:50px;height:50px;top:02;background-color:" alt="">CARDLESS<br>
</a>
<a href="#" class="button yellow" >
<img src="images/call.png" style="position:absolute;right:50;width:50px;height:50px;top:02;background-color:" alt=""> VIDEO CONFERANCE<br>
</a>
</div>
I'm attempting to make a wood frame with inset border. I made a border-image and applied an inset and regular box-shadow to it. The regular shadow works nicely as a drop shadow. The inset shadow is offset by many pixels. What's going wrong and can it be fixed? I'm trying to get the inset shadow to sit right up against the wood frame, not several pixels away from it, into where the text prints.
.box {
background: gray;
color: white;
}
.box-shadow2 {
border-style: solid;
border-width: 23px;
-moz-border-image: url(http://www.cafenocturne.com/images/WoodFrameBrdrImg.png) 23 repeat;
-webkit-border-image: url(http://www.cafenocturne.com/images/WoodFrameBrdrImg.png) 23 repeat;
-o-border-image: url(http://www.cafenocturne.com/images/WoodFrameBrdrImg.png) 23 repeat;
border-image: url(http://www.cafenocturne.com/images/WoodFrameBrdrImg.png) 23 fill repeat;
-webkit-box-shadow: inset 3px 3px 5px 0px rgba(0, 0, 0, 0.75), 3px 3px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: inset 3px 3px 5px 0px rgba(0, 0, 0, 0.75), 3px 3px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow: inset 3px 3px 5px 0px rgba(0, 0, 0, 0.75), 3px 3px 5px 0px rgba(0, 0, 0, 0.75);
}
<div class="box box-shadow2">Text</div>
Your border-image is only 10px wide, not 23. The grey is the extra transparent space that it expects to be part of the image.
border-image: url(http://www.cafenocturne.com/images/WoodFrameBrdrImg.png) 10 fill repeat;
I have a parent div with two child divs inside of it, one with an image and one with just text. I've assigned a :hover style to my parent class so that when a user hovers the entire div gets an inset shadow... however when I test it, the child that contains the image either is not affected or is on top of the effect..
Is there a way to get the :hover style to affect the image as well?
updated fiddle
edit: updated the fiddle with empty div to illustrate desired effect...
css:
.main-box {
border:2px solid #656565;
}
.main-box:hover {
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.3) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.3) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.3) inset;
}
.image {
display:inline-block;
}
.text {
display:inline-block;
}
<div class="main-box">
<div class="image">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQM2EEo-JUTyhdaFxM3UCMvTM-yotCWzz_v6XeCL6RIYMdY4ZjJ" />
</div>
<div class="text">asdfasfda;lskjf</div>
</div>
The solution to this is actually not too far from what you have, simply change your CSS to say
.main-box:hover img {
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.3) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.3) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.3) inset;
}
and the effect should be what you are looking for.
Updated fiddle to show results
EDIT:
The best solution for this problem would be to add a :hover:before element in your CSS. This will create new content above the div on the page for as long as the user's mouse is over the div in question, and by giving it an absolute position and z-index, all effects you add to the box will show above the contents of the hovered div.
The following CSS will give you what you want:
.main-box:hover:before {
content: "";
display: inline-block;
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.3) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.3) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.3) inset;
}
The problem with this method is that the :before content is now effectively covering everything in the div; any links, input fields or buttons you would want the user to be able to select are now rendered useless.
While pointer-events would be the easiest way of getting through this new overlay, it has terrible browser compatibility, so I would recommend the following:
.main-box a, .main-box input { position: relative; z-index: 3; }
// etc.
Doing this for all links, text or inputs you would want your users to be able to select should be clickable, and this solution should be compatible on all browsers.
Newer fiddle