Archive for the 'css and html' Category

Krantz and Shel­don archi­tec­tural images meets Google StreetView

With Lib­rar­y­Hack and the State Lib­rary of WA day of hack approach­ing, I needed a demo, a quick look at the data­sets that the State Lib­rary of WA made avail­able. I settled on the Krantz and Shel­don archi­tec­tural pho­to­graphs. As this was a small set of pho­tos, I did not have to search through a whole col­lec­tion of 50,000 images look­ing for a suit­able theme, as this data­set already had a theme, the work of Krantz and Shel­don in Perth in the 1960s and 1970s. For­tu­nately most had some basic geo­loca­tion data, such as addresses.

The ori­ginal concept was to pro­duce an anim­a­tion, using CSS3, HTML5 and javas­cript, show­ing the Krantz and Shel­don pho­to­graphs along­side the cur­rent Google Streetview. I have not had the chance to anim­ate the sequence yet …

aka a square peg in a round hole

When I was cre­at­ing the Krantz and Shel­don archi­tec­tural pho­to­graphs meets Google Streetview mashup, (more posts to fol­low on that). I decided that as the Krantz and Shel­don archive was from the six­ties that instead of rect­an­gu­lar images, the images should be cir­cu­lar, which should of been a piece of cake using border-radius CSS3 prop­erty. As the dimensions …

Some­times you look at other people’s code and go why didn’t I think of that. Which is exactly what I thought when I saw Paul Irish’s elg­ant solu­tion to the old con­di­tional com­ments vs CSS hacks dilema. The HTML5Boilerplate by Paul Irish and Divya Manian is a col­lec­tion of elg­ant solu­tions to com­mon prob­lems in web coding.

Boil­er­plate is not a tem­plate or frame­work, just a set of tools to get that site developed quickly. I know I will be mak­ing use of most of it in the near future.

RGBa is the new black, with sup­port in most mod­ern Safari 3, Fire­fox 3 and Opera 10, you can have semi trans­par­ent ele­ments. Only there is no sup­port cur­rently in IE for RGBa.

How­ever, you can eas­ily fake it for back­grounds of block ele­ments in IE with
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#aaRRBBGG', EndColorStr='#aaRRBBGG);
The fil­ter gradi­ent places a alpha chan­nel col­our gradi­ent over the back­ground. So as long the back­ground is trans­par­ent, the start and end col­ours the same and the alpha (aa) chan­nel a value greater than 0 (fully trans­par­ent) and FF (fully opaque), you get a block ele­ment in IE with a RGBa back­ground. You can see an example of RGBa in action in IE …

For those who have not seen my Edge of the Web CSS3 demon­stra­tion I used the CSS Zen Garden HTML. Why, because I wanted to use some­body else’s HTML, mainly because I wanted to show it works with any HTML and that most people would be famil­iar with the site.

I will not sub­mit it, because Dave has not accep­ted any new sub­mis­sions almost two year, my demo is far from the visual stand­ard of most other design and I broke one major rule the CSS does not validate.

I really enjoyed devel­op­ing my present­a­tion for Edge of the Web. The research and exper­i­ment­a­tion was a lot of fun. Explore the demo using CSS Zen Garden HTML and ser­i­ously try it in IE6, the Web­Jam present­a­tion with some even more out­rageous trans­itions needs Safari4 or FF3.7 and a little explor­ing with a mouse.

What I learnt is enough from prob­ably a dozen blog posts, so hope­fully I will be writ­ing lot in the next few weeks.

I just admire The League of Move­able Type. While a lot of font foundries are still work­ing on licens­ing issues with embed­ding fonts in PDFs. here a couple of font design­ers dis­covered @font-face and went lets make the world a bet­ter place. By cre­at­ing The League of Move­able Type, con­vin­cing a few fel­low font design­ers to join them in releas­ing fonts with an open source licence suit­able for embed­ding with @font-face.

Well I am speak­ing at the Edge of the Web Con­fer­ence in Perth in Novem­ber. The title Pro­gress­ive Enhance­ment with CSS: Or how I stopped wor­ry­ing about IE6 and start­ing lov­ing CSS3.

The aim is to show how you can use CSS2 and CSS3 to improve the exper­i­ence of vis­it­ors using mod­ern browsers, while not block­ing access to those people still using older browsers like IE6 …

If you are like me, on occa­sions you have people want to paste dir­ectly from Word into CMS or Word­press. I was bemoan­ing the fact, that you either end up with Word HTML or lose all the format­ting, when a col­league of mine, Steven Miles sug­gest I use JavaS­cript to clean up the HTML and provide the some code.

So this is what I cre­ated to clean up Word HTML, you paste the HTML is to the edit­able div, hit the but­ton and if you are using Inter­net Explorer the con­ver­ted HTML is copied to your clip­board. So you can paste the clean HTML (note it is HTML code) straight into the CMS editor in HTML mode …

*** does not cur­rently work in IE8, I need to invest­ig­ate further ***

I have been exper­i­ment­ing with the :first-letter pseudo-element to try and write up a tutorial on using first-letter, adja­cent select­ors and @font-face to pro­duce drop caps and I have run into a prob­lem in the form of Fire­fox. Because you need to apply the prop­erty float: left to stop first-letter being an inline ele­ment and Fire­fox applies dif­fer­ent rules to floated :first-letter pseudo-element than the other browsers, mak­ing it dif­fi­cult to ver­tic­ally align a floated :first-letter pseudo-element and the the remain­ing text.