August 2009 - Broken Links Archive

Print-style headlines with CSS 3

I was admir­ing the lay­out of a front page splash of a news­pa­per sup­ple­ment yes­ter­day, and realised that with (some) mod­ern browsers we can repli­cate the effect using CSS alone. I’ve knocked togeth­er a quick demo using the transform prop­er­ty which is avail­able in Fire­fox 3.5 and Safari 4.

The best thing about it is that it uses only a sin¬≠gle block-lev¬≠el ele¬≠ment, so nice¬≠ly degrades to a head¬≠ing only.

Read the full article


Choosing the right type for your website

As I get ready to kick off a cou¬≠ple of per¬≠son¬≠al web projects, I‚Äôve been read¬≠ing Enric Jar¬≠diŐĀ‚Äės book, Twen¬≠ty two tips on typog¬≠ra¬≠phy*, a primer on what works and what does¬≠n‚Äôt in typography.

Although Jar¬≠diŐĀ main¬≠ly works on type for print, most of the rules also apply to type for the web. In this arti¬≠cle I‚Äôm going to high¬≠light five of his tips which are use¬≠ful in decid¬≠ing upon the right type for a project.

Read the full article


New background rules in Firefox 3.6

The lat¬≠est alpha release of Fire¬≠fox 3.6 (3.6a1) con¬≠tains some new rules for pro¬≠vid¬≠ing back¬≠grounds to ele¬≠ments: mul¬≠ti¬≠ple back¬≠ground images, back¬≠ground-size, and an imple¬≠men¬≠ta¬≠tion of the Webkit gra¬≠di¬≠ent pro¬≠pos¬≠al (mod¬≠i¬≠fied from the orig¬≠i¬≠nal ‚ÄĒ more on that later).

I’ve put togeth­er a very rough demo of what you can do with these new rules; you’ll require a recent build of Fire­fox 3.6 or Webkit to view it. Try resiz­ing the win­dow to dif­fer­ent dimen­sions, and see how it changes.

Here‚Äôs an expla¬≠na¬≠tion of how I did it:

Read the full article


background-size implemented in Firefox 3.6

Fire¬≠fox 3.6 has become the lat¬≠est brows¬≠er to sup¬≠port the CSS3 background-size prop¬≠er¬≠ty (although the first to do so accord¬≠ing to the lat¬≠est W3C spec.).

Using it is pret­ty simple:

div {
background-image: url('image.png');
-moz-background-size: 80%;
}

This, along with mul¬≠ti¬≠ple background-images, is going to go a long way towards clean¬≠ing up mark-up and pret¬≠ti¬≠fy¬≠ing the web.


Aside

I‚Äôve updat¬≠ed my Speak¬≠ing page to include more con¬≠fer¬≠ences, more videos, and a lit¬≠tle on my speak¬≠ing require¬≠ments and pref¬≠er¬≠ences. I‚Äôm plan¬≠ning to cut down on the num¬≠ber of talks I give in 2014 (twelve is too many), but am always open to inter¬≠est¬≠ing offers and oppor¬≠tu¬≠ni¬≠ties, so please get in touch if you‚Äôre organ¬≠is¬≠ing an event.

[#] 1 Comment . More Asides.