Why does drop shadow work on input but not div elements? - html

This input element has a drop shadow:
.test {
filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
border: 1px solid black;
height: 20px;
}
<input class="test" />
But this div element does not:
.test {
filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
border: 1px solid black;
height: 20px;
}
<div class="test"> </div>
Why is this the case?


Your code is working fine, it's because of background is transparent try to give the background color to div and the drop shadow will be visible.
.test {
filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
border: 1px solid black;
height: 20px;
background-color:#fff;
}
<div class="test"></div>

Related

css error en chrome : 'Unknown property name'

I want to modify the slider but I get this error:
Unknown property name
What am I doing wrong?
I am using chrome and my os is windows 7.
<head>
<body>
<div class="gene_controller width" data-original_value="0" data-name="width">
<p class="gene_name">width</p>
<div class="gene_slider">
<div class="gene_input_row"><img class="undo invisible" src="/image/reset.png" style="padding:1px;"><input class="number_input slider-input" type="number" value="0" step="0.1"><img class="x" src="icons/scroll.svg"></div>
<div class="slider"><input type="range" min="-2" max="2" step="any" value="0"></div>
</div>
<!--document.getElementsByClassName("slider")[0].children[0].min
esto es un comentario en html
-->
<style>
input[type="range"] {
-webkit-appearance: none;
width: 100%;
background: transparent;
&:focus {
outline: none;
}
&::-webkit-slider-thumb {
-webkit-appearance: none;
height: 21px;
width: 11px;
background: svg-load(".\icons\indicator-horizontal.svg");
transform: translateY(-8px);
}
&::-moz-range-thumb {
height: 41px;
width: 11px;
border: 0;
border-radius: 0;
background: svg-load(".\icons\indicator-horizontal.svg");
transform: translateY(2px);
}
&::-webkit-slider-runnable-track {
width: 100%;
height: 2px;
box-sizing: border-box;
background: black;
border-right: 1px solid grey;
border-bottom: 1px solid grey;
box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey, -1px -1px 0 darkgrey,
0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
}
&::-moz-range-track {
width: 100%;
height: 2px;
box-sizing: border-box;
background: black;
border-right: 1px solid grey;
border-bottom: 1px solid grey;
box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey, -1px -1px 0 darkgrey,
0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
}
}
</style>
</div>

Your path is not correct, use this format:
./icons/indicator-horizontal.svg
for more examples check this link:
https://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/

I believe you are using background: svg-load(".\icons\indicator-horizontal.svg"); property wrongly.
Simply try with background: url(".\icons\indicator-horizontal.svg"); everywhere you using background property.
Make sure you use the correct url relative path w.r.t your CSS file.

convert your scss to css
input[type="range"]{
-webkit-appearance:none;width:100%;background:transparent
}
input[type="range"]:focus{
outline:none
}
input[type="range"]::-webkit-slider-thumb{
-webkit-appearance:none;
height:21px;
width:11px;
background:svg-load(".iconsindicator-horizontal.svg");
-webkit-transform:translateY(-8px);
transform:translateY(-8px)}
input[type="range"]::-moz-range-thumb{
height:41px;
width:11px;
border:0;
border-radius:0;
background:svg-load(".iconsindicator-horizontal.svg");
transform:translateY(2px)}
input[type="range"]::-webkit-slider-runnable-track{
width:100%;
height:2px;
box-sizing:border-box;
background:black;
border-right:1px solid grey;
border-bottom:1px solid grey;
box-shadow:1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey, -1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey
}
input[type="range"]::-moz-range-track{
width:100%;
height:2px;
box-sizing:border-box;
background:black;
border-right:1px solid grey;
border-bottom:1px solid grey;
box-shadow:1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey, -1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey
}
<div class="gene_controller width" data-original_value="0" data-name="width">
<p class="gene_name">width</p>
<div class="gene_slider">
<div class="gene_input_row"><img class="undo invisible" src="/image/reset.png" style="padding:1px;"><input class="number_input slider-input" type="number" value="0" step="0.1"><img class="x" src="icons/scroll.svg"></div>
<div class="slider"><input type="range" min="-2" max="2" step="any" value="0"></div>
</div>
<!--document.getElementsByClassName("slider")[0].children[0].min
esto es un comentario en html
-->
</div>

