-moz- prefix for scrollbar not working in firefox - html

I am trying to change scrollbar style. it is working in chrome and opera but not working in firefox.
my code for webkit look like this :
body::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
body::-webkit-scrollbar
{
width: 7px;
background-color: #F5F5F5;
}
body::-webkit-scrollbar-thumb
{
background-color: #2CC185;
background-image: -webkit-linear-gradient(45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent)
}
and for mozilla like this :
body::-moz-scrollbar-track
{
-moz-box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
body::-moz-scrollbar
{
width: 7px;
background-color: #F5F5F5;
}
body::-moz-scrollbar-thumb
{
background-color: #2CC185;
background-image: -moz-linear-gradient(45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent)
}
it is not working for firefox any Idea please.

Related

grid layout as background, not using body tag

I want my background to be a grid. I found this:
html:
<div id="content"> </div>
css:
html{
height:100%;
}
body {
width:100%;
margin: 0;
padding: 0;
height: 100%;
background-color: #434343;
background-image:linear-gradient(#434343, #282828);
}
#content{
background-color: transparent;
background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent);
height:100%;
background-size:50px 50px;
}
though it only works when a body tag is used. I want to be able to change body to something like #contentbody, though this does not work (does not display a grid anymore).
I tried making the position of #content absolute and z-index to -1, and making the background color of divs on top of it transparent, but this did not work either. can anyone help me?
So I essentially have 2 questions, and either one can be answered (or both if youd like):
how can I have a grid background with a custom tag like #contentbody (and not body)
how can I overlay divs on top of a position:aboslute; z-index:-1 grid background and show that grid?
https://jsfiddle.net/7d805qut/
Thanks in advance for help

Simply consider multiple background like you are already doing:
html,body{
margin: 0;
padding: 0;
height:100%;
}
#content{
background:
linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%),
linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%),
linear-gradient(#434343, #282828);
height:100%;
background-size:50px 50px,50px 50px,auto;
}
<div id="content"> </div>

How can I type in a progress bar in bootstrap?

