I've got a problem with my progressbar..
In chrome, the value of the progress bar is red.. I did that with CSS...
But in Mozilla the value of the progress bar is just kinda grey..
progress[value] {
width: 250px;
height: 10px;
}
progress[value] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 250px;
height: 24px;
}
progress[value]::-webkit-progress-bar {
background-color: #eee;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-moz-progress-bar {
background-color: #eee;
border-radius: 5px;
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-moz-progress-value {
background-color:#ff0000;
-moz-border-radius: 5px;
background-size: 35px 20px, 100% 100%, 100% 100%;
opacity:0.6;
}
progress[value]::-webkit-progress-value {
background:red;
border-radius: 5px;
background-size: 35px 20px, 100% 100%, 100% 100%;
opacity:0.6;
}
The -moz- value of the progress bar must be red, thanks in advance!
Reference from css-tricks:
"Firefox provides a single pseudo class (-moz-progress-bar) we can use to target the progress bar value. This means that we cannot style the background of the container in Firefox."
Like said, the -moz-progress-bar refers to the value itself, so making it red should make the value as what you wanted. -moz-progress-value doesn't exist.
Related
I want to make a card look like this, the border or the sides of the card are semi-circular, is it possible to make it with css? if yes, how? Thank you in advance
.wrapper {
}
.content-card {
width: 315px;
height: 131px;
left: 0px;
top: 0px;
background: #FFFFFF;
box-shadow: 4px 8px 12px rgba(0, 0, 0, 0.12);
border-radius: 8px;
}
<div class="wrapper">
<div class="content-card">
</div>
</div>
Multiple background can do it:
.content-card {
width: 300px;
height: 150px;
background:
radial-gradient(8px at left ,#0000 98%,#fff) left ,
radial-gradient(8px at right,#0000 98%,#fff) right;
background-size: 50.5% 25px;
background-repeat:repeat-y;
filter: drop-shadow(4px 8px 12px rgba(0, 0, 0, 0.12));
border-radius: 8px;
}
body {
background: pink;
}
<div class="content-card">
</div>
The old way - border-image
It permits you to use the willing image for borders, it was widely use for this kind of cases. You can have repeat option on it to allow different box's sizes with the same style.
The mozilla doc is quite explicit with good examples of it : https://developer.mozilla.org/en-US/docs/Web/CSS/border-image
The recent way - without image
You have the possibility to use pseudo-element :after and :before and stylize those elements with a repeated background using radial-gradient.
body {
background-color: #ffaaaa;
}
.ticket {
position: relative;
width: 300px;
height: 170px;
margin: 10px;
border-radius: 10px;
background: white;
box-shadow: 4px 8px 12px rgba(0, 0, 0, 0.12);
}
.ticket:before,
.ticket:after {
content: '';
position: absolute;
top: 5px;
width: 6px;
height: 160px;
}
.ticket:before {
left: -5px;
background: radial-gradient(circle, transparent, transparent 50%, #FBFBFB 50%, #FBFBFB 100%) -7px -8px/16px 16px repeat-y;
}
.ticket:after {
left: 300px;
background: radial-gradient(circle, transparent, transparent 50%, #FBFBFB 0%, #FBFBFB 100% ) -3px -7px / 16px 16px repeat-y;
}
<div class="ticket"></div>
I've added a normal square image to my website and made it into a circle with border-radius and then have tried to add a circle border around it but it only seems to work on Chrome. Any suggestions on how I can fix this?
.face {
display: block;
margin: auto;
border-radius: 100%;
border: 5px solid #ff675b;}
Here is a screenshot of the issue:
https://www.dropbox.com/s/4xy26phkjgz9te0/Screen%20Shot%202013-05-01%20at%2001.15.02.png
See this JsFiddle
http://jsfiddle.net/z3rLa/1/
.avatar {
width:128px;
margin: 10px;
border:10px solid red;
border-radius: 500px;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
}
That is the way I use:
CSS:
.avatar {
display: block;
border-radius: 200px;
box-sizing: border-box;
background-color: #DDD;
border: 5px solid #cfd8dc;
}
img {
height: 200px;
width: 200px
}
HTML:
<img class="avatar" src="..">
create a new class:
.circleborder {
width: 300px;
height: 300px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url(URL) no-repeat;
box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}
and this would be your html code:
<div class="circleborder"><img src="URL"/></div>
The HTML:
<div class="circleborder"><img class="face" src="img/face.jpeg" alt="face" width="130" height="130"></div>
CSS:
.face {
border-radius: 100%;}
.circleborder {
border: 5px solid #ff675b;
border-radius: 100%;
display: inline-block;}
Thanks for your help guys! I'm testing my solution as we speak and sofar it's worked on Chrome & Safari on my Mac and iPhone! :D
http://www.css3.info/preview/rounded-border/
Border radius doesn't work the same way in every browser. You need different approaches.
Try this one it will be help for you.
.clip-circle {
clip-path: circle(60px at center);
/* OLD VALUE example: circle(245px, 140px, 50px); */
/* Yep, even the new clip-path has deprecated stuff. */
}
.clip-ellipse {
clip-path: ellipse(60px 40px at 75px 30px);
/* OLD VALUE example: ellipse(245px, 80px, 75px, 30px); */
}
.clip-polygon {
clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
/* Note that percentages work as well as px */
}
I was trying to stylize the <progress> HTML element, using a few tricks I picked up online, but I came accross a problem. My CSS should, in theory, set the margin-right and margin-left properties to 10px based on margin: 2px 10px;. However, that is not the case. The <progress> element, which I am trying to style, respects the margin-left, but does not respect the margin-right. Any suggestions?
Code
progress {
display: block;
vertical-align: baseline;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: 14px;
border: 0;
border-radius: 1px;
margin: 2px 10px;
box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.1), 0 0.5px 0.5px rgba(0, 0, 0, 0.15);
background: #eeeeee;
color: #01579b;
}
/* Foreground - webkit browsers */
progress::-webkit-progress-value {
background: #01579b;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
}
/* Background - webkit browsers */
progress::-webkit-progress-bar {
background: #eeeeee;
}
/* Foreground - Firefox */
progress::-moz-progress-bar {
background: #01579b;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
}
/* Max value - webkit browsers */
progress[value="1000"]::-webkit-progress-value {
border-radius: 1px;
}
/* Max value - Firefox */
progress[value="1000"]::-moz-progress-bar {
border-radius: 1px;
}
<progress value="450" max="1000"></progress>
You can also check out the relative Codepen I prepared.
Notes
Changing the margin shorthand to individual properties did not make any difference.
Some parts of the CSS stylesheet might be a little bit irrelevant (possibly stuff like the browser-specific styling) or maybe not. I do not exactly know what is causing this problem.
Tested this on Firefox 50 and Chrome 54, same problem in both. I can reproduce the issue both locally and using Codepen and the provided snippet.
You're wrong: it is respecting margin-right. If you use your browser's console/developer tools to inspect the progress bar, you'll see that it does indeed have a margin-right of 10px.
The problem is with width: 100%. A width set to a percentage means "a of containing block's width". You're then adding to that width the margin. So the box that contains your progress bar will be 20px bigger than the containing element would have been, so it will overflow.
Abandon width: 100%: it's rarely necessary. What you want here is width: auto, which for all block elements means "take up as much space as you can within the containing element" and which automatically adjusts for margin.
progress {
display: block;
width: auto;
vertical-align: baseline;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 14px;
border: 0;
border-radius: 1px;
margin: 2px 0px;
box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.1), 0 0.5px 0.5px rgba(0, 0, 0, 0.15);
background: #eeeeee;
color: #01579b;
}
/* Foreground - webkit browsers */
progress::-webkit-progress-value {
background: #01579b;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
}
/* Background - webkit browsers */
progress::-webkit-progress-bar {
background: #eeeeee;
}
/* Foreground - Firefox */
progress::-moz-progress-bar {
background: #01579b;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
}
/* Max value - webkit browsers */
progress[value="1000"]::-webkit-progress-value {
border-radius: 1px;
}
/* Max value - Firefox */
progress[value="1000"]::-moz-progress-bar {
border-radius: 1px;
}
<div style="position: relative; margin: 0px 50px;">
<progress value="450" max="1000"></progress>
</div>
You could solve it with div parent, which uses margin instead of progress bar.
progress {
display: block;
vertical-align: baseline;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: 14px;
border: 0;
border-radius: 1px;
margin: 2px 0px;
box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.1), 0 0.5px 0.5px rgba(0, 0, 0, 0.15);
background: #eeeeee;
color: #01579b;
}
/* Foreground - webkit browsers */
progress::-webkit-progress-value {
background: #01579b;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
}
/* Background - webkit browsers */
progress::-webkit-progress-bar {
background: #eeeeee;
}
/* Foreground - Firefox */
progress::-moz-progress-bar {
background: #01579b;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
}
/* Max value - webkit browsers */
progress[value="1000"]::-webkit-progress-value {
border-radius: 1px;
}
/* Max value - Firefox */
progress[value="1000"]::-moz-progress-bar {
border-radius: 1px;
}
<div style="position: relative; margin: 0px 50px;">
<progress value="450" max="1000"></progress>
</div>
You can wrap the progress bar with a div and add padding. See:
.wrapper {
display: block;
background: red;
width: 500px;
padding: 10px;
}
progress {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 14px;
border: 0;
border-radius: 1px;
box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.1), 0 0.5px 0.5px rgba(0, 0, 0, 0.15);
background: #eeeeee;
color: #01579b;
display: block;
width: 100%;
}
/* Foreground - webkit browsers */
progress::-webkit-progress-value {
background: #01579b;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
}
/* Background - webkit browsers */
progress::-webkit-progress-bar {
background: #eeeeee;
}
/* Foreground - Firefox */
progress::-moz-progress-bar {
background: #01579b;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
}
/* Max value - webkit browsers */
progress[value="1000"]::-webkit-progress-value {
border-radius: 1px;
}
/* Max value - Firefox */
progress[value="1000"]::-moz-progress-bar {
border-radius: 1px;
}
<div class="wrapper">
<progress value="450" max="1000"></progress>
</div>
Apart from all the other ways to solve this, I have also found that using calc() can solve the problem quite easily and without changing but one line from width: 100%; to width: calc(100% - 20px); - some browser-specific prefixing might be required to cover all browsers.
To generalize this solution, replace 20px with the sum of the values of margin-left and margin-right.
progress {
display: block;
vertical-align: baseline;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: calc(100% - 20px);
height: 14px;
border: 0;
border-radius: 1px;
margin: 2px 10px;
box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.1), 0 0.5px 0.5px rgba(0, 0, 0, 0.15);
background: #eeeeee;
color: #01579b;
}
/* Foreground - webkit browsers */
progress::-webkit-progress-value {
background: #01579b;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
}
/* Background - webkit browsers */
progress::-webkit-progress-bar {
background: #eeeeee;
}
/* Foreground - Firefox */
progress::-moz-progress-bar {
background: #01579b;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
}
/* Max value - webkit browsers */
progress[value="1000"]::-webkit-progress-value {
border-radius: 1px;
}
/* Max value - Firefox */
progress[value="1000"]::-moz-progress-bar {
border-radius: 1px;
}
<progress value="450" max="1000"></progress>
How can I set z-index of the drop-down autocomplete box over a background image?
Here is a screenshot:
Below four images are background images with sprite CSS and the area box is drop-down autocomplete and it has position set to absolute and z-index set to 100, but still it's not overlapping background image.
Here is the CSS for the drop-down box and the bottom section.
Drop Down Box:
.tt-dropdown-menu,
.tt-menu {
position: absolute;
top: 79%!important;
left: 9px!important;
z-index: 1000;
min-width: 160px;
width: 94%;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
font-size: 14px;
background-color: #ffffff;
border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0px!important;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box;
}
Below Section:
.hero-banner {
color: #555;
padding-top: 50px;
padding-bottom: 50px;
background-color: #EFEDEB;
border-bottom: 1px solid #D2D2D2;
}
Sprite CSS:
.why_casebox {
background-image: url(../images/why-casebox/why_casebox.png);
background-repeat: no-repeat;
display: block;
margin: auto;
}
.sprite-verified {
width: 128px;
height: 128px;
background-position: -143px -143px;
}
Even though the title and description text are also overriding.
.hero-banner {
z-index: 0;
}
or
I don't know whether it is position above for whole div or for the third child with icon.
.why_casebox {
z-index: 0;
}
so that image will position behind the dropdown.
I've added a normal square image to my website and made it into a circle with border-radius and then have tried to add a circle border around it but it only seems to work on Chrome. Any suggestions on how I can fix this?
.face {
display: block;
margin: auto;
border-radius: 100%;
border: 5px solid #ff675b;}
Here is a screenshot of the issue:
https://www.dropbox.com/s/4xy26phkjgz9te0/Screen%20Shot%202013-05-01%20at%2001.15.02.png
See this JsFiddle
http://jsfiddle.net/z3rLa/1/
.avatar {
width:128px;
margin: 10px;
border:10px solid red;
border-radius: 500px;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
}
That is the way I use:
CSS:
.avatar {
display: block;
border-radius: 200px;
box-sizing: border-box;
background-color: #DDD;
border: 5px solid #cfd8dc;
}
img {
height: 200px;
width: 200px
}
HTML:
<img class="avatar" src="..">
create a new class:
.circleborder {
width: 300px;
height: 300px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url(URL) no-repeat;
box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}
and this would be your html code:
<div class="circleborder"><img src="URL"/></div>
The HTML:
<div class="circleborder"><img class="face" src="img/face.jpeg" alt="face" width="130" height="130"></div>
CSS:
.face {
border-radius: 100%;}
.circleborder {
border: 5px solid #ff675b;
border-radius: 100%;
display: inline-block;}
Thanks for your help guys! I'm testing my solution as we speak and sofar it's worked on Chrome & Safari on my Mac and iPhone! :D
http://www.css3.info/preview/rounded-border/
Border radius doesn't work the same way in every browser. You need different approaches.
Try this one it will be help for you.
.clip-circle {
clip-path: circle(60px at center);
/* OLD VALUE example: circle(245px, 140px, 50px); */
/* Yep, even the new clip-path has deprecated stuff. */
}
.clip-ellipse {
clip-path: ellipse(60px 40px at 75px 30px);
/* OLD VALUE example: ellipse(245px, 80px, 75px, 30px); */
}
.clip-polygon {
clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
/* Note that percentages work as well as px */
}