Implementing a transition via #keyframe - css

I'm trying to implement a transition with a #keyframe animation that changes the background gradient but can't seem to put my finger on where I'm going wrong.
Right now the background just jumps from gradient to gradient with no transition.
Link to jsfiddle
CSS:
.box {
position:fixed;
width:100%;
height:800px;
background: #071435;
background-image: -o-linear-gradient(-44deg, rgba(255, 22, 150, 0.64) 0%, rgba(178, 136, 12, 0.85) 100%);
background-image: -moz-linear-gradient(-44deg, rgba(255, 22, 150, 0.64) 0%, rgba(178, 136, 12, 0.85) 100%);
background-image: -ms-linear-gradient(-44deg, rgba(255, 22, 150, 0.64) 0%, rgba(178, 136, 12, 0.85) 100%);
background-image: linear-gradient(-134deg, rgba(255, 22, 150, 0.64) 0%, rgba(178, 136, 12, 0.85) 100%);
background-image: -o-linear-gradient(-134deg, #3EAD7E 0%, rgba(29, 83, 60, 0.72) 52%, rgba(0, 0, 0, 0.47) 100%);
background-image: -moz-linear-gradient(-134deg, #3EAD7E 0%, rgba(29, 83, 60, 0.72) 52%, rgba(0, 0, 0, 0.47) 100%);
background-image: -ms-linear-gradient(-134deg, #3EAD7E 0%, rgba(29, 83, 60, 0.72) 52%, rgba(0, 0, 0, 0.47) 100%);
background-image: linear-gradient(-224deg, #3EAD7E 0%, rgba(29, 83, 60, 0.72) 52%, rgba(0, 0, 0, 0.47) 100%);
opacity:1;
}
.box:hover {
-webkit-animation: playbg 3s infinite;
-webkit-transition: all 3s linear;
}
#-webkit-keyframes playbg {
0% {
background-image: -o-linear-gradient(-44deg, rgba(255, 22, 150, 0.64) 0%, rgba(178, 136, 12, 0.85) 100%);
background-image: -moz-linear-gradient(-44deg, rgba(255, 22, 150, 0.64) 0%, rgba(178, 136, 12, 0.85) 100%);
background-image: -ms-linear-gradient(-44deg, rgba(255, 22, 150, 0.64) 0%, rgba(178, 136, 12, 0.85) 100%);
background-image: linear-gradient(-134deg, rgba(255, 22, 150, 0.64) 0%, rgba(178, 136, 12, 0.85) 100%);
background-image: -o-linear-gradient(-134deg, #3EAD7E 0%, rgba(29, 83, 60, 0.72) 52%, rgba(0, 0, 0, 0.47) 100%);
background-image: -moz-linear-gradient(-134deg, #3EAD7E 0%, rgba(29, 83, 60, 0.72) 52%, rgba(0, 0, 0, 0.47) 100%);
background-image: -ms-linear-gradient(-134deg, #3EAD7E 0%, rgba(29, 83, 60, 0.72) 52%, rgba(0, 0, 0, 0.47) 100%);
background-image: linear-gradient(-224deg, #3EAD7E 0%, rgba(29, 83, 60, 0.72) 52%, rgba(0, 0, 0, 0.47) 100%);
opacity:1;
}
20% {
background-image: -o-linear-gradient(-90deg, rgba(4, 91, 255, 0.64) 11%, #00FDF2 100%);
background-image: -moz-linear-gradient(-90deg, rgba(4, 91, 255, 0.64) 11%, #00FDF2 100%);
background-image: -ms-linear-gradient(-90deg, rgba(4, 91, 255, 0.64) 11%, #00FDF2 100%);
background-image: linear-gradient(-180deg, rgba(4, 91, 255, 0.64) 11%, #00FDF2 100%);
background-image: -o-linear-gradient(-114deg, #FF1111 29%, rgba(255, 62, 30, 0.50) 97%);
background-image: -moz-linear-gradient(-114deg, #FF1111 29%, rgba(255, 62, 30, 0.50) 97%);
background-image: -ms-linear-gradient(-114deg, #FF1111 29%, rgba(255, 62, 30, 0.50) 97%);
background-image: linear-gradient(-204deg, #FF1111 29%, rgba(255, 62, 30, 0.50) 97%);
background-image: -o-linear-gradient(-71deg, rgba(130, 254, 152, 0.50) 31%, rgba(68, 93, 204, 0.50) 92%);
background-image: -moz-linear-gradient(-71deg, rgba(130, 254, 152, 0.50) 31%, rgba(68, 93, 204, 0.50) 92%);
background-image: -ms-linear-gradient(-71deg, rgba(130, 254, 152, 0.50) 31%, rgba(68, 93, 204, 0.50) 92%);
background-image: linear-gradient(-161deg, rgba(130, 254, 152, 0.50) 31%, rgba(68, 93, 204, 0.50) 92%);
opacity:1;
}
50% {
background-image: -o-linear-gradient(-116deg, #F40FD1 0%, #5AD74C 95%);
background-image: -moz-linear-gradient(-116deg, #F40FD1 0%, #5AD74C 95%);
background-image: -ms-linear-gradient(-116deg, #F40FD1 0%, #5AD74C 95%);
background-image: linear-gradient(-206deg, #F40FD1 0%, #5AD74C 95%);
background-image: -o-radial-gradient(50% 69%, rgba(137, 255, 247, 0.64) 41%, rgba(216, 209, 101, 0.50) 83%);
background-image: -moz-radial-gradient(50% 69%, rgba(137, 255, 247, 0.64) 41%, rgba(216, 209, 101, 0.50) 83%);
background-image: -ms-radial-gradient(50% 69%, rgba(137, 255, 247, 0.64) 41%, rgba(216, 209, 101, 0.50) 83%);
background-image: radial-gradient(50% 69%, rgba(137, 255, 247, 0.64) 41%, rgba(216, 209, 101, 0.50) 83%);
background-image: -o-linear-gradient(-134deg, rgba(255, 0, 199, 0.50) 0%, rgba(255, 220, 30, 0.50) 100%);
background-image: -moz-linear-gradient(-134deg, rgba(255, 0, 199, 0.50) 0%, rgba(255, 220, 30, 0.50) 100%);
background-image: -ms-linear-gradient(-134deg, rgba(255, 0, 199, 0.50) 0%, rgba(255, 220, 30, 0.50) 100%);
background-image: linear-gradient(-224deg, rgba(255, 0, 199, 0.50) 0%, rgba(255, 220, 30, 0.50) 100%);
background-image: -o-linear-gradient(-62deg, rgba(255, 245, 127, 0.50) 0%, rgba(131, 139, 176, 0.50) 96%);
background-image: -moz-linear-gradient(-62deg, rgba(255, 245, 127, 0.50) 0%, rgba(131, 139, 176, 0.50) 96%);
background-image: -ms-linear-gradient(-62deg, rgba(255, 245, 127, 0.50) 0%, rgba(131, 139, 176, 0.50) 96%);
background-image: linear-gradient(-152deg, rgba(255, 245, 127, 0.50) 0%, rgba(131, 139, 176, 0.50) 96%);
opacity:1;
}
100% {
background-image: -o-linear-gradient(-116deg, #1078FF 0%, #4CCCD7 95%);
background-image: -moz-linear-gradient(-116deg, #1078FF 0%, #4CCCD7 95%);
background-image: -ms-linear-gradient(-116deg, #1078FF 0%, #4CCCD7 95%);
background-image: linear-gradient(-206deg, #1078FF 0%, #4CCCD7 95%);
background-image: -o-linear-gradient(-44deg, #FF1B1B 0%, rgba(204, 255, 99, 0.25) 100%);
background-image: -moz-linear-gradient(-44deg, #FF1B1B 0%, rgba(204, 255, 99, 0.25) 100%);
background-image: -ms-linear-gradient(-44deg, #FF1B1B 0%, rgba(204, 255, 99, 0.25) 100%);
background-image: linear-gradient(-134deg, #FF1B1B 0%, rgba(204, 255, 99, 0.25) 100%);
background-image: -o-linear-gradient(-134deg, #F66514 0%, rgba(36, 30, 255, 0.25) 100%);
background-image: -moz-linear-gradient(-134deg, #F66514 0%, rgba(36, 30, 255, 0.25) 100%);
background-image: -ms-linear-gradient(-134deg, #F66514 0%, rgba(36, 30, 255, 0.25) 100%);
background-image: linear-gradient(-224deg, #F66514 0%, rgba(36, 30, 255, 0.25) 100%);
background-image: -o-linear-gradient(-62deg, #1CFFB5 0%, rgba(150, 157, 188, 0.25) 96%);
background-image: -moz-linear-gradient(-62deg, #1CFFB5 0%, rgba(150, 157, 188, 0.25) 96%);
background-image: -ms-linear-gradient(-62deg, #1CFFB5 0%, rgba(150, 157, 188, 0.25) 96%);
background-image: linear-gradient(-152deg, #1CFFB5 0%, rgba(150, 157, 188, 0.25) 96%);
opacity:1;
}
}


background-image is not an animatable or a transitionable property and hence you cannot see it getting transitioned and it just jumps from one state to another.
MDN Reference |
CSS Transitions Spec - Animatable CSS Properties
Note that some browsers do support animations/transitions of background-image property but it is not standard and hence not recommended for usage. [Source]
You can achieve a similar effect by transitioning the background-position property. My understanding is that this is because background-position is a numeric/percentage value and hence can be transitioned as the browser can ascertain intermediate states unlike background-image. Check this fiddle for a sample.
.box {
/* Do not forget to add browser prefixes for gradients and transitions */
position: relative;
height: 100px;
background: -webkit-linear-gradient(-224deg, #3EAD7E 0%, rgba(29, 83, 60, 0.72) 36%, rgba(0, 0, 0, 0.47) 50%, #1CFFB5 72%, rgba(150, 157, 188, 0.25) 96%);
background: -moz-linear-gradient(-224deg, #3EAD7E 0%, rgba(29, 83, 60, 0.72) 36%, rgba(0, 0, 0, 0.47) 50%, #1CFFB5 72%, rgba(150, 157, 188, 0.25) 96%);
background: -o-linear-gradient(-224deg, #3EAD7E 0%, rgba(29, 83, 60, 0.72) 36%, rgba(0, 0, 0, 0.47) 50%, #1CFFB5 72%, rgba(150, 157, 188, 0.25) 96%);
background: linear-gradient(-224deg, #3EAD7E 0%, rgba(29, 83, 60, 0.72) 36%, rgba(0, 0, 0, 0.47) 50%, #1CFFB5 72%, rgba(150, 157, 188, 0.25) 96%);
background-size: 200% 100%;
background-position: 0% bottom;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.box:hover {
background-position: 100% bottom;
}
<div class="box"></div>
Also another thing to note is that the transition must be specified in the base class and not just on :hover. If you specify on hover, it will transition while moving the mouse in but while moving out it will just jump. This fiddle illustrates it in comparison with the previous one.

Related

How to reduce the size of a css gradient pattern

Am I able to have this linear-gradient pattern be reduced in size further than what I was able to achieve?
Is it possible to do?
In my 1st example, the code is really long, in my 2nd example I was able to make the code smaller/shorter.
I wanted to know if it can be made shorter/smaller than what I was able to do.
All I am doing, or trying to do is reduce the number of lines there are in the css linear-gradient pattern code.
In your answer you can provide examples of how either 1 or both of my 2 code examples can be made shorter.
Or, if you have an idea on how to recreate the same pattern a different way using a different method using css gradient.
Code 1 https://jsfiddle.net/t1n3jh0d/
body {
background-image:
linear-gradient(to bottom, teal 5px, #0000 5px),
linear-gradient(to right, teal 5px, #0000 5px),
linear-gradient(to bottom, black 10px, #0000 10px),
linear-gradient(to left, black 5px, #0000 5px),
linear-gradient(to top, black 5px, #0000 5px),
linear-gradient(to right, black 10px, #0000 10px),
linear-gradient(to bottom, orange 15px, #0000 15px),
linear-gradient(to left, orange 10px, #0000 10px),
linear-gradient(to top, orange 10px, #0000 10px),
linear-gradient(to right, orange 15px, #0000 15px),
linear-gradient(to bottom, black 20px, #0000 20px),
linear-gradient(to left, black 15px, #0000 15px),
linear-gradient(to top, black 15px, #0000 15px),
linear-gradient(to right, black 20px, #0000 20px),
linear-gradient(to bottom, teal 25px, #0000 25px),
linear-gradient(to left, teal 20px, #0000 20px),
linear-gradient(to top, teal 20px, #0000 20px),
linear-gradient(to right, teal 25px, #0000 25px),
linear-gradient(to bottom, black 30px, #0000 30px),
linear-gradient(to left, black 25px, #0000 25px),
linear-gradient(to top, black 25px, #0000 25px),
linear-gradient(to right, black 30px, #0000 30px),
linear-gradient(to bottom, orange 35px, #0000 35px),
linear-gradient(to left, orange 30px, #0000 30px),
linear-gradient(to top, orange 30px, #0000 30px),
linear-gradient(to right, orange 35px, #0000 35px),
linear-gradient(to bottom, black 40px, #0000 40px),
linear-gradient(to left, black 35px, #0000 35px),
linear-gradient(to top, black 35px, #0000 35px),
linear-gradient(to right, black 40px, #0000 40px),
linear-gradient(to bottom, teal 45px, #0000 45px),
linear-gradient(to left, teal 40px, #0000 40px),
linear-gradient(to top, teal 40px, #0000 40px),
linear-gradient(to right, teal 45px, #0000 45px),
linear-gradient(to bottom, black 50px, #0000 50px),
linear-gradient(to left, black 45px, #0000 45px),
linear-gradient(to top, black 45px, #0000 45px),
linear-gradient(to right, black 50px, #0000 50px),
linear-gradient(to bottom, orange 55px, #0000 55px),
linear-gradient(to left, orange 50px, #0000 50px),
linear-gradient(to top, orange 50px, #0000 50px),
linear-gradient(to right, orange 55px, #0000 55px),
linear-gradient(to bottom, black 60px, #0000 60px),
linear-gradient(to left, black 55px, #0000 55px),
linear-gradient(to top, black 55px, #0000 55px),
linear-gradient(to right, black 60px, #0000 60px),
linear-gradient(to bottom, teal 65px, #0000 65px),
linear-gradient(to left, teal 60px, #0000 60px),
linear-gradient(to top, teal 60px, #0000 60px),
linear-gradient(to right, teal 65px, #0000 65px),
linear-gradient(to bottom, black 70px, #0000 70px),
linear-gradient(to left, black 65px, #0000 65px),
linear-gradient(to top, black 65px, #0000 65px),
linear-gradient(to right, black 70px, #0000 70px),
linear-gradient(to bottom, orange 75px, #0000 75px),
linear-gradient(to left, orange 70px, #0000 70px),
linear-gradient(to top, orange 70px, #0000 70px),
linear-gradient(to right, orange 75px, #0000 75px),
linear-gradient(to bottom, black 80px, #0000 80px),
linear-gradient(to left, black 75px, #0000 75px),
linear-gradient(to top, black 75px, #0000 75px),
linear-gradient(to right, black 80px, #0000 80px),
linear-gradient(to bottom, teal 85px, #0000 85px),
linear-gradient(to left, teal 85px, #0000 85px);
background-size: 165px 165px;
}
Code 2 https://jsfiddle.net/koqy9hp0/
body {
background-image:
linear-gradient(teal 5px, #0000 5px),
linear-gradient(90deg, teal 5px, #0000 5px),
linear-gradient(black 10px, #0000 10px 160px, black 160px),
linear-gradient(90deg, black 10px, #0000 10px 160px, black 160px),
linear-gradient(orange 15px, #0000 15px 155px, orange 155px),
linear-gradient(90deg, orange 15px, #0000 15px 155px, orange 155px),
linear-gradient(black 20px, #0000 20px 150px, black 150px),
linear-gradient(90deg, black 20px, #0000 20px 150px, black 150px),
linear-gradient(teal 25px, #0000 25px 145px, teal 145px),
linear-gradient(90deg, teal 25px, #0000 25px 145px, teal 145px),
linear-gradient(black 30px, #0000 30px 140px, black 140px),
linear-gradient(90deg, black 30px, #0000 30px 140px, black 140px),
linear-gradient(orange 35px, #0000 35px 135px, orange 135px),
linear-gradient(90deg, orange 35px, #0000 35px 135px, orange 135px),
linear-gradient(black 40px, #0000 40px 130px, black 130px),
linear-gradient(90deg, black 40px, #0000 40px 130px, black 130px),
linear-gradient(teal 45px, #0000 45px 125px, teal 125px),
linear-gradient(90deg, teal 45px, #0000 45px 125px, teal 125px),
linear-gradient(black 50px, #0000 50px 120px, black 120px),
linear-gradient(90deg, black 50px, #0000 50px 120px, black 120px),
linear-gradient(orange 55px, #0000 55px 115px, orange 115px),
linear-gradient(90deg, orange 55px, #0000 55px 115px, orange 115px),
linear-gradient(black 60px, #0000 60px 110px, black 110px),
linear-gradient(90deg, black 60px, #0000 60px 110px, black 110px),
linear-gradient(teal 65px, #0000 65px 105px, teal 105px),
linear-gradient(90deg, teal 65px, #0000 65px 105px, teal 105px),
linear-gradient(black 70px, #0000 70px 100px, black 100px),
linear-gradient(90deg, black 70px, #0000 70px 100px, black 100px),
linear-gradient(orange 75px, #0000 75px 95px, orange 95px),
linear-gradient(90deg, orange 75px, #0000 75px 95px, orange 95px),
linear-gradient(black 80px, #0000 80px 90px, black 90px),
linear-gradient(90deg, black 80px, #0000 80px 90px, black 90px),
linear-gradient(teal, teal);
background-size: 165px 165px;
}

An idea using mask and 2 gradients:
body::before,
body::after {
content: "";
--g: teal 0 5px, black 0 10px, orange 0 15px, black 0 20px;
position: fixed;
inset: 0;
background: repeating-linear-gradient(90deg, var(--g)) 0 0/85px 100%;
}
body::after {
background: repeating-linear-gradient(var(--g)) 0 0/100% 85px;
-webkit-mask: repeating-conic-gradient(from -45deg, #000 0 90deg, #0000 0 180deg)0 0/170px 170px;
}
Or
body::before,
body::after {
content: "";
--g: teal 0 5px, black 0 10px, orange 0 15px, black 0 20px;
position: fixed;
inset: 0;
background: repeating-linear-gradient(90deg, var(--g)) 0 0/80px 100%;
}
body::after {
background: repeating-linear-gradient(var(--g)) 0 0/100% 80px;
-webkit-mask: repeating-conic-gradient(from -45deg, #000 0 90deg, #0000 0 180deg)2.5px 2.5px/160px 160px;
}
Also like below:
body::before,
body::after {
content: "";
--g:
teal 0 5px , black 0 10px, orange 0 15px, black 0 20px,
teal 0 25px, black 0 30px, orange 0 35px, black 0 40px,
teal 0 45px, black 0 50px, orange 0 55px, black 0 60px,
teal 0 65px, black 0 70px, orange 0 75px, black 0 80px,
teal 0 85px,
teal 0 90px, black 0 95px, orange 0 100px, black 0 105px,
teal 0 110px, black 0 115px, orange 0 120px, black 0 125px,
teal 0 130px, black 0 135px, orange 0 140px, black 0 145px,
teal 0 150px, black 0 155px, orange 0 160px, black 0 165px;
position: fixed;
inset: 0;
background: linear-gradient(90deg, var(--g)) 0 0/165px 100%;
}
body::after {
background:linear-gradient(var(--g)) 0 0/100% 165px;
-webkit-mask: repeating-conic-gradient(from -45deg, #000 0 90deg, #0000 0 180deg)2.5px 2.5px/165px 165px;
}

The smartest thing would be to make the background an svg.
CSS:
body {
background-image:url('./bg.svg');
background-size: 165px 165px;
}
For the svg file, create the file, and paste this inside:
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 165 165">
<defs>
<style>.cls-1{fill:teal;}.cls-2{fill:#ffa600;}</style>
</defs>
<rect class="cls-1" width="165" height="165"/>
<rect x="5" y="5" width="160" height="160"/>
<rect class="cls-2" x="10" y="10" width="150" height="150"/>
<rect x="15" y="15" width="140" height="140"/>
<rect class="cls-1" x="20" y="20" width="130" height="130"/>
<rect x="25" y="25" width="120" height="120"/>
<rect class="cls-2" x="30" y="30" width="110" height="110"/>
<rect x="35" y="35" width="100" height="100"/>
<rect class="cls-1" x="40" y="40" width="90" height="90"/>
<rect x="45" y="45" width="80" height="80"/>
<rect class="cls-2" x="50" y="50" width="70" height="70"/>
<rect x="55" y="55" width="60" height="60"/>ยจ
<rect class="cls-1" x="60" y="60" width="50" height="50"/>
<rect x="65" y="65" width="40" height="40"/>
<rect class="cls-2" x="70" y="70" width="30" height="30"/>
<rect x="75" y="75" width="20" height="20"/>
<rect class="cls-1" x="80" y="80" width="10" height="10"/>
</svg>

I don't know that you can make it shorter without using a preprocessor like SCSS or one of the methods suggested by #Temani, but if the main goal is to make it easier to maintain, you can use custom properties
In the example, you can change the width, colors and background size by changing just one value, rather than having to adjust each linear-gradient individually
body {
--width: 5px;
--backgroundSize: calc(var(--width) * 33);
--color1: teal;
--color2: black;
--color3: orange;
--transparent: rgba(255, 255, 255, 0);
background-size: var(--backgroundSize) var(--backgroundSize);
background-image:
linear-gradient(to bottom, var(--color1) var(--width), var(--transparent) var(--width)),
linear-gradient(to right, var(--color1) var(--width), var(--transparent) var(--width)),
linear-gradient(to bottom, var(--color2) calc(var(--width) * 2), var(--transparent) calc(var(--width) * 2)),
linear-gradient(to left, var(--color2) var(--width), var(--transparent) var(--width)),
linear-gradient(to top, var(--color2) var(--width), var(--transparent) var(--width)),
linear-gradient(to right, var(--color2) calc(var(--width) * 2), var(--transparent) calc(var(--width) * 2)),
linear-gradient(to bottom, var(--color3) calc(var(--width) * 3), var(--transparent) calc(var(--width) * 3)),
linear-gradient(to left, var(--color3) calc(var(--width) * 2), var(--transparent) calc(var(--width) * 2)),
linear-gradient(to top, var(--color3) calc(var(--width) * 2), var(--transparent) calc(var(--width) * 2)),
linear-gradient(to right, var(--color3) calc(var(--width) * 3), var(--transparent) calc(var(--width) * 3)),
linear-gradient(to bottom, var(--color2) calc(var(--width) * 4), var(--transparent) calc(var(--width) * 4)),
linear-gradient(to left, var(--color2) calc(var(--width) * 3), var(--transparent) calc(var(--width) * 3)),
linear-gradient(to top, var(--color2) calc(var(--width) * 3), var(--transparent) calc(var(--width) * 3)),
linear-gradient(to right, var(--color2) calc(var(--width) * 4), var(--transparent) calc(var(--width) * 4)),
linear-gradient(to bottom, var(--color1) calc(var(--width) * 5), var(--transparent) calc(var(--width) * 5)),
linear-gradient(to left, var(--color1) calc(var(--width) * 4), var(--transparent) calc(var(--width) * 4)),
linear-gradient(to top, var(--color1) calc(var(--width) * 4), var(--transparent) calc(var(--width) * 4)),
linear-gradient(to right, var(--color1) calc(var(--width) * 5), var(--transparent) calc(var(--width) * 5)),
linear-gradient(to bottom, var(--color2) calc(var(--width) * 6), var(--transparent) calc(var(--width) * 6)),
linear-gradient(to left, var(--color2) calc(var(--width) * 5), var(--transparent) calc(var(--width) * 5)),
linear-gradient(to top, var(--color2) calc(var(--width) * 5), var(--transparent) calc(var(--width) * 5)),
linear-gradient(to right, var(--color2) calc(var(--width) * 6), var(--transparent) calc(var(--width) * 6)),
linear-gradient(to bottom, var(--color3) calc(var(--width) * 7), var(--transparent) calc(var(--width) * 7)),
linear-gradient(to left, var(--color3) calc(var(--width) * 6), var(--transparent) calc(var(--width) * 6)),
linear-gradient(to top, var(--color3) calc(var(--width) * 6), var(--transparent) calc(var(--width) * 6)),
linear-gradient(to right, var(--color3) calc(var(--width) * 7), var(--transparent) calc(var(--width) * 7)),
linear-gradient(to bottom, var(--color2) calc(var(--width) * 8), var(--transparent) calc(var(--width) * 8)),
linear-gradient(to left, var(--color2) calc(var(--width) * 7), var(--transparent) calc(var(--width) * 7)),
linear-gradient(to top, var(--color2) calc(var(--width) * 7), var(--transparent) calc(var(--width) * 7)),
linear-gradient(to right, var(--color2) calc(var(--width) * 8), var(--transparent) calc(var(--width) * 8)),
linear-gradient(to bottom, var(--color1) calc(var(--width) * 9), var(--transparent) calc(var(--width) * 9)),
linear-gradient(to left, var(--color1) calc(var(--width) * 8), var(--transparent) calc(var(--width) * 8)),
linear-gradient(to top, var(--color1) calc(var(--width) * 8), var(--transparent) calc(var(--width) * 8)),
linear-gradient(to right, var(--color1) calc(var(--width) * 9), var(--transparent) calc(var(--width) * 9)),
linear-gradient(to bottom, var(--color2) calc(var(--width) * 10), var(--transparent) calc(var(--width) * 10)),
linear-gradient(to left, var(--color2) calc(var(--width) * 9), var(--transparent) calc(var(--width) * 9)),
linear-gradient(to top, var(--color2) calc(var(--width) * 9), var(--transparent) calc(var(--width) * 9)),
linear-gradient(to right, var(--color2) calc(var(--width) * 10), var(--transparent) calc(var(--width) * 10)),
linear-gradient(to bottom, var(--color3) calc(var(--width) * 11), var(--transparent) calc(var(--width) * 11)),
linear-gradient(to left, var(--color3) calc(var(--width) * 10), var(--transparent) calc(var(--width) * 10)),
linear-gradient(to top, var(--color3) calc(var(--width) * 10), var(--transparent) calc(var(--width) * 10)),
linear-gradient(to right, var(--color3) calc(var(--width) * 11), var(--transparent) calc(var(--width) * 11)),
linear-gradient(to bottom, var(--color2) calc(var(--width) * 12), var(--transparent) calc(var(--width) * 12)),
linear-gradient(to left, var(--color2) calc(var(--width) * 11), var(--transparent) calc(var(--width) * 11)),
linear-gradient(to top, var(--color2) calc(var(--width) * 11), var(--transparent) calc(var(--width) * 11)),
linear-gradient(to right, var(--color2) calc(var(--width) * 12), var(--transparent) calc(var(--width) * 12)),
linear-gradient(to bottom, var(--color1) calc(var(--width) * 13), var(--transparent) calc(var(--width) * 13)),
linear-gradient(to left, var(--color1) calc(var(--width) * 12), var(--transparent) calc(var(--width) * 12)),
linear-gradient(to top, var(--color1) calc(var(--width) * 12), var(--transparent) calc(var(--width) * 12)),
linear-gradient(to right, var(--color1) calc(var(--width) * 13), var(--transparent) calc(var(--width) * 13)),
linear-gradient(to bottom, var(--color2) calc(var(--width) * 14), var(--transparent) calc(var(--width) * 14)),
linear-gradient(to left, var(--color2) calc(var(--width) * 13), var(--transparent) calc(var(--width) * 13)),
linear-gradient(to top, var(--color2) calc(var(--width) * 13), var(--transparent) calc(var(--width) * 13)),
linear-gradient(to right, var(--color2) calc(var(--width) * 14), var(--transparent) calc(var(--width) * 14)),
linear-gradient(to bottom, var(--color3) calc(var(--width) * 15), var(--transparent) calc(var(--width) * 15)),
linear-gradient(to left, var(--color3) calc(var(--width) * 14), var(--transparent) calc(var(--width) * 14)),
linear-gradient(to top, var(--color3) calc(var(--width) * 14), var(--transparent) calc(var(--width) * 14)),
linear-gradient(to right, var(--color3) calc(var(--width) * 15), var(--transparent) calc(var(--width) * 15)),
linear-gradient(to bottom, var(--color2) calc(var(--width) * 16), var(--transparent) calc(var(--width) * 16)),
linear-gradient(to left, var(--color2) calc(var(--width) * 15), var(--transparent) calc(var(--width) * 15)),
linear-gradient(to top, var(--color2) calc(var(--width) * 15), var(--transparent) calc(var(--width) * 15)),
linear-gradient(to right, var(--color2) calc(var(--width) * 16), var(--transparent) calc(var(--width) * 16)),
linear-gradient(to bottom, var(--color1) calc(var(--width) * 17), var(--transparent) calc(var(--width) * 17)),
linear-gradient(to left, var(--color1) calc(var(--width) * 17), var(--transparent) calc(var(--width) * 17));
}
edit example of 2nd code sample with custom properties:
body {
--width: 5px;
--backgroundSize: calc(var(--width) * 33);
--color1: teal;
--color2: black;
--color3: orange;
--transparent: rgba(255, 255, 255, 0);
background-size: var(--backgroundSize) var(--backgroundSize);
background-image:
linear-gradient(var(--color1) var(--width), var(--transparent) var(--width)),
linear-gradient(90deg, var(--color1) var(--width), var(--transparent) var(--width)),
linear-gradient(var(--color2) calc(var(--width) * 2), var(--transparent) calc(var(--width) * 2) calc(var(--width) * 32), var(--color2) calc(var(--width) * 32)),
linear-gradient(90deg, var(--color2) calc(var(--width) * 2), var(--transparent) calc(var(--width) * 2) calc(var(--width) * 32), var(--color2) calc(var(--width) * 32)),
linear-gradient(var(--color3) calc(var(--width) * 3), var(--transparent) calc(var(--width) * 3) calc(var(--width) * 31), var(--color3) calc(var(--width) * 31)),
linear-gradient(90deg, var(--color3) calc(var(--width) * 3), var(--transparent) calc(var(--width) * 3) calc(var(--width) * 31), var(--color3) calc(var(--width) * 31)),
linear-gradient(var(--color2) calc(var(--width) * 4), var(--transparent) calc(var(--width) * 4) calc(var(--width) * 30), var(--color2) calc(var(--width) * 30)),
linear-gradient(90deg, var(--color2) calc(var(--width) * 4), var(--transparent) calc(var(--width) * 4) calc(var(--width) * 30), var(--color2) calc(var(--width) * 30)),
linear-gradient(var(--color1) calc(var(--width) * 5), var(--transparent) calc(var(--width) * 5) calc(var(--width) * 29), var(--color1) calc(var(--width) * 29)),
linear-gradient(90deg, var(--color1) calc(var(--width) * 5), var(--transparent) calc(var(--width) * 5) calc(var(--width) * 29), var(--color1) calc(var(--width) * 29)),
linear-gradient(var(--color2) calc(var(--width) * 6), var(--transparent) calc(var(--width) * 6) calc(var(--width) * 28), var(--color2) calc(var(--width) * 28)),
linear-gradient(90deg, var(--color2) calc(var(--width) * 6), var(--transparent) calc(var(--width) * 6) calc(var(--width) * 28), var(--color2) calc(var(--width) * 28)),
linear-gradient(var(--color3) calc(var(--width) * 7), var(--transparent) calc(var(--width) * 7) calc(var(--width) * 27), var(--color3) calc(var(--width) * 27)),
linear-gradient(90deg, var(--color3) calc(var(--width) * 7), var(--transparent) calc(var(--width) * 7) calc(var(--width) * 27), var(--color3) calc(var(--width) * 27)),
linear-gradient(var(--color2) calc(var(--width) * 8), var(--transparent) calc(var(--width) * 8) calc(var(--width) * 26), var(--color2) calc(var(--width) * 26)),
linear-gradient(90deg, var(--color2) calc(var(--width) * 8), var(--transparent) calc(var(--width) * 8) calc(var(--width) * 26), var(--color2) calc(var(--width) * 26)),
linear-gradient(var(--color1) calc(var(--width) * 9), var(--transparent) calc(var(--width) * 9) calc(var(--width) * 25), var(--color1) calc(var(--width) * 25)),
linear-gradient(90deg, var(--color1) calc(var(--width) * 9), var(--transparent) calc(var(--width) * 9) calc(var(--width) * 25), var(--color1) calc(var(--width) * 25)),
linear-gradient(var(--color2) calc(var(--width) * 10), var(--transparent) calc(var(--width) * 10) calc(var(--width) * 24), var(--color2) calc(var(--width) * 24)),
linear-gradient(90deg, var(--color2) calc(var(--width) * 10), var(--transparent) calc(var(--width) * 10) calc(var(--width) * 24), var(--color2) calc(var(--width) * 24)),
linear-gradient(var(--color3) calc(var(--width) * 11), var(--transparent) calc(var(--width) * 11) calc(var(--width) * 23), var(--color3) calc(var(--width) * 23)),
linear-gradient(90deg, var(--color3) calc(var(--width) * 11), var(--transparent) calc(var(--width) * 11) calc(var(--width) * 23), var(--color3) calc(var(--width) * 23)),
linear-gradient(var(--color2) calc(var(--width) * 12), var(--transparent) calc(var(--width) * 12) calc(var(--width) * 22), var(--color2) calc(var(--width) * 22)),
linear-gradient(90deg, var(--color2) calc(var(--width) * 12), var(--transparent) calc(var(--width) * 12) calc(var(--width) * 22), var(--color2) calc(var(--width) * 22)),
linear-gradient(var(--color1) calc(var(--width) * 13), var(--transparent) calc(var(--width) * 13) calc(var(--width) * 21), var(--color1) calc(var(--width) * 21)),
linear-gradient(90deg, var(--color1) calc(var(--width) * 13), var(--transparent) calc(var(--width) * 13) calc(var(--width) * 21), var(--color1) calc(var(--width) * 21)),
linear-gradient(var(--color2) calc(var(--width) * 14), var(--transparent) calc(var(--width) * 14) calc(var(--width) * 20), var(--color2) calc(var(--width) * 20)),
linear-gradient(90deg, var(--color2) calc(var(--width) * 14), var(--transparent) calc(var(--width) * 14) calc(var(--width) * 20), var(--color2) calc(var(--width) * 20)),
linear-gradient(var(--color3) calc(var(--width) * 15), var(--transparent) calc(var(--width) * 15) calc(var(--width) * 19), var(--color3) calc(var(--width) * 19)),
linear-gradient(90deg, var(--color3) calc(var(--width) * 15), var(--transparent) calc(var(--width) * 15) calc(var(--width) * 19), var(--color3) calc(var(--width) * 19)),
linear-gradient(var(--color2) calc(var(--width) * 16), var(--transparent) calc(var(--width) * 16) calc(var(--width) * 18), var(--color2) calc(var(--width) * 18)),
linear-gradient(90deg, var(--color2) calc(var(--width) * 16), var(--transparent) calc(var(--width) * 16) calc(var(--width) * 18), var(--color2) calc(var(--width) * 18)),
linear-gradient(var(--color1), var(--color1));
}

Radial gradient in CSS

Can somebody tell me how I configure radial gradient in CSS to exactly look like the following background.

CSS code from gradientfinder:
body {
background: -webkit-linear-gradient(left, rgb(20, 17, 25) 0%, rgb(69, 61, 52) 80%, rgb(57, 50, 45) 100%);
background: -o-linear-gradient(left, rgb(20, 17, 25) 0%, rgb(69, 61, 52) 80%, rgb(57, 50, 45) 100%);
background: -ms-linear-gradient(left, rgb(20, 17, 25) 0%, rgb(69, 61, 52) 80%, rgb(57, 50, 45) 100%);
background: -moz-linear-gradient(left, rgb(20, 17, 25) 0%, rgb(69, 61, 52) 80%, rgb(57, 50, 45) 100%);
background: linear-gradient(to right, rgb(20, 17, 25) 0%, rgb(69, 61, 52) 80%, rgb(57, 50, 45) 100%);
}

How do I style a different border?

how can I style a border differently then solid/dotted etc.?
I do have a zigzag-line as a border-top and of course I can display it as a graphic-file within the background, but is there a different (more modern) way to achieve that?
I am asking this specifically for a zigzag-line for one border (border-top) AND for any other scenario, where a different looking border shall be used (rotated solid borders....)
How would I do something like this?
::before
css-shapes
still with graphic-files
It should work down to IE9
Thanks

try this codePen example:
http://codepen.io/pouretrebelle/pen/hypGk
.bordered {
background-color: #efe6ef;
position: relative;
margin: 100px auto;
height: 5em;
width: 25em;
}
.bordered:before, .bordered:after {
content: '';
position: absolute;
background-repeat: repeat;
z-index: -1;
}
.bordered:before {
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iI2I2YjVlYiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2I2YjVlYiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuMCIgeDI9IjAuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iI2I2YjVlYiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2I2YjVlYiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iI2I2YjVlYiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2I2YjVlYiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjEuMCIgeDI9IjAuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iI2I2YjVlYiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2I2YjVlYiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background: -moz-linear-gradient(315deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 75%, #b6b5eb 75%, #b6b5eb), -moz-linear-gradient(225deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 75%, #b6b5eb 75%, #b6b5eb), -moz-linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 75%, #b6b5eb 75%, #b6b5eb), -moz-linear-gradient(135deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 75%, #b6b5eb 75%, #b6b5eb);
background: -webkit-linear-gradient(315deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 75%, #b6b5eb 75%, #b6b5eb), -webkit-linear-gradient(225deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 75%, #b6b5eb 75%, #b6b5eb), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 75%, #b6b5eb 75%, #b6b5eb), -webkit-linear-gradient(135deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 75%, #b6b5eb 75%, #b6b5eb);
background: linear-gradient(135deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 75%, #b6b5eb 75%, #b6b5eb), linear-gradient(225deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 75%, #b6b5eb 75%, #b6b5eb), linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 75%, #b6b5eb 75%, #b6b5eb), linear-gradient(315deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 75%, #b6b5eb 75%, #b6b5eb);
background-position: 0.5em 0.5em, 0.5em 0.5em, 0 0.5em, 0 0.5em;
background-size: 1em 1em;
left: 0;
top: -1em;
height: 7em;
width: 100%;
}
.bordered:after {
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iI2I2YjVlYiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2I2YjVlYiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjEuMCIgeDI9IjAuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iI2I2YjVlYiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2I2YjVlYiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuMCIgeDI9IjAuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iI2I2YjVlYiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2I2YjVlYiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iI2I2YjVlYiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2I2YjVlYiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background: -moz-linear-gradient(315deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 75%, #b6b5eb 75%, #b6b5eb), -moz-linear-gradient(135deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 75%, #b6b5eb 75%, #b6b5eb), -moz-linear-gradient(225deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 75%, #b6b5eb 75%, #b6b5eb), -moz-linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 75%, #b6b5eb 75%, #b6b5eb);
background: -webkit-linear-gradient(315deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 75%, #b6b5eb 75%, #b6b5eb), -webkit-linear-gradient(135deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 75%, #b6b5eb 75%, #b6b5eb), -webkit-linear-gradient(225deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 75%, #b6b5eb 75%, #b6b5eb), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 75%, #b6b5eb 75%, #b6b5eb);
background: linear-gradient(135deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 75%, #b6b5eb 75%, #b6b5eb), linear-gradient(315deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 75%, #b6b5eb 75%, #b6b5eb), linear-gradient(225deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 75%, #b6b5eb 75%, #b6b5eb), linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 75%, #b6b5eb 75%, #b6b5eb);
background-position: 0.5em 0.5em, 0.5em 0em, 0.5em 0, 0.5em 0.5em;
background-size: 1em 1em;
left: -1em;
top: 0;
height: 100%;
width: 27em;
}
h1 {
text-align: center;
line-height: 2.5em;
font-size: 2em;
font-family: Quando, serif;
font-weight: normal;
position: relative;
}
<div class="bordered">
<h1>CSS Zigzag Border</h1>
</div>

css3 - How to achieve shadow & then line?

I want above Hello shadow line should be shadow and then line ( I mean inverse of below line). Please help me how to achieve this.
.fusion-separator.sep-shadow {
height: 1px;
overflow: visible;
border: none;
background: none;
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(150, 150, 150, 0)), color-stop(15%, rgba(150, 150, 150, 0)), color-stop(50%, rgba(150, 150, 150, 0.65)), color-stop(85%, rgba(150, 150, 150, 0)), color-stop(100%, rgba(150, 150, 150, 0)));
background: -webkit-linear-gradient(left, rgba(150, 150, 150, 0) 0%, rgba(150, 150, 150, 0) 15%, rgba(150, 150, 150, 0.65) 50%, rgba(150, 150, 150, 0) 85%, rgba(150, 150, 150, 0) 100%);
background: -moz-linear-gradient(left, rgba(150, 150, 150, 0) 0%, rgba(150, 150, 150, 0) 15%, rgba(150, 150, 150, 0.65) 50%, rgba(150, 150, 150, 0) 85%, rgba(150, 150, 150, 0) 100%);
background: -ms-linear-gradient(left, rgba(150, 150, 150, 0) 0%, rgba(150, 150, 150, 0) 15%, rgba(150, 150, 150, 0.65) 50%, rgba(150, 150, 150, 0) 85%, rgba(150, 150, 150, 0) 100%);
background: -o-linear-gradient(left, rgba(150, 150, 150, 0) 0%, rgba(150, 150, 150, 0) 15%, rgba(150, 150, 150, 0.65) 50%, rgba(150, 150, 150, 0) 85%, rgba(150, 150, 150, 0) 100%);
background: linear-gradient(left, rgba(150, 150, 150, 0) 0%, rgba(150, 150, 150, 0) 15%, rgba(150, 150, 150, 0.65) 50%, rgba(150, 150, 150, 0) 85%, rgba(150, 150, 150, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#00000000',GradientType=1);
}
.fusion-separator.sep-shadow:after {
display: block;
margin-top: 10px;
height: 6px;
width: 100%;
content: '';
background: -webkit-radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.5) 0px, rgba(255, 255, 255, 0) 65%);
background: -moz-radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.5) 0px, rgba(255, 255, 255, 0) 80%);
background: -o-radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.5) 0px, rgba(255, 255, 255, 0) 80%);
background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.5) 0px, rgba(255, 255, 255, 0) 65%);
}
<div class="fusion-separator fusion-full-width-sep1 sep-shadow"></div>
<h1 style="text-align:center;">Hello</h1>
<div class="fusion-separator fusion-full-width-sep sep-shadow"></div>

Add this new class. I used CSS property transform to rotate the above div .fusion-full-width-sep1.
.fusion-full-width-sep1 {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
Fiddle: https://jsfiddle.net/9zvx8y75/

I did it by positioning the shadow as absolute and the sep-shadow as relative.
I also moved the margin to sep-shadow.
You can play with the top attribute of .fusion-separator.sep-shadow:after to move the shadow
.fusion-separator.sep-shadow {
position:relative;
margin-top: 10px;
height: 1px;
overflow: visible;
border: none;
background: none;
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(150, 150, 150, 0)), color-stop(15%, rgba(150, 150, 150, 0)), color-stop(50%, rgba(150, 150, 150, 0.65)), color-stop(85%, rgba(150, 150, 150, 0)), color-stop(100%, rgba(150, 150, 150, 0)));
background: -webkit-linear-gradient(left, rgba(150, 150, 150, 0) 0%, rgba(150, 150, 150, 0) 15%, rgba(150, 150, 150, 0.65) 50%, rgba(150, 150, 150, 0) 85%, rgba(150, 150, 150, 0) 100%);
background: -moz-linear-gradient(left, rgba(150, 150, 150, 0) 0%, rgba(150, 150, 150, 0) 15%, rgba(150, 150, 150, 0.65) 50%, rgba(150, 150, 150, 0) 85%, rgba(150, 150, 150, 0) 100%);
background: -ms-linear-gradient(left, rgba(150, 150, 150, 0) 0%, rgba(150, 150, 150, 0) 15%, rgba(150, 150, 150, 0.65) 50%, rgba(150, 150, 150, 0) 85%, rgba(150, 150, 150, 0) 100%);
background: -o-linear-gradient(left, rgba(150, 150, 150, 0) 0%, rgba(150, 150, 150, 0) 15%, rgba(150, 150, 150, 0.65) 50%, rgba(150, 150, 150, 0) 85%, rgba(150, 150, 150, 0) 100%);
background: linear-gradient(left, rgba(150, 150, 150, 0) 0%, rgba(150, 150, 150, 0) 15%, rgba(150, 150, 150, 0.65) 50%, rgba(150, 150, 150, 0) 85%, rgba(150, 150, 150, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#00000000',GradientType=1);
}
.fusion-separator.sep-shadow:after {
position: absolute;
top:-3px;
display: block;
height: 6px;
width: 100%;
content: '';
background: -webkit-radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.5) 0px, rgba(255, 255, 255, 0) 65%);
background: -moz-radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.5) 0px, rgba(255, 255, 255, 0) 80%);
background: -o-radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.5) 0px, rgba(255, 255, 255, 0) 80%);
background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.5) 0px, rgba(255, 255, 255, 0) 65%);
}
<div class="fusion-separator fusion-full-width-sep1 sep-shadow"></div>
<h1 style="text-align:center;">Hello</h1>
<div class="fusion-separator fusion-full-width-sep sep-shadow"></div>

Radio button Css Style

Below my radiobuttons I have something such as bottom padding, while I do not use any padding CSS statement
.radio-button {
-fx-font-family: "Arial";
-fx-font-size: 11;
/* -fx-text-fill: rgb(255, 255, 255, 0.4);*/
-fx-text-fill: lightgoldenrodyellow;
/* -fx-effect: dropshadow(one-pass-box , rgba(0, 0, 0, 0.6), 0, 0.0 , 0 , 1 );*/
-fx-border-width: 0px;
}
How to remove this? the radiobuttons seems not well centered.
Edit:
This is the hierarchy to show parents for radiobuttons
This is the visual appearance
And here the full CSS class
/*
Created on : 20-gen-2014, 18.18.13
Author : Alberto Pedroni <acepsut#gmail.com>
*/
.pane {
/*-fx-background-color: linear-gradient( #f0f8ff, #b0c4de);*/
//-fx-background-color: linear-gradient( cornsilk, tan);
/*-fx-background-radius: 5,4,3,5;
-fx-background-insets: 4,4,4,4;*/
}
.tab {
/* -fx-background-color: red; */
/* -fx-border-color: gray;
-fx-border-radius: 4;
-fx-border-width: 1;*/
/* -fx-background-color: linear-gradient(rgb(109,109,109), rgb(70,70,70)); */
/* -fx-border-color: red;
-fx-border-radius: 4;
-fx-border-width: 1;*/
}
.tab-label {
-fx-font-size: 12px;
-fx-font-weight: bold;
-fx-text-fill: #333333;
-fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );
-fx-background-color: linear-gradient(aliceblue, lightslategray);
}
.label {
-fx-font-family: "Arial";
-fx-font-size: 11;
/* -fx-text-fill: rgb(255, 255, 255, 0.4);*/
-fx-text-fill: lightgoldenrodyellow;
/* -fx-effect: dropshadow( one-pass-box , rgb(0, 0, 0, 0.6), 0, 0.0 , 0 , 1 );*/
/* -fx-text-fill: lightyellow;
-fx-font-size: 12px;
-fx-font-weight: bold;*/
/* -fx-effect: innershadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );*/
}
.label > .tool-bar {
-fx-font-family: "Arial";
-fx-font-size: 11;
/* -fx-text-fill: rgb(255, 255, 255, 0.4);*/
-fx-text-fill: black;
/* -fx-effect: dropshadow( one-pass-box , rgb(0, 0, 0, 0.6), 0, 0.0 , 0 , 1 );*/
/* -fx-text-fill: lightyellow;
-fx-font-size: 12px;
-fx-font-weight: bold;*/
/* -fx-effect: innershadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );*/
}
.button .text {
-fx-effect: dropshadow(one-pass-box , rgba(0, 0, 0, 0.8), 0, 0.0 , 0 , -1 );
}
.button {
-fx-background-color: rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.8),#090a0c,
linear-gradient(#4a5661 0%, #1f2429 20%, #1f242a 100%), linear-gradient(#242a2e, #23282e),
radial-gradient(center 50% 0%, radius 100%, rgba(135,142,148,0.9), rgba(255,255,255,0));
-fx-background-radius: 7, 6, 5, 4, 3, 5;
/* -fx-background-insets: -3 -3 -4 -3, -3, 0, 1, 2, 0;*/
-fx-font-family: "Arial";
-fx-text-fill: white;
-fx-font-size: 12;
-fx-text-fill: linear-gradient(white, #d0d0d0);
/* -fx-padding: 10 20 10 20;*/
}
.button-plot {
-fx-text-fill: red;
}
.button:focused, .button:hover {
-fx-background-color:
rgba(255, 255, 255, 0.08),
rgba(0, 0, 0, 0.8),
#090a0c,
linear-gradient(#4a5661 0%, #1f2429 20%, #1f242a 100%),
linear-gradient(#3f4950, #23282e),
radial-gradient(center 50% 0%, radius 100%, rgba(135,142,148,0.9),
rgba(255,255,255,0));
}
.text-field, .text-area {
-fx-font-size: 12;
-fx-background-color: rgba(255, 255, 255, 0.3), linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8) 50%), rgb(218, 226, 224);
-fx-background-insets: 0 0 -1 0, 0, 1.5;
-fx-background-radius: 6, 5, 4;
-fx-padding: 6 10 4 10;
-fx-effect: innershadow( gaussian, rgba(0, 0, 0, 0.8), 5, 0, 0, 2 );
-fx-font-family: "Arial";
}
.text-area {
-fx-padding: 6 5 6 5;
}
.text-field:focused, .text-area:focused {
-fx-background-color:
rgb(235, 235, 235),
rgb(0, 0, 0),
rgb(255, 255, 255);
}
.check-box {
-fx-font-family: "Arial";
-fx-font-size: 11;
/* -fx-text-fill: rgb(255, 255, 255, 0.4);*/
-fx-text-fill: lightgoldenrodyellow;
-fx-effect: dropshadow( one-pass-box , rgba(0, 0, 0, 0.6), 0, 0.0 , 0 , 1 );
}
.combo-box, .choice-box {
-fx-font-size: 11;
-fx-background-color: rgba(255, 255, 255, 0.3), linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8) 50%), rgb(218, 226, 224);
-fx-background-insets: 0 0 -1 0, 0, 1.5;
-fx-background-radius: 6, 5, 4;
/* -fx-padding: 6 10 4 10;*/
-fx-effect: innershadow( gaussian, rgba(0, 0, 0, 0.8), 5, 0, 0, 2 );
-fx-font-family: "Arial";
-fx-text-fill: black;
}
.radio-button {
-fx-font-family: "Arial";
-fx-font-size: 11;
/* -fx-text-fill: rgb(255, 255, 255, 0.4);*/
-fx-text-fill: lightgoldenrodyellow;
/* -fx-effect: dropshadow(one-pass-box , rgba(0, 0, 0, 0.6), 0, 0.0 , 0 , 1 );*/
}
.tool-bar{
-fx-background-color: linear-gradient(aliceblue, lightslategray);
-fx-text-fill: black;
}
/*.titled-pane {
}*/
.titled-pane:focused {
-fx-text-fill: darkblue;
}
.titled-pane > .title {
-fx-background-color: linear-gradient(aliceblue, lightslategray);
-fx-background-insets: 0, 1, 2;
-fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;
-fx-padding: 0.166667em 0.833333em 0.25em 0.833333em; /* 2 10 3 10 */
}
/*.titled-pane:focused > .title
{
-fx-color: -fx-focus-color;
}*/
/*.titled-pane > .title > .arrow-button
{
-fx-background-color: null;
-fx-background-insets: 0;
-fx-background-radius: 0;
-fx-padding: 0.0em 0.25em 0.0em 0.0em; 0 3 0 0
}*/
/*.titled-pane > .title > .arrow-button .arrow
{
-fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-fx-background-insets: 1 0 -1 0, 0;
-fx-padding: 0.25em 0.3125em 0.25em 0.3125em; 3 3.75 3 3.75
-fx-shape: "M 0 0 h 7 l -3.5 4 z";
}*/
/*.titled-pane:collapsed > .title > .arrow-button .arrow
{
-fx-rotate: -90;
}*/
.titled-pane > *.content {
/* -fx-background-color: linear-gradient(rgb(87, 87, 87), rgb(27, 27, 27));*/
/* -fx-background-color: linear-gradient(from 0% 0% to 0% 100%, rgb(102, 102, 102) 0%, rgb(0, 0, 0) 21%, rgb(102, 102, 102) 47%, rgb(0, 0, 0) 99%, rgb(0, 0, 0) 100%);*/
/* -fx-background-color: linear-gradient(rgb(70,78,95), rgb(40, 40, 40));*/
-fx-background-image: url("file:///C:/Users/utente/Desktop/Java/NewProjectX/Backgrounds/CoarseGrid.png");
-fx-background-repeat: repeat;
-fx-background-color:
linear-gradient(#38424b 0%, #1f2429 20%, #191d22 100%),
linear-gradient(#20262b, #191d22),
radial-gradient(center 50% 0%, radius 100%, rgba(114,131,148,0.9), rgba(255,255,255,0));
/*-fx-background-color:
-fx-box-border,
linear-gradient(to bottom, derive(-fx-color,-02%), derive(-fx-color,65%) 12%, derive(-fx-color,23%) 88%, derive(-fx-color,50%) 99%, -fx-box-border);
-fx-background-insets: 0, 0 1 1 1;
-fx-padding: 0.167em;*/
}
.top-segment {
-fx-background-color: rgba(255, 255, 255, 0.05);
-fx-border-color:
transparent transparent rgba(255, 255, 255, 0.08) transparent,
transparent transparent rgba(0, 0, 0, 0.5) transparent;
-fx-border-width: 1, 1.5;
-fx-border-insets: -1, 0;
}
/*.titled-pane:focused > .title > .arrow-button .arrow
{
-fx-background-color: white;
}*/
.split-pane:horizontal > * > .split-pane-divider {
/* -fx-border-color: transparent; */
/* -fx-box-border: transparent #BBBBBB;*/
/* -fx-background-color: transparent, -fx-inner-border-horizontal;*/
/* -fx-background-color: grey;*/
-fx-border-width: 0.1;
/* -fx-background-insets: 0, 0 1 0 1;*/
}
.split-pane *.horizontal-grabber {
-fx-padding: 0;
-fx-background-color: transparent;
-fx-background-insets: 0;
-fx-shape: " ";
}

.radio-button .radio {
-fx-background-insets: 0;
}
This could help you.

Resources