Skip to content


Some slight design tweaks

I’ve done a little light fiddling with the design here in order to clean up some details that had been bugging me.

I started by adding a light grey background to blockquote elements in order to make them a bit more distinct from my babbling. That ended up making the page feel a bit heavier than I wanted, though, as the lightest grey I could use was the same grey that made up the background color in the lower section of each post’s title bar.

After fiddling with a few different approaches, I finally decided to use a slight gradient rather than a solid grey for the title bar, starting darker on the right and fading to white towards the left. The blockquote elements still felt a bit much, though, so I ended up creating a second, lighter gradient to use for their background as well. I’m not entirely sure I’m satisfied with the end result — while I like each effect individually, I’m not as sure about how they interact with each other on the page. Still, it’ll do for now.

Left and right floating elements (such as pictures and Amazon item links) have been nudged a few pixels outward in order to better align them with the outside borders of the post title bars.

Lastly, I removed the grey background behind the post titles and replaced that with a drop shadow effect behind the title text. The one downside to this approach is that it’s currently only visible in Safari (I believe), as Safari’s currently the only browser (that I know of) that supports that particular CSS attribute. The rest of you just need to upgrade. ;)

Posted in Website. See also: TPBETA 1505 | blockquotes in TypePad and MovableType | Print-friendly pages with CSS | Just an idea | Basic HTML tag cheatsheet .

10 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. i like the gradient shadow behind the blockquotes, and behind the subheadings as well (posted on, comment, trackback etc). adds a nice bit of shiny-ness that’s not obtrusive or overly flashy.

    i can’t see the drop shadow, but it looks fine to me without it. as for upgrading… i think I can skip a $3000+ upgrade (that’s what those shiny G5s go for now, right?) for a drop shadow effect. :P ;)

  2. ps maybe because of the drop shadow, your dotted underline has disappeared from beneath your title, and restarts at the end of your title - but only on the front page, not on the individual archive page. that’s all. :)

  3. I just wanted to say that the site looks good, you’ve done a great job with it!

  4. Matt said

    I really like the blockqoute fade and the time/date bar. Overall it looks great. I use IE so I can’t see the title shadow. Even without it, it still looks great.

  5. Ooooh, the fade is pretty. And I don’t think I’ll be switching to the Mac just so I can use Safari browser… sorry. :)

  6. Great redesign! Even if it is only a few items, it definitely makes a difference. In a good way. It helps the blockquotes stand out a bit more. Very readable and visually appealling. Love the site. Always have. Keep up the great writing!

  7. The shadow effect is working on my system. I’m under Mozilla Firebird on a Linux platform.

  8. Hola! I like how your site runs - smooth handling, easy to use. I have a rather “out of the box” thing going on at my MT powered site at the moment…I’m wondering do you, or any of your readers, know of easy (fun is a ploue) how-to sites specifically for tweaking MT blog layouts and MT tags? Suggestions appreciated…

    m a i l [at] m a h a l i e [dot] c o m

  9. Mom said

    I like the new look, too

Continuing the Discussion

  1. Erste Hilfe Für Datenreisende linked to this post on December 19, 2003

    Schicke Gradienten

    Auf dem Weblog eclecticism hat der Autor Michael Hanson ein paar nette Designänderungen eingeführt. Mir gefällt besonders die dezente Verwendung von Gradienten als Schrifthinterlegung für regelmäßig wiederkehrende Element…

Some HTML is OK

(required)

(required, but never shared)

or, reply to this post via trackback.

Note: This post is over 5 years old. You may want to check later in this blog to see if there is new information relevant to your comment.