Archive for the 'css and html' Category

Mashing it up

Tuesday, April 12th, 2011

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 …

Overflow: hidden and border-radius

Monday, April 11th, 2011

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 …

HTML5Boilerplate

Sunday, August 15th, 2010

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 backgrounds in IE

Sunday, November 8th, 2009

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

Why use CSS Zen Garden for CSS3 demo

Friday, November 6th, 2009

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.

CSS3 presentations at EOTW09 and WebJam11

Thursday, November 5th, 2009

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.

The League of Moveable Type

Saturday, September 12th, 2009

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.

I am on the Edge of the Web

Tuesday, September 8th, 2009

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

Cleaning up Word HTML

Monday, September 7th, 2009

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 ***

Drop caps, first-letter and Firefox

Monday, January 19th, 2009

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.