Before CSS3

I started working for the web in 2007, when I joined a software house as the new (and only) designer. I had previous experience developing digital products for touch devices, mainly multimedia kiosks, so I had some experience with HTML and CSS.

At that time layouts were still built with <tables>, I could only use Arial and Helvetica, and Internet Explorer was the most used browser.

A while ago, I took a trip down memory lane with our team at Bitmaker, remembering how hard it was to develop layouts and styles that are so easy to do today.

First up, rounded corners.

With the release of the iPod, designers wanted to recreate its organic and smooth feeling on the web.

On one level, I think we’re attracted to things that appear to be organic in nature. Take the iPod for instance. While the industrial design of similar products clearly hints towards how the device came to be, Apple put a lot of effort into creating a device that feels more like it grew on a tree than assembled in a factory.

from Why do we love rounded corners

And this is how we did it back in the day.

We got this layout from the designer.

And we asked her to give us one image for each corner; a transparent .gif file.

I need four elements to attach my four images.

<!-- main element has border -->
  <div class="article">
    <!-- top left corner -->
    <div class="corner one">
      <!-- bottom left corner -->
      <div class="corner three">
        <!-- top right corner -->
        <h2 class="corner two">The Jeannette Expedition</h2>
        <p>The Jeannette Expedition of 1879–81 was an attempt led by George W. De Long to reach the North Pole using a route through the Bering Strait to the fabled temperate Open Polar Sea(...)</p>
        <!-- bottom right corner -->
        <div class="footer corner four">
          <a href="https://en.wikipedia.org/wiki/Jeannette_Expedition">Full article</a>
        </div>
      </div>
    </div>
  </div>

Main <div class=”article”> will have the black border and the rest of the elements will have the four corners.

.article {
 border: 3px solid black;
 width: 35%;
}
.corner {
  background-repeat: no-repeat;
}
.one {
  background-image: url('corner_tl.gif');
  background-position: top left;
}
.two {
  background-image: url('corner_tr.gif');
  background-position: top right;
}
.three {
  background-image: url('corner_bl.gif');
  background-position: bottom left;
}
.four {
  background-image: url('corner_br.gif');
  background-position: bottom right;
}

This is what we get. I also had to remove the default margins from the header and paragraph.

We have to position the background on top of the border, so the elements need to have a relative position and a negative margin.

.corner {
  background-repeat: no-repeat;
  position: relative;
}
.one {
  background-image: url('corner_tl.gif');
  background-position: top left;
  left: -3px;
  top: -3px;
}
.two {
  background-image: url('corner_tr.gif');
  background-position: top right;
  right: -6px;
  top: -6px;
}
.three {
  background-image: url('corner_bl.gif');
  background-position: bottom left;
  bottom: -6px;
  left: 0;
}
.four {
  background-image: url('corner_br.gif');
  background-position: bottom right;
  bottom: 0;
  right: -6px;
}

Getting there, but it needs some padding, so back to the negative margins. I’m already adding padding to the paragraph and the link.

.article a {
 color: blue;
 display: block;
 font-weight: bold;
 text-decoration: underline;
 padding-bottom: 15px;
}
.article p {
 font-size: 14px;
 line-height: 1.6;
 padding: 0 15px;
 margin: 0;
}

.one {
 background-image: url(‘corner_tl.gif’);
 background-position: top left;
 left: -3px;
 top: -3px;
}
.two {
  background-image: url('corner_tr.gif');
  background-position: top right;
  /*Also added padding top to the heading*/
  padding-top: 15px;
  right: -21px;
  top: -21px;
}
.three {
  background-image: url('corner_bl.gif');
  background-position: bottom left;
  bottom: -6px;
  /*Padding*/
  padding: 15px;
  left: 0;
}
.four {
 background-image: url(‘corner_br.gif’);
 background-position: bottom right;
 bottom: -15px;
 right: -21px;
}

And there it is

And now, after css3

article {
 border-radius: 10px;
 border: 3px solid black;
 padding: 15px;
 margin-top: 20px;
 width: 35%;
}

That’s it. You can take a look at the source files here:

bbyms/beforecss3