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>
Related
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%);
}
I've created a gradient that has 11 hard stops, creating the illusion of 11 separate boxes.
As it stands now, there's a % of the width hard-coded into the linear gradient. I can't help but think there's a much more efficient way (via SCSS?) rather than coding this out as such:
.color-bar {
background: linear-gradient( to left,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0) 9.09%,
rgba(0, 0, 0, .1) 9.09%,
rgba(0, 0, 0, .1) 18.18%,
rgba(0, 0, 0, .2) 18.18%,
rgba(0, 0, 0, .2) 27.27%,
rgba(0, 0, 0, .3) 27.27%,
rgba(0, 0, 0, .3) 36.36%,
rgba(0, 0, 0, .4) 36.36%,
rgba(0, 0, 0, .4) 45.45%,
rgba(0, 0, 0, .5) 45.45%,
rgba(0, 0, 0, .5) 54.54%,
rgba(0, 0, 0, .6) 54.54%,
rgba(0, 0, 0, .6) 63.63%,
rgba(0, 0, 0, .7) 63.63%,
rgba(0, 0, 0, .7) 72.72%,
rgba(0, 0, 0, .8) 72.72%,
rgba(0, 0, 0, .8) 81.81%,
rgba(0, 0, 0, .9) 81.81%,
rgba(0, 0, 0, 1) 90.09%,
rgba(0, 0, 0, 1) 100%);
height: 50px;
width: 550px;
}
<div class="color-bar"></div>
Here's a rough Codepen in action.
Thanks for any input you can provide.
Took me a bit of fiddling, but here it is:
#function hard-stops($direction, $from, $to, $steps) {
$output: unquote("linear-gradient(") + $direction;
#for $i from 0 through $steps {
$output: $output + ', '
+ mix($from, $to, $i*100/$steps) + ' '
+ percentage($i/($steps+1)) + ', '
+ mix($from, $to, $i*100/$steps) + ' '
+ percentage(($i+1)/($steps+1));
}
$output: $output + ')';
#return $output;
}
.color-bar {
height: 50px;
width: 550px;
background: hard-stops(to left, rgba(0,0,0,1), rgba(0,0,0,0), 10);
}
jsFiddle.
The limitation is: one needs to pass mix-able colors (black, for example, is not, no idea why - I'm not much of an expert in sass).
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>
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.
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.