CSS box-radius ruins box-shadow inset effect on firefox

I have a div tag that I want to style with rounded top corners. And, I am facing an issue with my box-radius.
.box {
width: 100px;
height: 100px;
-webkit-box-shadow: inset 0 20px 3px 1px #4D7594;
box-shadow: inset 0 20px 3px 1px #4D7594;
border-radius: 15px;
}
<div class="box">
</div>
Well, so far works good. But in this sample, if I add more px to my border-radius, it will break the inset of box-shadow.
.box {
width: 100px;
height: 100px;
-webkit-box-shadow: inset 0 20px 3px 1px #4D7594;
box-shadow: inset 0 20px 3px 1px #4D7594;
border-radius: 16px;
}
<div class="box">
</div>
You may notice that on the top area of the .box seems to have its shadow missing. This behavior only happens on firefox. And currently, I am using firefox 45.0.1.

Setting two shadows seems to fix it at this time :
.box {
width: 100px;
height: 100px;
-webkit-box-shadow: inset 0 20px 3px 1px #4D7594;
box-shadow: inset 0 18px #4D7594, inset 0 20px 3px 1px #4D7594;
border-radius: 16px;
}
<div class="box">
</div>

Making emboss buttons [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
height: 160px;
width: 160px;
text-decoration: none;
text-transform: capitalize;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border-width: 0px;
border-radius: 20px;
box-shadow: inset 0px -2px 1px rgba(0,0,0,0.8),
inset 0 2px 1px rgba(255,255,255,1);
margin: 15px 5px;
background: linear-gradient(top, #23b224, #23b224);
background: -webkit-linear-gradient(top, #23b224, #23b224);
background: -moz-linear-gradient(top, #23b224, #23b224);
background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #23b224), color-stop(100%, #23b224));
The code above will produce the following result:
But what I want to achieve is something like this:
I want my buttons to appear like the buttons in the second picture. How to do it?

Try this and let me know....
input {
padding: 5px 30px;
border: 1px solid darkgreen;
border-radius: 4px;
-webkit-box-shadow: inset 1px 6px 12px lightgreen, inset -1px -10px 5px darkgreen, 1px 2px 1px black;
-moz-box-shadow: inset 1px 6px 12px lightgreen, inset -1px -10px 5px darkgreen, 1px 2px 1px black;
box-shadow: inset 1px 6px 12px lightgreen, inset -1px -10px 5px darkgreen, 1px 2px 1px black;
background-color: green;
color: white;
text-shadow: 1px 1px 1px black;
}
<input type=button>
Reference:-https://dev.opera.com/articles/beautiful-ui-styling-with-css3/

This is the demo with code
Click Here for Fiddle
This is Full Code with Css.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.modern {
display: inline-block;
margin: 10px;
padding: 8px 15px;
background: #B8ED01;
border: 1px solid rgba(0,0,0,0.15);
border-radius: 4px;
transition: all 0.3s ease-out;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.5),
0 2px 2px rgba(0,0,0,0.3),
0 0 4px 1px rgba(0,0,0,0.2);
/* Font styles */
text-decoration: none;
text-shadow: 0 1px rgba(255,255,255,0.7);
}
.modern:hover { background: #C7FE0A; }
.embossed-link {
box-shadow:
inset 0 3px 2px rgba(255,255,255,.22),
inset 0 -3px 2px rgba(0,0,0,.17),
inset 0 20px 10px rgba(255,255,255,.12),
0 0 4px 1px rgba(0,0,0,.1),
0 3px 2px rgba(0,0,0,.2);
}
.modern.embossed-link {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.5),
0 2px 2px rgba(0,0,0,0.3),
0 0 4px 1px rgba(0,0,0,0.2),
inset 0 3px 2px rgba(255,255,255,.22),
inset 0 -3px 2px rgba(0,0,0,.15),
inset 0 20px 10px rgba(255,255,255,.12),
0 0 4px 1px rgba(0,0,0,.1),
0 3px 2px rgba(0,0,0,.2);
}
.modern.embossed-link:active {
box-shadow:
inset 0 -2px 1px rgba(255,255,255,0.2),
inset 0 3px 2px rgba(0,0,0,0.12);
}
.socle {
position: relative;
z-index: 2;
}
.socle:after {
content: "";
z-index: -1;
position: absolute;
border-radius: 6px;
box-shadow:
inset 0 1px 0 rgba(0,0,0,0.1),
inset 0 -1px 0 rgba(255,255,255,0.7);
top: -6px; bottom: -6px;
right: -6px; left: -6px;
background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0));
}
</style>
</head>
<body>
<div class="example-wrapper clearfix">
<h3>Button Styles</h3>
<div class="demo-wrapper">
<a class="modern" href="#">Modern</a>
<a class="modern embossed-link" href="#">Modern embossed</a>
<a class="modern socle" href="#">Modern with socle</a>
</div>
</div>
</body>
</html>

Why my animated buttons not working in IE8 and How to conert it for IE8

I am trying to put animated button on my Page but when i open it through IE 8 its not working.Its working in Crome.Below is the piece of code:
JSP Page:
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" href="mystyle.css" rel="stylesheet">
<title>JSP Page</title>
</head>
<body>
<button class="depth" type="button">✔</button>
<button class="stat" type="button">✔</button>
</body>
</html>
Css File(mystyle.css) :
html {
-webkit-tap-highlight-color: hsla(0,0,0,0);
tap-highlight-color: hsla(0,0,0,0);
}
body {
background-color: #363636;
background-image: linear-gradient(45deg, hsla(0,0%,0%,.25) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.25) 75%, hsla(0,0%,0%,.25)),
linear-gradient(45deg, hsla(0,0%,0%,.25) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.25) 75%, hsla(0,0%,0%,.25));
background-position:0 0, 2px 2px;
background-size:4px 4px;
padding: 100px;
}
button.depth {
left: 20%;
margin: -40px;
position: absolute;
top: 20%;
}
button.stat {
left: 40%;
margin: -40px;
position: absolute;
top: 40%;
}
button:hover,
button:active {
outline: 0;
}
/* 3D Button */
button {
background: #444;
border: none;
border-radius: 80px;
box-shadow: inset 0 0 2px 2px hsla(0,0%,0%,.2),
inset 0 0 2px 4px hsla(0,0%,0%,.2),
inset 0 0 2px 6px hsla(0,0%,0%,.2),
inset 0 0 1px 8px hsla(0,0%,0%,.5),
inset 0 -4px 2px 4px hsla(0,0%,0%,.5),
inset 0 1px 1px 8px hsla(0,0%,100%,.25),
inset 0 -30px 30px hsla(0,0%,0%,.2),
0 -4px 8px 4px hsla(0,0%,0%,.5),
0 10px 10px hsla(0,0%,0%,.25),
0 0 2px 2px hsla(0,0%,0%,.2),
0 0 2px 4px hsla(0,0%,0%,.2),
0 0 2px 6px hsla(0,0%,0%,.2),
0 0 2px 8px hsla(0,0%,0%,.5),
0 1px 2px 8px hsla(0,0%,100%,.25),
0 -1px 2px 8px hsla(0,0%,0%,.5);
color: #303030;
cursor: pointer;
font: bold 40px/85px sans-serif;
height: 80px;
padding: 0;
text-shadow: 0 1px 1px hsla(0,0%,100%,.25),
0 -1px 1px hsla(0,0%,0%,.75);
width: 80px;
}
button:hover,
button.depth:focus {
color: #0ab;
text-shadow: 0 0 20px hsla(240,75%,75%,.5),
0 1px 1px hsla(0,0%,100%,.25),
0 -1px 1px hsla(0,0%,0%,.75);
}
button:active {
box-shadow: inset 0 0 2px 2px hsla(0,0%,0%,.2),
inset 0 0 2px 4px hsla(0,0%,0%,.2),
inset 0 0 2px 6px hsla(0,0%,0%,.2),
inset 0 0 1px 7px hsla(0,0%,0%,.5),
inset 0 5px 15px 7px hsla(0,0%,0%,.15),
inset 0 -4px 2px 3px hsla(0,0%,0%,.5),
inset 0 1px 1px 7px hsla(0,0%,100%,.25),
inset 0 -30px 30px hsla(0,0%,0%,.1),
inset 0 30px 30px hsla(0,0%,0%,.2),
0 -4px 8px 4px hsla(0,0%,0%,.5),
0 5px 10px hsla(0,0%,0%,.25),
0 0 2px 2px hsla(0,0%,0%,.2),
0 0 2px 4px hsla(0,0%,0%,.2),
0 0 2px 6px hsla(0,0%,0%,.2),
0 0 2px 8px hsla(0,0%,0%,.5),
0 1px 2px 8px hsla(0,0%,100%,.25),
0 -1px 2px 8px hsla(0,0%,0%,.5);
line-height: 86px;
}
Please suggest me some method to overcome this issue

