How to working with shape (polygon) in different browser? - html

I am doing the shape using css in my website.
It work well in chrome, but when open in mozilla, internet explorer, it can't function.
Anyone know how to fixed it?
Here is the fiddle
http://fiddle.jshell.net/dm3qe27o/2/
<div class="index-main-wrapper">
<div class="home-left-shape"></div>
<div class="home-right-shape"></div>
<div style="clear:both;"></div>
</div>
.home-left-shape {
height:100vh;
width:50vw;
float:left;
background-color:#bfb6a5;
background-size:cover;
-webkit-shape-outside: polygon(0% 0%, 0% 0%, 100% 100%, 0% 100%);
shape-outside: polygon(0% 0%, 0% 0%, 100% 100%, 0% 100%);
-webkit-clip-path: polygon(0% 0%, 0% 0%, 100% 100%, 0% 100%);
-webkit-shape-margin: 20px;
}
.home-right-shape {
height:100vh;
width:50vw;
float:right;
background-color:#bfb6a5;
background-size:cover;
-webkit-shape-outside: polygon(0% 100%, 100% 0%, 100% 100%, 0% 100%);
shape-outside: polygon(0% 100%, 100% 0%, 100% 100%, 0% 100%);
-webkit-clip-path: polygon(0% 100%, 100% 0%, 100% 100%, 0% 100%);
-webkit-shape-margin: 20px;
}

use different browser
-webkit-shape-outside: polygon(0% 0%, 0% 0%, 100% 100%, 0% 100%); -mozila & chrom
-moz-shape-outside: polygon(0% 0%, 0% 0%, 100% 100%, 0% 100%); - mozila
-o-shape-outside: polygon(0% 0%, 0% 0%, 100% 100%, 0% 100%); - opera
-ms-shape-outside: polygon(0% 0%, 0% 0%, 100% 100%, 0% 100%); - Internet Exploler

Related

The effects in my master page messes everything

When I try to activate any effect on a picture in my master page it just messes the whole order of the page and just ruins it. How can I fix it?
I just want a cool effect on my website.
body {
padding: 0;
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
.glitch {
position: relative;
overflow: hidden;
}
.glitch img {
position: relative;
z-index: 1;
display: block;
}
.glitch__layers {
position: absolute;
z-index: 2;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.glitch__layer {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-image: url(https://images.unsplash.com/photo-1561019733-a84b4e023910?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80);
background-repeat: no-repeat;
background-position: 0 0;
}
.glitch__layer:nth-child(1) {
transform: translateX(-5%);
animation: glitch-anim-1 2s infinite linear alternate;
}
.glitch__layer:nth-child(2) {
transform: translateX(3%) translateY(3%);
animation: glitch-anim-2 2.3s -.8s infinite linear alternate;
}
.glitch__layer:nth-child(3) {
transform: translateX(5%);
animation: glitch-anim-flash 1s infinite linear;
}
#keyframes glitch-anim-1 {
0% {
clip-path: polygon(0 0%, 100% 0%, 100% 5%, 0 5%);
}
10% {
clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
}
20% {
clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
}
30% {
clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
}
40% {
clip-path: polygon(0 35%, 100% 35%, 100% 35%, 0 35%);
}
50% {
clip-path: polygon(0 45%, 100% 45%, 100% 46%, 0 46%);
}
60% {
clip-path: polygon(0 50%, 100% 50%, 100% 70%, 0 70%);
}
70% {
clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
}
80% {
clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
}
90% {
clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
}
100% {
clip-path: polygon(0 60%, 100% 60%, 100% 70%, 0 70%);
}
}
#keyframes glitch-anim-2 {
0% {
clip-path: polygon(0 15%, 100% 15%, 100% 30%, 0 30%);
}
15% {
clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
}
25% {
clip-path: polygon(0 8%, 100% 8%, 100% 20%, 0 20%);
}
30% {
clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
}
45% {
clip-path: polygon(0 45%, 100% 45%, 100% 45%, 0 45%);
}
50% {
clip-path: polygon(0 50%, 100% 50%, 100% 57%, 0 57%);
}
65% {
clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
}
75% {
clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
}
80% {
clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%);
}
95% {
clip-path: polygon(0 45%, 100% 45%, 100% 60%, 0 60%);
}
100% {
clip-path: polygon(0 11%, 100% 11%, 100% 15%, 0 15%);
}
}
#keyframes glitch-anim-flash {
0% {
opacity: .2;
}
30%,
100% {
opacity: 0;
}
}
<div class="glitch">
<img src="https://images.unsplash.com/photo-1561019733-a84b4e023910?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" alt="">
<div class="glitch__layers">
<div class="glitch__layer"></div>
<div class="glitch__layer"></div>
<div class="glitch__layer"></div>
</div>
</div>

How to create complex 3d shapes in css ? (duct tape band)

