5 ms·
Rounded corners using tables and gifs?
by Apofis 6y ago
Rounded corners using tables and gifs?
- debaserab2 6y agoThat 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 agoAnd 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 agoTo 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 agoLet’s also add the infamous sliding door div structure to making expandable dynamic height divs.
- artsyca 6y agoHow about that layout with columns and a sticky footer --
- CydeWeys 6y agoAnd 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).
- artsyca 6y agoShouts to Udephus!
- sirmarksalot 6y agoI was about to weigh in on how 9-slicing is absolutely a valid strategy for UI components, and give you an example from my professional work, only to realize that I can't think of a single example that wasn't, "hack around some library that doesn't have border-radius". I'll be glad for the day when 9-slice is a truly obscure technique.
- artsyca 6y agoNine slice put a lot of food on the table but I started to question my purpose in life Border-image came and changed the game in the early 2010's... Doing exactly that in essence
- floatboth 6y agoI haven't seen it on the web for literally a decade, but I think… Android might use it still?
- rpeden 6y agoOr 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 agoWasn'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 agoI 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 agoYES 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 agoRico Suave!
- conradfr 6y agoYou 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...