I'd like to create a scale with stars\flowers\whatever that will enable me to graphically present a fraction, in case of average grade (say 4.35). Is there a way to partially fill an empty non-rectangular image using CSS?
TIA, Matanya
If you are okay with using a div instead of an img for the image, you could set the image as a background in the div element, and calculate the width of the div, depending on how much of the image you want to show.
The calculation would have to be done through JavaScript, or server-side and then added inline on the div element, though.
Related
Thanks in advance for any attempted help. Here's my goal.
Current Setup:
I have an image in a DIV that's basically a straight, vertical line. The site is done mainly with PHP.
Goal:
I want to animate either a horizontal line or other small image along the length of this vertical line based on percentage values I pass somewhere.
Possible Options:
- A transparent DIV on top of the DIV with the image that moves up and down based on a % of the height.
An image (line or icon) in an adjacent DIV that accomplishes the same movement based on percentage
If doing this via a percentage is not possible, I could possibly send information when specific points along this path are crossed and use that to update the horizontal line.
Concerns:
- If I can achieve this type of animation in a DIV where do I dynamicly pass the percentage information to in order for the DIV to move?
I'm assuming some solution involving jQuery/Ajax would be needed to update the percentage values so I might have to ask that in another question unless there's a simple method someone could outline.
A solution that works with a DIV whose height is either a percentage of the container or statically set in px would be ideal.
Thanks again for your help.
d -
Is the background-position css property used to indicated where in the element should the image be displayed (like this) or what part of the image should be displayed (like when using sprites) ?
In my instance i have a div of let's say 300px width, i want the image to be shown in the right part of that element so normally i just added a center right to my background declaration, though now my image is a spirit so how can i control the coordinate of the image that i want to display ?
Seems to me that this background property act in 2 different way.. Am i missing something ?
If the place where you want to put element of the sprite is larger then the element then you need to put white space (trasnparent) around it. And you can't use keywords like center, you need to use pixels, because you will center whole sprite and not your element.
Using sprites is like using window where background is larger then background image so you need to position the window (actually you position the background).
If your container is larger than the background sprite image part you want to display then the other part of image will also be displayed. Better use Sprite cow to generate sprite it will give you the css for different parts of sprite image
http://www.spritecow.com/
Good day, I have a DIV of fixed width and height on my HTML page. In normal state it should show image A on the background and in hover state it should show image B. I know how to do it using CSS and two image files A and B. Somewhere I saw those two images (A and B) put into a single image file and then they somehow wrote CSS so that in normal state the DIV showed upper half of the image on the background and in a hover state it showed the bottom half of the image. Could you please advise CSS code to achieve this? The DIV has no position set but it is a child of a DIV with relative position. Thank you in advance.
Vojtech
This is called CSS spriting and is an awesome technique that everyone should use.
See this answer for a good overview. What it comes down to is having a DOM element with a defined height and width and using a background image that is larger than that area. Then you can selectively show only portions of that background image using background-position
I need to create this layout and I'd like to do as much of it as possible with CSS, rather than using images and whatever.
As such, how can I do this in CSS? (if at all?)
As you can see, there is the image behind, with the button overlaid with padding. The bit that I'm struggling with is creating the curves on the IMAGE above and to the left of the button and bottom to the right of the button (I've pointed them out on the pic below).
Any help would be great.
Thanks
I know just enough CSS to be dangerous so I can't detail every step, but I think you can approach it like this:
Split the background image into two separate images both at a z-index of 0 at the height of the top of the grey box. I think you can use two div's that reference the same original image with different offsets (similar to CSS Sprites) but I don't know the details of how to do that. The left edge of the lower div would start where the grey box ends. Round the lower-left corner of each "image" div.
Add the grey box at a z-index of 1 with appropriate rounding, and then the blue box at a z-index of 2, again with appropriate rounding.
The background of the block element containing all of this would also have to be grey to match the grey border and properly fill in grey where your right-most arrow is pointing.
You don't have to split your image at all, only the container divs.
Let me detail a bit:
You can have your image set as a background image instead of putting it in a src attribute of an img tag. This technique is most commonly used when working with CSS sprites.
So, if you have you uppermost div at a constant width and height, if you try to apply the background image in it, you'll see it fits very nice.
On the bottom, you have two divs or whatever block element you'll like, just be sure to put fixed width and height, so the background will be applied and you will be able to actually see it.
Then all you have to do is fiddle with css background-position to adjust the SE chunk of image.
I'll be putting a small demo together to better illustrate the idea.
After you have a big div at the top, and two smaller at the bottom, where two of them share the same background-image, but with different background-position, you can safely add some css3 border-radius to fit your roundness needs. You can also use some tool like http://css3generator.com/ to add a compatibility layer on all browsers with ease.
That is very easy to realize with pure css. The page you have shown is divided into 3 divs without any margin. You only need to set the right border radius for each div.
This is a function of the background image, which is a css element if that's what you mean, but it is not a seperate attribute for a selector, at least not in standard CSS. Wait until CSS3 becomes more prevelant, then it's corner-radius or some such thing.
Well it's 3 probably 3 seperate divs, a hole "burned" into the background image, or a div being overlayed for the button.
The best way to figure out how it's done is to read the source of the page you found it on.
For convenience:
If you have a webkit based browser like chrome or safari then enable developper mode mouse over the button "right click" and choose inspect element. Otherwise you can pour over the page source until you find what you want.
What I'd like to do is something like:
<div> (parent, sized to img)
<div> (movable within parent, z-level 1+)
<img /> (z-level 0)
</div>
</div>
With these constraints:
The html img needs to be able to have its src (and size) changed from Javascript.
The top z-level div should be able to have its size changed from Javascript, also it follows the mouse (by javascript). I'd like to use relative positioning, so the coords match the img dimensions. Maybe absolute would use the parent dimensions? (same as img)
The outer div is just there so I can read mouse click positions from it. It should be able to have its sized changed to follow changes in the img src.
I have a use involving high and low res images of the same material. I'd like to show the low res image with a movable zoom box (transparent div with border), then when the user clicks it resizes the img object and outer div and loads the high res image, then scrolls the window to center the corresponding (scaled) spot on the high res image. There's no actual zoom, it just works that way by scrolling the high res.
I've got everything working except the zoom box: it loads the high res and scrolls ok on a click. To be able to set the z-index on the movable box higher than the img but still have the movable box layer use the same coordinates as the fixed div and the img is the problem. The box needs to float over the img. I'm not using the image as a background partly because I need to stretch it in y.
The site owner thought it might help to prevent theft of his images if he squashed them to a distorted aspect ratio. I calculate a height and force the img to use that, which makes them look better. Different images have different aspect ratios, which is why I want Javascript control over the size of the zoom box.
Using the :before and :after pseudo selectors new in CSS3, you can easily have 2 extra layers on the same object.
This is good for applying layers on the same object, as it means that you won't have to be messing about with having to float and adjust the margin of the original element and other such hassles.
http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
I guess you would like to take a look at several ways to protect Images, as per your last demands. here