I've got a CodePen here where I'm trying to make my little 8-bit dude into CSS3.
On line 89, I start working on the beard. But it's not quite right.
It's currently repeating x and y, but it's making vertical stripes instead of the polka-dot effect I'm going for. If you uncomment line 98 (background-repeat:repeat-x;), then you'll see it has the right pattern, but then it doesn't repeat vertically (obviously) (I'd like the div to be any height and this would still work, ya know?). I want that pattern to repeat correctly in both directions. It seems to overlap or something when it has repeat or repeat-y turned on.
In the color-stops(), I originally used transparent instead of the $face color, but it made the whole thing red instead.
To know what I'm trying to achieve, please reference my Avatar on this site.
[edit] I think it's extra complicated because my pattern isn't a straight checkered pattern. Here's a close-up of the minimum pattern that repeats:
The problem is one of the backgrounds is completely covering the other. The others simply not being seen. I'll try and figure out how I'd do it.
Update
So.. it's not that easy. The only way I imagine as being possible to do is by using diagonal gradients as Lea Verou did here - http://lea.verou.me/css3patterns/#checkerboard
The problem is, if you shrink the sizes too much it won't look perfect - here's a tinkerbin with me doing so - http://tinkerbin.com/MQaHKuJI
Related
Even though I've read alistapart - slidingdoors, I'm stuck.
Here's what I want to do:
The problem, you may have guessed, is in the middle.
Here's how I've "cut" into divs the tab (I'm sorry it's ugly but it's faster to explain this way) (a green square = a div):
Even though it's not IE6-7 compatible (many thanks Microsoft), here's what it gives under Firefox, Chrome and Opera:
Now I want to finish the borders left, and right, and finish with round corners on the bottom (like the first picture). Have you any idea how I should do (and keep in mind that I'm planning to give the work to another person whose task will be to make my work compatible with IE 6 and 7)? I'm stuck.
[EDIT] After hours of searching, and thanks to the help of "Gaby aka G. Petrioli" (many many thanks), I've managed to do almost all want I wanted.
Here's what I get:
And here's what I'd like to get:
If you have any idea...
You can do that with css and a single image for the right side of the tab.
Have a look at this demo http://jsfiddle.net/uwUwK/3/ and add a background-image to the red element (the one with class .tab-separator)
If you could do with a different right side of the tab (less elongated), you do not need an image at all, demo at http://jsfiddle.net/uwUwK/4/
if it should be compatibel to IE 6 and 7 the only way would be to use images.
Either as one big background image (which only works, if the height and width is noct dynamic) or use a set of images (divs with background-image and repeat for borders) for each border and corner.
which could work too (i found it with a short google search) is http://css3pie.com/
But depending on the methods they use, it coul affect the performance on ie heavily.
btw. if you use pure css3, you have border-radius and even border-image to do such things.
( http://www.css3.info/preview/border-image/ )
I am experienced at creating advanced CSS sprites by hand, but I now find myself wondering if it's possible to have one image of vertically repeating background as well as a second image of horizontally repeating (different) background, contained in the same sprite?
It would seem logically impossible, if both images have to truly repeat, I mean think about it, you cannot specify a cropped area for the repeat, so they each would expand the image to where the vertical graphic would appear in the horizontal background and visa-versa.
But I just wanted to make sure I am not missing out on some kind of trick that I am not aware of - thanks for any suggestions or examples to explore.
If you are not certain what I am describing, draw a horizontal line across a paper and now draw a tall vertical line elsewhere on the paper. Now imagine one image repeating across the horizontal and a different image repeating down the vertical. Now try to imagine a sprite that could hold both images and the css rules each would use. It's not possible based on what I have learned but maybe there is a trick I don't know.
Short answer: not possible. :)
What I always do in your case:
Use two:
for vertical repeats
for horizontal repeats
Here's the JSFiddle (disregard the differences with picture below):
http://jsfiddle.net/stapiagutierrez/y2PhX/
I'm supposed to have something like this in the white background, but the images in the center and right column seem to expand outside of their domain.
Any suggestions on how to cleanly handle this situation? It needs to be nice and centered, needs to end up like the picture, I feel I'm close but can't quite get there. Thank you, learning quite a lot in this tag area in Stackoverflow.
Use pixel widths, not percentage.
Is there any way to make ie (7,8) display a gradient AND a background-image on the same div?
The only way I got it working (but only almost) was by using two filters, one for the gradient and one using the AlphaImageLoader - but of course, then you can't position the image.
Declaring a background-image and gradient filter doesn't work, because it simply won't render the image - only the gradient.
Is there any (preferably non-js) solution to this?
If not, I'll have to resort to using a background image for the gradient as well, which isn't quite as nice but won't make much of a difference either...
I would say that adding a little unnecessary markup is the lesser of the evils here. Either that, or let IE-users live without the gradient.
Oftentimes getting your design to work is a trade-off between semantics, performance, standards and pixel perfection. Accepting that fact was hard for me, but it's made me a better front-end developer - I can work faster, and I can make decisions about what metric is important in a given case.
I want to use a diagonal gradient in my background.
I have read this, and I found that it has just only horizontal gradient and vertical gradient in IE.
Is it possible to make the gradient in IE show in the diagonal like Firefox?
You can do it using CSS, but it's kind of a hacked together solution involving two layers. You can read about the details of it here.
Yes, you have to use a background-image though so there may be a limited element size depending on how much you want a page to cost, and you will need to use a separate image.
HTML5 brings along SVG images though which are scalable and take up little space.