Arve Bersvendsen

Gallery archive

A CSS backgammon board

2007-09-11 19:10

One of the things I usually do when I want to get to know a new API, new functionality, or learn something old, is to play around with it.

Since Opera 9 added better (read: Near complete) support for selectors from the CSS3 Selectors working draft, I felt the need to familiarise myself with more of the spec, and a challenge from Rune, I wanted to take a stab at creating a rendering of a backgammon board using only CSS, and completely devoid of any markup cruft.

Without further ado, I present the CSS Backgammon board using a variety of selectors and CSS Border Slants. Renders correctly in Opera 9.50, breaks in Firefox 2 and MSIE. Status for other browsers unknown.

A CSS backgammon board | One comment | CSS , CSS3 , Gallery , Opera

More <canvas> Runny image

2006-01-02 10:14

Now, before I get back to my regular programming, I’ll do one more canvas effect:

Runny/dripping image

Should work in Opera 9 and Firefox 1.5.

In addition, I’ve done modifications to the code in the image manipulation examples. At least the fade effect works in FF 1.5 now.

More <canvas> Runny image | Five comments | Canvas , Gallery

<marquee> on acid: Sine scroller

2005-12-30 18:48

Doing canvas stuff was so much fun, I decided to try my some more old-school demo effects. This is a small sine scroller:

View the sine scroll demo
Works in Opera 9 - fails in FF 1.5 (FF doesn’t seem to support clip?) — Other browsers untested.

<marquee> on acid: Sine scroller | Three comments | Gallery

Image manipulation in <canvas>

2005-12-29 16:50

Christmas is a time to meet family and friends. Incidentally it’s also a time to code on all the stuff you never have a chance to do during regular working hours. During my one-week holiday, I’ve spent some nights playing with the <canvas> element, creating a few demos of image manipulation.

This entry has more text, continue reading “Image manipulation in <canvas>” | Nine comments | Canvas , Gallery , Javascript , Opera

Canvas: Mandelbrot

2005-10-21 15:03

In the first of my series of postings about the canvas element: A mandelbrot generator that allows you to save the generated image. This demo works really well in Opera 9, and fails in Firefox, because of repeated “This script is taking to long to run” messages.

The really quick manual:

Select a size. The default is 640×480 - you can go as high as 1600×1200 if your computer is fast enough.
Click “Plot” to see the painted image
If you want to zoom in, you do so by either editing the coordinates directly, or by clicking twice on the map to select that area. Click “Plot” again to repaint.
If you have found a particularily interesting area, you can save it by clicking “Open as PNG”. This will open the image in a new window as a data: URI.

Open the Mandelbrot demo

Canvas: Mandelbrot | Five comments | Canvas , Gallery