1

I have a hexagon shape made with CSS :before and :after pseudo elements. I'm trying to reproduce the effect on this website: http://www.upperfirst.com (and I am aware they use canvas)

The issue is that if I use multiple elements, the size increase on hover doesn't animate properly. I fixed the animation by using :before and :after with a border instead. Now I want to get the images working, but I can't seem to figure out how to line up the border image and the middle part's images so it looks seamless.

Here's a fiddle of what I have so far: http://jsfiddle.net/uwZ8w/

Thanks!

alt
  • 13,357
  • 19
  • 80
  • 120
  • Just a comment on "process", but if generating a tile is so cumbersome as to be problematic, when does it become useful to change strategies and do something else? – Jared Farrish May 27 '12 at 00:38
  • 1
    Looking through your code I see lots of divisions with no deliberate rounding to integer values for pixels. Could you be experiencing a problem with pixel values getting floor'ed when they should be ceiling'ed? This would make things 1 pixel too small. I see some suggestive evidence of this idea in that exactly when the lines disappear the text in the octagon shifts slightly. This means that it just had one more pixel of growth to go that took a while to get to, which suggest to me that the size calculation had to reach a threshold where the width was rounded up instead of down. – Mark M May 27 '12 at 01:13
  • You might take a look at [my answer on this post](http://stackoverflow.com/questions/10062887/generate-repeating-hexagonal-pattern-with-css3/10068351#10068351) which does not use borders to create the hex, but transforms. It may help resolve your issue with how the hex is constructed. – ScottS May 27 '12 at 02:22
  • @ScottS I did see that post... I love it. I've changed my transforms to your way, not how do I get the background image to be seamless across? – alt May 27 '12 at 03:46
  • On the rotated elements, the background is rotated, you did it somehow though... – alt May 27 '12 at 03:47
  • @MarkM what do you mean by "lines in the text". I'm pretty sure it's stationary. – alt May 27 '12 at 03:51
  • 1
    @JacksonGariety--the background is rotated by doing a reverse rotation on a `:before` pseudo-element (the background is inherited by both the child `div` and `:before` element) within the previously rotated child `div` which acts as an overlay to the background of the child `div`. If you have issues, post an updated fiddle with the hex's coded as transforms, and maybe I can help figure it out. – ScottS May 27 '12 at 11:21
  • That worked! Thanks so much! I had to add a wrapper around the hexagon element to get the scale(1.3) to work though. – alt May 27 '12 at 21:10
  • @ScottS It's working great, but there's this small line that appears like the rotated elements aren't transformed correctly. Take a look at this URL: http://jacksongariety.com/jacksongariety.com/yourdnaawakening.com/ – alt May 28 '12 at 05:10
  • @ScottS Here's a screenshot of the graphic error: http://cl.ly/GwVj – alt May 28 '12 at 05:13

1 Answers1

1

This answer is based off your revised code that sort of uses my hexagon technique. With respect to avoiding the graphic alignment issue you noted, I have two suggestions.

  1. Have your images scaled to the size you want them already so that you avoid any background-size scaling like you are currently doing.
  2. Likewise, avoid the scaling of the .inner divs by 200% in the width and height (you shouldn't have to do that, they should be the same size as the .hexagon div and the immediate children that you have classed as .before and .after). However, with regards to that...

... I'm curious why you used a .inner div at all, instead of the :before pseudo elements (to avoid cluttering your code). It appears to me that you may not understand what a pseudo element is (since you have a content: ''; in your .inner css, which is irrelevant if it is not a pseudo element but a real element). Either that, or you accidentally left that code in there when you switched from a pseudo element to a real div (for whatever reason that switch was made).

Community
  • 1
  • 1
ScottS
  • 71,703
  • 13
  • 126
  • 146
  • Here's the final version: http://jacksongariety.com/jacksongariety.com/yourdnaawakening.com/ – alt May 28 '12 at 20:46
  • @JacksonGariety--so you were not able to eliminate the `background-size` from the hex's to get rid of the lines? – ScottS May 28 '12 at 22:25
  • The lines were caused by -webkit-transform-style: preverse-3d; I was using. – alt May 29 '12 at 01:27
  • @JacksonGariety--Interesting. Do you have a `moz` property set like that as well, because I am still seeing the lines in Firefox (which is why I thought you had not eliminated the lines). – ScottS May 29 '12 at 08:51