I'm using feGaussianBlur on multiple spinning slotmachine reels to blur images. As the weels speed up, the stdDeviation is increased accordingly. This results in a very high CPU usage and laggs in the safari browser. Is there a way to improve performance? I read about css blur in some articles but they summarized, that the performance is the same.
Edit:
I tested css blur and the performance was even worse.
Blur, by its nature, produces partially transparent results. These need to be blended with the background. In the context of an animation, this can lead to high performance costs. I can see three ways to counteract this. They all aim at ensuring the browser does not need to compute a pixel-by-pixel blending operation but can simply copy image buffers into the area of the animation:
Use blur on elements that sit on a completely transparent background. That means, no colors at all in any background layer. Admitedly, this is not a very realistic scenario.
Make sure there is no partially transparent object on top of the animated object.
If it is not needed outside the opaque area of an object, restrict the blur filter region to the object area.
The third one sounds as if it could be applicable to your problem.
If the area that is blurred is rectangular, you could change the filter region itself. As a default, filters are computed for a region that goes 10% beyond the bounding box of the element it is applied to. To restrict this, set it differently:
<filter id="blur" x="0" y="0" width="100%" height="100%">
<feGaussianBlur stdDeviation="5" />
</filter>
But if your element has a different outline, you would have to set a clip-path to make sure the filter remains invisible outside.
Both approaches could probably benefit from setting the CSS property will-change: contents. But be sure to read the warnings about its usage: use it as a last resort, and use it sparingly.
Related
I'm trying to have a better render on my scene. So I added directional and ambiant lights. So Shadows are generated. Here's the
Result
I wonder if there is a way to have softer shadows.
The model has been created with Sweet Home : http://www.sweethome3d.com/
On the scene element, you could try to change the default type of the shadows:
<a-scene shadow="type: pcfsoft">
https://aframe.io/docs/0.8.0/components/shadow.html#scene_properties_type
Also worth experimenting with the properties on the light itself:
Adjust the shadow camera position and frustum (shadowCameraTop, shadowCameraRight, …) of the directional light, until it envelops the scene tightly. If the frustum is too small, shadows will be missing or partially clipped. If the frustum is too large, shadows will appear coarse or pixelated
https://aframe.io/docs/0.8.0/components/light.html#adding-real-time-shadows
https://aframe.io/docs/0.8.0/components/light.html#configuring-shadows
Turn up the ambient light to change the shadow color.
Play with light.shadowRadius property (currently master branch of A-Frame). And decrease shadow map resolution.
<a-scene shadow="type: pcfsoft">
I have an image. I have a second graphical element ontop of this image, whose alpha I want to use to "hide" parts of the image below it, while the top element itself isn't shown.
Something along the lines of
CanvasRenderingContext2D.globalCompositeOperation = "destination-out"
This top element will change transparency and shape live, so prerendering everything onto a seperate canvas won't be an option.
I was thinking of "multiply" but it didn't do what I expected it to. I thought if I put the alpha of the top layer to "0", that would be multiplied with the layer below, also making it transparent. (I was sad it didn't work)
Is there someway to "hack" this using the existing CSS blending modes (or any other method)?
As an alternative, consider mask-image (however, note that currently there's no support for this on IE / Edge):
img {
-webkit-mask-image: url(http://www.lordtennyson.ca/uploads/1/2/4/2/12421219/paw_print_small.png);
mask-image: url(http://www.lordtennyson.ca/uploads/1/2/4/2/12421219/paw_print_small.png);
}
<img src="http://www.dizzydi.com/uploads/6/5/6/5/65656887/6168555.jpg" />
I'm a newbie regarding canvas and I've searched and tried alot, but never accomplished to find the right solution to use this one: http://www.quasimondo.com/BoxBlurForCanvas/FastBlurDemo.html
I want to use it with a image for a fixed background, so I can put the same non-blurred image on top, while having a changeable page, that changes design when exchanging the image.
I know I'm able to use CSS3 Filters for this but it doesnt work on Firefox and the performance of such a blurred big image is terrible...
Thanks!
"I know I'm able to use CSS3 Filters for this but it doesnt work on Firefox ..."
Firefox can do CSS blurring:
First, include an SVG file containing the desired blur in the web page
<svg xmlns:svg="http://www.w3.org/2000/svg">
<filter id="gaussian">
<feGaussianBlur id="myBlur" stdDeviation="5" />
</filter>
</svg>
Next, get a reference to the canvas element in the normal way, eg:
var canvas = document.getElementById('myCanvas');
... and apply the filter to it:
canvas.style.webkitFilter = 'url(#gaussian)';
canvas.style.filter = 'url(#gaussian)';
To change the blur value, you need a handle to the gaussian blur element itself:
var blurFilter = document.getElementById('myBlur');
Use the setStdDeviation(stdDeviationX, stdDeviationY) method to change the blur. Both arguments are numbers, not strings:
blurFilter.setStdDeviation(5, 5);
(Seems to work OK in latest versions of Firefox and Chrome - though Chrome doesn't like it when the blur values are set to 0 ...)
Usless Background Info
Hello, all. This is my first post here, but I often come here for help.
I am an amateur web designer and have been in web designing for almost a year now.
The Problem
My question is about CSS3 transforms. I have a small, circular element in the center of my page that transforms successfully when I hover over it. I have a larger circular element that is, by z-index, underneath it. The larger circle also has CSS3 transforms coded in the CSS, but will not transform, or even triggerd when hovered over. Both circles are overlaid, with the smallest on top, to create concentric circles.
My Attempted Solution
One word: Z-index. I have tried putting the larger circle on top, which works fine. The problem with this is that the smaller circle no longer triggers...
The Result I Want
I would like for the circles to remain in their 'concentric' positions and for the larger circle on the outside to transform by :hover. Is it possible to have an 'alternate trigger'? e.g.: in JavaScript, I can trigger an animation by hovering over any element that I specify. Is this possible to do in CSS? Can I hover element (I), and change properties for element (II)? If I cannot do this, how would I go about triggering animations for both circles, by hovering over only one? I am trying to stay with pure CSS/HTML, but I will accept JavaScript answers.
Last Notes
I hope I have provided ample info for a decent answer... Here is a screenshot: http://i.stack.imgur.com/WPj62.png
The circle with the infinity sign is the smaller circle element. The larger circle with the faint border around the screen is the other element.
EDIT:
Something's still not right, please take a look at the full code posted here: http://cssdesk.com/eJ8BH
If I understand your question, it sounds like when you hover over the small circle, you want both the large and small circle to transform, correct?
The easiest way is likely to use javascript for this. If you are using jQuery, it's even easier:
$('.littleCircle')
.hover(function(){
$(this).addClass('myTransformationClass');
$('.biggerCircle').addClass('myTransformationClass');
})
UPDATE: Some further examples based on follow-up feedback.
Here's what I'd do. First, give all 4 related elements a class so you can grab them via jQuery. For the example I use .rolloverSet
// grab all 4 elements and cache them
$rolloverSet = $('.rolloverSet');
// grab the one element that needs to have two classes
$otherElement = $rolloverSet.find('.otherElement');
$rolloverSet
.hover(function(){ // we'll add a hover event to each element in the group
$(this).addClass('myTransformationClass');
$otherElement.addClass('myOtherTransformationClass');
})
.blur(function(){ // remove the classes on mousout
$(this).removeClass('myTransformationClass');
$otherElement.removeClass('myOtherTransformationClass');
})
You do not need jQuery for this. You need to apply :hover on the parent element of the concentric circles and then apply the animation to its immediate children like this: http://jsfiddle.net/nimbu/taqr4/
Things I changed:
Updated to use shorter transitions, animations property
Added moz, o, unprefixed properties
Removed -webkit- from border-radius
Gathered common properties of concentric circles to prevent repetition
Fixed incorrect background-color (#00000000)
i have some variables on PHP who gain values from 0 to 100. I want to develop a simple graph system that draw a horizontal rectangle given the number (0, 1 , 50 and soo). Also i want to add some gradient to the background, doing this in php is complicated and i dont want more load in my server, so i know this is possible in css, but im not a css developer. So if any body can help me with this. In this page (http://www.answerbag.com/) you can se how i want the rectangle, in the results of the pool section in the middle of the above page.
that's very simple since you know the width. Since you probably want the full spectrum of the gradient to show, you probably want to resize the gradient image by using a css #score1 { width: 30px } on that <img id="score1" src="blue_gradient.png"> Then later on, you can use one of the many rounder corner methods to add the round corners to it.