I need to make an SVG that is to be used as a background-image with "cover", so the tile in the mosaic could be rescaled.
I'd like to have the icon at a fixed size and the posibility to always fill with a background color, because, to make matters more complicated, my image is going to be inside a container that is inside the tile
this is my example
my icon should go inside that red outlined box, fixed size and the background in gray
could i get that done?
Related
I have my my FabricJS canvas inside a container with a fixed height/width in pixels. On the side I have a dropdown to change the canvas size to various presets. What I would like to do is automatically zoom out whenever I select a size that is either taller and/or wider than the container. So for example, if my container div is 800x600 and I select a canvas size of 1024x768, I want to zoom out so that the entire canvas is still visible. Conversely, I'd like to zoom in up to 100% if I select a smaller size (e.g. 200x200).
I found this example of zooming, but no matter how much you zoom out, the canvas size appears to stay the same. See screenshot:
How can I accomplish this?
As you can see here, the area with the thin red border is the canvas container. The white box is the canvas.
You can use the canvas.setDimensions function to accomplish this. You pass two arguments to it; the first is an object specifying the height and width to change the canvas to and the second indicates whether to change the css, the actual size of the canvas, or both.
For example,canvas.setDimensions({width: 750, height: 750}, {backstoreOnly: true} will set the actual size of the canvas to be 750x750, regardless of the display.
canvas.setDimensions({width: '750px', height: '750px'}, {cssOnly: true}) will set the display size of the canvas to be 750x750, regardless of the actual size.
I'm not 100% sure whether the width or height require a px after it for css or for backstore, but that's a pretty simple thing to check. Also, if no argument is passed for the second parameter, it will change both.
I'm using svg as a background image (logo) in a WP menu plugin and i want it to change a color (fill) when hovered. As it's a free version of the plugin i can't use image, object etc - i have to use my svg as a background image. I've to support IE (9+) so masks/filters are out of question and i'm pretty much left with svg-sprites. That's okey, i know how to do it (using use/xlink:href).
But now comes a tricky part. I want my svg to change only fills of some groups/paths while hovered leaving others untouched. I can only change colors of all paths/groups together in a background image with svg-sprites afaik. Is there a way to do it? Thank you in advance!
I'm pretty new to Fireworks. I drew an orange rectangle and made it semi-transparent. My web page has a patterned background which I'd like to be able to see through my div, but I can't change the opacity of the div in CSS as the div contains other divs that also become transparent using this CSS when I don't want them to!
I've tried loads of things I found on Google but to no avail. Can anyone help?
If you want to know how to export the semi-transparent rectangle from Fireworks so it stays that way, just make sure your canvas color is set to none (the box with a red diagonal line through it) and then export it as a PNG-32.
I'm not sure I understood what you mean by DIVs becoming transparent when using CSS. Can you elaborate on that a bit?
I have some .bmp files that have some color (maybe black) that is supposed to show as transparent when the graphic is displayed on top a form, so the form color comes through the transparent areas. But by default, when I put these images in an Image View, the black/transparent areas show up as BLACK!
I'm thinking I need to either:
- alter how the NSImageView shows the image, so that a certain color is transparent, or
- modify the .bmp files somehow to make that color suitable for transparency in an NSImageView
But I don't know enough about graphics files, transparency(alpha), NSImageView, nor the image editing tools. I'm trying to use Gimp, but...not sure what I'm doing yet. It seems like there is already a color that should be transparent in the current .bmp file.
I'm sure its something simple for setting NSImageView, or editing my file, or perhaps making a mask for the image, but I don't know how yet. I've looked at various filters in IB for NSImageView, but have not found where to set the transparent color, nor how to grab that color from the image file to make sure I use the correct value.
Thanks in advance for any assistance. (I tried to post some images, but because I'm new, I could not.)
Beau
I'm not a Cocoa developer, but in Gimp try adding an alpha channel to your image (a layer mask, perhaps) then saving as a 32-bit PNG image (with an alpha channel), then load that PNG directly into your NSImageView. If you want to make the black pixels transparent in Gimp use the magic-wand tool to select them (use magic-wand with 0 tolerance) and just delete the contents of the selection then save as a PNG directly.
I'd like to improve upon jQuery's dialog code by using CSS-sprites, and thus also add animations of the dialog borders.
To do this, i'd like all the artwork to be in 1 png file, a css sprite.
My problem is that in order to support a dialog that maximizes to 2 or 3 monitors, i think i'd have to put 5000px wide / high border graphics in the css sprite file. Because i can't find a way to resize a selected portion of a css sprite image.
Basically i want to resize from the sprite image a region (t,l,w,h) to a DIV or IMG on my page with a different width and height.
I'd like to know, is this even possible? It seems background-position does not support this at all.
I've tried the first solution in How can I scale an image in a CSS sprite, but could not get it to work using that.
I've tried using the new background-size property in conjunction with background-position, but that also does not produce the results i want.
Spent another few hours twiddling with css, but could not get sprites to work for dialogs.
But my animated dialogs don't need many frames (not unless you want to put actual video as a dialog backdrop online), so for the dialog theme i'm designing now i have 8 312x312 png's as frames, 8 requests, 386kb total. Just enough to create a glowing animation for when the dialog is in a "highlighted" state. It's do-able.
I'm using the technique from How can I scale an image in a CSS sprite
See http://mediabeez.ws in about a month for the opensource release of animated dialogs.
I will be developing and testing this standalone component when it's used by my own homegrown CMS, so it will have the ability do be themed, dragged and dropped, things like that.