How to achieve a CSS footer "curtain" effect? - html
I would like to be able to create a simple curtain effect using CSS, and I have found a tutorial on the web that explains how to do it.
However, I can't get it to actually do anything. I've tried to recreate the effect described in the tutorial on JSFiddle, without any success. I basically just copied over the code from one of the provided example pages, but it seems to be missing something.
Can someone show me what is missing in the JSFiddle I've created?
Apparently I also have to include the JSFiddle code here, so here it is:
HTML
<!DOCTYPE HTML>
<body>
<div id="test">
<p>test</p>
</div>
<div class="curtain">TEST TEST TEST</div>
</body>
CSS:
body {
padding-bottom: 600px;
}
body:after {
content: "";
height: 1800px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
background-color: yellow;
background-size: auto 280px;
z-index: 1;
}
.curtain {
height: 1200px;
position: relative;
z-index: 2;
}
Here is a simplified example of what you're looking for:
DEMO
HTML
<div class="title">SCROLL DOWN DUDE</div>
<div class="curtain"></div>
CSS
body {
padding:0;
margin:0;
padding-bottom: 100px;
}
.title {
line-height:50px;
color:#212121;
text-align:center;
position:fixed;
top:0;
left:0;
line-height:150px;
width:100%;
z-index:3;
}
body:after {
content: "COME FROM UNDER";
height: 100px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
background-color: black;
z-index: 1;
color: #fff;
text-align:center;
line-height:100px;
}
.curtain {
height: 1200px;
position: relative;
z-index: 2;
background:yellow;
}
basically the bottom padding and :after get the same height..
You are missing some css. Try the following
body
{
margin: 0;
padding: 0;
}
body { color: #000; }
img { border: none; }
p
{
font-size: 1em;
margin: 0 0 1em 0;
line-height: 20px;
}
h1 {
margin: 0 0 1em;
font-size: 26px;
}
/* Branding */
#cssninja
{
position: absolute;
top: 0;
left: 0;
background-color: #18191d;
width: 100%;
height: 40px;
z-index: 3;
}
#cssninja p
{
color: #ffffff;
text-align: center;
margin: 10px 0 0 0;
}
#cssninja a
{
color: #ffffff;
text-decoration: none;
background: url(../assets/ico_ninja.gif) 0 0 no-repeat;
padding: 4px 0 9px 28px;
}
#cssninja a:hover
{
text-decoration: underline;
}
body {
padding-bottom: 600px;
}
body:after {
content: "";
height: 1800px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
background-color: #000;
background-position: 40% 100%, 50% 100%, 63% 100%;
background-repeat: no-repeat;
background-size: auto 180px,auto 280px,auto 180px;
z-index: 1;
}
.curtain {
height: 1200px;
position: relative;
z-index: 2;
}
/*
Curtain effect using CSS gradients
http://meyerweb.com/eric/thoughts/2012/06/22/cicadients/
*/
.curtain {
background-image:
-webkit-linear-gradient(
90deg,
rgba(255,128,128,0.25),
rgba(255,128,128,0) 75%
),
-webkit-linear-gradient(
-1deg,
transparent,
transparent 30%,
#510A0E 35%,
#510A0E 40%,
#61100F 43%,
#B93F3A 50%,
#4B0408 55%,
#6A0F18 60%,
#651015 65%,
#510A0E 70%,
#510A0E 75%,
rgba(255,128,128,0) 80%,
transparent
),
-webkit-linear-gradient(
2deg,
#510A0E,
#510A0E 20%,
#61100F 25%,
#B93F3A 40%,
#4B0408 50%,
#6A0F18 70%,
#651015 80%,
#510A0E 90%,
#510A0E
);
background-image:
-moz-linear-gradient(
90deg,
rgba(255,128,128,0.25),
rgba(255,128,128,0) 75%
),
-moz-linear-gradient(
-1deg,
transparent,
transparent 30%,
#510A0E 35%,
#510A0E 40%,
#61100F 43%,
#B93F3A 50%,
#4B0408 55%,
#6A0F18 60%,
#651015 65%,
#510A0E 70%,
#510A0E 75%,
rgba(255,128,128,0) 80%,
transparent
),
-moz-linear-gradient(
2deg,
#510A0E,
#510A0E 20%,
#61100F 25%,
#B93F3A 40%,
#4B0408 50%,
#6A0F18 70%,
#651015 80%,
#510A0E 90%,
#510A0E
)
;
background-image:
-ms-linear-gradient(
90deg,
rgba(255,128,128,0.25),
rgba(255,128,128,0) 75%
),
-ms-linear-gradient(
-1deg,
transparent,
transparent 30%,
#510A0E 35%,
#510A0E 40%,
#61100F 43%,
#B93F3A 50%,
#4B0408 55%,
#6A0F18 60%,
#651015 65%,
#510A0E 70%,
#510A0E 75%,
rgba(255,128,128,0) 80%,
transparent
),
-ms-linear-gradient(
2deg,
#510A0E,
#510A0E 20%,
#61100F 25%,
#B93F3A 40%,
#4B0408 50%,
#6A0F18 70%,
#651015 80%,
#510A0E 90%,
#510A0E
);
background-image:
-o-linear-gradient(
90deg,
rgba(255,128,128,0.25),
rgba(255,128,128,0) 75%
),
-o-linear-gradient(
-1deg,
transparent,
transparent 30%,
#510A0E 35%,
#510A0E 40%,
#61100F 43%,
#B93F3A 50%,
#4B0408 55%,
#6A0F18 60%,
#651015 65%,
#510A0E 70%,
#510A0E 75%,
rgba(255,128,128,0) 80%,
transparent
),
-o-linear-gradient(
2deg,
#510A0E,
#510A0E 20%,
#61100F 25%,
#B93F3A 40%,
#4B0408 50%,
#6A0F18 70%,
#651015 80%,
#510A0E 90%,
#510A0E
);
background-image:
linear-gradient(
90deg,
rgba(255,128,128,0.25),
rgba(255,128,128,0) 75%
),
linear-gradient(
-1deg,
transparent,
transparent 30%,
#510A0E 35%,
#510A0E 40%,
#61100F 43%,
#B93F3A 50%,
#4B0408 55%,
#6A0F18 60%,
#651015 65%,
#510A0E 70%,
#510A0E 75%,
rgba(255,128,128,0) 80%,
transparent
),
linear-gradient(
2deg,
#510A0E,
#510A0E 20%,
#61100F 25%,
#B93F3A 40%,
#4B0408 50%,
#6A0F18 70%,
#651015 80%,
#510A0E 90%,
#510A0E
);
background-size:
auto,
300px 100%,
109px 100%;
background-repeat: repeat-x;
}
Related
Shadow of a complex polygon css
I want a shadow around and iside the hole of a cut donut polygon .
Hello,
I am trying to do a button in form of a cut donut but I am having trouble putting borders to it without making another polygon inside, so I tried to put shadows but only inset box-shadow was working and that wasn't what I wanted.
Here is the code :
body>
<div class="container">
<div class="polygon"></div>
</div>
</body>
and css :
:root{
--color1 : #86a59c;
--color2 : #284141;
--lightShadow : #ffffff55;
--darkShadow : #0000001E;
--polygon : polygon( 0% 50%, 1.01020514433644% 40%, 4.1742430504416% 30%, 10% 20%, 15% 18%, 20% 20%, 30% 30%, 30.5% 32.5%, 30% 35%, 27.0871215252208% 40%, 25% 50%, 27.0871215252208% 60%, 30% 65%, 35% 70%, 40% 72.9128784747792%, 50% 75%, 60% 72.9128784747792%, 65% 70%, 70% 65%, 72.9128784747792% 60%, 75% 50%, 72.9128784747792% 40%, 70% 35%, 69.5% 32.5%, 70% 30%, 80% 20%, 85% 18%, 90% 20%, 95.8257569495584% 30%, 98.9897948556636% 40%, 100% 50%, 98.9897948556636% 60%, 95.8257569495584% 70%, 90% 80%, 80% 90%, 70% 95.8257569495584%, 60% 98.9897948556636%, 50% 100%, 40% 98.9897948556636%, 30% 95.8257569495584%, 20% 90%, 10% 80%, 4.1742430504416% 70%, 1.01020514433644% 60%);}
body {
padding: 0;
margin: 0;
background-color: #888888;
font-size: 0.3em;
}
.container {
height: 20em;
width: 20em;
background: var(--color1);
position: absolute;
filter: drop-shadow(0px 10px 5px rgba(0,0,0,0.5));
}
.polygon {
content: "";
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 80%;
width: 80%;
background-color: var(--color2);
clip-path: var(--polygon);
}
What do you think? The main problem is chadow around and inside the hole of the donut.
Color edge of a polygon with css
I want to outline (2px high) ONLY the top, shaped part of this polygon with the color blue. What is the most effective way to achieve this?
.graph {
clip-path:polygon(0 78%, 9% 67%, 32% 77%, 56% 60%, 69% 30%, 88% 40%, 100% 20%, 100% 100%,0 100%);
border:none;
height:200px;
width:100%;
background:red;
position:absolute;
bottom: 0;
}
<body>
<div class="graph"></div>
</body>
This might not be the best solution but worth a try.
.graph {
clip-path:polygon(0 78%, 9% 67%, 32% 77%, 56% 60%, 69% 30%, 88% 40%, 100% 20%, 100% 100%,0 100%);
border:none;
height:200px;
width:100%;
background:red;
position:absolute;
bottom: 0;
}
.graph::before {
content: "";
clip-path:polygon(0 78%, 9% 67%, 32% 77%, 56% 60%, 69% 30%, 88% 40%, 100% 20%, 100% 100%,0 100%);
border: none;
height: 200px;
width: 100%;
background: white;
position: absolute;
bottom: -5px;
}
body{
overflow-y:hidden;
}
<body>
<div class="graph"></div>
</body>
Add more points to create only the line. You can introduce a variable to control the thickness:
.graph {
--b: 5px; /* the thickness */
height: 200px;
bottom:0;
left:0;
right:0;
position: absolute;
background :red;
clip-path: polygon(0 78%, 9% 67%, 32% 77%, 56% 60%, 69% 30%, 88% 40%, 100% 20%,100% calc(20% + var(--b)),88% calc(40% + var(--b)),69% calc(30% + var(--b)),56% calc(60% + var(--b)),32% calc(77% + var(--b)),9% calc(67% + var(--b)),0 calc(78% + var(--b)))
}
body {
background: grey;
}
<div class="graph"></div>
Cant display the background image mixed with pseudo class
İ am trying to achieve a spesific look but i cant have it. İ cant see the stylistic element unless i lower the opacity of the background color that i apply with pseudo classes. I actually achieved what i needed to do by applying two backgrounds. But i was so hopeless when i had the problem and it really got me angry not having the result so i am asking why cant i see the background image of the class of main2
HTML
<section class="main2">
<div class="main2_image">
<img src="images/illustration-phones.svg" alt="" class="main2_img">
</div>
<div class="main2_textbox">
<div class="box">
<h2>State of the art Infrastructure</h2>
<p>With reliability and speed in mind, worldwide data centers provide the backbone for ultra-fast
connectivity. This ensures your site will load instantly, no matter where your readers are,
keeping your site competitive.</p>
</div>
</div>
</section>
CSS
.main2{
margin-top: 20rem;
position: relative;
z-index: 1;
background-image: url(images/bg-pattern-circles.svg);
border-top-right-radius: 10rem;
border-bottom-left-radius: 10rem;
}
.main2::after{
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -3m;
background-image:
linear-gradient(to right,
hsl(237, 17%, 21%),
hsl(237, 23%, 32%));
}
İ can only display it when i get lower the opacity of main2 pseudo class. Thanks in advance!
The end result should look like this. The after pseudo element is the circular shape that should be on top of the background image of the main2 element
you can do it by css like this
live demo
.bg-gold {
background: -webkit-linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);
background: -o-linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);
background: -moz-linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);
background: linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);
}
.bg-news {
background: -webkit-linear-gradient(70deg, #ff6464 40%, #5ac8fa 40%);
background: -o-linear-gradient(70deg, #ff6464 40%, #5ac8fa 40%);
background: -moz-linear-gradient(70deg, #ff6464 40%, #5ac8fa 40%);
background: linear-gradient(70deg, #ff6464 40%, #5ac8fa 40%);
}
.bg-germany {
color: #fff;
background: -webkit-linear-gradient(110deg, #000 33%, rgba(0, 0, 0, 0) 33%), -webkit-linear-gradient(110deg, #dd0000 66%, #ffc608 66%);
background: -o-linear-gradient(110deg, #000 33%, rgba(0, 0, 0, 0) 33%), -o-linear-gradient(110deg, #dd0000 66%, #ffc608 66%);
background: -moz-linear-gradient(110deg, #000 33%, rgba(0, 0, 0, 0) 33%), -moz-linear-gradient(110deg, #dd0000 66%, #ffc608 66%);
background: linear-gradient(110deg, #000 33%, rgba(0, 0, 0, 0) 33%), linear-gradient(110deg, #dd0000 66%, #ffc608 66%);
}
.bg-aurora {
color: #fff;
background: -webkit-linear-gradient(-70deg, #fa7c30 30%, rgba(0, 0, 0, 0) 30%), url('https://www.nasa.gov/sites/default/files/thumbnails/image/pia21421-cr.jpg');
background: -o-linear-gradient(-70deg, #fa7c30 30%, rgba(0, 0, 0, 0) 30%), url('https://www.nasa.gov/sites/default/files/thumbnails/image/pia21421-cr.jpg');
background: -moz-linear-gradient(-70deg, #fa7c30 30%, rgba(0, 0, 0, 0) 30%), url('https://www.nasa.gov/sites/default/files/thumbnails/image/pia21421-cr.jpg');
background: linear-gradient(-70deg, #fa7c30 30%, rgba(0, 0, 0, 0) 30%), url('https://www.nasa.gov/sites/default/files/thumbnails/image/pia21421-cr.jpg');
background-size: cover;
background-position: 50% 21%;
text-align: right;
}
.bg-germany {
color: #fff;
background: -webkit-linear-gradient(110deg, #000 33%, rgba(0, 0, 0, 0) 33%), -webkit-linear-gradient(110deg, #dd0000 66%, #ffc608 66%);
background: -o-linear-gradient(110deg, #000 33%, rgba(0, 0, 0, 0) 33%), -o-linear-gradient(110deg, #dd0000 66%, #ffc608 66%);
background: -moz-linear-gradient(110deg, #000 33%, rgba(0, 0, 0, 0) 33%), -moz-linear-gradient(110deg, #dd0000 66%, #ffc608 66%);
background: linear-gradient(110deg, #000 33%, rgba(0, 0, 0, 0) 33%), linear-gradient(110deg, #dd0000 66%, #ffc608 66%);
}
.bg-purple {
color: #fff;
background: -webkit-linear-gradient(110deg, #a60af3 40%, rgba(0, 0, 0, 0) 30%), -webkit-radial-gradient(farthest-corner at 0% 0%, #7a00cc 70%, #c03fff 70%);
background: -o-linear-gradient(110deg, #a60af3 40%, rgba(0, 0, 0, 0) 30%), -o-radial-gradient(farthest-corner at 0% 0%, #7a00cc 70%, #c03fff 70%);
background: -moz-linear-gradient(110deg, #a60af3 40%, rgba(0, 0, 0, 0) 30%), -moz-radial-gradient(farthest-corner at 0% 0%, #7a00cc 70%, #c03fff 70%);
background: linear-gradient(110deg, #a60af3 40%, rgba(0, 0, 0, 0) 30%), radial-gradient(farthest-corner at 0% 0%, #7a00cc 70%, #c03fff 70%);
}
.bg-spring {
background: -webkit-linear-gradient(70deg, #fff810 30%, rgba(0,0,0,0) 30%), -webkit-linear-gradient(30deg, #63e89e 60%, #ff7ee3 60%);
background: -o-linear-gradient(70deg, #fff810 30%, rgba(0,0,0,0) 30%), -o-linear-gradient(30deg, #63e89e 60%, #ff7ee3 60%);
background: -moz-linear-gradient(70deg, #fff810 30%, rgba(0,0,0,0) 30%), -moz-linear-gradient(30deg, #63e89e 60%, #ff7ee3 60%);
background: linear-gradient(70deg, #fff810 30%, rgba(0,0,0,0) 30%), linear-gradient(30deg, #63e89e 60%, #ff7ee3 60%);
}
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.
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