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.
Related
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.
Some Context
I am playing around with Angular-material and trying to see how well it plays with bootstrap. The Angular-material start project shows off some of the cool things it can do, but it seems like it seems like Angular Material still requires a lot of custom CSS for my non-designer skills. Ergo, why I'm trying to see if it's a good idea to try to use bootstrap and angular-material together.
If this is a terrible idea, please let me know.
My Problem
The icons in the side panel of this codepen should be circles, but they are squares! I can see the border-radius property with Chrome debugger tools but I cannot figure out why it is not being honored.
To add to the mystery, when you click one of the items then all of the icons below that do in fact become circles for a moment.
Can someone with more CSS experience than myself tell me what's going on or how I might debug this more completely?
And any feedback about using angular-material + bootstrap together is also much appreciated.
I also experienced this problem using angular, where the border-radius is not honored, when trying to style an element that is part of a ng-repeat. I found that if you apply the style to the child element of the ng-repeat instead it will honor the border-radius property. This is more of a workaround than a solution, as I also don't understand why this happens.
So in your case you could do:
.avatar svg {
border-radius: 50%;
}
I am trying to use a CSS3 Border gradient property and using an example from css tricks. I can get it to work using their example but cant seem to get my colours in that i am after and i think it's syntax errors. Is someone able to let me know what i may be missing?
I am after a left and right border on a div with the gradient going from #d1d2cd to #e3e4df 5 pixels wide?
I have mocked up an example in js fiddle: http://jsfiddle.net/DqgPy/
Thanks
I'd recommend checking out a site like:
http://www.colorzilla.com/gradient-editor/
Play around with the gradient settings, and it will auto-generate the CSS you need (including support for older browsers). At the very least, the code provided might help you figure out any of your syntax errors.
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