In this case CSS3 PIE maybe helpful. as most of CSS3 properties are not supported below IE9
Please find useful link
http://css3pie.com/documentation/getting-started/
in CSS wherever there is CSS3 incompatible property in IE8 you need to add style as
behavior: url(PIE.htc /*path to htc file*/);
example
button:hover,
button.depth:focus {
color: #0ab;
text-shadow: 0 0 20px hsla(240,75%,75%,.5),
0 1px 1px hsla(0,0%,100%,.25),
0 -1px 1px hsla(0,0%,0%,.75);
behavior: url(PIE.htc);
}
sidenote: its recommended that .htc file should be use only for degraded browsers and not for modern browsers you may use conditional comment in this case
Hope this helps!

How to add an image to a custom CSS button

I have the following button HTML code:
<button class="button" style="width: 95%;">PHYSICIANS</button>
It is customized by CSS3 here:
button {
border: 1px solid rgba(0,0,0,0.3);
background: #eee;
color: #515151;
font-size: 24px;
font-weight: 700;
padding: 21px 34px;
text-decoration: none;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.21, rgb(203,203,203)), color-stop(0.58, rgb(227,226,226)));
background: -moz-linear-gradient(center bottom, rgb(203,203,203) 21%, rgb(227,226,226) 58%);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 0 5px rgba(255,255,255,0.3) /* glass edge */, inset 0 1px 0 0 rgba(255,255,255,0.5) /* top highlight */, inset 0 -3px 0 0 rgba(0,0,0,0.5) /* bottom shadow */;
-webkit-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 1px 0 0 rgba(255,255,255,0.5), inset 0 -3px 0 0 rgba(0,0,0,0.5);
box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 1px 0 0 rgba(255,255,255,0.5), inset 0 -3px 0 0 rgba(0,0,0,0.5);
text-shadow: 0 1px rgba(255,255,255,0.6);
}
button::-moz-focus-inner, a.button::-moz-focus-inner {
padding:0;
border:0;
}
button:hover, a.button:hover {
background: #cbcbcb;
cursor: pointer;
}
button:active, a.button:active {
background: #ccc;
padding: 22px 34px 20px;
-moz-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2);
box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2);
text-shadow: none;
}
Which displays the following button:
How can I modify the above code, so I can add a thumbnail image to it. Something like this:
The default image size is 260X190 but I want to size it up so it fits inside the button.

