I'm wondering why this code works on Chrome but it won't work on Firefox, I put the -moz- prefix but I get the same result.
The code is:
HTML
<body class="metal">
<header>
yup
</header>
</body>
CSS
body{
color: #000;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow-x: hidden;
font-family: sans-serif;
}
header {
position: fixed;
text-align: center;
top: 0;
left: 0;
width: 100%;
height: 60px;
line-height: 60px;
margin: 0;
padding: 0;
transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
-webkit-transition: opacity .2s ease-out;
-o-transition: opacity .2s ease-out;
}
footer {
position: fixed;
text-align: center;
bottom: 0;
left: 0;
width: 100%;
height: 20px;
line-height: 20px;
background-color: white;
margin-left: auto;
margin-right: auto;
font-size: 10px;
padding: 0;
opacity: .8;
}
.metal {
background: -webkit-radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%), -webkit-radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%), -webkit-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0);
background: -moz-radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%), -webkit-radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%), -webkit-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0);
background: -ms-radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%), -webkit-radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%), -webkit-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0);
background: -o-radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%), -webkit-radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%), -webkit-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0);
background: radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%), -webkit-radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%), -webkit-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0);
background-size: 10px 10px, 10px 10px, 100% 100%;
background-position: 1px 1px, 0px 0px, center center;
top: 0;
}
button {
background: -webkit-radial-gradient( 20% 0%, 10% 50%, hsla(0,0%,100%,.5) 0%,hsla(0,0%,100%,0) 100%), -webkit-radial-gradient( 24% 100%, 20% 30%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%), -webkit-radial-gradient( 20% 20%, 20% 7%, hsla(0,0%,100%,.5) 0%, hsla(0,10%,80%,0) 100%), -webkit-radial-gradient( 10% 50%, 50% 10%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%), -webkit-repeating-radial-gradient( 50% 20%, 10% 10%, hsla(0,0%, 0%,0) 10%, hsla(0,0%, 0%,0) 3%, hsla(0,0%, 0%,.1) 5.5%), -webkit-repeating-radial-gradient( 20% 100%, 10% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%,.1) 7.5%), -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%), -webkit-radial-gradient( 50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);
background: -moz-radial-gradient( 20% 0%, 10% 50%, hsla(0,0%,100%,.5) 0%,hsla(0,0%,100%,0) 100%), -moz-radial-gradient( 24% 100%, 20% 30%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%), -moz-radial-gradient( 20% 20%, 20% 7%, hsla(0,0%,100%,.5) 0%, hsla(0,10%,80%,0) 100%), -moz-radial-gradient( 10% 50%, 50% 10%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%), -moz-repeating-radial-gradient( 50% 20%, 10% 10%, hsla(0,0%, 0%,0) 10%, hsla(0,0%, 0%,0) 3%, hsla(0,0%, 0%,.1) 5.5%), -moz-repeating-radial-gradient( 20% 100%, 10% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%,.1) 7.5%), -moz-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%), -moz-radial-gradient( 50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);
background: -o-radial-gradient( 20% 0%, 10% 50%, hsla(0,0%,100%,.5) 0%,hsla(0,0%,100%,0) 100%), radial-gradient( 24% 100%, 20% 30%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%), radial-gradient( 20% 20%, 20% 7%, hsla(0,0%,100%,.5) 0%, hsla(0,10%,80%,0) 100%), radial-gradient( 10% 50%, 50% 10%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%), repeatinggradient( 50% 20%, 10% 10%, hsla(0,0%, 0%,0) 10%, hsla(0,0%, 0%,0) 3%, hsla(0,0%, 0%,.1) 5.5%), repeatinggradient( 20% 100%, 10% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%,.1) 7.5%), repeatinggradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%), radial-gradient( 50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);
background: -ms-radial-gradient( 20% 0%, 10% 50%, hsla(0,0%,100%,.5) 0%,hsla(0,0%,100%,0) 100%), radial-gradient( 24% 100%, 20% 30%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%), radial-gradient( 20% 20%, 20% 7%, hsla(0,0%,100%,.5) 0%, hsla(0,10%,80%,0) 100%), radial-gradient( 10% 50%, 50% 10%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%), repeatinggradient( 50% 20%, 10% 10%, hsla(0,0%, 0%,0) 10%, hsla(0,0%, 0%,0) 3%, hsla(0,0%, 0%,.1) 5.5%), repeatinggradient( 20% 100%, 10% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%,.1) 7.5%), repeatinggradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%), radial-gradient( 50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);
background: radial-gradient( 20% 0%, 10% 50%, hsla(0,0%,100%,.5) 0%,hsla(0,0%,100%,0) 100%), radial-gradient( 24% 100%, 20% 30%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%), radial-gradient( 20% 20%, 20% 7%, hsla(0,0%,100%,.5) 0%, hsla(0,10%,80%,0) 100%), radial-gradient( 10% 50%, 50% 10%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%), repeatinggradient( 50% 20%, 10% 10%, hsla(0,0%, 0%,0) 10%, hsla(0,0%, 0%,0) 3%, hsla(0,0%, 0%,.1) 5.5%), repeatinggradient( 20% 100%, 10% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%,.1) 7.5%), repeatinggradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%), radial-gradient( 50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);
}
The jsfiddle is --> http://jsfiddle.net/dvyorL5p/
Thanks a lot! :D
You have 3 -radial-gradient in your CSS statement, only the first has -moz in front of it, the other 2 have -webkit in front of it.
So change:
background: -moz-radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%), -webkit-radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%), -webkit-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0);
to
background: -moz-radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%), -moz-radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%), -moz-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0);
Fiddle
Do no forget to put to each attribute each prefix.
background:
-webkit-radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%),
-webkit-radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%),
-webkit-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0);
background:
-moz-radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%),
-moz-radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%),
-moz-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0);
background:
-ms-radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%),
-ms-radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%),
-ms-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0);
background:
-o-radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%),
-o-radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%),
-o-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0);
background:
radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%),
radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%),
radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0);
And button:
background:
-webkit-radial-gradient(20% 0%, 10% 50%, hsla(0,0%,100%,.5) 0%,hsla(0,0%,100%,0) 100%),
-webkit-radial-gradient(24% 100%, 20% 30%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),
-webkit-radial-gradient(20% 20%, 20% 7%, hsla(0,0%,100%,.5) 0%, hsla(0,10%,80%,0) 100%),
-webkit-radial-gradient(10% 50%, 50% 10%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
-webkit-repeating-radial-gradient(50% 20%, 10% 10%, hsla(0,0%, 0%,0) 10%, hsla(0,0%, 0%,0) 3%, hsla(0,0%, 0%,.1) 5.5%),
-webkit-repeating-radial-gradient(20% 100%, 10% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%,.1) 7.5%),
-webkit-repeating-radial-gradient(50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%),
-webkit-radial-gradient(50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);
background:
-moz-radial-gradient(20% 0%, 10% 50%, hsla(0,0%,100%,.5) 0%,hsla(0,0%,100%,0) 100%),
-moz-radial-gradient(24% 100%, 20% 30%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),
-moz-radial-gradient(20% 20%, 20% 7%, hsla(0,0%,100%,.5) 0%, hsla(0,10%,80%,0) 100%),
-moz-radial-gradient(10% 50%, 50% 10%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
-moz-repeating-radial-gradient(50% 20%, 10% 10%, hsla(0,0%, 0%,0) 10%, hsla(0,0%, 0%,0) 3%, hsla(0,0%, 0%,.1) 5.5%),
-moz-repeating-radial-gradient(20% 100%, 10% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%,.1) 7.5%),
-moz-repeating-radial-gradient(50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%),
-moz-radial-gradient(50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);
background:
-o-radial-gradient(20% 0%, 10% 50%, hsla(0,0%,100%,.5) 0%,hsla(0,0%,100%,0) 100%),
-o-radial-gradient(24% 100%, 20% 30%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),
-o-radial-gradient(20% 20%, 20% 7%, hsla(0,0%,100%,.5) 0%, hsla(0,10%,80%,0) 100%),
-o-radial-gradient(10% 50%, 50% 10%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
-o-repeating-radial-gradient(50% 20%, 10% 10%, hsla(0,0%, 0%,0) 10%, hsla(0,0%, 0%,0) 3%, hsla(0,0%, 0%,.1) 5.5%),
-o-repeating-radial-gradient(20% 100%, 10% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%,.1) 7.5%),
-o-repeating-radial-gradient(50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%),
-o-radial-gradient(50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);
background:
-ms-radial-gradient(20% 0%, 10% 50%, hsla(0,0%,100%,.5) 0%,hsla(0,0%,100%,0) 100%),
-ms-radial-gradient(24% 100%, 20% 30%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),
-ms-radial-gradient(20% 20%, 20% 7%, hsla(0,0%,100%,.5) 0%, hsla(0,10%,80%,0) 100%),
-ms-radial-gradient(10% 50%, 50% 10%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
-ms-repeating-radial-gradient(50% 20%, 10% 10%, hsla(0,0%, 0%,0) 10%, hsla(0,0%, 0%,0) 3%, hsla(0,0%, 0%,.1) 5.5%),
-ms-repeating-radial-gradient(20% 100%, 10% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%,.1) 7.5%),
-ms-repeating-radial-gradient(50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%),
-ms-radial-gradient(50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);
background: radial-gradient(20% 0%, 10% 50%, hsla(0,0%,100%,.5) 0%,hsla(0,0%,100%,0) 100%),
radial-gradient(24% 100%, 20% 30%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),
radial-gradient(20% 20%, 20% 7%, hsla(0,0%,100%,.5) 0%, hsla(0,10%,80%,0) 100%),
radial-gradient(10% 50%, 50% 10%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
repeating-radial-gradient(50% 20%, 10% 10%, hsla(0,0%, 0%,0) 10%, hsla(0,0%, 0%,0) 3%, hsla(0,0%, 0%,.1) 5.5%),
repeating-radial-gradient(20% 100%, 10% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%,.1) 7.5%),
repeating-radial-gradient(50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%),
radial-gradient(50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);
Check compatibility:
http://caniuse.com/css-repeating-gradients
http://caniuse.com/css-gradients