I made a HTML volume bar:
.volume_bar {
background: #A5D5FF;
border-radius: 20px;
height: 12px;
}
<div class="volume_bar"></div>
I am trying to format this volume bar, such that when there is a volume income, display the volume on the bar with another color. So it looks like this:
I got the reading volume input codes correct. I am just trying to figure out the frontend. One way I thought of achieving this is to format only a portion of the div. Such that 20% of the width is yellow, and the remaining is blue. Is that possible to only format a portion of the width of a div with CSS?
Just Change the width property of .volume class using javascript to make it work.
document.querySelector(".volume").style.width="50%";
.volume_bar {
background: #A5D5FF;
border-radius: 20px;
height: 12px;
}
.volume {
background: #ffd105;
width: 25%;
height: 100%;
border-radius: 20px;
font-size:10px;
text-align:center;
}
<div class="volume_bar">
<div class="volume"></div>
</div>
const volume_bar = document.querySelector('.volume_bar');
const volume_control = document.querySelector('.volume_control');
const rect = volume_bar.getBoundingClientRect();
volume_bar.addEventListener('mousemove', e=>{
let per = (e.clientX - rect.x) / (rect.width) * 100;
volume_control.style.width = per + '%';
});
.volume_bar,
.volume_control {
border-radius: 20px;
height: 12px;
}
.volume_bar{
background: #A5D5FF;
}
.volume_control{
background: red;
width: 0;
}
<div class="volume_bar"><div class="volume_control"></div></div>
To answer your question, yes you can style a div so that the left is one color, the right another. Liner-gradient can make this effect. Your problem is the rounded edge of the left side - for that I think you need a second element, or pseudo selector.
Using linear-gradient() for easy effect but no rounded edge
.volume {
width: 80%;
height: 50px;
border-radius: 25px;
background: linear-gradient(90deg, blue 30%, yellow 30%);
}
<div class="volume"></div>
Using psuedo selector:
.volume {
width: 80%;
height: 50px;
border-radius: 25px;
background: rgb(253 216 53);
}
.volume::after {
height: 100%;
width: 30%;
border-radius: 25px;
background: rgb(3 169 244);
content: "";
display: block;
}
<div class="volume"></div>
I've been working on my first website and run out with some questions I couldn't find any solution online. Hopefully someone could guide me what are the keywords I should lookup.
1) How can I define the length of the border of the output (without wrapping it with div)? I would like to set a constant width of the output value (that would be empty if there is no value), but I can't seem to find how to do so. In CSS, border-bottom-width actually set the height.
output {
border-bottom: 1px solid #000000;
margin: 3em 0% 3em 0%;
color: aquamarine;
background: transparent;
text-align: center;
}
2) How can I set to a floating button a gradient in the back background and an image in the front? For some reason, it seems that I can use only one of them.
<button onclick="calc(this)" class="calc" src="/img/calculator.svg"></button>
.
.calc {
width: 4em;
height: 4em;
padding: 0.3em;
position: fixed;
bottom: 3em;
right: 3em;
background-image: radial-gradient(#aac0e8, #b9cde5, #dce6f2) url('/img/calculator.svg'); //the picture isn't shown
border-radius: 50px;
box-shadow: 2px 2px 3px #999;
outline: none;
border: #17375e;
}
I've recently encountered some problems with CSS Sprites.
I want them to switch pictures every function call, function itself is OK since it only removes and adds css class.
I have following CSS:
#slider_arrow {
padding-left: 200px;
position: relative;
top: -1px;
}
.red_arrow_sprite {
background: url(/Images/onex/arrows.png) 0 0 no-repeat;
width: 25px;
height: 12px;
}
.yellow_arrow_sprite {
width: 25px;
height: 12px;
background: url(/Images/onex/arrows.png) -26px 0 no-repeat;
}
.black_arrow_sprite {
width: 25px;
height: 12px;
background: url(/Images/onex/arrows.png) -51px 0 no-repeat;
}
Slider_arrow is:
<span id="slider_arrow" class="red_arrow_sprite"></span>
the element in which I change class.
And the problem is that my Sprite file has 75px width and 25px height.
(3x 25px/25px)
With the CSS I Presented I get the result where I see all 3 pictures at the time with red_arrow_sprite class, 2 pictures with yellow_arrow_class and 1 picture which is desired with black_arrow_class.
What have I done wrong with CSS?
Thanks in advance.
http://jsfiddle.net/9b57pb50/
Check out this solution
I've removed padding and add some display properties.
I'm trying to add multiple backgrounds this is my web page www.softglobal.com.mx, It has two headers, one with the logo and the other fills the right top, but I want a background that is behind this other two, how can I even do that, this is the CSS
enter code here
This the code
#content-wrap {
background: url (http://i.imgur.com/D4ZVVnY.png);
}
body {
background: url(http://i.imgur.com/K7yy7nB.png) no-repeat #fff;
width: 100%;
display: table;
margin: 0;
padding:0;
}
#templatemo_header {
height: 180px;
background: url(http://i.imgur.com/46t4Zmo.jpg) repeat-x;
background-position: 0 -2px;
margin: 2px 2px 2px 25px;
padding: -3px 0 0 0;
background: url (http://i.imgur.com/D4ZVVnY.png);
}
#ja-cssmenu {
margin:-49px -32px -20px 20px; /* all lists */
padding:0px;
}
##############################
you can using multiple backgrounds just be careful the order in which you use them, see this link for a good reference on how to added them:
http://css-tricks.com/stacking-order-of-multiple-backgrounds/
but the issue here is that the image with the logo has a white background, this will not allow the texture image you have to be seeing, you'll have to change the logo image to a png so is transparent, delete all the white areas, otherwise they will block the texture underneath.
I'm trying to make a button using three background images so that we can pull in translations for the the text of the button and expand nicely. We'll probably add a base style for IE8 but our designer wants us to use this style and we couldn't recreate it nicely with pure CSS3.
Here are the images:
Here's the HTML (just a simple button, but thought I should put it anyway:
<button class="back clickable" aria-label="Back" onclick="javascript:history.back();">Back</button>
I've already tried a couple of things; I'll paste the CSS of both attempts.
Attempt 1: Using Pseudo-selectors
http://jsfiddle.net/c2B6X/
.back {
background: url("images/back-middle.png") 14px 0 repeat-x;
color: $white;
height: 28px;
padding: 5px;
&:before {
background: url("images/back-front.png") 0 0 no-repeat;
width: 14px;
}
&:after {
background: url("images/back-end.png") 100% 0 no-repeat;
width: 8px;
}
}
Attempt 2: Three background-images
http://jsfiddle.net/nPUQN/
.back {
background: none;
background-image: url("images/back-middle.png"), url("images/back-end.png"), url("images/back-front.png");
background-position: 14px 0, 100% 0, 0 0;
background-repeat: repeat-x, no-repeat, no-repeat;
border-right: 8px transparent;
border-left: 14px transparent;
color: $white;
height: 28px;
padding: 5px;
}
If it looks like atypical CSS that's because we're using SASS.
Is there something obvious I'm missing or doing wrong? Any advice on how to make this work would be greatly appreciated.
EDIT
Since I got so many answers that "work", I'll mark correct the answer that works best in Chrome, FF and IE9.
EDIT 2
I've tried all answers and none work in IE9. We have to support IE9 (and IE8, but I won't even go there for now). I'm going to start a bounty. Anyone who can supply an answer that works for IE9, Firefox and Chrome gets it.
Pseudo-content requires content, so you'll first need to specify that:
.selector::before {
content: ' ';
}
Then to define any layout such as width and height you'll need to display the pseudo elements as a block or inline-block. Block layout will force each pseudo element to wrap and inline-block will sit on the line so you'll either have to use floats or absolute positioning.
.selector {
position: relative;
height: 28px;
/* allow for the pseudo-elements which do not have layout due to absolute positioning */
margin: 0 15px;
}
.selector::before,
.selector::after {
content: ' ';
position: absolute;
top: 0;
width: 15px;
height: 28px;
}
.selector::before {
left: -15px;
}
.selector::after {
right: -15px;
}
Demo here for you: http://codepen.io/anon/pen/yaJGI
You'll need to add content for :before and :after to show. After that, you can position them absolutely and by giving them right: 100% and left: 100% respectively, you can position them in front of and behind the button.
button {
background:transparent;
border: none;
padding: 0;
margin: 0;
line-height: 1;
font-size: 12px;
cursor: pointer;
margin-left: 14px; /* width of :before */
}
.back {
background: url("http://i.stack.imgur.com/DaQcG.png") 14px 0 repeat-x;
color: white;
height: 28px;
padding: 5px;
position: relative;
}
.back:before {
position: absolute;
content: "";
height: 28px;
top: 0;
right: 100%;
background: url("http://i.stack.imgur.com/6m2HC.png") 0 0 no-repeat;
width: 14px;
}
.back:after {
position: absolute;
content: "";
height: 28px;
top: 0;
left: 100%;
background: url("http://i.stack.imgur.com/2WA5B.png") 100% 0 no-repeat;
width: 8px;
}
The definitions of before and after are slightly the same, so you could write it down more compactly, but you need to re-sass it anyway. ;)
http://jsfiddle.net/c2B6X/
Tip: Note that downloading three images is less efficient. You can create one image that contains the start and end at the top, and the middle part at the bottom. By positioning the background, you can show the right part inside the elements. This technique is called sprites and it decreases the number of requests to make.
I came up with a little something that you can take a look at. You can modify it to best fit your needs.
http://jsfiddle.net/Xy7Hv/1/
HTML:
<button class="back">Back</button>
CSS:
.back {
border: none;
height: 28px;
padding-right: 8px;
padding-left: 14px;
background-image: url("http://i.stack.imgur.com/DaQcG.png"),
url("http://i.stack.imgur.com/6m2HC.png"),
url("http://i.stack.imgur.com/2WA5B.png");
background-position: 14px 0px, left, right;
background-size: 30px 100%, 14px 28px, 8px 28px;
background-repeat: no-repeat,no-repeat,no-repeat;
}
("background-size: 30px" is the width of the button, so if all your buttons are the same size it shouldn't be a problem)
with your multiple background version, you could add gradient or white image to build your button bg , keeping some space with padding.
http://jsfiddle.net/nPUQN/1/
.back {
background:
url("http://i.stack.imgur.com/2WA5B.png") 100% 0 no-repeat ,
url("http://i.stack.imgur.com/6m2HC.png") 0 0 no-repeat,
-webkit-linear-gradient(0deg, white 0, white 14px , transparent 14px ,transparent) 0 0 no-repeat ,
-webkit-linear-gradient(180deg, white 0, white 8px , transparent 8px ,transparent) 0 0 no-repeat ,
url("http://i.stack.imgur.com/DaQcG.png") 14px 0 repeat
;
color: $white;
height: 28px;
padding: 5px 8px 5px 14px;
}
prefixed for chrome, add other prefix needed or use a prefix js :)
I add this answer because i like to keep the other as it is.
This one is to be tested in IE8/9 with pseudo and position:
http://codepen.io/gcyrillus/full/lBpaI or to edit :
http://codepen.io/gcyrillus/pen/lBpaI
.back {
background:
url("http://i.stack.imgur.com/DaQcG.png") 14px 0 repeat
;
color: white;
height: 28px;
padding: 5px;
position:relative;
overflow:visible;
}
.back:before {
content:url(http://i.stack.imgur.com/6m2HC.png);
top:0;
left:-14px;
position:absolute;
}
.back:after {
content:url(http://i.stack.imgur.com/2WA5B.png);
position:absolute;
right:-8px;
top:0;
}
I used this code today. It's similar to your 2nd example, but uses the background shortcut property and a mixture of position strings.
background: url("../images/img01.png") 0px 0px no-repeat, url("../images/img02.png") 53px 0px repeat-x, url("../images/img03.png") right top no-repeat;
img01 = left image (53px wide)
img02 = fill image
img03 = right image