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>
Related
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>
I am doing the following radio button code in a wordpress post loop:
<input id="<?php the_title(); ?>" type="radio" name="phoneSelect" value="test">
<label for="<?php the_title(); ?>">Select</label>
Each generated radio button has a unique id which assigns also a unique label for="". When I do the following styling, the checked element is only working on one radio button. When I select another radio button, the first button changes the style but the next radio button does not apply the css settings
input[type=radio] {
display:none;
}
input[type=radio] + label {
display:inline-block;
margin:-2px;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #333;
text-align: center;
text-shadow: 0 1px 1px rgba(255,255,255,0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
background-image: -o-linear-gradient(top,#fff,#e6e6e6);
background-image: linear-gradient(to bottom,#fff,#e6e6e6);
background-repeat: repeat-x;
border: 1px solid #ccc;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
border-bottom-color: #b3b3b3;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}
input[type=radio]:checked + label {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
background-color:#e0e0e0;
}
The following JSfiddle can replicate the issue (obviously because the php isn't being executed) http://jsfiddle.net/83uc5xy5/
This is a working example:
<div><input type="radio" name ="test" id="test"/>
dasdas
</div>
<input type="radio" name ="test" id="test"/>
CSS:
input[type="radio"]:checked{
margin-top:50px;
}
It moves the selected checkbox with 50px from the top.
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!
I'm trying to do so using CSS
---------------------
SOME CONTENT HERE
---------------------
so what I basically want is that the border is just at the top and bottom of whatever content there is inside (most preferably a <p></p>)
Here is some code that I was using but it definitely doesn't work the way its meant to be.
padding: 5px 1px;
box-shadow: 0 2px 5px black,
0 -2px 5px #800000,
0 0 5px black,
0 0 5px #800000;
What should I do for that?
Do you want a border or a shadow? You're code is telling me you want a shadow, your question asks a border.
If border:
border-top: 1px solid black;
border-bottom: 1px solid black;
If shadow:
-webkit-box-shadow: 0px 6px 2px -1px #000, 0px -6px 2px -1px #000;
box-shadow: 0px 6px 2px -1px #000, 0px -6px 2px -1px #000;
Examples: http://jsfiddle.net/pGGXH/69/
you can use the below code for top and bottom borders
border-top:1px dashed black;
border-bottom:1px dashed black;
For shadow effect go through this link
some modifications to the code of sebass
-webkit-box-shadow: 0px 1px 15px -1px #000, 0 -1px 15px -1px #000;
box-shadow: 0px 1px 15px -1px #000, 0 -1px 15px -1px #000;
If you want a border, then you can do it like this.
.div {
border-top: 1px solid black;
border-bottom: 1px solid black;
width: 50px;
height: 50px;
}
Demo - http://jsfiddle.net/9VCZU/
Do you see the thin bevel highlight on top? How do you do this in CSS with only one HTML tag? I'm guessing it has something to do with outline. This is what I have so far without the bevel:
<a class="callToAction">Click here</a>
.callToAction {
border: 1px solid #000;
-moz-border-radius: 0.4em;
background: -moz-linear-gradient(
top,
#ccc,
#999
);
}
To create a bevel you must use a combo of the CSS3 radius and shadow attributes. To get the highlight when hovering over a button you must use the pseudo-selector :hover.
The Button Code from http://www.whitedogdesigngroup.com/blog/entry/a_better_button_with_css3/
callToAction {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
text-shadow: 0 -2px #791c13;
-moz-box-shadow: 0 1px 1px #ddd, 0 -1px 1px #555;
-webkit-box-shadow: 0 1px 1px #ddd, 0 -1px 1px #555;
box-shadow: 0 1px 1px #ddd, 0 -1px 1px #555;
}
callToAction:hover {
margin-bottom: 1px;
height: 29px;
position: relative;
top: 1px;
color: #eee !important;
-moz-box-shadow: 0 1px 1px #eee, 0 -2px 1px #555;
-webkit-box-shadow: 0 1px 1px #eee, 0 -2px 1px #555;
box-shadow: 0 1px 1px #eee, 0 -2px 1px #555;
}
If you need further explanation...
Explanation of CSS3 borders: http://doctype.tv/borders
Explanation of CSS3 shadows: http://doctype.tv/css3
Just found out that you can specify a shadow to be an inset by inspecting the source of http://html5doctor.com/you-can-still-use-div/:
.inset {
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset,
0 0 2px rgba(255, 255, 255, 0.3) inset,
0 1px 2px rgba(0, 0, 0, 0.29)
}