I want to use sprites for list background images. I have seen a few methods of doing this, but they all require set height and/or widths for each list item. The dimensions of each list item I have will be different so I can't set that.
Ideally, I want to be able to have a sprite image set up, then choose to display only part of it e.g. 50px by 50px in the top left corner, but I want the content of the list element to be able to be any height and width. I am also trying to ensure that the sprite image always remains centered in comparison to the list text next to it.
Any ideas?
Related
I want to make a controller button prompt in my game where it says 'Press X to Join', but I want the X to be an actual graphic of the 'X' button, like how it is in many games. How would I go about doing that? Right now I'm just putting a big space in my prompt text and putting a UI Image of the button in it, but I want to know if there's a better way about it.
For the sake of scaling to different resolution sizes, you would wanna scale the anchors of the UI elements correctly and have an appropriate parent-child relation tree in Unity's hierarchy.
The red box is the hierarchy.
The 2 green boxes shows ways of scaling the anchors.
The orange box shows the end result of it.
Anchors in combination with their relative position, allows Unity's UI elements to scale up and down according to screen size.
So for example if you say that an anchor is at 0.25x, that would be that its anchored at 25% of for example the x axis. Same goes if you set it for the y axis, just the vertical instead of horizontal anchoring.
You can use the anchors to adjust a minimum and a maximum anchor which the elements may float within, they may have the same value as well, then it's a fixed anchor point.
To clarify, I suggest that you use a panel to hold 2 text elements and the image with the X, each text element being on the left and right side of the X instead of having spacing inside the UI text elements. To keep correct spacing you then must use anchor points. This way your spacing stays correct despite changing screen and resolution sizes.
Please note that the "left", "top", "right" and "bottom" values are then relative to the anchor points. So if you move "left" 5 pixels, those 5 pixels will be out from the relative anchor point.
Here's the values I used:
My left text is at 0.25x, right text is at 0.8x, image is at 0.5x.
The panel holding the 3 is at 0.2 minimum x to 0.8 max x, same goes for y axis.
The largest parent panel is stretched to max fit in the canvas.
I want to position several images inside a div block. But div CSS properties not applied to image.I want image in round shape.
For round shape images, you have to use two images.
One is the original image,
and in the second image you should have the only shape area transparent.
Then put the second image on the top of your original one. You will see the result you want.
I'm adding borders to various images in a .pdf document. The borders all have the same width, but in the .pdf the borders have different widths. It is more pronounced as the width of the border increases.
Also, is there a way to move the border outside of the image, so that it is not covering any of the image using the methods of the image class? I realize I can first put a filled rectangle and then add the image on top of the rectangle as an option. Just curious as to if this can be done with methods from the Image class.
Here is the code snippet
magazine.open();
canvas = pdfw.getDirectContent();
image = Image.getInstance("a.JPG");
image.setBorder(Rectangle.BOX);
image.scaleAbsolute(200,200);
image.setBorderWidth(50);
image.setAbsolutePosition(50,10);
//canvas.addImage(image);
magazine.add(image);
image = Image.getInstance("b.jpg");
image.setBorder(Rectangle.BOX);
image.scaleAbsolute(200,200);
image.setBorderWidth(50);
image.setAbsolutePosition(50,230);
//canvas.addImage(image);
magazine.add(image);
I fear you'll have to work with the workaround you described.
There are two ways to define a border for an image:
image.setUseVariableBorders(false);
This is the default. This is what you have (even though you aren't calling the method explicitly).
In this case, the thickness of the border is distributed in a way that half of the line width is inside the rectangle and half of the line width is outside of the rectangle. Maybe that's what's causing the effect that the difference you notice is more pronounced as the border width increases.
Then there is:
image.setUseVariableBorders(true);
Now the borders will be drawn inside the area needed for the image. This is useful for tables (both PdfPCell and Image are subclasses of the Rectangle class where these methods are defined), but I fear it doesn't help you in the case of images.
So your best chance is to add the border using a workaround.
I want to show another image on hover and due to the layout of the homepage I need to use sprite to do it. I've got it working fine, but I'm using fixed width and height for the container.
You can see my JSFiddle here:
http://jsfiddle.net/mckeene/fhk0byqt/4/
The problem arises when I want to make it responsive. I can use max-width: 100%, but what about the height?
OK, this solution is based on the known fact that some properties like padding-top and margin-top, when given values in percentage, are calculated based on the width of an element rather than its height.
Making an element “as high” as required by the known dimensions of a responsive image can be done by using padding-top – I used a value of 66.54% here based on your image’s dimensions (half the image height divided by the width, times 100) to span the container element up to the required height.
Now normally to display the upper half of an image first, and then the second half on hover, I would use absolute positioning – but we can’t use top here, since a value in percentage for that property would be based on the height. But luckily, as already mentioned, margin-top is one of those properties where percentage is calculated based on the width – so we can use margin-top: -66.54% here to “pull” the image up over its container’s padding first to show its upper half, and then double that (margin-top: -133.1%) to pull it up even further on hover, to show its lower half.
I've been provided with 8 individual images (top left, top, top right etc) for a border around the main (fixed width) content box. If I was given a single image, I'd use border-image.
What's the best way to use the 8 images? Divs with absolute positioning? Or is it such a pain I should just combine them into one?
What's so hard about combining the images into one? It has numerous other advantages, like reducing the number of HTTP requests the client needs to make, for example.
An alternative is to use CSS3's multiple background image feature, where you'd set each image as a layer in your box.
Eric Myer used a technique whereby (just to explain technique) the image was a little circle. Then, that was the background graphic in four separate divs each abs positioned in the corners of a containing div w/relative position. Background position was changed for each and a regular border was used for the straight lines in effect getting rounded corners. The circle had to be filled with white or whatever bckgrnd color you used.
This way, one could expand. You still need to have the height expand should changes occur, right?
I'd make one for the top and bottom and a third that repeats on the Y for the middle, that way your box will expand if content is added. Height that is.