centering a perfectly circular frame

A StackOverflow visitor asked if it was possible to frame his webpages in a perfectly circular frame, which would resize to fill the browser window but not spill over the edges.

It was a curious problem, so I tinkered with it and found out we could, using a few modern tricks like viewport-height units (which aren’t universally supported, sadly). The result uses two divs, one inside the other:

<div class="wrapper">
  <div class="circular"><!-- content --></div>
</div>

And the following CSS:

html, body {
 height: 100%;
 padding: 0;
 margin: 0;
}
.wrapper {
 width: 100vh; /* viewport-height units */
 max-width: 100%;
 margin: 0 auto; /* for horizontal centering */
 position: relative; /* for vertical centering */
 top: 50%; /* for vertical centering */
}
.circular {
 overflow: scroll; 
 padding: 13% 13%; /* keep text within circle */
 border-radius: 50%;
 border: 10px solid #000;
 box-sizing: border-box; /* so 100% width includes border */
 height: 100vw; /* viewport-width units */
 max-height: 100vh; /* viewport-height units */
 margin-top: -50%; /* for vertical centering */
}

See the Pen vertically centered circular div by Martin Blase (@mblase75) on CodePen.

Responsive design with “switch to desktop site” option

In my latest responsive design creation, I wanted to follow Jakob Nielsen’s guidelines and allow mobile users to have easy access to the full desktop site, if desired. This is relatively straightforward to do if you have a CMS, but a static site has to be a bit more creative.

Here’s the solution I came up with. It uses JavaScript, a small browser cookie, and that magical tool no web developer should be without, Modernizr. Continue reading Responsive design with “switch to desktop site” option

KSB Legal

ksblegal

 

A small but heavily-JavaScripted site for Chicago-area law firm Kopecky, Schumacher, Bleakley and Rosenberg. Background images use modern CSS attributes to zoom to full-screen at any size, while hashchange events keep the news page down to a single document. Clicking on navigation links at the top open up an animated slider to show the attorneys’ photos, a scrolling news summary, or contact information.

Getting the last item in an odd-numbered list

In a responsive web page design I was concocting today, I realized a problem with this approach:

.subgroup {
  width: 50%;
  float: left;
}
.subgroup:nth-child(odd) {
  clear: left;
}

The idea was to arrange several blocks of text into two columns, clearing the float for every other block to force a new row. However, this was rather unattractive when I had an odd-numbered collection of blocks — especially when there was only one block, and therefore no indicator of why it only covered half the smartphone’s already-narrow screen width.

I knew I could solve the problem using jQuery; I wanted to solve it using pure CSS. After giving it some thought, I finally realized I could add this:

/* last item in an odd-numbered list */
.subgroup:last-child:nth-child(odd) { 
  width: 100%; 
}

Problem solved! The last item will now be stretched to 100% of the width only if it is also an odd-numbered element.

A List Apart has a few more stupid CSS tricks using “nth-child”.

Two-column lists when order doesn’t matter

I’m working on a site that uses an extended navigation menu grouped into sub-sections. Each section, in turn, groups its links into two columns of roughly equal height.

In CSS and HTML, this can be a pain. You can break the columns yourself, of course, but you have to maintain that every time there’s a change.

Or, if the order of the links doesn’t particularly matter, you can just float alternating elements to the left and right. Kind of like this: Continue reading Two-column lists when order doesn’t matter

Tennaqua

Tennaqua

http://www.tennaqua.com

This is a site I rebuilt from an old HTML 4 layout into something closer to HTML5. The photos across the homepage used to be a single large animated GIF; I recreated the same design using individual images and CSS3 to improve the animation while cutting the total weight of the page down to a tenth. A mobile stylesheet was built but wasn’t approved. Even so, it’s a big improvement under the hood.