I want to add shadow to my clip-path, but if I wrap it it will disappear.
Here is the result I want (must the shadow to the clip-path):
.question-card {
background-color: silver;
border-radius: 0.25em;
height: 100px;
width: 200px;
-webkit-box-shadow: -1px 1px 7px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 1px 7px 0px rgba(0,0,0,0.75);
box-shadow: -1px 1px 7px 0px rgba(0,0,0,0.75);
}
.inset {
height: 40px;
width: 20px;
background-color: inherit;
position: absolute;
top: 40px;
left: 208px;
clip-path: inset(0 0 0 0);
border-radius: 0 0.25em 0.25em 0;
}
.inset-wrap {
filter: drop-shadow(-1px 1px 7px 0px rgba(0,0,0,0.75));
}
<div class="question-card">
<span class="inset"></span>
</div>
Here is the result when I try to add the shadow why it disappears?:
.question-card {
background-color: silver;
border-radius: 0.25em;
height: 100px;
width: 200px;
-webkit-box-shadow: -1px 1px 7px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 1px 7px 0px rgba(0,0,0,0.75);
box-shadow: -1px 1px 7px 0px rgba(0,0,0,0.75);
}
.inset {
height: 40px;
width: 20px;
background-color: inherit;
position: absolute;
top: 40px;
left: 208px;
clip-path: inset(0 0 0 0);
border-radius: 0 0.25em 0.25em 0;
}
.inset-wrap {
filter: drop-shadow(-1px 1px 7px 0px rgba(0,0,0,0.75));
}
<div class="question-card">
<span class="inset-wrap">
<span class="inset"></span>
</span>
</div>
.question-card {
background-color: silver;
border-radius: 0.25em;
height: 100px;
width: 200px;
-webkit-box-shadow: -1px 1px 7px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 1px 7px 0px rgba(0,0,0,0.75);
box-shadow: -1px 1px 7px 0px rgba(0,0,0,0.75);
}
.inset {
height: 40px;
width: 20px;
background-color: silver;
position: absolute;
top: 40px;
left: 208px;
clip-path: inset(0 0 0 0);
border-radius: 0 0.25em 0.25em 0;
}
.inset-wrap {
filter: drop-shadow(-1px 1px 7px 0px rgba(0,0,0,0.75));
}
<div class="question-card">
<span class="inset-wrap">
<span class="inset"></span>
</span>
</div>
Related
I am trying to get a box shadow on an element wrapped around an input when an input is in focus. but can't get it to work. I have probably structured the code wrong. Snippet bellow
.cam-peoplepicker-userlookup {
margin-right: 55em;
height: 7em;
min-width: 50%;
overflow: hidden;
border: 1px solid #99b0c1;
padding: 2px 5px 2px 5px;
background-color: white;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
border-radius: 0.5em;
}
#k:focus #divAdministrators {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}
#*Project Manager*#
<div class="form-group">
<div id="divAdministrators" class="cam-peoplepicker-userlookup ms-fullWidth">
<span id="spanAdministrators"></span>
<textarea id="k"></textarea>
</div>
<div id="divAdministratorsSearch" class="cam-peoplepicker-usersearch ms-emphasisBorder"></div>
</div>
</div>
Thank you all for all the suggestions. really appreciate it!!!
Although you are not using jQuery, but if you would like to use jQuery it may be helpful...
$(document).ready(function() {
$('#k').focus(function(event) {
$('#divAdministrators').addClass('focused')
});
$('#k').blur(function(event) {
$('#divAdministrators').removeClass('focused')
});
});
.cam-peoplepicker-userlookup { margin-right: 55em; height: 7em; min-width: 50%; overflow: hidden; border: 1px solid #99b0c1; padding: 2px 5px 2px 5px; background-color: white; -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em; border-radius: 0.5em; }
.focused { border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<div id="divAdministrators" class="cam-peoplepicker-userlookup ms-fullWidth">
<span id="spanAdministrators"></span>
<textarea id="k"></textarea>
</div>
<div id="divAdministratorsSearch" class="cam-peoplepicker-usersearch ms-emphasisBorder"></div>
</div>
I think it may not be possible until you are not using js.
You would have to re-structure your HTML to achieve this without Javascript.
.cam-peoplepicker-userlookup {
margin-right: 55em;
height: 7em;
min-width: 50%;
overflow: hidden;
border: 1px solid #99b0c1;
padding: 2px 5px 2px 5px;
background-color: white;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
border-radius: 0.5em;
}
.form-group {
position: relative;
}
#k {
position: absolute;
top: .5em;
left: .5em;
}
#divAdministrators {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
#k:focus~#divAdministrators {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}
#*Project Manager*#
<div class="form-group">
<textarea id="k"></textarea>
<div id="divAdministrators" class="cam-peoplepicker-userlookup ms-fullWidth">
<span id="spanAdministrators"></span>
</div>
<div id="divAdministratorsSearch" class="cam-peoplepicker-usersearch ms-emphasisBorder"></div>
</div>
.demo-div{
margin:auto;
width:50%;
border: 1px solid #d6f5f5;
background: #f6f6f6;
padding: 20px 5px 20px 5px;
min-height: 500px;
}
.demo-div .demo-div-content{
padding: 0px !important;
}
.demo-div-inner{
background: white;
min-height: 70px;
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
padding: 30px;
transform:translateX(30%);
}
<div class="demo-div ">
<div class="demo-div-content">
<div class="demo-div-inner">swipe me out</div> </div>
</div>
When i apply translate to inner div , it comes on top of parent div.
But i want is that it should stay within parent on applying tranform.
Also i have event listener on demo-div-inner , so setting it z-index of parent div i.e. demo-div as -1 , stopped event listener from firing.
Add Another attributes margin-right at your demo-div-inner class.
.demo-div{
margin:auto;
width:50%;
border: 1px solid #d6f5f5;
background: #f6f6f6;
padding: 20px 5px 20px 5px;
min-height: 500px;
}
.demo-div .demo-div-content{
padding: 0px !important;
}
.demo-div-inner{
background: white;
min-height: 70px;
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
padding: 30px;
margin-right: 66px;
transform:translateX(30%);
}
<div class="demo-div">
<div class="demo-div-content">
<div class="demo-div-inner">swipe me out</div>
</div>
</div>
I have HTML and CSS code that I've used to build a custom checkbox. I believe my code has the correct web-kits but it doesn't seem to work on FireFox.
Here's the code:
HTML
<input type='checkbox' style="float: left" class='regular-checkbox big-checkbox'
checked='checked' id='product-45-45' name='product_id_page-0[45-45]'
value='45-45' data-first_price="11.99" data-second_price="" data-paysys="" />
CSS
.regular-checkbox {
-webkit-appearance: none;
-moz-appearance: none;
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0,0,0,0),inset 0 -15px 10px -12px rgba(0,0,0,0);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0),inset 0 -15px 10px -12px rgba(0,0,0,0);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0),inset 0 -15px 10px -12px rgba(0,0,0,0);
padding: 9px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
display: inline-block;
position: relative;
}
.regular-checkbox:active,
.regular-checkbox:checked:active {
box-shadow: 0 1px 2px rgba(0,0,0,0),inset 0 1px 3px rgba(0,0,0,0);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0),inset 0 1px 3px rgba(0,0,0,0);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0),inset 0 1px 3px rgba(0,0,0,0);
}
.regular-checkbox:checked {
background-color: #e9ecee;
box-shadow: 0 1px 2px rgba(0,0,0,0),inset 0 -15px 10px -12px rgba(0,0,0,0),inset 15px 10px -12px rgba(255,0,0,0);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0),inset 0 -15px 10px -12px rgba(0,0,0,0),inset 15px 10px -12px rgba(255,0,0,0);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0),inset 0 -15px 10px -12px rgba(0,0,0,0),inset 15px 10px -12px rgba(255,0,0,0);
}
.regular-checkbox:checked:after {
content: '\2714';
font-size: 14px;
position: absolute;
top: 0;
left: 3px;
color: #19a73e;
}
.big-checkbox {
padding: 18px;
}
.big-checkbox:checked:after {
font-size: 37px;
top: -7px;
left: 2px;
}
Screen shot of the desired outcome (works in Chrome):
Try use this code, I don't know explain, but I did one version for you ;)
.regular-checkbox{
display: inline-block;
border-radius: 50%;
width: 38px;
height: 38px;
border: 1px solid #ccc;
}
.regular-checkbox input{
opacity: 0;
position: absolute;
}
.regular-checkbox small{
width: 100%;
height: 100%;
float: left;
}
.regular-checkbox input:checked ~ small:after{
content: '\2714';
height: 38px;
width: 38px;
color: green;
font-size: 26px;
text-align: center;
float: left;
}
<label class="regular-checkbox">
<input type="checkbox">
<small></small>
</label>
This is a known issue in Firefox - there's a workaround with using <label> and <span>.
MDN also mentions that styling some form elements is a bit of a pain - read more here.
.checkbox input[type="checkbox"] {
display: none;
}
.checkbox span {
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0), inset 0 -15px 10px -12px rgba(0, 0, 0, 0);
padding: 22px;
-webkit-border-radius: 50%;
border-radius: 50%;
display: inline-block;
position: relative;
}
.checkbox :active + span,
.checkbox :checked:active span {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0), inset 0 1px 3px rgba(0, 0, 0, 0);
}
.checkbox :checked + span {
background-color: #e9ecee;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0), inset 0 -15px 10px -12px rgba(0, 0, 0, 0), inset 15px 10px -12px rgba(255, 0, 0, 0);
}
.checkbox :checked + span:after {
content: '\2714';
font-size: 14px;
position: absolute;
top: 0;
left: 0px;
width: 100%;
color: #19a73e;
text-align: center;
}
.big-checkbox {
padding: 18px;
}
.big-checkbox:checked + span:after {
font-size: 37px;
}
<label class="checkbox" for="product-45-45">
<input type='checkbox' style="float: left" class='regular-checkbox big-checkbox' checked='checked' id='product-45-45' name='product_id_page-0[45-45]' value='45-45' data-first_price="11.99" data-second_price="" data-paysys="" />
<span></span>
</label>
As you can see I've created a sideBar:
<div id="sideBar">
<button class="button">Home</button><br>
<button class="button">About Me</button><br>
<button class="button">Gallery</button><br>
<button class="button">Contact</button>
</div>
<div id="content">
<p>Content Div</p>
</div>
My css:
#sideBar {
background-color: grey;
width: 200px;
float: left;
height: 200px;
-webkit-box-shadow: inset -16px 0px 10px -8px rgba(0,0,0,0.75);
-moz-box-shadow: inset -16px 0px 10px -8px rgba(0,0,0,0.75);
box-shadow: inset -16px 0px 10px -8px rgba(0,0,0,0.75);
}
.button {
background-color: grey;
border-width: 0 0 2px 0;
border-color: white;
border-style: solid;
color: rgb(231, 231, 231);
cursor: pointer;
-webkit-box-shadow: inset -16px 0px 10px -8px rgba(0,0,0,0.75);
-moz-box-shadow: inset -16px 0px 10px -8px rgba(0,0,0,0.75);
box-shadow: inset -16px 0px 10px -8px rgba(0,0,0,0.75);
width: 200px;
}
#content {
background-color: white;
color: black;
float: left;
width: 200px;
border: 1px solid black;
height: 200px;
}
#content p {
margin-left: 20px;
}
Fiddle:
http://jsfiddle.net/of4dcp2u/1/
I've used some inner shadow. The only problem is that I can't get the shadow work in de border lines. The white borders don't have any shadow.
I don't want to use any images for buttons. Is there a solution for this problem?
Sam, Put shadow to the content div like this
.button {
background-color: grey;
border-width: 0 0 2px 0;
border-color: white;
border-style: solid;
color: rgb(231, 231, 231);
cursor: pointer;
width: 200px;
}
#content {
background-color: white;
color: black;
float: left;
width: 200px;
border: 1px solid black;
height: 200px;
-webkit-box-shadow: -16px 0px 10px -8px rgba(0,0,0,0.75);
-moz-box-shadow: -16px 0px 10px -8px rgba(0,0,0,0.75);
box-shadow: -16px 0px 10px -8px rgba(0,0,0,0.75);
}
The box-shadow you have set to .button is going in the wrong direction. Use this code:
.button {
background-color: grey;
border-width: 0 0 2px 0;
border-color: white;
border-style: solid;
color: rgb(231, 231, 231);
cursor: pointer;
-webkit-box-shadow: inset 0px 16px 10px -8px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 16px 10px -8px rgba(0,0,0,0.75);
box-shadow: inset 0px 16px 10px -8px rgba(0,0,0,0.75);
width: 200px;
}
I have a feeling I have my stacking contexts messed up, but I cannot get this working.
I have several divs, for which z-index is working correctly, however, one child is not cooperating.
My HTML looks something like this:
....
<div id="filters">
<div class="filter"></div>
<div class="filter"></div>
<div class="filter"></div>
<div class="filter"></div>
<div class="filter"></div>
<div class="set">
<img src="Cat.png">
<div class="drop">
<img src="Hammer.png">
<img src="Cat.png">
<img src="Bat.png">
</div>
</div>
</div>
....
My CSS looks something like this:
#filters {
width: 256px;
height: 32px;
text-align: center;
background: linear-gradient(#147380, #0c454d);
padding: 0px 0px;
margin-bottom: 16px;
border: 1px solid #c8c998;
border-radius: 6px;
box-shadow: 0px 0px 0px 1px #504e20, inset 0px 0px 0px 1px #504e20;
position: relative;
z-index: 1;
}
.filter {
height: 22px;
width: 22px;
border-radius: 28px;
border: 2px solid #7b7651;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75), inset 0px 3px 3px rgba(255, 255, 255, 0.25), inset 0px -3px 3px rgba(0, 0, 0, 0.25);
margin: 3px 3px;
display: inline-block;
position: relative;
z-index: 4;
}
.set {
height: 22px;
width: 20px;
border-radius: 0px 28px 28px 0px;
border: 2px solid #7b7651;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75), inset 0px 3px 3px rgba(255, 255, 255, 0.25), inset 0px -3px 3px rgba(0, 0, 0, 0.25);
margin: 3px 0px;
margin-left: -19px;
padding: 0px 8px 0px 15px;
background: #e16006;
display: inline-block;
position: relative;
z-index: 3;
}
.drop {
position: relative;
z-index: 2;
width: 20px;
padding: 8px 4px 2px 4px;
top: 2px;
left: -6px;
border-radius: 0px 0px 7px 7px;
border: 2px solid #7b7651;
border-top: 0px;
background: #d55801;
}
What I am trying to do is to get the .drop behind the .set, which is behind the filter but all of them are ontop of .filters. With my code, everything is displayed properly except that .drop is ontop of .set.
Sorry to say that this is not possible. A child element cannot have a lower z-index than the parent element.
More on that topic
//text code
body{
padding:0;
margin:0;
}
#filters {
width: 256px;
height: 32px;
text-align: center;
background: linear-gradient(#147380, #0c454d);
margin-bottom: 16px;
border: 1px solid #c8c998;
border-radius: 6px;
box-shadow: 0px 0px 0px 1px #504e20, inset 0px 0px 0px 1px #504e20;
position: relative;
}
.filter {
height: 22px;
width: 22px;
border-radius: 28px;
border: 2px solid #7b7651;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75), inset 0px 3px 3px rgba(255, 255, 255, 0.25), inset 0px -3px 3px rgba(0, 0, 0, 0.25);
margin: 3px 3px;
display: inline-block;
position: relative;
border:1px solid gold;
}
.set {
height: 22px;
width: 20px;
border-radius: 0px 28px 28px 0px;
border: 2px solid #7b7651;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75), inset 0px 3px 3px rgba(255, 255, 255, 0.25), inset 0px -3px 3px rgba(0, 0, 0, 0.25);
margin: 3px 0px;
margin-left: -19px;
padding: 0px 8px 0px 15px;
background: #e16006;
display: inline-block;
border:1px solid black;
}
.drop {
position: relative;
width: 20px;
padding: 8px 4px 2px 4px;
border-radius: 0px 0px 7px 7px;
border: 2px solid #7b7651;
border-top: 0px;
background: #d55801;
border:1px solid cyan;
margin-top:-138px;
position: absolute;
right:21px;
transition:all 0.5s linear;
z-index:-1;
}
#filters .set:hover .drop{
margin-top:0px;
transition:all 0.5s linear;
}