I am using html5 and am trying to create a rough edged seamless border(top, sides + bottom).
I am aware ie8 does not support the CSS3 border image. IE8 is as far back as am willing to cater for.
So am using 3 div's to have the background image display, the only problem is depending on the length of the content, the bottom background image does not align nicely and make the box appear seamless, due to the repeated middle image being cut off prior to the point where the border merges.
I have used a brush in photoshop to create the jagged container. I have had a nose around about this but can not find a solution to fit.
The solution is to set a specific increase of height increment for your content area. This can be done in a couple of ways:
If your content is mostly text, you can set your line-height and/or the height of any other used elements to be the desired increment (or a multiple thereof) and hope for the best.
If this will not work, the only other way would be to use JavaScript.
Here are a couple discussions of this very challenge, including some thoughts on using line height and some starts at workable JavaScript code:
http://doctype.com/any-way-increase-hieght-div-specific-increment
http://www.dynamicdrive.com/forums/showthread.php?t=64034
Related
I am using Sprite image for my project. Which one should we have to follow horizontal or vertical? I meant to say adding side by side(occupies more width ) or one bye one(occupies more height).
Is there any width/height limitation for adding images in sprite? Is there any loading concept included?
It doesnt matter if you use horizontal or vertical ones. Just dont make them too big. Mostly 1500x1500 is enought for one sprite - then change to another.
If you think about mobiles then try to not make sprites bigger than around 800x800.
For image type i would suggest png (if have full colors and transparency) if you use some popular graphic editors option to ,,save for web'' it will be even smaller that way.
Sprites are mostly used for lowering httprequests for images - if you use many small images its always good way to store them in one bigger (just dont forget to set cache headers) so all browsers will try to cache them (and mobiles at least for the session).
According to this article it depends.
One aspect to consider is how much memory the decoded sprite map image will use consume. Here's are guidelines for whether horizontal stacking or vertical stacking will be more optimal:
For all images in the sprite, find the width of the widest image and
the height of the tallest image.
If the largest width is greater than the largest height, then a
horizontal stacking will result in a more optimal sprite sheet.
Otherwise, vertical stacking is more optimal.
It then goes on to show examples of the same images in either a vertical or horizontal sprite along with their file sizes which is quite a surprising. It suggests using Google Chrome's Developer Tools "Native Memory Profiler".
Vertical Sprite
Horizontal Sprite
In this case the horizontal sprite is best.
While learning how to use css sprites, I quickly noticed and/or read that it is best to have 1 or 2 empty pixel space between all images inside a sprite to avoid other images bleeding through when the user zooms in or out.
While looking at the apple homepage, I noticed that they don't do this, without suffering from bleeding images. I did not find any reason in their css that would explain this.
How is that possible? ;)
There's no need for padding between sprites if you know exactly what size the containing element is going to be. The problem comes from when something inside the element causes it to grow. For example, if the text inside that element has to use a fall-back font it may end up causing the container to grow.
The reason padding between sprites is recommended is that there's no real downside to it. It doesn't increase the file size by any meaningful amount and it gives you a bit of a safety margin when a browser does something slightly different than you expect.
It seems like it is indeed necessary, because when the browser deems it necessary to scale the cropped areas (for example, if one zooms in or out or if an animation temporarily changes the size) the browser will use anti aliasing to smoothen the scaled image. Since anti aliasing uses surrounding pixels, the most outer pixels of a crop will be influenced by those that lie outside of the cropped area.
The transparent padding ensures that this doesn't happen since the transparent padding wouldn't affect the resulting color. Without padding, the cropped pictures would affect each other.
This can easily be tested by filling the (theoretically invisible) padding area with a color like magenta and then zoom in or out in one's page, all crops will have a bit of magenta on their edges.
Does anyone know of a method where I could have a CSS rollover image with a percentage width so that it scales with the size of the page?
I presume that I wouldnt be able to use the method shown here http://www.vision.to/css-only-single-image-fast-rollover.php because that sets the image sprite as the background image.
The only other CSS method I have seen was here: http://thefiles.macadamian.com/2008/06/pure-css-image-rollover-without.html
I like this method but was wondering if it were possible to use one image sprite as opposed to having to load the images separately.
Sorry if I sound very vague, whenever I read these questions I always think the people writing them dont describe what they mean properly and now I've come to do it I'm no better myself haha.
Thanks for any help :)
I don't see how you could do this with sprites. They're done by setting a large image as a background for an element, usually a DIV, and then altering the position so that only the desired portion of the image is shown. Different DIVs can show different parts of the image by altering the background image position.
However, you can't scale background images. They're always shown at 1:1. You can make them repeat within the element, or not, but you can't scale them, so the sprite idea is out.
Doing it with separate images is fairly straightforward, as indicated by the link you posted.
Preloading an image for rollover is pretty simple. Just include an image tag with the CSS set to hide the image:
<img src='myrolloverimage.jpg' style='visibility:hidden; display:none;' />
If you don't need to support IE8 and earlier, you could use the CSS3 background-size property with percentage values.
As with foreground images, a sprite file most likely wouldn't be a reasonable option. There are added complexities with sprite files when the image is scaled. The background-position is based on the scaled size of the image, and getting an accurate position using percentage values is problematic.
At work i am given a task to create a simple menu UI that resembels the Ribbon UI. It doesn't have to be that sophisticated or nice looking, but it needs to have a specific look that I don't know how to do.
I need to make the bottom of a selected tab round, but facing outwards, just like in Office. It was easy to make the top of a selected tab round using CSS3 (border-top-left-radius:4px and same for right), which is supported in all modern browsers (we don't need round corners on old browsers. They can easily upgrade if they want to :) ). But if I use border-bottom-left-radius:4px on a selected tab, it has the normal round bottom corner, facing inwards, not outwards (sorry for my bad english).
Can it be achieved somehow using CSS3?
If I understand correctly, than this is what you want: http://jsfiddle.net/U84ng/
This is faking a little, and gets more complex when your background is an image instead of solid color. But unless it's an image that changes horizontally (ie. not a gradient or pattern) and your tabs aren't flexible in width (depending on text width, rather than one fixed in css) it can be done.
I am trying to implement a fixed background for a website like one over here. Searching around for it told me that I can use background: fixed or background-attachment properties for this.
My problem is the image which will be used as background. I am thinking about following issues:
What should be image size?
how will it repeat when browser window size is very large? for big 27" monitors out there?
Can somebody guide me on these points?
Regards
Vikram
That is not a single background image. Its mostly a bgcolor, except for the side clouds. Using a single large image as a background will dramatically slow down your load time.
There's no specific guideline. You need to make the image as large as necessary to satisfy the requirements of the design. If you want someone with a maximized browser window on a 30-inch display to see a single unbroken non-repeating background image, then yes, you'll need quite a large image. It won't perform well.
The Twitter example is a wide but short image, set to repeat along its x-axis. It's wide at 2247 pixels, but perhaps unnecessarily so: it actually appears to be a fixed pattern that repeats horizontally four times within that 2247 pixel image. Nonetheless, you get the idea: make an image that blends gracefully into itself at its edges for seamless tiling, and/or blends into a fixed background color. Position and repeat it as needed, set the background-color of the page, and you're done.