1

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:

enter image description here

CWSpear
  • 3,230
  • 1
  • 28
  • 34
  • Have you figured it out? – João Paulo Macedo Jul 12 '12 at 21:51
  • Not really. This is what I ended up doing, but it was less than ideal: http://codepen.io/CWSpear/pen/8-bit/5. But it does work. You can change the `$size` to a multiple of 120 and it scales nicely. – CWSpear Jul 13 '12 at 17:31
  • Looks good. I asked because I thought I had found the solution. It turned out I didn't. I'll still keep thinking about it though. – João Paulo Macedo Jul 13 '12 at 18:36
  • Thanks, I appreciate it. I think this is good enough for now for the beard. Someday, I'll figure out the shirt. I don't care if it's not perfect, but something plaid, heh. – CWSpear Jul 13 '12 at 19:14

1 Answers1

1

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

João Paulo Macedo
  • 15,297
  • 4
  • 31
  • 41
  • Yeah, I think it's repeating every 1 px, but I want it to repeat every 4 pixels. Even if I had 4 "rows" in my gradient (and 4 background-positions), that wouldn't do it (I tried). – CWSpear Jul 09 '12 at 19:05
  • I'm trying to make it work, but it's tough because it's not a straight-up checked pattern. – CWSpear Jul 09 '12 at 19:26
  • 1
    I found a better approach than gradients: http://codepen.io/blazeeboy/pen/bCaLE. But I marked you as correct since you did help me better understand it, etc. – CWSpear Oct 03 '12 at 18:17
  • Completely forgot about this ;) Yes, I've also come across this technique. Box-shadows makes it very much easier. That image to css converter is pretty cool man! I'll definitely be using it if it's there to use. Great job! – João Paulo Macedo Oct 03 '12 at 20:40
  • I've found this - http://www.patternify.com/ - which is pretty cool, and I had no idea about. Makes creating this kind of pattern extremely easy and brings no extra image http request. http://ptrn.it/SNxX5L -> your pattern – João Paulo Macedo Oct 10 '12 at 00:00
  • That tool is cool. I was hoping to do pure css without images, and even though it's just the raw image data in the CSS and not an additional request, it feels like cheating, haha. Thanks for the share, though. The `box-shadow` approach sounds like the way to go in this instance. – CWSpear Oct 10 '12 at 00:03