I have an SVG image inside my GWT application. For this I'm using lib-gwt-svg.
I can target elements by ids, add styles to them, no problem with that.
But I tried to animate using "skewX" and that is, what went wrong.
I have a barrier, that I want to open using that skewX property. I add the style, it animates to open. It also closes without problem. But when I change the presenter, and then return back to the SVG image, the barrier moves to different position. It can be fixed by closing and opening it again.
I tried using matrix, with the same result. I also found out, that it is caused by SVG elements using different coordinates for positioning. So when I apply CSS style (skewX), it uses CSS style for the SVG and it works correctly. But when I leave the presenter and return, those CSS styles are now handled like SVG styles, thus making the barrier display wrong. When I open or close the barrier, CSS styles are re-aplied and it is all ok again.
I tried some hacks, like re-apply styles when returning to SVG, but it makes no difference, as I'm adding the same style to the the SVG so it doesn't care. It only refreshes when I add diferent transformation, from the one already present.
I tried to work around this by using the "transform" attribute of SVG with calcutaion of the coordinates necessary for translate after skew. How to do that I found here: How to set transform origin in SVG
It works nicely, but there is no animation whe using this approach.
Any idea how to force SVG to refresh its styles? Only sollution I can think of is change its style from skewX(0.1) to skewX(0.11), which is different, so it refreshes, but when to apply it is also the question. Even when I apply it in Scheduler.get().scheduleDeffered, it doesn't work. If I apply it on button click, it works.
Related
I would like to have Google Material shadows on my SVG elements.
I am using Snap SVG and I have found a way to use shadow filters on my elements:
element.attr({
filter : s.filter(Snap.filter.shadow(0, 19, 38, 'black', 1))
});
What I can't find is the settings I have to input for each of the Material shadows.
What I tried:
I found several codepens such as this which have material shadows using CSS, and I tried to take the box-shadow settings from them and use the same settings, but mine just got much bigger.
From what I researched, box-shadow take the settings in pixels, and according to the Snap SVG docs, so does Snap SVG.
I can't seem to understand why both take the setting in pixels, but Snap SVG is just much more.
-- I also tried some trial and error, but I can't imagine how long it will take to find out all the different settings for all the different Material Shadows.
So to clarify things a little, what I really would like to know is the Snap SVG shadow filter setting, for each of the Google Material Shadow.
The reason is that I want a button that cycles between the shadows.
Thank you for your help.
EDIT
Actually, it looks like I was doing the opacity wrong.
My filter now resembles the Material shadow much better.
However, I notice that the codepens that use CSS for Material shadows use multiple box-shadows. How can I do that with Snap SVG? (Have multiple shadows)
SOLUTION
So what I did was to define a couple of defs in the SVG.
I found an SVG with Material Shadows which helped me define my defs for each level of shadow.
I then did as #Ian suggested and used the defs with Snap SVG.
I'm not quite sure from your description why you still can't use the css style you have found that you like. No reason you can't switch styles by toggling a button unless I'm misunderstanding something.
Its a bit fiddly doing complex filters in Snap, but if you find one just from regular svg markup, you can use it, by either 'parsing' the svg markup, or using some thats already existing in a defs statement for example.
E.g you could go to a page like this... filter codepen Grab the created markup, and then put it in a defs statement or parse('markup') it.
Then you can use it like...
element.attr({ filter: Snap('#myFilterId') });
eg jsfiddle created using the above codepen and just pasted into a 'defs' statement and used with above line.
i have an issue where im using css to make a div appear circular on screen but it only works if the background image property is set first
normally that wouldnt be an issue if the image wouldnt need to be dynamicly inserted using PHP code
i created 3 jsfiddles to document my problem
https://jsfiddle.net/2wr2wajw/
No issue, background set first
https://jsfiddle.net/zvq3r0pd/
Issue,background doesnt get resized properly
link3 jsfiddle.net/x8g05uph/
Same issue as above, i would have expected the style code to be executed first
SO, whats the issue and whats the solution? thank you
EDIT
Found out adding the additional styles in the html code works, but thats not very nice and unnecessary to rewrite css code for everyone tag
thats what class selectors are for right?
link4 jsfiddle.net/q7sdwbfk/
not nice
The reason your code is not showing up properly in each scenario is because you are using the background shorthand property, which in turn is overwriting previously set values.
For instance, in example 2, you are setting the background-size prior to setting the background shorthand. By setting the background shorthand, you are overwriting the background-size property.
If you don't want to load them in order so that they don't get overwritten, don't make use of the shorthand background. Instead, utilize background-image, background-repeat, etc. This sets each property individually and will not cause anything to be overwritten, unless the property is called explicitly again.
Here is the updated fiddle for your example 2, utilizing individual properties instead of shorthand.
Think I know the answer to this one, but just thought there may be some genius out there whos know of a way to do this...
Basically I am making a site editor kind of thing and it would be amazingly handy if I could replicate the way Firebug and the Chrome console highlights elements when you hover over their code in the html/elements tabs of those inspectors...
Its not something I can do with background effects because that does not highlight the whole Div (the contents show above the highlight) and I don't think there is anyway of making a div overlay over the top of all the content but have it not block mouseovers on underlying elements...
Anyone any ideas? Is there any browser specific code that achieves this kind of thing?
In general, Firefox extensions are mostly JavaScript. Since Firebug is BSD licensed, you can browse its source code on its project site. Maybe you'll find the relevant code and get an idea how to solve your specific task.
You could add an outline in CSS on mouseover - that would highlight the element without changing its position, as outline does not effect layout. A box-shadow would also work similarly.
In fact, it looks to me like Firebug adds a dark bluish box-shadow to elements to highlight them.
As a purely aesthetical design thing, I'm wondering if it's possible to have an element with a non-opaque background blur out the content behind it.
More specifically, when I have a modal box appear (as part of my custom alert/confirm/prompt setup), currently the background content is "faded" by having a mask over the screen the same colour as the document's background.
What I'd like to do is apply a small amount of blur (just a few pixels) to the masked content to further direct attention to the modal box.
Browser compatibility is not an issue, since as I mentioned it's purely aesthetical. Preferably I'd like it to work in IE9 as a minimum, and Chrome if possible.
Also, no jQuery. By all means, provide an answer in jQuery if you want, but I'll be translating it to raw JS before letting it near my site.
Nowadays you can use the backdrop-filter CSS Property.
CSS:
.modal {
backdrop-filter: blur(10px);
}
Not possible with pure CSS..
You could use (with its limitations) the html2canvas script to render the pages to a canvas.
Then blur that image or the part you want with http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
Use the toDataUrl to get the image and use it as a background to your popup...
It is quite an involved process and requires a lot of javascript, but i believe it to be the only way to do it...
This would require javascript (and fairly complex javascript).
From what I understand, it sounds like you're trying to create an 'Aero glass' effect where the content behind a semitransparent element is given a blurred effect. It is not possible with HTML and CSS alone (unless you consider using IE-only filters).
At the moment, there aren't any CSS properties that can dynamically apply image filters like you're describing.
The html2canvas solution presented by Gaby is potentially overkill. You can get the same effect with an iframe of the same website that has been blured (via filter blur or another technique - "-webkit-filter: blur(2px)" only works in chrome as far as I know.
This said, I'd say both solutions are really really hacky and I'd personally never use either myself. I tried this out just to see if it was possible at all out of curiosity.
See a (chrome only) example here: https://s3.amazonaws.com/blur-demo/index.html
I was thinking of using a css transition with a delay as sort of a small animated intro for a page the other day. Is css rendered immediately after its loaded (before the document if fully loaded/ready)? If so I suppose I could add the <link> tag after the document is ready for a similar effect.
On http://www.chapmansbuilding.co.uk/, I added a big white div with JS over the whole content, then did the animation, then removed the div. This meant that I could ensure the remaining content was rendered and preloaded etc at the same time.
Make sure you add it with JS, else the site won't be visible for a user without JS, or if your JS script fails for some reason.
As far as I can tell from the specs and other docs, the transitions are applied immediately when a computed value changes:
When the computed value of an
animatable property changes,
implementations must decide what
transitions to start based on the
values of the ‘transition-property’,
‘transition-duration’,
‘transition-timing-function’, and
‘transition-delay’ properties at the
time the animatable property would
first have its new computed value.
From here
So this happens with hover or focus or some other event.
If you wanted your transition to run on page load, you would need to use some javascript as shown here: https://developer.mozilla.org/en/css/css_transitions#Using_transition_events_to_animate_an_object
If you were worried about the transition happening too quickly, you could set a delay in the js.