Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

I distinctly remember working at a company where I had to upload the new assets for our rounded buttons, which were a grid of 3x3 image elements.

LOL clearfix.

I also never really had to fight with IE 6 compatibility, but when I fought it, it fought back hard.

Also explaining to designers why we can't do translucent backgrounds (also IE 6).



I personally loved CSS3PIE for times like that. Of course then there would sometimes be complaints about rendering performance, and my answer was usually, "You can have working, pretty, and fast, but for IE you'll have to choose two out of the three."

http://css3pie.com/documentation/supported-css3-features/#pi...


Ah, Yes, the 3x3. Whenever this pops up, I remember a lot of fond memories of the early days of front-end development. I wrote about ours at https://brajeshwar.com/2005/splice9-bitmap-window-resizer-co...

I remember “feathering” the curves in Photoshop for a smoother finish to the rounded corners. My team, especially the new ones, would go -- heck, the trick, the trick, we learn a trick. ;-)

The struggles were real, and the fun was short and intermittent but worth every moment.


Good ol’ times.

A list apart, yayhooray, … and your articles helped me learn web design.


Pre-drop shadow we had to cut out static images of the shadow too. And let's hope you never have to change the background that the shadow sits on!


there was a way to use package image in a non-standard way (iirc using Offsets in Photoshop) and use negative background position to emulate 3x3 grid image with less elements. Was an advanced technique.


You mean CSS sprite sheets, or is there another technique that I somehow missed all these years?


Yes, it's another technique. I can't find it right now (it's old masters technique). It's different from spritesheet or border radius, in a way that it requires image to be pre-proceed in photoshop via Filter->Offset, that basically acts as negative background position. This is to shift top-left pointer of an original image to its center. After that in CSS, you can use negative background-position to negate the image manipulation. Effectively it helps creating the right edge of a flexible element, which was difficult before background-position could be anchored to the right.

You'd still need multiple elements, but you'd have a single image (which is better for http latency/compression).




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: