7 ms·

Dude I spent a large portion of my early career as a web developer making rounded corners on divs using all sorts of kludges

gridlockd 6y ago
https://www.youtube.com/watch?v=ZdqjcMmjeaA https://www.youtube.com/watch?v=ZdqjcMmjeaA
- ordinaryradical 6y ago
  Read the parent again with this playing in the background for peak webdev irony.
Apofis 6y ago
Rounded corners using tables and gifs?
- debaserab2 6y ago
  That reminds me of the old trick of using a 1x1 pixel in an empty table cell to ensure that internet explorer would actually expand the table cell to whatever width you set it to (height still needed another trick if i recall correctly).   would work, too, but then the minimum height of the cell would be whatever the line height was set to, and the line-height property didn't behave the same across browsers. It's funny how old tricks make a comeback. I see a lot of  's in React codebases to preserve whitespace around JSX tags.
  - cmsefton 6y ago
    And the old trick of a 2x2 pixel gif with one colour transparent, and the other a non-transparent colour which, when set as a background to the table cell, provided an illusion of colour transparency with the main background behind the table.
- Jetrel 6y ago
  To invoke the old "rule 5" of explaining things: Until surprisingly recently, there was no built-in way to make a rectangular element on a webpage have rounded corners. People had to use all sorts of dirty hacks to make a final product that "looked like" it was a native, built-in feature. Usually in the old days it basically amounted to various forms of "putting a picture of a rounded corner" (often a gif) in each of the corners of the element you were putting on the page. There were a lot of different ways to do that, but one of them was to use "tables" - tables these days are usually only used for what their genuine, semantic intent is: for drawing a literally spreadsheet-like table of data. But back in the earliest days of the web, they were the only controllable way to visually lay things out on any kind of grid, so despite the fact that they were "supposed" to have nothing to do with visual layout, they'd get used all the time for that - often getting used to do visual borders and stuff. So to do rounded corners, you'd basically make a table that was a 3x3 grid. In the corner elements of the grid, you'd have tiny pictures of rounded corners; in the side elements of the grid you'd basically have nothing (they'd be really skinny elements, either very wide or tall). Then the middle element in the grid would be gigantic, and would hold your actual content.
  - runawaybottle 6y ago
    Let’s also add the infamous sliding door div structure to making expandable dynamic height divs.
    - artsyca 6y ago
      How about that layout with columns and a sticky footer --
  - CydeWeys 6y ago
    And for an authentic contemporaneous example of this technique, here's my website that I designed in 2002 when I was in high school: http://cydeweys.com/archive/ http://cydeweys.com/archive/ You won't know it from looking at it because you'll only see the rendered static HTML, but that entire site was actually written in C++. Using the AP C++ libraries (yes, that AP).
- rpeden 6y ago
  Or by just using Flash. I never did it myself. I know there are plenty of reasons to dislike flash. And I know plenty of people absolutely hated sites created solely using Flash. But I have to admit I enjoyed the creativity I saw on many Flash sites. There a generic sameness to much of the modern web. I know Flash sites were useless for SEO, and probably for accessibility too. So I don't think things are necessarily worse now. Just more generic. Of course, you can create a Flash-like site using web-native technologies, but it's probably more work.
  - ekvilibrist 6y ago
    Wasn't the problem with "Flash sites" that it was way way worse than any regular website... as a website? Kinda like SPAs today. You had to reinvent stuff the browser already did perfectly. But as long as you made Flash APPS to be run embedded on websites, it was pretty awesome. Animation, video, etc. No competition, hands down just great tech... until HTML5 caught up.
    - pvorb 6y ago
      I was going to say something similar. A lot of the drawbacks from flash sites also apply to current SPAs. I know you can get usable and SEO friendly SPAs, but it's so much work compared to plain HTML files or templating in the backend.
- atum47 6y ago
  YES BABY!!! I use to do it all the time. =) https://web.archive.org/web/20040204003135/http://www.realidadevirtual.blogspot.com/ https://web.archive.org/web/20040204003135/http://www.realid...
  - artsyca 6y ago
    Rico Suave!
- conradfr 6y ago
  You know it. 9 cells tables, slicing your pixel-perfect corners in Paint Shop Pro or Photoshop, exporting as a gif with transparent color. That also reminds of the transparent 1px gif "hack". I'm not that nostalgic about that. Once in a while all that knowledge comes in handy for troubleshooting an email template...
  - JorgeGT 6y ago
    > in Paint Shop Pro or Photoshop That's a weird way of spelling Macromedia Dreamweaver...
    - conradfr 6y ago
      Ah. I remember using Dreamweaver 4 a bit, and Fireworks (alpha channel transparency in png ? What is this sorcery?).
  - artsyca 6y ago
    Yea and applying a JS fix to allow transparent PNG
magma17 6y ago
here is another kludge: border-radius
- artsyca 6y ago
  Yea man! Border-radius changed the game and made nine-slices method legit I remember using a JS poly fill with modernizr to get it to work like as soon as it came out and making pixel perfect images to use with it!
waterhouse 6y ago
Better or worse kludges than this one? http://ridiculousfish.com/blog/posts/roundy.html http://ridiculousfish.com/blog/posts/roundy.html
- deleted 6y ago
  [deleted]
- disease 6y ago
  Thanks for the flashbacks! I had blacked out any memories of the world before 'border-radius' before seeing that!
  - andy_ppp 6y ago
    And now that it's easy people try to avoid using rounded corners...
    - rodneyzeng 6y ago
      Well, I just found people still love rounded corners in LaTeX templates of books nowadays...
  - kposehn 6y ago
    We shall not speak of those dark times!
    - konfusinomicon 6y ago
      The only thing darker were the accompanying drop shadows
- pix64 6y ago
  Well I just discovered this 11 year old Firefox bug due to that page https://bugzilla.mozilla.org/show_bug.cgi?id=477157 https://bugzilla.mozilla.org/show_bug.cgi?id=477157
  - 6y ago
skratlo 6y ago
This made my day dude, thanks for that. Imma dropping everything now and going to make rounded corners button with WebGL canvas, using signed distance function in a fragment shader.
hypertexthero 6y ago
All Steve Jobs’ fault: https://www.folklore.org/StoryView.py?story=Round_Rects_Are_Everywhere.txt https://www.folklore.org/StoryView.py?story=Round_Rects_Are_...
- triceratops 6y ago
  That was really great! Thanks!
  - artsyca 6y ago
    Really great! This reminds me of how epic and iconic this company truly was -- I lived in a constant state of delight as a child using their software and software developed on their platforms starting with the old BRUN command on apple ][
- Aeolun 6y ago
  Oh god, that reminds me of all the times I claim something is technically impossible only to find out there’s a really easy way to do it. Except using a phased array to locate RFID tags using backscatter. That was just plain hard.
golergka 6y ago
Bet it pays more, too.
- filoleg 6y ago
  Almost definitely, but it isn't even nearly as mindblowing to a casual outside observer as a cool UE demo.
pjungwir 6y ago
For a few years around 2001, rounded corners were a big part of hp's branding. I was in a dev shop that maintained part of hp.com, and we had to have them everywhere. I didn't work on their site very often myself, but I think that team must have been experts at rounded rectangles. :-) At the time it was still sort of a cool effect on the web.
- superhuzza 6y ago
  Wow, you weren't kidding! https://www.webdesignmuseum.org/uploaded/timeline/hewlett-packard/hewlett-packard-2001.png https://www.webdesignmuseum.org/uploaded/timeline/hewlett-pa...
ecoqba11 6y ago
Yep, fun times!
bredren 6y ago
I also spent an inordinate amount of time getting rounded corners on a fan site blog I ran. I forgot about this.
artsyca 6y ago
Not to detract from the original discussion but we're always bridging the gap between expectation and reality that's what we do! No coincidence it's called 'Unreal' Engine heh
Keloran 6y ago
You want kludgy, try my madness https://github.com/Keloran/oldjs/blob/master/roundit.js https://github.com/Keloran/oldjs/blob/master/roundit.js
- artsyca 6y ago
  Is this code adding successive divs to simulate rounded corners? Looks incredible -- invariably someone would need animation on these too would this work?
hnick 6y ago
I told my wife it wasn't possible for her website since I didn't want to do it with images to coddle IE, which was apparently the state of the art at the time. She still brings it up 10 years later!

gridlockd 6y ago

https://www.youtube.com/watch?v=ZdqjcMmjeaA https://www.youtube.com/watch?v=ZdqjcMmjeaA

ordinaryradical 6y ago
Read the parent again with this playing in the background for peak webdev irony.

Apofis 6y ago

Rounded corners using tables and gifs?

debaserab2 6y ago
That reminds me of the old trick of using a 1x1 pixel in an empty table cell to ensure that internet explorer would actually expand the table cell to whatever width you set it to (height still needed another trick if i recall correctly).   would work, too, but then the minimum height of the cell would be whatever the line height was set to, and the line-height property didn't behave the same across browsers. It's funny how old tricks make a comeback. I see a lot of  's in React codebases to preserve whitespace around JSX tags.
- cmsefton 6y ago
  And the old trick of a 2x2 pixel gif with one colour transparent, and the other a non-transparent colour which, when set as a background to the table cell, provided an illusion of colour transparency with the main background behind the table.
Jetrel 6y ago
To invoke the old "rule 5" of explaining things: Until surprisingly recently, there was no built-in way to make a rectangular element on a webpage have rounded corners. People had to use all sorts of dirty hacks to make a final product that "looked like" it was a native, built-in feature. Usually in the old days it basically amounted to various forms of "putting a picture of a rounded corner" (often a gif) in each of the corners of the element you were putting on the page. There were a lot of different ways to do that, but one of them was to use "tables" - tables these days are usually only used for what their genuine, semantic intent is: for drawing a literally spreadsheet-like table of data. But back in the earliest days of the web, they were the only controllable way to visually lay things out on any kind of grid, so despite the fact that they were "supposed" to have nothing to do with visual layout, they'd get used all the time for that - often getting used to do visual borders and stuff. So to do rounded corners, you'd basically make a table that was a 3x3 grid. In the corner elements of the grid, you'd have tiny pictures of rounded corners; in the side elements of the grid you'd basically have nothing (they'd be really skinny elements, either very wide or tall). Then the middle element in the grid would be gigantic, and would hold your actual content.
- runawaybottle 6y ago
  Let’s also add the infamous sliding door div structure to making expandable dynamic height divs.
  - artsyca 6y ago
    How about that layout with columns and a sticky footer --
- CydeWeys 6y ago
  And for an authentic contemporaneous example of this technique, here's my website that I designed in 2002 when I was in high school: http://cydeweys.com/archive/ http://cydeweys.com/archive/ You won't know it from looking at it because you'll only see the rendered static HTML, but that entire site was actually written in C++. Using the AP C++ libraries (yes, that AP).
rpeden 6y ago
Or by just using Flash. I never did it myself. I know there are plenty of reasons to dislike flash. And I know plenty of people absolutely hated sites created solely using Flash. But I have to admit I enjoyed the creativity I saw on many Flash sites. There a generic sameness to much of the modern web. I know Flash sites were useless for SEO, and probably for accessibility too. So I don't think things are necessarily worse now. Just more generic. Of course, you can create a Flash-like site using web-native technologies, but it's probably more work.
- ekvilibrist 6y ago
  Wasn't the problem with "Flash sites" that it was way way worse than any regular website... as a website? Kinda like SPAs today. You had to reinvent stuff the browser already did perfectly. But as long as you made Flash APPS to be run embedded on websites, it was pretty awesome. Animation, video, etc. No competition, hands down just great tech... until HTML5 caught up.
  - pvorb 6y ago
    I was going to say something similar. A lot of the drawbacks from flash sites also apply to current SPAs. I know you can get usable and SEO friendly SPAs, but it's so much work compared to plain HTML files or templating in the backend.
atum47 6y ago
YES BABY!!! I use to do it all the time. =) https://web.archive.org/web/20040204003135/http://www.realidadevirtual.blogspot.com/ https://web.archive.org/web/20040204003135/http://www.realid...
- artsyca 6y ago
  Rico Suave!
