I'd like to do a simple CSS keyframe animation in an SVG, an infinitely repeating 15-second slideshow-like presentation of three screens (let's call them #red, #yellow, #blue), each displaying for 5 seconds with roughly a 1-second fade between each. I can't quite figure out the technique/timing for this using keyframes and opacity, and I'm not finding anything this simple in reference websites or blog posts. Thank you for any and all help!
Figured it out:
#red{
animation: red-animate 20s ease infinite;
}
#yellow{
animation: yellow-animate 20s ease infinite;
}
#blue{
animation: blue-animate 20s ease infinite;
}
#keyframes red-animate {
0% {opacity: 1;}
28% {opacity: 1;}
33% {opacity: 0;}
94% {opacity: 0;}
100% {opacity: 1;}
}
#keyframes yellow-animate {
0% {opacity: 0;}
28% {opacity: 0;}
33% {opacity: 1;}
61% {opacity: 1;}
66% {opacity: 0;}
100% {opacity: 0}
}
#keyframes blue-animate {
0% {opacity: 0;}
61% {opacity: 0;}
66% {opacity: 1;}
94% {opacity: 1;}
100% {opacity: 0}
}
I would keep it simple, and do everything inside a single keyframe animation.
If I am using a framework like Angular, with a stateful animation, I could have three animations in sequence, however, in pure CSS I would use just one (especially to animate a single SVG since it's what you need).
A simple example, without opacity in between those steps and animating fill color (made it 5 seconds long instead of 60 seconds to avoid wasting people's time):
.rect {
fill: red;
animation: animate-color-and-opacity 5s ease infinite;
}
#keyframes animate-color-and-opacity {
0% {fill: red;}
33% {fill: blue;}
66% {fill: green;}
}
<svg width="400" height="110">
<rect class="rect" width="300" height="100" />
</svg>
If you need the fade effect in between (15 seconds long animation, this time):
.rect {
fill: red;
animation: animate-color-and-opacity 15s ease infinite;
}
#keyframes animate-color-and-opacity {
0% {fill: red; opacity: 1}
19% {opacity: 1}
29% {opacity: 0}
33% {fill: blue; opacity: 1}
52% {opacity: 1}
62% {opacity: 0}
66% {fill: green; opacity: 1}
86% {opacity: 1}
96% {opacity: 0}
}
<svg width="400" height="110">
<rect class="rect" width="300" height="100" />
</svg>
If you don't want the fill transition in between, you could use step-end:
.rect {
fill: red;
animation: animate-color-and-opacity 10s infinite step-end;
// or animation-timing-function: step-end;
}
#keyframes animate-color-and-opacity {
0% {fill: red; opacity: 1}
19% {opacity: 1}
29% {opacity: 0}
33% {fill: blue; opacity: 1}
52% {opacity: 1}
62% {opacity: 0}
66% {fill: green; opacity: 1}
86% {opacity: 1}
96% {opacity: 0}
}
<svg width="400" height="110">
<rect class="rect" width="300" height="100" />
</svg>
Is it possible to create a radial progress bar in XSL-fo using SVG or something else?
I have a task to generate a pdf document from an XSL that I write in xsl-fo. Our CSS specialist did the coding for it (but cannot help me with the pdf generation and xsl-fo), but not sure how I could recreate it in xsl-fo, so that the pdf document also has the correct progress bar with the achieved percentage.
This is what I should recreate:
Radial progress bar
Part of his CSS code is:
.progress-radial {
float: left;
margin-right: 30px;
position: relative;
width: 140px;
height: 140px;
border-radius: 50%;
border: 2px solid #aa94a8;
background-color: #5d2f5d
}
.progress-radial .overlay {
position: absolute;
width: 100px;
height: 100px;
background-color: #fff;
border-radius: 50%;
margin-left: 20px;
margin-top: 20px;
text-align: center;
line-height: 100px;
font-size: 32px;
color: #6c566a
}
.progress-0 {
background-image: linear-gradient(90deg, #aa94a8 50%, transparent 50%, transparent), linear-gradient(90deg, #5d2f5d 50%, #aa94a8 50%, #aa94a8)
}
.progress-1 {
background-image: linear-gradient(90deg, #aa94a8 50%, transparent 50%, transparent), linear-gradient(93.6deg, #5d2f5d 50%, #aa94a8 50%, #aa94a8)
}
.progress-2 {
background-image: linear-gradient(90deg, #aa94a8 50%, transparent 50%, transparent), linear-gradient(97.2deg, #5d2f5d 50%, #aa94a8 50%, #aa94a8)
}
Thank you
Here's some inspiration to run with. Given this XML:
<charts>
<chart percent="20"/>
<chart percent="40"/>
<chart percent="90"/>
</charts>
And using this simple XSL (I have eliminated all the XSL FO page stuff):
<xsl:template match="charts">
<xsl:apply-templates/>
</xsl:template>
<xsl:template match="chart">
<fo:block>
<fo:instream-foreign-object>
<xsl:call-template name="drawchart">
<xsl:with-param name="percent" select="#percent"/>
<xsl:with-param name="r" select="90"/>
</xsl:call-template>
</fo:instream-foreign-object>
</fo:block>
</xsl:template>
<xsl:template name="drawchart">
<xsl:param name="percent"/>
<xsl:param name="r"/>
<xsl:variable name="c" select="2*3.1415926*$r"/>
<xsl:variable name="pct" select="((100-number($percent)) div 100)*number($c)"/>
<svg id="svg" width="200" height="200" viewport="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle r="{$r}" cx="100" cy="100" fill="none" stroke="#666" stroke-width="1em" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
<circle id="bar" r="{$r}" cx="100" fill="none" cy="100" stroke="#FF9F1E;" stroke-width="1em" stroke-dasharray="565.48" style="stroke-dashoffset: {$pct}px;"></circle>
</svg>
</xsl:template>
You get this as output in PDF:
You can add the text (percent) inside the SVG, change colors, sizes and direction/start for the stroke as you like.
If you are using AH Formatter, then you can use linear-gradient(). See https://www.antennahouse.com/product/ahf64/ahf-ext.html#linear-gradient. Otherwise, you may be able to generate what you want as SVG inside an fo:instream-foreign-object.
So I am having a small problem which is pretty weird. I have styled my menu and menu bar of my undecorated application. If I hover a menu item in the context menu the menu will change it's background color to the default one of windows.
Pictures of the scenario (in the second picture, I am hovering the 'Models' menu item):
Does anyone knows how to fix the blue backgrounds? I want the menu to have my hover background like in the first picture. And the menu item should have its own background also and not jump to blue if I am not with my mouse on it.
CSS:
.menu-bar {
-fx-background-color: transparent;
}
.menu {
-fx-label-padding: 3px;
}
.menu .label, .menu-item .label {
-fx-text-fill: #eee;
}
.menu:hover, .menu:focused, .menu:pressed {
-fx-background-color: rgba(0, 0, 0, 0.2);
}
.menu-item:hover {
-fx-background-color: rgba(0, 0, 0, 0.4);
}
.context-menu {
-fx-background-color: rgba(0, 0, 0, 0.3);
}
Thank you in advance.
you are adding redundant layers of properties to .menuand menu-item. Trying taking care of the concerned properties only. For example in your case menu needs to follow your coloring pattern when either hovered or in showing event.
So add
.menu:hover, .menu:showing{
-fx-background-color: <preferred backgound>;
}
Similarly add only focused property to menu-item, because the rest it shares the context-menu backgound
.menu-item:focused{
-fx-background-color: <preferred background>;
}
Look at the snapshot of the simple demo:
add this to your css
.menu-item:focused {
-fx-background-color : <preferred color>;
}
you can use
.menu {
-fx-background-color: #FFFFFF;
}
.menu .label {
-fx-text-fill: black;
-fx-font-family: verdana;
-fx-font-size: 11.5px;
}
.menu:hover,
.menu:showing {
-fx-background-color: #CCE8FF;
-fx-text-fill: black;
}
.menu-item {
-fx-background-color: #F2F2F2;
-fx-text-fill: #000000;
-fx-font-family: verdana;
-fx-font-size: 11.4px;
}
.menu-item .label {
-fx-text-fill: #000000;
-fx-font-family: verdana;
}
.menu-item:focused .label {
-fx-text-fill: #000000;
-fx-font-family: verdana;
}
.menu-item:focused {
-fx-background: -fx-accent;
-fx-background-color: #91C9F7;
-fx-text-fill: #000000;
-fx-font-family: verdana;
}
.menu-item:disabled {
-fx-background: -fx-accent;
-fx-text-fill: #000000;
-fx-opacity: 0.9;
-fx-font-family: verdana;
}
.menu-item:focused:disabled {
-fx-background: -fx-accent;
-fx-background-color: lightgray;
-fx-text-fill: #000000;
-fx-font-family: verdana;
-fx-opacity: 0.9;
}
How do I change the color of an indeterminate progress bar in Material Design Lite?
I would like the bar to use the accent color I have chosen (pink) when I invoked
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
This is the line for the progress bar currently:
<div class="mdl-progress mdl-js-progress mdl-progress__indeterminate" style="width: 100%"></div>
I have tried adding mdl-color--pink-500 and mdl-color-text--pink-500 to the class, but to no avail.
Ran into the same problem. Apparently mdl-progress uses the theme color for display & there's no straight-forward way to change that. I ended up creating an additional class mdl-progress-red which I attach to the mdl-progress only so that I can set the color of the child elements. Below you have the CSS for red rgb(255,0,0). If you want to change the color, just replace rgb(255,0,0) with your desired color everywhere in the style below.
.mdl-progress-red > .progressbar {
background-color: rgb(255,0,0);
}
.mdl-progress-red > .bufferbar {
background-image: linear-gradient(to right, rgba(255,255,255, 0.7), rgba(255,255,255, 0.7)), linear-gradient(to right, rgb(255,0,0), rgb(255,0,0));
}
.mdl-progress-red > .auxbar {
background-image: linear-gradient(to right, rgba(255,255,255, 0.9), rgba(255,255,255, 0.9)), linear-gradient(to right, rgb(255,0,0), rgb(255,0,0));
}
And then, to apply the color to your progress bar - you just specify the new class name like so:
<div class="mdl-progress mdl-js-progress mdl-progress__indeterminate mdl-progress-red" style="width: 100%"></div>
I've also come across the same issue when trying out Material design. Marius is correct in stating:
Ran into the same problem. Apparently mdl-progress uses the theme color for display & there's no straight-forward way to change that.
I've tried his answer on codepen and it didn't work for me, but I've managed to get it working by adding !important to the CSS. See below, based on the Material progress bar example with a second -- custom coloured bar -- based on Marius' solution:
<html>
<head>
<!-- Material Design Lite -->
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Simple MDL Progress Bar -->
<div id="p1" class="mdl-progress mdl-js-progress"></div>
<br></br>
<div id="p2" class="mdl-progress mdl-js-progress mdl-progress-red"</div>
</body>
</html>
CSS
body {
padding: 20px;
background: #fafafa;
position: relative;
}
.mdl-progress-red > .bufferbar {
background-image: linear-gradient(to right, rgba(255,255,255, 0.7), rgba(255,255,255, 0.7)), linear-gradient(to right, rgb(255,0,0), rgb(255,0,0)) !important;
}
.mdl-progress-red > .auxbar {
background-image: linear-gradient(to right, rgba(255,255,255, 0.9), rgba(255,255,255, 0.9)), linear-gradient(to right, rgb(255,0,0), rgb(255,0,0)) !important;
}
.mdl-progress-red > .progressbar {
background-color: rgb(255,0,0) !important;
}
JS
document.querySelector('#p1').addEventListener('mdl-componentupgraded', function() {
this.MaterialProgress.setProgress(44);
});
document.querySelector('#p2').addEventListener('mdl-componentupgraded', function() {
this.MaterialProgress.setProgress(44);
});
this code create four progress bar with red, orange, yellow and green color
.mdl-progress-red > .bufferbar {
background-image: linear-gradient(to right, rgba(255,255,255, 0.7), rgba(255,255,255, 0.7)), linear-gradient(to right, rgb(255,0,0), rgb(255,0,0)) !important;
}
.mdl-progress-red > .auxbar {
background-image: linear-gradient(to right, rgba(255,255,255, 0.9), rgba(255,255,255, 0.9)), linear-gradient(to right, rgb(255,0,0), rgb(255,0,0)) !important;
}
.mdl-progress-red > .progressbar {
background-color: rgb(255,0,0) !important;
}
.mdl-progress-orange > .bufferbar {
background-image: linear-gradient(to right, rgba(255,227,199, 0.7), rgba(255,227,199, 0.7)), linear-gradient(to right, rgb(255,145,0), rgb(255,145,0)) !important;
}
.mdl-progress-orange > .auxbar {
background-image: linear-gradient(to right, rgba(255,227,199, 0.9), rgba(255,227,199, 0.9)), linear-gradient(to right, rgb(255,145,0), rgb(255,145,0)) !important;
}
.mdl-progress-orange > .progressbar {
background-color: rgb(255,145,0) !important;
}
.mdl-progress-yellow > .bufferbar {
background-image: linear-gradient(to right, rgba(255,255,206, 0.7), rgba(255,255,206, 0.7)), linear-gradient(to right, rgb(240,220,0), rgb(240,220,0)) !important;
}
.mdl-progress-yellow > .auxbar {
background-image: linear-gradient(to right, rgba(255,255,206, 0.9), rgba(255,255,206, 0.9)), linear-gradient(to right, rgb(240,220,0), rgb(240,220,0)) !important;
}
.mdl-progress-yellow > .progressbar {
background-color: rgb(240,220,0) !important;
}
.mdl-progress-green > .bufferbar {
background-image: linear-gradient(to right, rgba(214,255,214, 0.7), rgba(214,255,214, 0.7)), linear-gradient(to right, rgb(0,153,0), rgb(0,153,0)) !important;
}
.mdl-progress-green > .auxbar {
background-image: linear-gradient(to right, rgba(214,255,214, 0.9), rgba(214,255,214, 0.9)), linear-gradient(to right, rgb(0,153,0), rgb(0,153,0)) !important;
}
.mdl-progress-green > .progressbar {
background-color: rgb(0,153,0) !important;
}
example four progress bar
<div id="p1" class="mdl-progress mdl-js-progress mdl-progress-red"></div>
<br/><br/>
<div id="p2" class="mdl-progress mdl-js-progress mdl-progress-orange"></div>
<br/><br/>
<div id="p3" class="mdl-progress mdl-js-progress mdl-progress-yellow"></div>
<br/><br/>
<div id="p4" class="mdl-progress mdl-js-progress mdl-progress-green"></div>
<script>
document.querySelector('#p1').addEventListener('mdl-componentupgraded', function() {
this.MaterialProgress.setProgress(44);
});
document.querySelector('#p2').addEventListener('mdl-componentupgraded', function() {
this.MaterialProgress.setProgress(44);
});
document.querySelector('#p3').addEventListener('mdl-componentupgraded', function() {
this.MaterialProgress.setProgress(44);
});
document.querySelector('#p4').addEventListener('mdl-componentupgraded', function() {
this.MaterialProgress.setProgress(44);
});
</script>
I know about fegaussianblur and its effects, but that doesn't seem to help me with this. I found the code below from here, and that works great in CSS, but is this type of thing possible in SVG, without path or CSS at all?
h1 {
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-size: 50px;
padding: 80px 50px;
text-align: center;
text-transform: uppercase;
text-rendering: optimizeLegibility;
color: #131313;
background-color: #e7e5e4;
letter-spacing: .15em;
/*Important Code Below*/
text-shadow:
1px -1px #767676,
-1px 2px #737272,
-2px 4px #767474,
-3px 6px #787777,
-4px 8px #7b7a7a,
-5px 10px #7f7d7d,
-6px 12px #828181,
-7px 14px #868585,
-8px 16px #8b8a89,
-9px 18px #8f8e8d,
-10px 20px #949392,
-11px 22px #999897,
-12px 24px #9e9c9c,
-13px 26px #a3a1a1,
-14px 28px #a8a6a6,
-15px 30px #adabab,
-16px 32px #b2b1b0,
-17px 34px #b7b6b5,
-18px 36px #bcbbba,
-19px 38px #c1bfbf,
-20px 40px #c6c4c4,
-21px 42px #cbc9c8,
-22px 44px #cfcdcd,
-23px 46px #d4d2d1,
-24px 48px #d8d6d5,
-25px 50px #dbdad9,
-26px 52px #dfdddc,
-27px 54px #e2e0df,
-28px 56px #e4e3e2;
}
<h1>Shadow Effect</h1>