4 ms·

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 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).

Brajeshwar 2y ago
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-component-01b/ 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.
- uxcolumbo 2y ago
  Good ol’ times. A list apart, yayhooray, … and your articles helped me learn web design.
- wildrhythms 2y ago
  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!
Inviz 2y ago
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.
- Klonoar 2y ago
  You mean CSS sprite sheets, or is there another technique that I somehow missed all these years?
  - Inviz 2y ago
    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).
ttfkam 2y ago
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/#pie-png-fix http://css3pie.com/documentation/supported-css3-features/#pi...

Brajeshwar 2y ago

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-component-01b/ 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.

uxcolumbo 2y ago
Good ol’ times. A list apart, yayhooray, … and your articles helped me learn web design.
wildrhythms 2y ago
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!

Inviz 2y ago

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.

Klonoar 2y ago
You mean CSS sprite sheets, or is there another technique that I somehow missed all these years?
- Inviz 2y ago
  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).

ttfkam 2y ago

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/#pie-png-fix http://css3pie.com/documentation/supported-css3-features/#pi...