How do I blur an image in famous? A CSS equivalent of -webkit-filter: blur(5px);.
Bonus points for an example of how to do it within the famous/angular combination.
I was hoping for something like:
<fa-modifier fa-blur="5">
<fa-image-surface fa-image-url="coolimage.png" fa-size="[640,320]">
</fa-image-surface>
</fa-modifier>
After certain actions I'd love to be able to animate from blur to "un-blurred".
So far the only way I've found is to use css.
<fa-image-surface class="{{blurClass}}" fa-image-url="coolimage.png" fa-size="[640,320]" fa-click="imageClick()">
</fa-image-surface>
in controller
$scope.blurClass = "blur-in"; // start with no blur
$scope.imageClick = function() {
$scope.blurClass = "blur-out"; // animate to a blur
}
In .css
.blur-out {
-webkit-filter: blur(8px);
-webkit-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
}
.blur-in {
-webkit-filter: blur(0px);
-webkit-transition: all 0.1s ease-in;
transition: all 0.1s ease-in;
}
Use the fa-canvas-surface, draw an image to the canvas and then use one of the blur algorithms out there. I have seen layering issues with CSS filters and z transforms in some browsers, which prompted me to take the canvas approach. This StackBlur from Quasimondo looks way better than blur CSS filter.
Quasimondo's StackBlur http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
Related
I'm trying to scale an image with css transition upon clicking some text.
The checkmark image should animate out and in each time the link is clicked. In iPhone Chrome however the checkmark doesn't animate - simply jumps from one state to the other, seemingly ignoring the css {transition: transform 200ms}.
It seems to work everywhere except iPhone Chrome browser - I've gone through everything as best as I can but it's totally stumped me!
Codepen link: https://codepen.io/anon/pen/oqBJzr
CSS:
.checkmark {
width: 35px;
-webkit-transition: transform 200ms;
transition: all 200ms;
}
.checkmark.scale {
-webkit-transform: scale(3);
transform: scale(3);
}
JavaScript:
function checkMarkAnim() {
$('.checkmark').toggleClass('scale');
}
Any pointers on what has gone wrong would really help.
Thank you in advance
Update:
The suggestion to add -webkit-transition: -webkit-transform 200ms; does not seem to have resolved the problem (although I initially thought it had).
After a few days of searching what actually worked for me is just Chrome restart.
This is caused by a known issue in iOS.
For more information, see: https://bugs.webkit.org/show_bug.cgi?id=228333
and https://bugs.chromium.org/p/chromium/issues/detail?id=1231712
Please also add/keep -webkit-transition: transform 200ms;. So in the end you should have:
.checkmark {
width: 35px;
-webkit-transition: transform 200ms;
-webkit-transition: -webkit-transform 200ms
transition: all 200ms;
}
.checkmark.scale {
-webkit-transform: scale(3);
transform: scale(3);
}
See it here working with mobile chrome (iOS): https://codepen.io/miikaeru/pen/aMXYEb
I'm trying to change what I would call the footer background color where the google-visualization-table-page-numbers go. I would like the background color to extend the entire width of the table. I am hoping someone can help me find the correct solution.
since the chart uses a gradient, use css background to change to a solid color
.google-visualization-table-div-page {
background: magenta !important;
}
to keep the gradient and only change the color, use css background-color
.google-visualization-table-div-page {
background-color: magenta !important;
}
Say I have a button like this:
<button>Some Text</button>
And by default the stylesheet has the text as black.
I then have this css:
button {
transition: color 0.15s ease-out;
color: rgba(255,255,255,0.75);
}
button:hover {
transition: color 0.15s ease-out;
color: #fff;
}
The goal is to subtly fade from a grayish off-white, to white, on hover, and then back again to normal button appearance on hover off.
The problem is when i firstly load the page, the black initial color of button is overwritten by the transition that i applied on button, and one can briefly see black text fading to off-white.
How do I make it so that the initial state just loads without animation? Or more precisely, is there a way to achieve something like :hover-off to control the animation only when the hover state turns off?
Sorry i have less reputation to comment. Your animation does not work, please explain clearly what you want to do?
are you trying to achieve this.
button:hover {
transition: 0.5s ease-out;
color : white;
}
If you have to load some JavaScript, you can put it in the <head> after your CSS. Kind of a hack, but it works.
HTML parsing is blocked by <script> tags that initiate requests for external resources. I guess CSS animations won't start until the <body> has been fully parsed and that's the reason this works.
Whenever the orbit slider finishes loading, png images and the text appear to have black backgrounds instead of transparancy...
I have tried using !important tags by setting the background and the color properties, but to no avail. Image attached. Any help is appreciated!
In your orbit.css change this
#featured {
background: #000 url('orbit/loading.gif') no-repeat center center;
}
to this
#featured {
background: rgba(0,0,0,0) url('orbit/loading.gif') no-repeat center center;
}
I want an expandable tree in a table cell. I got that to work. While playing around with it, I tried to add a transitioned box shadow. That works only at the root level. (JsFiddle).
The problem may have something to do with transitions not working on display (link). But does a display change foul up all transitions, or am I missing something? (I only put in a webkit transition.)
Thanks.
Edit: This might be a possible workaround, since the transition effect isn't working.
Have you tried using keyframe animations? I did some changes in the code. Here's a demo (jsFiddle).
I changed:
/* This transition seems to have no effect. */
-webkit-transition: box-shadow 0.5s;
}
to:
/* This transition seems to have no effect. */
-webkit-animation: shadow 0.5s ease-in-out;
}
#-webkit-keyframes shadow {
0% { box-shadow: 0px 0px 0px #000; }
100% { box-shadow: 4px 4px 7px #000; }
}