I'd like to create a scotch tape band design on my website. I would like it to look almost like that :
I designed yet the clean tape but I cannot manage to create the bendings (circled on the picture) properly.
this is what I have yet.
body {
overflow: hidden;
}
.duct-tape {
display: flex;
justify-content: space-around;
align-items: space-around;
transform-origin: center;
position: absolute;
top: 50%;
left: 50%;
width: 100vw;
background-color: yellow;
overflow: hidden;
}
.duct-tape:nth-of-type(1) {
transform: translate(-50%, -50%) rotateZ(-20deg);
}
.duct-tape:nth-of-type(2) {
transform: translate(-50%, -50%) rotateZ(30deg);
}
.duct-tape > .shadow {
display: block;
position: absolute;
height: .3px;
width: 50px;
transform: rotateZ(-30deg) translateX(13px);
border-radius: 100%;
box-shadow: .1em .1em .25em rgb(130, 130, 0);
}
/* debug code */
.circle {
content: "";
display: block;
border-radius: 100px;
width: 30px;
height: 30px;
border: 2px solid lightblue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-60%, -60%);
}
<body>
<div class="duct-tape">
<span>any text</span>
<span>any text</span>
</div>
<div class="duct-tape">
<span>any text</span>
<span>any text</span>
<span class="shadow"></span>
</div>
<!-- debug code -->
<span class="circle"></span>
</body>
Yet I thought about create little shadow elements (class shadow in duct-tape in the snippet) that would act like the bendings. I thought about svg too, but it doesn't seem I can easily create such an svg. I know css packs up 3D transforms, could it help me or this is too specific to be properly done using css 3D transforms ? Any idea of easier ways to do it ?
You may take a look at clip-path, rgba() colors and gradient.
here is a quick example to show the idea.
body {
background: yellow;
}
span {
--rt: 45deg;
position: absolute;
height: var(--ht, 400px);
width: var(--wdt, 50px);
background: linear-gradient(30deg, transparent 30%, rgba(255, 255, 255, 0.3) 32%, transparent 33%), radial-gradient(circle at 60% 40%, transparent 15px, rgba(255, 255, 255, 0.25) 17%, transparent 20%) rgba(0, 0, 0, 0.075);
box-shadow: 0 0 2px rgba(255, 255, 255, 0.6);
top: 50%;
left: 50%;
margin: -200px -25px;
transform: rotate(var(--rt));
clip-path: polygon(1% 0%, 19% 1%, 30% 0%, 38% 0%, 48% 1%, 58% 3%, 62% 3%, 79% 3%, 73% 1%, 84% 0%, 87% 0%, 91% 4%, 92% 2%, 99% 0%, 96% 5%, 96% 20%, 100% 34%, 100% 46%, 99% 54%, 95% 57%, 87% 69%, 100% 77%, 100% 82%, 100% 89%, 100% 96%, 90% 99%, 76% 100%, 71% 97%, 63% 100%, 54% 99%, 51% 100%, 37% 98%, 34% 100%, 21% 99%, 17% 100%, 14% 98%, 10% 100%, 3% 98%, 3% 100%, 0% 85%, 4% 80%, 0% 74%, 4% 55%, 6% 45%, 3% 40%, 0% 34%, 6% 25%, 4% 16%, 1% 13%);
}
span:nth-child(2) {
--rt: -45deg;
--ht: 450px;
background-size: 150% 200%;
clip-path: polygon(0 0, 13% 2%, 22% 0%, 28% 0%, 34% 2%, 46% 2%, 60% 2%, 69% 3%, 79% 1%, 80% 0%, 90% 0%, 93% 3%, 100% 4%, 99% 98%, 97% 100%, 87% 99%, 80% 100%, 74% 99%, 68% 100%, 60% 99%, 50% 100%, 43% 97%, 33% 96%, 31% 98%, 24% 99%, 20% 100%, 14% 98%, 9% 100%, 0% 100%);
}
span:nth-child(3) {
--rt: -45deg;
--wdt: 40px;
--ht: 200px;
left: 25%;
background-size: 110% 200%;
}
span:nth-child(4) {
--rt:15deg;
--wdt: 40px;
--ht: 150px;
left: 25%;
background-size: 40% 50%;
clip-path: polygon(0 0, 13% 2%, 22% 0%, 28% 0%, 34% 2%, 46% 2%, 60% 2%, 69% 3%, 79% 1%, 80% 0%, 90% 0%, 93% 3%, 100% 4%, 99% 98%, 97% 100%, 87% 99%, 80% 100%, 74% 99%, 68% 100%, 60% 99%, 50% 100%, 43% 97%, 33% 96%, 31% 98%, 24% 99%, 20% 100%, 14% 98%, 9% 100%, 0% 100%);
}
<span></span>
<span></span>
<span></span>
<span></span>
gradient linear,radial and conic can be used via background and resized and repeated or not, clip-path can allow you to cut off some pieces . a usefull tool to help you https://bennettfeely.com/clippy/
mask svg is also a possibility instead clip-path or mixed with.

Clip Path Buttons For Circular Nav

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.

How to make p:wizard tabs looks like arrows?

How to make the p:tab in p:wizard looks like a arrow ,
something like the attached picture
Thank you in advance.
You can do this via CSS:
.firstTab{
line-height: 43px;
text-align:center;
height:60px;
width:210px;
-webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}
.middleTab{
line-height: 43px;
text-align:center;
margin-left: -30px !important;
height:60px;
width:210px;
-webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}
.lastTab{
line-height: 43px;
text-align:center;
margin-left: -85px !important;
height:60px;
width:220px;
-webkit-clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 55% 50%);
clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 50% 50%);
}
And in your xhtml file:
<p:tabView activeIndex="#{declarationMBean.activeIndex}" style="align-content: center; background: #67a3cf;" >
<p:ajax event="tabChange" listener="#{declarationMBean.onTabChange}" />
<p:tab id="tab_0" title="Example" titleStyleClass="firstTab" >
.
.
.
<p:tab id="tab_2" titleStyleClass="middleTab">
.
.
<p:tab id="tab_3" titleStyleClass="middleTab">
.
.
<p:tab id="tab_4" titleStyleClass="lastTab">

CSS background won't work on Firefox

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