The range slider is not aligned with the notches as it should be aligned with. I see the problem that is(please help Im begging you!!!!!!!):
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
-------
[]
^
it is aligned here(maximum left)
-----------
[]
^
it should be aligned here(maximum left)
I don't want to do the math to align them.
I could also change the width and then align them but I don't know how.
<!doctype HTML>
<html>
<head>
<style>
.slider{
-webkit-appearance:none;
width: 200px;
height: 5px;
background: grey;
outline: none;
transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 25px;
background: rgb(0,0,0);
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 46%, rgba(255,255,255,1) 46%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 54%, rgba(0,0,0,1) 54%, rgba(0,0,0,1) 100%);
}
.slidera{
height:10px;
width:200px;
background: rgb(0,0,0);
background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 11.5%, rgba(0,0,0,1) 11.5%, rgba(0,0,0,1) 12.5%, rgba(0,0,0,1) 13.5%, rgba(0,0,0,0) 13.5%, rgba(0,0,0,0) 24%, rgba(0,0,0,1) 24%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 26%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 36.5%, rgba(0,0,0,1) 36.5%, rgba(0,0,0,1) 37.5%, rgba(0,0,0,1) 38.5%, rgba(0,0,0,0) 38.5%, rgba(0,0,0,0) 49%, rgba(0,0,0,1) 49%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 51%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 61.5%, rgba(0,0,0,1) 61.5%, rgba(0,0,0,1) 62.5%, rgba(0,0,0,1) 63.5%, rgba(0,0,0,0) 63.5%, rgba(0,0,0,0) 74%, rgba(0,0,0,1) 74%, rgba(0,0,0,1) 75%, rgba(0,0,0,1) 76%, rgba(0,0,0,0) 76%, rgba(0,0,0,0) 86.5%, rgba(0,0,0,1) 86.5%, rgba(0,0,0,1) 87.5%, rgba(0,0,0,1) 88.5%, rgba(0,0,0,0) 88.5%, rgba(0,0,0,0) 100%);
}
html,body{
background-color:#212121;
color:white;
font-family:monospace,monospace;
}
</style>
</head>
<body>
<div>
Volume:<br>
<input type="range" id="slider1" min="0" max="100" step="12.5" , value="50" class="slider" style="margin:0px;">
<br>
<div class="slidera" style="margin:0px;"></div>
</div>
<br>
<div>
Effect:<br>
<input type="range" id="slider" min="0" max="100" step="12.5" , value="50" class="slider" style="margin:0px;">
<br>
<div class="slidera" style="margin:0px;"></div>
</div>
<script>
</script>
</body>
</html>
Related
I found this code, but I'm confused about how I would change the color of the X. Can someone show me how to? This is what I'm asking for help with.
And, am I required to use RGBA for this?
https://jsfiddle.net/58tfv09z/
If I am, then there's
HEX to RGBA converter
http://hex2rgba.devoth.com
and
RGB to RGBA converter
http://jsfiddle.net/wb5fwLoc/1/
.crossed {
width: 266px;
height: 266px;
border: 3px solid red;
background:
linear-gradient(to top left,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) calc(50% - 0.8px),
rgba(0,0,0,1) 50%,
rgba(0,0,0,0) calc(50% + 0.8px),
rgba(0,0,0,0) 100%),
linear-gradient(to top right,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) calc(50% - 0.8px),
rgba(0,0,0,1) 50%,
rgba(0,0,0,0) calc(50% + 0.8px),
rgba(0,0,0,0) 100%);
<div class="crossed"></div>
It uses linear-gradient to display a line by setting other parts invisible, you can change the color by modifying the visible parts with alpha channel = 1:
.crossed {
width: 266px;
height: 266px;
border: 3px solid red;
background:
linear-gradient(to top left,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) calc(50% - 0.8px),
rgba(0,255,0,1) 50%, /* put your rgb value here */
rgba(0,0,0,0) calc(50% + 0.8px),
rgba(0,0,0,0) 100%),
linear-gradient(to top right,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) calc(50% - 0.8px),
rgba(0,255,255,1) 50%,
rgba(0,0,0,0) calc(50% + 0.8px),
rgba(0,0,0,0) 100%);
}
<div class="crossed"></div>
You can find more details here.
How can i color the navigation bar like this?
Black in the top left corner and blue in the bottom right corner and make a gradient in between them.
No. 1 this is not the right way you ask for,
I have the concept that's why I'm giving you, Next time you ask any question please check this,
Stack Overflow is not a free code writing service. You are expected to try to write the code yourself. After doing more research if you have a problem you can post what you've tried with a clear explanation of what isn't working and providing Minimal, Complete, and Verifiable example. I suggest you to read How to Ask a good question.
And for now try this,
.box{
width: 150px;
height: 50px;
border-radius: 0px 0px 0px 7px;
background: rgba(0,0,0,1);
background: -moz-linear-gradient(-45deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 34%, rgba(44,153,221,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(0,0,0,1)), color-stop(34%, rgba(0,0,0,1)), color-stop(100%, rgba(44,153,221,1)));
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 34%, rgba(44,153,221,1) 100%);
background: -o-linear-gradient(-45deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 34%, rgba(44,153,221,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 34%, rgba(44,153,221,1) 100%);
background: linear-gradient(135deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 34%, rgba(44,153,221,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#2c99dd', GradientType=1 );
}
<div class="box"></div>
If you wish to learn how linear-gradients work i would go here: MDN linear-gradient
.link {
width: 100px;
height: 1.5em;
display: inline-block;
background: linear-gradient(135deg, black 30%, DeepSkyBlue 100%);
}
<nav>
<a class="link"></a>
<a class="link"></a>
<a class="link"></a>
<a class="link"></a>
</nav>
This might be what you are looking for.
.box {
background: rgba(0,0,0,1);
background: -moz-linear-gradient(-45deg, rgba(0,0,0,1) 18%, rgba(3,152,252,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(18%, rgba(0,0,0,1)), color-stop(100%, rgba(3,152,252,1)));
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,1) 18%, rgba(3,152,252,1) 100%);
background: -o-linear-gradient(-45deg, rgba(0,0,0,1) 18%, rgba(3,152,252,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(0,0,0,1) 18%, rgba(3,152,252,1) 100%);
background: linear-gradient(135deg, rgba(0,0,0,1) 18%, rgba(3,152,252,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#0398fc', GradientType=1 );
height: 80px;
width: 200px;
}
<div class='box'></div>
I have the following image
which has this angled stripe pattern in it, I was wondering how I could create this pattern with CSS as a background pattern.
cheers,
es
(edit: I added a second example in the codepen)
Similar to an already given answer, but with an addition to avoid gradients:
http://codepen.io/anon/pen/EyNwOq
Give it a repating linear gradient background, but to avoid the gradients and to only get two separate colors, do it as follows (play around with the settings to get the stripe width and colors you like):
background: repeating-linear-gradient( -45deg, #000 0px, #000 5px, #333 6px, #333 11px, #000 12px);
it can be done with background:repeating-linear-gradient
div {
height:100px;
width:100px;
background:
repeating-linear-gradient( -45deg,#000, #333 1px,#000 1px);
}
You could use linear-gradient in the background and make small boxes which makes it easy to alter the width of the stripes (10px times 10px in my example) which then form the background like this:
body {
text-align: center;
}
h4 {
padding-top: 150px;
}
.gradient-box {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 320px;
height: 320px;
border: none;
font: normal 100%/normal Arial, Helvetica, sans-serif;
color: rgb(255, 255, 255);
-o-text-overflow: clip;
text-overflow: clip;
background: -webkit-linear-gradient(-45deg, rgba(84,84,84,0) 0, rgba(84,84,84,0) 40%, rgba(29,29,29,1) 40%, rgba(0,0,0,1) 59%, rgba(58,58,58,0) 59%, rgba(63,63,63,0) 100%), -webkit-linear-gradient(-45deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 7%, rgba(79,79,79,0) 7%, rgba(63,63,63,0) 100%), -webkit-linear-gradient(-225deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 7%, rgba(79,79,79,0) 7%, rgba(63,63,63,0) 100%), rgba(33,29,29,1);
background: -moz-linear-gradient(135deg, rgba(84,84,84,0) 0, rgba(84,84,84,0) 40%, rgba(29,29,29,1) 40%, rgba(0,0,0,1) 59%, rgba(58,58,58,0) 59%, rgba(63,63,63,0) 100%), -moz-linear-gradient(135deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 7%, rgba(79,79,79,0) 7%, rgba(63,63,63,0) 100%), -moz-linear-gradient(315deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 7%, rgba(79,79,79,0) 7%, rgba(63,63,63,0) 100%), rgba(33,29,29,1);
background: linear-gradient(135deg, rgba(84,84,84,0) 0, rgba(84,84,84,0) 40%, rgba(29,29,29,1) 40%, rgba(0,0,0,1) 59%, rgba(58,58,58,0) 59%, rgba(63,63,63,0) 100%), linear-gradient(135deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 7%, rgba(79,79,79,0) 7%, rgba(63,63,63,0) 100%), linear-gradient(315deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 7%, rgba(79,79,79,0) 7%, rgba(63,63,63,0) 100%), rgba(33,29,29,1);
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: 10px 10px;
background-size: 10px 10px;
}
<div class="gradient-box">
<h4>Awesome striped background</h4>
</div>
You should be able to change the background-size and the linear-gradient colours very easily to fit what you want to achieve.
I've got the following background properties I want to apply to an element:
background: url('../img/bg.png') !important;
background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%) !important;
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(50%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))) !important;
background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
background: -o-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
background: -ms-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
I want the image to be displayed first, and the gradient over it. Is it possible to do this?
Because gradients are considered images for the purposes of background (or pretty much any CSS property that takes an image), you can simply list the image after the gradient with a comma. The caveat is that because you have so many prefixes, you need to repeat the image URL for each one:
background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%), url('../img/bg.png') !important;
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(50%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))), url('../img/bg.png') !important;
background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%), url('../img/bg.png') !important;
background: -o-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%), url('../img/bg.png') !important;
background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%), url('../img/bg.png') !important;
I left the !important tokens in but you should probably remove them if they aren't there for any specific purpose. I did remove the -ms-linear-gradient() line though, because it's absolutely not needed.
It's probably going to require two elements, but you can use a pseudo-element to make things a little cleaner. FIDDLE.
#yourelement {
position: relative;
background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%) !important;
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(50%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))) !important;
background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
background: -o-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
background: -ms-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
}
#yourelement:after {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: -1;
background: url('../img/bg.png') !important;
}
I just tried it and with luck this worked in my safari browser.
background: url('img.png'), -webkit-linear-gradient(left, rgba(0, 0, 0, 1) 0%,transparent 50%,rgba(0, 0, 0, 1) 100%);
so in your case you would use
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0, 0, 0, 1)), color-stop(50%,transparent), color-stop(100%,rgba(0, 0, 0, 1))), url('../img/bg.png');
Here is a fiddle
jsFiddle sample
I'm looking for the most hipster way to reduce the HTML semantics (css can be big as necessary) this 4 color logo without using pictures anything can change in the structure. Only requirement is that it works in IE8. I am using selectivr and modernizr so most selector classes and such should work. Additionally, I'm using less css so if you can write like that too.
<ul class="logo">
<li class="webBG"></li>
<li class="designBG"></li>
<li class="videoBG"></li>
<li class="audioBG"></li>
</ul>
CSS
ul.logo{margin: 0 0 0 10px;padding: 0;list-style-type: none;}
ul.logo li{display: inline-block; width:5px;height:5px; padding:0;margin:0; float:left;}
.designBG{background:#00c8e8}
.videoBG{background:#33cc77}
.webBG{background:#ec8544}
.audioBG{background:#E58}
UPDATE FINAL SOLUTION
#boilerplate > div{
margin-left:10px;
width:20px;
height:5px;
/*cross browser definitions follow..*/
background-image: -o-linear-gradient(left,
#ec8544 0%, #ec8544 25%,
#00c8e8 26%, #00c8e8 50%,
#33cc77 51%, #33cc77 75%,
#Ee5588 76%, #Ee5588 100%);
background-image: -moz-linear-gradient(left,
#ec8544 0%, #ec8544 25%,
#00c8e8 26%, #00c8e8 50%,
#33cc77 51%, #33cc77 75%,
#Ee5588 76%, #Ee5588 100%);
background-image: -webkit-linear-gradient(left,
#ec8544 0%, #ec8544 25%,
#00c8e8 26%, #00c8e8 50%,
#33cc77 51%, #33cc77 75%,
#Ee5588 76%, #Ee5588 100%);
background-image: -ms-linear-gradient(left,
#ec8544 0%, #ec8544 25%,
#00c8e8 26%, #00c8e8 50%,
#33cc77 51%, #33cc77 75%,
#Ee5588 76%, #Ee5588 100%);
background-image: linear-gradient(left,
#ec8544 0%, #ec8544 25%,
#00c8e8 26%, #00c8e8 50%,
#33cc77 51%, #33cc77 75%,
#Ee5588 76%, #Ee5588 100%);
}
HTML
<div></div>
least html possible:
http://jsfiddle.net/VRXjc/7/
Create 1 div
Use CSS Gradients to make the colors
Set Margins, Height and Width to style
HTML:
<div id="logo"></div>
CSS:
#logo{
background: #ec8544; /* Old browsers */
background: -moz-linear-gradient(left, #ec8544 25%, #00c8e8 25%, #00c8e8 50%, #33cc77 50%, #33cc77 75%, #ee5588 75%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(25%,#ec8544), color-stop(25%,#00c8e8), color-stop(50%,#00c8e8), color-stop(50%,#33cc77), color-stop(75%,#33cc77), color-stop(75%,#ee5588)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #ec8544 25%,#00c8e8 25%,#00c8e8 50%,#33cc77 50%,#33cc77 75%,#ee5588 75%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #ec8544 25%,#00c8e8 25%,#00c8e8 50%,#33cc77 50%,#33cc77 75%,#ee5588 75%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #ec8544 25%,#00c8e8 25%,#00c8e8 50%,#33cc77 50%,#33cc77 75%,#ee5588 75%); /* IE10+ */
background: linear-gradient(left, #ec8544 25%,#00c8e8 25%,#00c8e8 50%,#33cc77 50%,#33cc77 75%,#ee5588 75%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ec8544', endColorstr='#ee5588',GradientType=1 ); /* IE6-9 */
margin: 0px 0px 0px 15px;
width:20px;
height:5px;
}
You can use background linear gradients..
html
<div class="logo"></div>
css
.logo{
margin-left:10px;
width:20px;
height:5px;
/*cross browser definitions follow..*/
background-image: -o-linear-gradient(left,
#ec8544 0%, #ec8544 25%,
#00c8e8 26%, #00c8e8 50%,
#33cc77 51%, #33cc77 75%,
#Ee5588 76%, #Ee5588 100%);
background-image: -moz-linear-gradient(left,
#ec8544 0%, #ec8544 25%,
#00c8e8 26%, #00c8e8 50%,
#33cc77 51%, #33cc77 75%,
#Ee5588 76%, #Ee5588 100%);
background-image: -webkit-linear-gradient(left,
#ec8544 0%, #ec8544 25%,
#00c8e8 26%, #00c8e8 50%,
#33cc77 51%, #33cc77 75%,
#Ee5588 76%, #Ee5588 100%);
background-image: -ms-linear-gradient(left,
#ec8544 0%, #ec8544 25%,
#00c8e8 26%, #00c8e8 50%,
#33cc77 51%, #33cc77 75%,
#Ee5588 76%, #Ee5588 100%);
background-image: linear-gradient(left,
#ec8544 0%, #ec8544 25%,
#00c8e8 26%, #00c8e8 50%,
#33cc77 51%, #33cc77 75%,
#Ee5588 76%, #Ee5588 100%);
}
Demo at http://jsfiddle.net/gaby/yGkhQ/
HTML:
<div id="boilerplate">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
CSS:
div#boilerplate{}
div#boilerplate ul{margin: 0 0 0 10px;padding: 0;list-style-type: none;}
div#boilerplate ul li{display: inline-block; width:5px;height:5px; padding:0;margin:0; float:left;}
div#boilerplate ul li:first-child {background:#00c8e8;}
div#boilerplate ul li:nth-child(2) {background:#33cc77;}
div#boilerplate ul li:nth-child(3) {background:#ec8544;}
div#boilerplate ul li:last-child {background:#E58;}