Blog redesign is done

July 26
2010
in else()

So the new look for the IliaDraznin.com is up. There were some teething pains (cat­e­gories dis­ap­peared there for half a day or so), but it all seems to be work­ing out now. Biggest addi­tion, other than the new design, is the Syntax Highlighter script, to make all those code chunks look nice.

There are still a few fea­tures miss­ing but I’ll be adding those in the upcom­ing weeks. Anyway, it’s back to our reg­u­lar sched­uled pro­gram­ming now.

Leave a comment

Reflections and Accordion using CSS only, in Safari and Firefox

July 28
2009
in CSS

Using com­bi­na­tion of CSS trans­forms, tran­si­tions, gra­di­ents and :tar­get it’s pos­si­ble to cre­ate things that usu­ally require JavaScript — such as accor­dion and reflec­tions (in Firefox). Unfortunately, this only works 100% in Safari and Chrome (and I guess any other webkit using browser). In Firefox these ele­ments behave prop­erly, they just don’t have ani­ma­tions or gra­di­ents. As for IE, I didn’t bother with it at all.

Here is the page I’m going to go over. Feel free to dig into the code and if you’ve got any ideas on how to make it even sleeker let me know. Keep Reading

Leave a comment

Using CSS3 @font-face to “fake” multiple font weights

July 21
2009
in CSS

CSS2 spec­i­fies addi­tional font weights, beyond Normal and Bold. In par­tic­u­larly there are 9 font weights in total — 100, 200, 300, 400 (nor­mal), 500, 600 (bold), 700, 800 and 900. Unfortunately browsers still some­what lack sup­port for this fea­ture, but more impor­tantly fonts lack sup­port for this. Many fonts how­ever, still come with only nor­mal and bold weights. Moreover, based on a few tests, even pro­fes­sional fonts that come with mul­ti­ple weights (such as thin, light, reg­u­lar, bold, heavy, etc.) don’t actu­ally sup­port these weights in the same way as the CSS2 spec­i­fi­ca­tion dic­tates, in other words they can’t be used out of the box like that.

For exam­ple, I have the Arno Pro font (a nice serif font from Adobe). It comes in 4 weights — reg­u­lar, bold, light and semi­bold. Each is encap­su­lated in its own file with a dis­tinct name, e.g. ArnoPro-Bold, ArnoPro-Smdb, ArnoPro-Light, etc. I don’t know much about how fonts work but based on a bit of read­ing I’ve done, for a font like that I should be able to declare a style that uses “ArnoPro” font-family and based on the weight I assign to a par­tic­u­lar ele­ment it would use a dif­fer­ent ver­sion. For exam­ple, ArnoPro-Light for 200, ArnoPro-Regular for 400 or nor­mal, and so on. However, based on a few tests I’ve done that doesn’t seem to be the case. In fact “ArnoPro” font isn’t rec­og­nized at all, only if I spec­ify explic­itly “ArnoPro-Smbd” does it rec­og­nize the font. And of course when it’s done like that all but the reg­u­lar ver­sion are stuck with one weight, i.e. font-family:ArnoPro-Smbd; font-weight:normal looks exactly the same as font-family:ArnoPro-Smbd; font-weight:bold.

In short, the sit­u­a­tion is less than ideal. However, there may be a at least a par­tial fix.

Using @font-face, which was intro­duced in CSS3, you can sim­u­late the extra font-weights by assign­ing the spe­cific fonts to each weight. This is a kind of a hack, and one that will not work in all browsers. In fact, I only man­aged to get it to work in FF3.5. I think IE only sup­ports this for their pro­pri­etary font for­mat, which I didn’t used, and for some rea­son it didn’t work in Chrome 2 either (which I thought sup­ported @font-face), but I didn’t inves­ti­gate this fur­ther, at least not for now. Keep Reading

Comments 21