You can use the pseudo-element :before to do this.
See this working demo I made: http://jsfiddle.net/A7UsX/1/
button:before {
content: " ";
display: inline-block;
background: url("http://www.wdc.com/Global/images/icons/icon_supporthelp.gif") no-repeat;
height: 30px;
width: 50px;
}
I have made a red background to show you what I did. Change the background to the image you would like and change the height and width to your likings.

you could use :before pseudo element.
button:before{content: ' '; display:inline-block; position:absolute; content:url(http://lorempixel.com/25/25); }
I'll suggest you to use a SVG image rather than using jpg or png format. so in this case you can call the image using background-image and give a positioning too.
button:before { content:''; display:inline-block; height:1em; width:1em;
background-image:url('images/image.svg'); background-size:contain; background-repeat:no-repeat; }
here you can check the working Demo. http://jsbin.com/damujidi/1/edit

You can add a <i> as commonly used in bootstrap [ref1] [ref2].
<button class="button">
<i class="btnbg"></i>PHYSICIANS
</button>
CSS:
.btnbg {
background-image: url('http://i.stack.imgur.com/QgIOj.png');
background-position: bottom left;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
height: 35px;
line-height: 35px;
vertical-align: middle;
width: 70px;
}
.button {
line-height: 35px;
vertical-align: middle;
}
see jsFiddle