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
Related
This is what i want to achieve
Is it possible to get a similar result with CSS gradients? I'm was playing with radiant but I couldn't create something similar. (Here are some of my tries).
background-image: radial-gradient( circle at top right, #016CB4, black 20%, transparent 40% ), radial-gradient( circle at bottom left, #016CB4, BLACK 20%, transparent 40% );
and
background: radial-gradient(circle, #016CB4, black),radial-gradient(circle, #016CB4, black),radial-gradient(circle, white, #016CB4),radial-gradient(circle, #016CB4, black);
To achieve your desired result you should use coordinates instead of, for example top right
It would look like this radial-gradient(circle at 0% 0%, #2296e5, transparent 30%)
The first 0% is the horizontal position and the second one the vertical. So 0% 0% is the top left and 100% 100% would be bottom right.
Then it's just a matter of randomizing the values and adding enough gradients till you're satisfied.
I would recommend using an SCSS loop for that.
Here is what that looks like
#function noise($color) {
$val: radial-gradient(circle at 0% 0%, $color, transparent 30%);
#for $i from 1 through 50 {
$color2: darken($color, $i*0.9);
$val: #{$val}, radial-gradient(circle at random(100) + #{'%'} random(100) + #{'%'}, #{$color2}, transparent 30%);
}
#return $val;
}
#mixin addnoise($color) {
background: noise($color);
}
div {
width: 100vw;
height: 100vh;
#include addnoise(#2296e5);
}
Which compiles to:
div {
width: 100vw;
height: 100vh;
background: radial-gradient(circle at 0% 0%, #2296e5, transparent 30%), radial-gradient(circle at 19% 51%, #1e94e5, transparent 30%), radial-gradient(circle at 59% 93%, #1b92e3, transparent 30%), radial-gradient(circle at 56% 94%, #1a8fdf, transparent 30%), radial-gradient(circle at 26% 90%, #1a8ddb, transparent 30%), radial-gradient(circle at 6% 65%, #198ad7, transparent 30%), radial-gradient(circle at 5% 100%, #1987d3, transparent 30%), radial-gradient(circle at 93% 21%, #1885cf, transparent 30%), radial-gradient(circle at 6% 68%, #1882ca, transparent 30%), radial-gradient(circle at 97% 33%, #177fc6, transparent 30%), radial-gradient(circle at 43% 53%, #177dc2, transparent 30%), radial-gradient(circle at 30% 60%, #167abe, transparent 30%), radial-gradient(circle at 68% 43%, #1678ba, transparent 30%), radial-gradient(circle at 5% 49%, #1575b6, transparent 30%), radial-gradient(circle at 99% 21%, #1572b2, transparent 30%), radial-gradient(circle at 92% 60%, #1470ae, transparent 30%), radial-gradient(circle at 85% 30%, #146daa, transparent 30%), radial-gradient(circle at 91% 6%, #136aa5, transparent 30%), radial-gradient(circle at 37% 9%, #1368a1, transparent 30%), radial-gradient(circle at 48% 66%, #13659d, transparent 30%), radial-gradient(circle at 82% 62%, #126299, transparent 30%), radial-gradient(circle at 15% 80%, #126095, transparent 30%), radial-gradient(circle at 20% 92%, #115d91, transparent 30%), radial-gradient(circle at 49% 79%, #115b8d, transparent 30%), radial-gradient(circle at 81% 70%, #105889, transparent 30%), radial-gradient(circle at 16% 63%, #105585, transparent 30%), radial-gradient(circle at 32% 28%, #0f5381, transparent 30%), radial-gradient(circle at 8% 6%, #0f507c, transparent 30%), radial-gradient(circle at 77% 39%, #0e4d78, transparent 30%), radial-gradient(circle at 81% 20%, #0e4b74, transparent 30%), radial-gradient(circle at 87% 40%, #0d4870, transparent 30%), radial-gradient(circle at 18% 76%, #0d456c, transparent 30%), radial-gradient(circle at 61% 45%, #0c4368, transparent 30%), radial-gradient(circle at 20% 22%, #0c4064, transparent 30%), radial-gradient(circle at 39% 52%, #0b3d60, transparent 30%), radial-gradient(circle at 44% 37%, #0b3b5c, transparent 30%), radial-gradient(circle at 3% 59%, #0a3857, transparent 30%), radial-gradient(circle at 58% 20%, #0a3653, transparent 30%), radial-gradient(circle at 64% 37%, #09334f, transparent 30%), radial-gradient(circle at 55% 12%, #09304b, transparent 30%), radial-gradient(circle at 52% 36%, #082e47, transparent 30%), radial-gradient(circle at 3% 75%, #082b43, transparent 30%), radial-gradient(circle at 92% 94%, #07283f, transparent 30%), radial-gradient(circle at 37% 96%, #07263b, transparent 30%), radial-gradient(circle at 66% 92%, #062337, transparent 30%), radial-gradient(circle at 43% 2%, #062033, transparent 30%), radial-gradient(circle at 69% 81%, #051e2e, transparent 30%), radial-gradient(circle at 51% 68%, #051b2a, transparent 30%), radial-gradient(circle at 99% 15%, #041926, transparent 30%), radial-gradient(circle at 17% 85%, #041622, transparent 30%), radial-gradient(circle at 72% 69%, #04131e, transparent 30%);
}
<div></div>
I am trying to create a background for my body by experimenting with the linear-gradient(). However, it seems like there is a problem with the deg. After a while of failing to make it on my own, I went to a website which could help make a linear-gradient with a degree but when I copied the code, it looks completely different. Included are the code I copied, the website, what the preview is and what the result for me ended up being.
The website used: https://www.colorzilla.com/gradient-editor/
Code:
body {
background: #4c4c4c;
/* Old browsers */
background: -moz-linear-gradient(-45deg, #4c4c4c 0%, #595959 12%, #474747 22%, #474747 22%, #666666 25%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #4c4c4c 83%, #4c4c4c 83%, #1c1c1c 91%, #131313 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #4c4c4c 0%, #595959 12%, #474747 22%, #474747 22%, #666666 25%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #4c4c4c 83%, #4c4c4c 83%, #1c1c1c 91%, #131313 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #4c4c4c 0%, #595959 12%, #474747 22%, #474747 22%, #666666 25%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #4c4c4c 83%, #4c4c4c 83%, #1c1c1c 91%, #131313 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=1);
/* IE6-9 fallback on horizontal gradient */
}
It's because you didn't add height & width and it repeats the gradient on top of each other.
body {
background: #4c4c4c;
height: 100vh;
width: 100vw;
/* Old browsers */
background: -moz-linear-gradient(-45deg, #4c4c4c 0%, #595959 12%, #474747 22%, #474747 22%, #666666 25%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #4c4c4c 83%, #4c4c4c 83%, #1c1c1c 91%, #131313 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #4c4c4c 0%, #595959 12%, #474747 22%, #474747 22%, #666666 25%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #4c4c4c 83%, #4c4c4c 83%, #1c1c1c 91%, #131313 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #4c4c4c 0%, #595959 12%, #474747 22%, #474747 22%, #666666 25%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #4c4c4c 83%, #4c4c4c 83%, #1c1c1c 91%, #131313 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=1);
/* IE6-9 fallback on horizontal gradient */
}
I need to make a circular nav with a transparent center and buttons shaped like the bars around this Iron Man thing.
Below is my attempt using clip path... is there a way to do curves to make this easier, or must I draw many more points to make this look good?
CSS
.circle-new-btn {
background: rgba(0,0,0,1.00);
height: 300px;
width: 300px;
-webkit-clip-path: polygon(52% 21%, 57% 22%, 61% 24%, 65% 28%, 68% 31%, 59% 48%, 56% 46%, 53% 44%, 49% 43%, 45% 42%, 41% 44%, 38% 47%, 34% 50%, 32% 28%, 36% 25%, 40% 24%, 46% 22%);
clip-path: polygon(52% 21%, 57% 22%, 61% 24%, 65% 28%, 68% 31%, 59% 48%, 56% 46%, 53% 44%, 49% 43%, 45% 42%, 41% 44%, 38% 47%, 34% 46%, 32% 28%, 36% 25%, 40% 24%, 46% 22%);
}
.circle-new-btn:hover {
background: rgba(111,111,0,1.00);
}
HTML
<div class="circle-new-btn"></div>
Here is an idea how you can create this shape using CSS:
.box {
width:200px;
height:100px;
padding:20px 0;
box-sizing:border-box;
color:#fff;
text-align:center;
background:
radial-gradient(circle at 50% 160%,transparent 45%,blue 44.5%,blue 85%,transparent 85%);
-webkit-clip-path: polygon(0 0, 100% 0, 75% 90%, 25% 90%);
clip-path: polygon(0 0, 100% 0, 75% 90%, 25% 90%);
}
<div class="box">
Some text
</div>
Then you can simply apply some rotation to place the buttons around the big circle.
Well, I'm trying to use a simple gradient which appears very nicely on most browsers. However on internet explorer which is on my laptop version 11; currently where the gradient is supposed to be is just nothing an empty space. I thought this was the correct way to display gradients across browsers amd i missing something?
Here is my gradient:
background-image: -moz-linear-gradient(bottom, #292929 0%, #292929 50%, #333 50%, #333 100%);
background-image: -o-linear-gradient(bottom, #292929 0%, #292929 50%, #333 50%, #333 100%);
background-image: -webkit-linear-gradient(bottom, #292929 0%, #292929 50%, #333 50%, #333 100%);
background-image: linear-gradient(bottom, #292929 0%, #292929 50%, #333 50%, #333 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#292929', endColorstr='#333333',GradientType=0 )!important;
Your syntax for linear-gradient is incorrect. use to top to indicate directionality.
http://jsfiddle.net/XHs2g/
background-image: -moz-linear-gradient(bottom, #292929 0%, #292929 50%, #333 50%, #333 100%);
background-image: -o-linear-gradient(bottom, #292929 0%, #292929 50%, #333 50%, #333 100%);
background-image: -webkit-linear-gradient(bottom, #292929 0%, #292929 50%, #333 50%, #333 100%);
background-image: linear-gradient(to top, #292929 0%, #292929 50%, #333 50%, #333 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#292929', endColorstr='#333333',GradientType=0 )!important;
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;}