Blog

All thoughts and opinions in my blog are my own and do not represent the position of my employer.

Some updates to stunningcss3.com, and a border-image problem

In my book Stunning CSS3, I linked to tons of resources so my readers could find out more information about the topics I was teaching, see different uses for a given property, and get useful tools to play and practice with. (You can see all the links here.) I have a horrible link addiction. Anyway, I knew that a few of the list of links were going to get out of date quickly, so I said in the book that I’d post a few choice lists as articles on the  book’s companion site, www.stunningcss3.com, and keep them updated. I recently took a pass through the following articles and updated their content:

It seems as though there’s a new source for webfonts every day, so despite my best efforts, I doubt the first two of these articles are comprehensive. If there are any resources that I’m missing that you think should be added, please let me know!

These articles are as much for me as for anyone else, but check them out—I think you’ll find them useful too.

While I was updating the site, I noticed a couple problems with the border image that I use on the list of places to buy the book in the sidebar as well as the featured review on the home page. In Chrome, the color wasn’t displaying in the middle part of the box. This was due to my omission of the keyword fill from the border-image declaration. It used to have no browser support, with all the browsers filling the content area of a box with the middle portion of the border image by default, but now it appears Chrome is correctly dropping out the middle portion. I added the keyword fill to fix this:

.highlight-box {
	border-width: 21px 16px 21px 16px;
	-moz-border-image: url(../img/box.png) 21 16 21 16 fill stretch;
	-o-border-image: url(../img/box.png) 21 16 21 16 fill stretch;
	-webkit-border-image: url(../img/box.png) 21 16 21 16 fill stretch;
	border-image: url(../img/box.png) 21 16 21 16 fill stretch;
}

In Firefox, the middle portion of the border image is displayed, but none of the side edges, so you see a straight sided rectangle. I keep staring at the border-image declaration, trying to see where the mistake is, and I can’t see anything wrong with it. I tried removing fill and stretch, but neither of these variations worked.

I doubt that Firefox has stopped supporting border-image, so I’m sure I must be doing something wrong. I just can’t figure out what. Can someone tell me where I’ve screwed up?

The Future of CSS Layout presentation at Future of Web Design conference

Today I spoke at Future of Web Design in New York on The Future of CSS Layout. For a decade we’ve been using floats for creating CSS layouts, and while they’re still the best choice for creating most multi-column designs, we’ve all been frustrated by their quirks and limitations. So in this presentation, I talked about some of the new and exciting CSS layout techniques that are either working right now, right around the corner, or a little ways down the road. I talked about how to use not only inline-block and table-cell display, but also how to use the Flexible Box Layout module in practical ways as a progressive enhancement technique for the layouts you’re crafting today.

You can view the slides on SlideShare, or download the slides here:

The Future of CSS Layout (PDF, 2 mb)

Flexbox Demos

I showed a few examples of how to use Flexible Box Layout and wanted to share my demo files with you so you could poke around in the code  if you like. Make sure to view these files in Chrome to see the correct layout. The second and third files have fallback CSS in place so that they still look fine in other browsers; it was not part of my presentation to do that with the first demo.

Related resources

Here are several links to related resources, a few of which are in the slides plus many more that were not but which I recommend and think you’ll find useful.

The W3C CSS3 specs I covered

Flexible Box Layout

Other CSS3 layout techniques

display:table/table-cell

display:inline-block

Building Responsive Layouts presentation at Responsive Web Design Summit

Today I spoke at the online conference Responsive Web Design Summit 2012 on Building Responsive Layouts. I talked about two of the core components of responsive web design: fluid/liquid layouts and media queries. Much of the talk was focused on fluid layout techniques and tips: how to build a basic two- or three-column all-fluid layout, how to create fluid grids with fixed-width margin and padding, how to create a hybrid fixed-fluid layout, and how to calculate nested width, margin, and padding values. I then walked through adding media queries onto the fictional Little Pea Bakery site from my book Stunning CSS3 to demonstrate how to make a layout responsive to a variety of screen sizes and devices. Finally, I covered how to fix media query issues in iOS and IE 8 and earlier.

You can view the slides on SlideShare, or download the slides here:

Building Responsive Layouts (PDF, 2.4 mb)

Here are several links to related resources, some of which are in the slides plus many that were not but which I recommend and think you’ll find useful.

Responsive web design link hubs

Responsive web design articles, tutorials, and tools

Mobile viewports

Dealing with IE 6-8 support

Fluid/liquid layout

Responsive web design inspiration and design patterns

View more posts:

Archives by Category

  • Announcements (32)

    Learn what's happening in my career or industry, including information about my speaking engagements and books.

  • Articles (40)

    Informational or theoretical articles about a variety of web design topics, including CSS, HTML, accessibility, usability, and visual design.

  • Inspiration (8)

    Collections of images or links to others' design work that I find inspiring and think you will too.

  • Tutorials (5)

    Step-by-step articles that you can follow along with to learn a particular web design technique, including CSS layout and CSS3 effects.

Archives by Month