good to see you!
I have a question about bootstrap. So I basically have this progress bar on which I have managed to get to display the current progress in ml and per cent (it's for showing the daily intake of water current/all required). Now I want to display on the right side the amount of ml(per cent) left, as shown in the picture: 20% is done / 80% is left. I hope you get what I want, sorry for my English, I am not native.
This is my code so far:
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-info active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">800 ml (20%)
</div>
</div>

Try putting the text in two spans, one floated left, one floated right, and clearfix the containing progress bar.

Something like this?
.container {
width: 300px;
margin: 30px auto 0;
}
.progress {
position:relative;
overflow: hidden;
height: 18px;
margin-bottom: 18px;
background-color: #f7f7f7;
background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: -ms-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: linear-gradient(top, #f5f5f5, #f9f9f9);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0);
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.progress .bar {
width: 0%;
height: 18px;
color: #ffffff;
font-size: 12px;
text-align: center;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #0e90d2;
background-image: -moz-linear-gradient(top, #149bdf, #0480be);
background-image: -ms-linear-gradient(top, #149bdf, #0480be);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
background-image: -o-linear-gradient(top, #149bdf, #0480be);
background-image: linear-gradient(top, #149bdf, #0480be);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0);
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: width 0.6s ease;
-moz-transition: width 0.6s ease;
-ms-transition: width 0.6s ease;
-o-transition: width 0.6s ease;
transition: width 0.6s ease;
}
.progress-striped .bar {
background-color: #62c462;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-webkit-background-size: 40px 40px;
-moz-background-size: 40px 40px;
-o-background-size: 40px 40px;
background-size: 40px 40px;
}
.progress.active .bar {
-webkit-animation: progress-bar-stripes 2s linear infinite;
-moz-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
.progress-danger .bar {
background-color: #dd514c;
background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35));
background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
background-image: linear-gradient(top, #ee5f5b, #c43c35);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
}
.progress-danger.progress-striped .bar {
background-color: #ee5f5b;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.progress-success .bar {
background-color: #5eb95e;
background-image: -moz-linear-gradient(top, #62c462, #57a957);
background-image: -ms-linear-gradient(top, #62c462, #57a957);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957));
background-image: -webkit-linear-gradient(top, #62c462, #57a957);
background-image: -o-linear-gradient(top, #62c462, #57a957);
background-image: linear-gradient(top, #62c462, #57a957);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
}
.progress-success.progress-striped .bar {
background-color: #62c462;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.progress-info .bar {
background-color: #4bb1cf;
background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
background-image: -ms-linear-gradient(top, #5bc0de, #339bb9);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#339bb9));
background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
background-image: linear-gradient(top, #5bc0de, #339bb9);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);
}
.progress-info.progress-striped .bar {
background-color: #5bc0de;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.remainder{
float:right;
font-size: 12px;
color:blue;
}
<div class="container">
<div class="progress">
<div class="progress progress-info
progress-striped">
<span class='remainder'>80%</span>
<div class="bar"
style="width: 30%;">800 ml (20%)</div>
</div>
<div class="progress progress-danger
progress-striped active">
</div>

This one worked well:
Added new style to the css
.progress-bar1 {
font-size: 12px;
line-height: 20px;
color: #000;
text-align: center;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
}
Changed html to:
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-info active" role="progressbar" aria-valuenow="20"
aria-valuemin="0" aria-valuemax="100" style="width: 20%">800 ml (20%)
</div><p class="progress-bar1 text-center">140</p>
</div>
Result:

Shape with striped background and a triangular cut on top

Hello I need to make shape in CSS/HTML5. I pasted it as an image but now I need to make shape like this.
Is there any way to do it? I made something with triangles but it doesn't even look close to this.
SHAPE:
Here is my CSS.
#flag {
width: 110px;
height: 56px;
padding-top: 15px;
position: relative;
background: red;
color: white;
font-size: 11px;
letter-spacing: 0.2em;
text-align: center;
text-transform: uppercase;
float:left;
}
#flag:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
border-top: 25px solid #eee;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
}
HTML:
<div id="flag"></div><span>SOME TEXT HERE</span>
JS FIDDLE

You can achieve this using either of the following 2 options.
Option 1: Using box-shadow and an extra pseudo-element.
In this option an extra pseudo-element of size 20px is added (white/grey color) and using appropriately positioned box-shadows, the striped pattern is achieved. This method can be useful if the dimensions of your flag element is fixed.
#flag {
width: 110px;
height: 56px;
padding-top: 15px;
position: relative;
background: red;
color: white;
font-size: 11px;
letter-spacing: 0.2em;
text-align: center;
text-transform: uppercase;
float: left;
overflow: hidden;
}
#flag:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
border-top: 25px solid #eee;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
}
#flag:after {
content: "";
position: absolute;
top: 0px;
left: -30px;
height: 10px;
width: 150px;
background: #eee;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
box-shadow: -20px 60px 0px #eee, -20px 80px 0px #eee, -20px 20px 0px #eee, -20px -20px 0px #eee, 0px 40px 0px #eee;
}
<div id="flag"></div><span>SOME TEXT HERE</span>
Option 2: Using Linear Gradients
In this method the stripes are obtained using linear-gradients as a background on a pseudo-element which is rotated by 45 degrees to achieve the diagonal stripes effect. This option can be used even if the dimensions are not fixed because of usage of percentage for linear-gradients.
div{
height: 100px;
width: 100px;
position: relative;
overflow: hidden;
}
div:before{
content: '';
position: absolute;
background: -webkit-linear-gradient(90deg, red 50%, #eee 50%);
background: -moz-linear-gradient(0deg, red 50%, #eee 50%);
background: linear-gradient(0deg, red 50%, #eee 50%);
background-size: 100% 20px;
top: 0px;
left: 0px;
height: 150%;
width: 150%;
-webkit-transform-origin: 15% 60%;
-moz-transform-origin: 15% 60%;
transform-origin: 15% 60%;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
div:after{
content: '';
position: absolute;
background: #eee;
top: -25%;
left: 25%;
height: 50%;
width: 50%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
<div></div>
Note: In the second sample, I had positioned the top triangle such that it still leaves some space on either sides just for an example. This fiddle has a top triangle that covers the full width of the flag.

You could use css gradients for this, as well as a single pseudo element:
div{
position:relative;
height:300px;
width:300px;
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 15%, rgba(0,0,0,1) 15%, rgba(255,255,255,1) 15%, rgba(0,0,0,1) 16%, rgba(0,0,0,1) 16%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 20%, rgba(255,255,255,1) 21%, rgba(255,255,255,1) 35%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 40%, rgba(255,255,255,1) 41%, rgba(255,255,255,1) 55%, rgba(0,0,0,1) 55%, rgba(0,0,0,1) 60%, rgba(255,255,255,1) 61%, rgba(255,255,255,1) 75%, rgba(255,255,255,1) 75%, rgba(0,0,0,1) 76%, rgba(0,0,0,1) 80%, rgba(255,255,255,1) 81%, rgba(255,255,255,1) 95%, rgba(0,0,0,1) 96%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(15%,rgba(255,255,255,1)), color-stop(15%,rgba(0,0,0,1)), color-stop(15%,rgba(255,255,255,1)), color-stop(16%,rgba(0,0,0,1)), color-stop(16%,rgba(0,0,0,1)), color-stop(20%,rgba(0,0,0,1)), color-stop(20%,rgba(0,0,0,1)), color-stop(21%,rgba(255,255,255,1)), color-stop(35%,rgba(255,255,255,1)), color-stop(35%,rgba(0,0,0,1)), color-stop(40%,rgba(0,0,0,1)), color-stop(41%,rgba(255,255,255,1)), color-stop(55%,rgba(255,255,255,1)), color-stop(55%,rgba(0,0,0,1)), color-stop(60%,rgba(0,0,0,1)), color-stop(61%,rgba(255,255,255,1)), color-stop(75%,rgba(255,255,255,1)), color-stop(75%,rgba(255,255,255,1)), color-stop(76%,rgba(0,0,0,1)), color-stop(80%,rgba(0,0,0,1)), color-stop(81%,rgba(255,255,255,1)), color-stop(95%,rgba(255,255,255,1)), color-stop(96%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 15%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 20%,rgba(255,255,255,1) 21%,rgba(255,255,255,1) 35%,rgba(0,0,0,1) 35%,rgba(0,0,0,1) 40%,rgba(255,255,255,1) 41%,rgba(255,255,255,1) 55%,rgba(0,0,0,1) 55%,rgba(0,0,0,1) 60%,rgba(255,255,255,1) 61%,rgba(255,255,255,1) 75%,rgba(255,255,255,1) 75%,rgba(0,0,0,1) 76%,rgba(0,0,0,1) 80%,rgba(255,255,255,1) 81%,rgba(255,255,255,1) 95%,rgba(0,0,0,1) 96%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 15%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 20%,rgba(255,255,255,1) 21%,rgba(255,255,255,1) 35%,rgba(0,0,0,1) 35%,rgba(0,0,0,1) 40%,rgba(255,255,255,1) 41%,rgba(255,255,255,1) 55%,rgba(0,0,0,1) 55%,rgba(0,0,0,1) 60%,rgba(255,255,255,1) 61%,rgba(255,255,255,1) 75%,rgba(255,255,255,1) 75%,rgba(0,0,0,1) 76%,rgba(0,0,0,1) 80%,rgba(255,255,255,1) 81%,rgba(255,255,255,1) 95%,rgba(0,0,0,1) 96%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 15%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 20%,rgba(255,255,255,1) 21%,rgba(255,255,255,1) 35%,rgba(0,0,0,1) 35%,rgba(0,0,0,1) 40%,rgba(255,255,255,1) 41%,rgba(255,255,255,1) 55%,rgba(0,0,0,1) 55%,rgba(0,0,0,1) 60%,rgba(255,255,255,1) 61%,rgba(255,255,255,1) 75%,rgba(255,255,255,1) 75%,rgba(0,0,0,1) 76%,rgba(0,0,0,1) 80%,rgba(255,255,255,1) 81%,rgba(255,255,255,1) 95%,rgba(0,0,0,1) 96%); /* IE10+ */
background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 15%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 20%,rgba(255,255,255,1) 21%,rgba(255,255,255,1) 35%,rgba(0,0,0,1) 35%,rgba(0,0,0,1) 40%,rgba(255,255,255,1) 41%,rgba(255,255,255,1) 55%,rgba(0,0,0,1) 55%,rgba(0,0,0,1) 60%,rgba(255,255,255,1) 61%,rgba(255,255,255,1) 75%,rgba(255,255,255,1) 75%,rgba(0,0,0,1) 76%,rgba(0,0,0,1) 80%,rgba(255,255,255,1) 81%,rgba(255,255,255,1) 95%,rgba(0,0,0,1) 96%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
div:before{
content:"";
position:absolute;
border-top:150px solid white;
border-left:150px solid transparent;
border-right:150px solid transparent;
top:0;
<div></div>
A slightly different approach to create the upper section would also be ok (i guess):
div {
position: relative;
overflow: hidden;
height: 200px;
width: 200px;
background: rgb(255, 255, 255);
/* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 15%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 20%, rgba(255, 255, 255, 1) 21%, rgba(255, 255, 255, 1) 35%, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 1) 40%, rgba(255, 255, 255, 1) 41%, rgba(255, 255, 255, 1) 55%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 1) 60%, rgba(255, 255, 255, 1) 61%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 1) 75%, rgba(0, 0, 0, 1) 76%, rgba(0, 0, 0, 1) 80%, rgba(255, 255, 255, 1) 81%, rgba(255, 255, 255, 1) 95%, rgba(0, 0, 0, 1) 96%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(15%, rgba(255, 255, 255, 1)), color-stop(15%, rgba(0, 0, 0, 1)), color-stop(15%, rgba(255, 255, 255, 1)), color-stop(16%, rgba(0, 0, 0, 1)), color-stop(16%, rgba(0, 0, 0, 1)), color-stop(20%, rgba(0, 0, 0, 1)), color-stop(20%, rgba(0, 0, 0, 1)), color-stop(21%, rgba(255, 255, 255, 1)), color-stop(35%, rgba(255, 255, 255, 1)), color-stop(35%, rgba(0, 0, 0, 1)), color-stop(40%, rgba(0, 0, 0, 1)), color-stop(41%, rgba(255, 255, 255, 1)), color-stop(55%, rgba(255, 255, 255, 1)), color-stop(55%, rgba(0, 0, 0, 1)), color-stop(60%, rgba(0, 0, 0, 1)), color-stop(61%, rgba(255, 255, 255, 1)), color-stop(75%, rgba(255, 255, 255, 1)), color-stop(75%, rgba(255, 255, 255, 1)), color-stop(76%, rgba(0, 0, 0, 1)), color-stop(80%, rgba(0, 0, 0, 1)), color-stop(81%, rgba(255, 255, 255, 1)), color-stop(95%, rgba(255, 255, 255, 1)), color-stop(96%, rgba(0, 0, 0, 1)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 15%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 20%, rgba(255, 255, 255, 1) 21%, rgba(255, 255, 255, 1) 35%, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 1) 40%, rgba(255, 255, 255, 1) 41%, rgba(255, 255, 255, 1) 55%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 1) 60%, rgba(255, 255, 255, 1) 61%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 1) 75%, rgba(0, 0, 0, 1) 76%, rgba(0, 0, 0, 1) 80%, rgba(255, 255, 255, 1) 81%, rgba(255, 255, 255, 1) 95%, rgba(0, 0, 0, 1) 96%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 15%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 20%, rgba(255, 255, 255, 1) 21%, rgba(255, 255, 255, 1) 35%, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 1) 40%, rgba(255, 255, 255, 1) 41%, rgba(255, 255, 255, 1) 55%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 1) 60%, rgba(255, 255, 255, 1) 61%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 1) 75%, rgba(0, 0, 0, 1) 76%, rgba(0, 0, 0, 1) 80%, rgba(255, 255, 255, 1) 81%, rgba(255, 255, 255, 1) 95%, rgba(0, 0, 0, 1) 96%);
/* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 15%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 20%, rgba(255, 255, 255, 1) 21%, rgba(255, 255, 255, 1) 35%, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 1) 40%, rgba(255, 255, 255, 1) 41%, rgba(255, 255, 255, 1) 55%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 1) 60%, rgba(255, 255, 255, 1) 61%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 1) 75%, rgba(0, 0, 0, 1) 76%, rgba(0, 0, 0, 1) 80%, rgba(255, 255, 255, 1) 81%, rgba(255, 255, 255, 1) 95%, rgba(0, 0, 0, 1) 96%);
/* IE10+ */
background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 15%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 20%, rgba(255, 255, 255, 1) 21%, rgba(255, 255, 255, 1) 35%, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 1) 40%, rgba(255, 255, 255, 1) 41%, rgba(255, 255, 255, 1) 55%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 1) 60%, rgba(255, 255, 255, 1) 61%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 1) 75%, rgba(0, 0, 0, 1) 76%, rgba(0, 0, 0, 1) 80%, rgba(255, 255, 255, 1) 81%, rgba(255, 255, 255, 1) 95%, rgba(0, 0, 0, 1) 96%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000', GradientType=1);
/* IE6-9 fallback on horizontal gradient */
}
div:before {
content: "";
position: absolute;
height: 70%;
width: 70%;
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
background: white;
top: 0;
<div></div>
Useful resource: Gradient editor

Why do progress bars not load in IE?

I have been devloping a website but can not get a progress bar of any sorts to load in Internet Explorer. I tried both the basic progress bar in html, as well as a more complex CSS one, both of which did not work. I have 3 scripts, the first of which is the html code for the basic progress bar, as well as 4 of the more complex ones. The second script is the CSS styling for the more complex bar. Finally I have my run file which is used to live update the site I am working on. I am running the site on Apache 2.4.10 and it functions properly in both Firefox and Google Chrome. When trying in Internet Explorer, all that loads is a single black rectangle, instead of 4 actual bars, and one of the smaller progress bars. Please let me know if you see the flaw in my code or if you have the fix to the problem.
This is the HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="progressbarstyle.css">
</head>
<title> Test</title>
<style type="text/css">
</style>
</head>
<body>
<progress max="100" value="10"></progress><br/>
<div class="meter red">
<span id="progress-load" style="height: 60%" > </span>
</div>
<div class="meter red">
<span id="progress-load" style="height: 60%" > </span>
</div>
<div class="meter red">
<span id="progress-load" style="height: 40%" > </span>
</div>
<div class="meter red">
<span id="progress-load" style="height: 50%" > </span>
</div>
</body>
</html>
<script>
This is the CSS
p {color: white;
background-color: black;}
body {background-color: #F5F5DC; }
.meter {
float: left;
height: 500px;
width: 50px;
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 10px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
-moz-box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
position:relative;
overflow: hidden;
}
.progress-load {
display: block;
height: 100%;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
-webkit-border-top-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-bottomleft: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43,194,83);
background-image: -webkit-gradient(
linear,
center right,
center right,
color-stop(0, rgb(43,194,83)),
color-stop(1, rgb(84,240,84))
);
background-image: -webkit-linear-gradient(
center right,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
background-image: -moz-linear-gradient(
center right,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
background-image: -ms-linear-gradient(
center right,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
background-image: -o-linear-gradient(
center right,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
-webkit-box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
-moz-box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
overflow: hidden;
position:absolute;
left: 0;
bottom: 0;
width: 100%;
}
.red > span {
background-color: #f0a3a3;
background-image: -webkit-gradient(linear,
left top,left bottom,color-stop(0.#f0a3a3),color-stop(1, #f42323));
background-image: -webkit-linear-gradient(right, #f0a3a3, #f42323);
background-image: -moz-linear-gradient(right, #f0a3a3, #f42323);
background-image: -ms-linear-gradient(right, #f0a3a3, #f42323);
background-image: -o-linear-gradient(right, #f0a3a3, #f42323);
}
.meter > span:after {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-image:
-webkit-gradient(linear, 0 0, 100% 100%,
color-stop(.25, rgba(255, 255, 255, .2)),
color-stop(.25, transparent), color-stop(.5, transparent),
color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)),
color-stop(.75, transparent), to(transparent)
);
background-image:
-webkit-linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
background-image:
-moz-linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
background-image:
-ms-linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
background-image:
-o-linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
z-index: 1;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
background-size: 50px 50px;
-webkit-animation: move 2s linear infinite;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}
And finally here is my run file
<!DOCTYPE html>
<html>
<style type="text/css">
</style>
<script>
function showCustomer(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari php<!-- include('test.php');--> ?>
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","Progress.html",true);
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.setRequestHeader( "If-Modified-Since", "Sat, 01 Jan 2000 00:00:00 GMT" );
xmlhttp.send(null);
//showCustomer('ALFKI');
setTimeout(function(){showCustomer('load')}, 1500);
}
</script>
</head>
<body onLoad="showCustomer('Load')">
<div id="txtHint"></div>
</body>
</html>

CSS Optimization issue

I've found a css striped and tiled combination that I really like. The problem is, it makes everything really, really slow. I'm wondering, are there any techniques I should use to make this css more optimized? Or is the technique just too demanding in itself?
I use less.
.head {
.stripes;
.angled;
}
.stripes {
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
background-size: 50px 50px; /* Controls the size of the stripes */
-moz-box-shadow: 1px 1px 8px gray;
-webkit-box-shadow: 1px 1px 8px gray;
box-shadow: 1px 1px 8px gray;
}
.angled {
background-color: #light-blue;
background-image: -webkit-gradient(linear, 0 100%, 100% 0,
color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
background-image: -ms-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
}

Few weeks ago I tested this technique on Firefox, Opera and Chrome with a simple two color gradient to get vertical stripes.
It works quite well for large background-size but when you set it to just few pixels browser needs a lot more time to render it especially when you maximize the window.
Opera and Chrome handle it quite well. Sometimes you can see a spike on the cpu usage graph but it's not that bad. Firefox on the other hand goes crazy on the cpu.
It's most probably problem with the way gradients and background-size are implemented. I think it's better to use images at least for now.
You may want to use base64 and put it into your css to avoid another request.