conradfr 6y ago
You know it. 9 cells tables, slicing your pixel-perfect corners in Paint Shop Pro or Photoshop, exporting as a gif with transparent color. That also reminds of the transparent 1px gif "hack". I'm not that nostalgic about that. Once in a while all that knowledge comes in handy for troubleshooting an email template...
- JorgeGT 6y ago
  > in Paint Shop Pro or Photoshop That's a weird way of spelling Macromedia Dreamweaver...
  - conradfr 6y ago
    Ah. I remember using Dreamweaver 4 a bit, and Fireworks (alpha channel transparency in png ? What is this sorcery?).
- artsyca 6y ago
  Yea and applying a JS fix to allow transparent PNG

magma17 6y ago

here is another kludge: border-radius

artsyca 6y ago
Yea man! Border-radius changed the game and made nine-slices method legit I remember using a JS poly fill with modernizr to get it to work like as soon as it came out and making pixel perfect images to use with it!

waterhouse 6y ago

Better or worse kludges than this one? http://ridiculousfish.com/blog/posts/roundy.html http://ridiculousfish.com/blog/posts/roundy.html

deleted 6y ago
[deleted]
disease 6y ago
Thanks for the flashbacks! I had blacked out any memories of the world before 'border-radius' before seeing that!
- andy_ppp 6y ago
  And now that it's easy people try to avoid using rounded corners...
  - rodneyzeng 6y ago
    Well, I just found people still love rounded corners in LaTeX templates of books nowadays...
- kposehn 6y ago
  We shall not speak of those dark times!
  - konfusinomicon 6y ago
    The only thing darker were the accompanying drop shadows
pix64 6y ago
Well I just discovered this 11 year old Firefox bug due to that page https://bugzilla.mozilla.org/show_bug.cgi?id=477157 https://bugzilla.mozilla.org/show_bug.cgi?id=477157
- 6y ago

skratlo 6y ago

This made my day dude, thanks for that. Imma dropping everything now and going to make rounded corners button with WebGL canvas, using signed distance function in a fragment shader.

hypertexthero 6y ago

All Steve Jobs’ fault: https://www.folklore.org/StoryView.py?story=Round_Rects_Are_Everywhere.txt https://www.folklore.org/StoryView.py?story=Round_Rects_Are_...

triceratops 6y ago
That was really great! Thanks!
- artsyca 6y ago
  Really great! This reminds me of how epic and iconic this company truly was -- I lived in a constant state of delight as a child using their software and software developed on their platforms starting with the old BRUN command on apple ][
Aeolun 6y ago
Oh god, that reminds me of all the times I claim something is technically impossible only to find out there’s a really easy way to do it. Except using a phased array to locate RFID tags using backscatter. That was just plain hard.

golergka 6y ago

Bet it pays more, too.

filoleg 6y ago
Almost definitely, but it isn't even nearly as mindblowing to a casual outside observer as a cool UE demo.

pjungwir 6y ago

For a few years around 2001, rounded corners were a big part of hp's branding. I was in a dev shop that maintained part of hp.com, and we had to have them everywhere. I didn't work on their site very often myself, but I think that team must have been experts at rounded rectangles. :-) At the time it was still sort of a cool effect on the web.

superhuzza 6y ago
Wow, you weren't kidding! https://www.webdesignmuseum.org/uploaded/timeline/hewlett-packard/hewlett-packard-2001.png https://www.webdesignmuseum.org/uploaded/timeline/hewlett-pa...

ecoqba11 6y ago

Yep, fun times!

bredren 6y ago

I also spent an inordinate amount of time getting rounded corners on a fan site blog I ran. I forgot about this.

artsyca 6y ago

Not to detract from the original discussion but we're always bridging the gap between expectation and reality that's what we do! No coincidence it's called 'Unreal' Engine heh

Keloran 6y ago

You want kludgy, try my madness https://github.com/Keloran/oldjs/blob/master/roundit.js https://github.com/Keloran/oldjs/blob/master/roundit.js

artsyca 6y ago
Is this code adding successive divs to simulate rounded corners? Looks incredible -- invariably someone would need animation on these too would this work?

hnick 6y ago

I told my wife it wasn't possible for her website since I didn't want to do it with images to coddle IE, which was apparently the state of the art at the time. She still brings it up 10 years later!