Jun 23 2012

Image comparison with CSS

Category: Software,WebdevelopmentSpiller @ 16:07

As I’m browsing the web I sometimes tend to look at the source of the webpages and if it is questionable I consider how this could be improved. However at times it is just to painful to watch…

This website was reviewing Blue-Ray releases of TV broadcasts and showed the differences by overlaying screenshots from the TV and BD versions. When you hovered over them with the mouse, the image switched. This was implemented like this:

    -webkit-transition: opacity .4s ease-in-out 0s;
    -moz-transition: opacity .4s ease-in-out 0s;
    -o-transition: opacity .4s ease-in-out 0s;
    transition: opacity .4s ease-in-out 0s;
<div style="position:relative;">
  <img src="http://i.minus.com/j5BVlrAz0767W.jpg" width="640" height="360" />
  <img class="himage" src="http://i.minus.com/j0KF3taUebpkC.jpg"
      width="640" height="360" onmouseover="this.style.opacity=0;"
      onmouseout="this.style.opacity=1;" style="position:absolute; top:0; left:0;"

Instead of having the CSS in the style sheet as it should, it is unneeded repeated like this for every image. It also uses the style attribute on the elements which is also considered bad practice. (XHTML 1.1 actually deprecated it, but nobody uses that anyway…) I don’t see why you would use JavaScript here either when it is just a simple hover effect.

The HTML can be much simpler:

<div class="himage">
  <img src="http://i.minus.com/j0KF3taUebpkC.jpg">
  <img src="http://i.minus.com/j5BVlrAz0767W.jpg">

As you can see, the only requirements to do this in CSS is a container and a way to identify this container, here done with a class. The CSS is much the same, just not done as attributes:

.himage{ position: relative; }
.himage img{
  -webkit-transition: opacity .4s ease-in-out 0s;
  -moz-transition: opacity .4s ease-in-out 0s;
  -o-transition: opacity .4s ease-in-out 0s;
  transition: opacity .4s ease-in-out 0s;

  opacity: 0;
  position:absolute; top:0; left:0;
.himage img:first-child{
  position: relative;
.himage:hover img{ opacity:1; }

There are some differences however:

  • The JavaScript have been replaced with the :hover selector (which is the last line).
  • Instead of specifying a fixed width and height, max-width have been used. The browser automatically resizes it to keep aspect ratio. (which was slightly wrong btw…)
  • To keep the HTML as clean as possible, the :first-child selector was used to differentiate the first and second img element. :last-child would have made the CSS simpler, however it is not supported in older versions of IE.

Live versions

You can watch the two versions here:

Note: The CSS is included in the HTML for ease of distribution, it should of course be in the style sheet.

Edit: My version behaves a bit differently, the hover area is the whole div and not just the img, if you want the same effect change .himage:hover img to .himage img:hover.


I cannot currently test it in IE7 and IE8 (and I don’t care about IE6), however I think it should work if you take the following in account:

  • The :first-child selector is supported from IE7, but not on content which have been inserted with JavaScript.
  • opacity is not supported in IE5-8, you will have to use MS filters in addition to opacity to get it working there. It is two extra lines of CSS for each time opacity is used, see this article on how to do it: quirksmode.org: opacity – IE compatibility note
  • The CSS3 transitions effects degrade gracefully. IE support will be in IE10, prefix not necessary (source).

Jun 19 2012

RICcreator – pugixml

Category: Lego,Mindstorms,Programs,RICcreator,SoftwareSpiller @ 01:22

Since I’m not working actively on RICcreator in the moment, not much have happened the last few months, however I just rewrote some terrible code which was not safe. RICcreator would crash if the settings.xml file is formed differently than expected, so when a new version changed the format, it would crash if the old .xml file was kept.

XML handling

The XML parser previously used was rapidXML which promises great performance, and since I want to do some game related programming with XML I wanted to learn the API. However as I tried to use it with RICcreator I quickly realized it was rather tedious to work with. So I slacked on the implementation. Most importantly, I didn’t do any validation and simply chained the node lookups. So for example to get to the “settings” node in the “RICcreator” node I did this:

doc.first_node( "RICCreator" )->first_node( "settings" )

However if first_node() can’t find the node it returns NULL and in case of this the second call will try to dereference a NULL pointer and crash the application. To avoid this it should have been done like this:

xml_node<>* root = doc.first_node( "RICcreator" );
if( root ){
  xml_node<>* settings = root->first_node( "settings" );
  if( settings ){
    //Process it here

This is quite some code for a simple lookup, so as said I slacked. Adding nodes to a new document (when saving the settings) was even more tedious as you had to allocate nodes and then add them. (On the other hand, I couldn’t slack here.)

So I have been looking for a simpler C++ XML parser and recently I heard about pugixml. I like the API much better, it is also a lightweight parser and apparently even faster than rapidXML so I tried it out. The previous lookup would look like this in pugixml:

doc.child( "RICCreator" ).child( "settings" )

This doesn’t share the problem rapidXML has, because child() returns a “NULL” object on failure. The NULL objects functions all return another NULL object, so you can chaining like this is completely safe as long as you check the final result.

So I have rewritten all XML handling to use pugixml now and I’m quite happy with the result. The code is a lot prettier and most importantly, it shouldn’t be able to crash like before.

Other changes

The dithering have been changed to use Filter Lite instead of  Floyd-Steinberg, which produces nearly as good result but which is quite simpler (and therefore faster).

A fun addition is grayscale importing support. If you want to toy around with grayscale images on your NXT, RICcreator makes this easy by letting you import the same image several times with different thresholds in one step.

The Number opcode is now no longer aligned to multiples of 8, as this limitation has been removed in the enhanced firmware.

A few bugs have been fixed and it should be possible to compile in Visual Studio again. (I haven’t checked after rewriting the XML stuff though.)


Revision 165 win32: RICcreator rev. 165 – win32.zip

Revision 165 source:  RICcreator rev. 165 – src.zip

Tags: , ,

May 01 2012

XOR gate

Category: Lego,TechnicsSpiller @ 09:08

As I mentioned in Mechanic NOR gate I was working on extending the NOR-gate to a compact XOR-gate and I finally succeeded in making a prototype of it.

My original idea to make it smaller failed, however after trying to think outside the box for a bit I finally made a breakthrough. Keshav Saharia made an AND-gate by surrounding an OR-gate with NOT-gates. I realized that this can be achieved by modifying an OR-gate slightly. Instead of enforcing the output to be true when one input is, you can get the AND-gate result by enforcing that the output is false when at least one input is too. Instead of pushing the output beam on true inputs, you pull it on false input like shown in the example AND-gate design below:

AND gate

With this much smaller AND-gate it becomes a whole lot easier to create a compact XOR-gate. My prototype as shown below contains two layers, one layer contains 2 AND-gates and one OR-gate while the bottom layer is a single NOT-gate.

Top view of XOR gate Bottom view of XOR gate

The reason I call this a prototype is that it contains the same flaw as Keshav Saharia’s XOR-gate, it does not reset its internal gates when a state updates. This could be solved by using rubber-bands like I did with my NOR-gate design. However I believe this approach to logic gate design is flawed and since it is difficult to do add this without increasing the size (and work well) I wouldn’t even bother.

The issue is that friction will continue to build up in the system when you start combining the gates, and those rubber bands makes it much worse. (I also fear that the rubber bands in one gate might affect another gate.) It is limited how much force these gates can function with. Small inaccuracies in how much the axles extend will also propagate throughout the system.

All those issues limits the amount of gates you can chain together and I don’t think it would perform well enough to complete a 4-bit adder (using half/full-adders).

So I want to try a completely different approach using continually rotational power as inputs and using gears to create the gates. One of the advantages is that gears can handle much much larger power throughput than the axle-beams approach. Secondly, by making it continuous you can more easily supply more power by embedding motors in the gates. The big disadvantage however is that it will use much more space and therefore also pieces. However if I can get it to work and I believe it will scale well I will try to get the gears/parts required.

Mar 02 2012

Multi-monitor wallpapers

Category: SoftwareSpiller @ 23:18

I have been messing around with my monitors and portrait mode and I want to try out this setup for a while and see how it goes. Creating a dual-monitor wallpaper for Windows 7 on this particular setup manually is fairly tricky so I’m going to share how to do this with Gimp.

Dual-wallpaper on my monitors

I’m going to walk through a rather difficult case here, having screen space to the upper left of the main monitor and making a single image span across while taking in account the monitors real world position. If you just want to have a different wallpaper on your two normally aligned monitors it is much simpler.

Specialized software to do this

If you don’t want to go through all this trouble there are software out there to do most of the work for you. A open-source alternative is Duel Wallpaper from the Dual Monitor Tools software package which can be found on SourceForge: http://dualmonitortool.sourceforge.net/dualwallpaper.html

Also, according to addictivetips, Windows 8 will have at least some support for wallpapers on multiple monitors.

Telling Windows the screens relative positioning

Before starting this you should ensure that Windows know how the two monitors are positioned to each other, as this will affect how the wallpaper has to be done. You can do this by right-clicking on your desktop and click “Screen resolution”.

Windows monitor dialog

Notice that you can drag the monitor icons to match how the screens are positioned in real life. This affects how your mouse, windows and wallpaper wraps over to the other monitors, so make sure this is correct if you have differently sized monitors.

If your monitor´s stand allows you to adjust the height of the monitor then it is easier just to make a rough positioning in Windows and then adjust the monitor height to align it precisely.

Understanding Windows 7 wallpaper positioning

There are 5 modes: Fill, fit, stretch, center and tile. The first four will use the same wallpaper on both monitors which makes them unusable for this. The tile option however is based on the main monitor´s upper left corner and repeats from this point and continues repeating onto the other monitors while respecting its relative positioning as explained in the previous step.

That means that if you have two 1280×1024 px monitors side by side showing a 2560×1024 px wallpaper, the main monitor will show the area from 0x0 to 1179×1023 px and the secondary monitor will show the area from 1280×0 to 2559×1023 px.

However if the secondary monitor is to the left of the main monitor, it will still display the right side of the wallpaper! This is because the left monitor is showing the tile left to the main monitor, which is illustrated below with my monitor setup:

How wallpapers tile on multiple monitors

So when you have to create your wallpaper, you have to make sure that the resolution is large enough to make sure that two monitors are not going to show the same area. Secondly you have to consider which areas are going  to show up on which monitor.

Creating a monitor mask

When you having a more complicated screen setup like shown above it is useful to create a mask showing the areas will be shown on the screen and how they are positioned with pixel accuracy.

First, press Print Screen to take a screen shot. Press Ctrl+Shift+V in Gimp to create a new image containing the screenshot. You should now have something like this:

Screenshot showing black areas

Notice how the areas which are not covered by your monitors are pitch black. Next, make sure that the image has an alpha channel by right-clicking on the layer and clicking “Add Alpha Channel”. (If it is disabled, it already has one)

Screenshot of rightclick menu

Now we want to remove everything except the black areas. To do this, use the Fuzzy Select Tool to select all the black areas. To select more than one area, simply click while holding Shift to add another area to the existing selection.

When done, invert the selection by clicking “Select->Invert” (or by pressing Ctrl+i) so that everything except the black areas are now selected. Then press Del to delete everything in the selection which should now become transparent like this:

Screenshot of finished mask

Taking physical position into account

All normal monitors have an edge all around the screen which makes it impossible to avoid a small gap between each monitor. This makes everything jump a small distance every time something transitions from one screen to another. This isn’t too apparent when it moves horizontally, however it if is diagonally is is a different story as you can see in the following photo:

A photo of a diagonal going from one monitor to another

To get the best results you should takes this gap in account when creating your wallpaper. So find your ruler and start measuring!

When you have found the distance between the monitors we will have to convert this distance into pixels. Since I wasn’t completely sure which PPI my monitor was, I took the low-level approach and created a 10 cm wide image:

Screenshot of the advanced settings in the New Image dialog

Using my ruler I measured the width of the created image on the screen. When it didn’t match, I adjusted the PPI in the advanced settings a bit and created a new image until I found the correct PPI. Once I found it, I created a new image using the width I measured the gap to be using that PPI setting and used the dimensions of the image in pixel as a converting tool. (Interestingly enough, it ended up being 94 PPI.)

To finish your monitor mask, add this new information to it:

Finished monitor mask

You only need to make this mask once so make sure to save it somewhere safe so you can reuse it next time you want a new wallpaper.

Creating a wallpaper

Now the fun finally starts. Find an image and resize and crop it so it has the same dimensions as your monitor mask and place your monitor mask on top of it like this:

Image with monitor mask on top

The few next (and last!) steps will, based on this image, create the wallpaper image for Windows. As said before, the parts of the image will show up on different screens so this is where the monitor mask comes in handy.

The image needs to be at least the same size as your screenshot. The rules are simple. In the upper-left corner you place the area which is going to be shown on your main monitor. For areas to the right you add it right to the right of the main monitor. For areas to the left you add it to the right edge of the image, moving towards the left side. For areas below you add it right below the main monitor however for areas above you add it at the bottom edge of the image, moving upwards.

The result in my case looks like this:

The wallpaper image


Windows doesn’t really take multiple monitors in account and this shows up here too. Just making a simple wallpaper like this is a bit of work and generally using the third-party software is probably the best way for most people.

The but is that I’m not sure if it is possible to properly take the gap between the monitors in account with the third-party tools.

For most monitor setups doing it manually should be a breeze however and even with this kind of setup it is not too bad once you tried it a couple of times. It would have been much easier if Windows had used the upper-left corner of the combined monitor area instead though.


I thought that there was something looking wrong and there was… My monitors are standing at a slight angle to each other and this is making the perspective slightly off. Seriously, this is starting to become rocket science…

Tags: , , ,

Feb 29 2012

New site and status update

Category: Lego,Mindstorms,Programs,RICcreator,Software,StepmaniaSpiller @ 20:28

The time has finally come where I ventured out in the myriad of paid hosting providers. Free hosting isn’t really worth it and WordPress.com doesn’t allow you to do anything (without paying buckets). WordPress.com is fine if you just want to have a blog, however as a CS student I want to mess with everything. So I tried a local hosting provider and we will see how this goes…

Status on RICcreator

I haven’t had the time to develop on this for quite some time but I can do some work on this regularly now.  However I’m not going to do that. While far from perfect, RICcreator have matured and I do no longer feel the need to use nxtRICeditv2 anymore. I haven’t even started the program up in months as I’m using RICcreator for everything RIC related now.

As I’m not seeing people use it I will simply fix bugs and add features when I want the functionality. So while not dropped, development will be slow. I will still fix bugs if anyone reports them and I’m open for feature suggestions. I will do one more release which probably will be the last major update for a while.

While I want to move my focus to other things, RICcreator marks an important milestone for me: I am now creating software which I find useful enough to use in my everyday life. RICcreator is my first medium-sized application and I’m quite satisfied with the result.

What I have been doing the last few months


I was working on in a project group for a project for CS at university, however 4 out of 7 people in the group decided to drop out of CS. So the lone 3 remainders had to write 80 pages in 2 weeks, which worn me out a bit. Anyway, the project was about image editing and we wrote a couple C programs to do several functions. The code is made available at SourceForge as Superus.

It uses a command line interface and only accept PPM input/output so it might not be that useful for many, however it can read 16-bit PPM, edit it in 64-bit float and save it as 8/16-bit using dithering to ensure maximum quality. So it is possible to do certain things which simple isn’t currently possible in GIMP. (It should also be gamma-correct unless we screwed up on the conversions.)

I have written about half of the code, the parts which handle PPM input/output, image representation (how it is stored and worked with internally in the programs), scaling, brightness, blurring/sharpening and various filters. “nielssonnich” wrote the Command line interface and scripting code.

I might continue to do some experiments with this codebase, but it should be considered to be a one-shot project though. I might also write a post about one of the cases where I had to use Superus instead of GIMP to achieve the results I wanted.

BPM graphing

I wrote a small quick program to graph the BPM changes in a .sm chart for DDR rhythmic games which you can read more about here: BPM graphing [Thirdstyle]

I was in the process of porting it to PHP but I didn’t finish it. However I want to finish it soon as I have some bigger plans (see below) which I hopefully will start on in the summer vacation. It shouldn’t be more than 1-2 days work anyway…

What I’m doing now

I have started on a new project for CS with a new group and our goal is to create a spell checker which can correct grammatical errors in Danish. We have not yet decided whether we will try to parse sentences or try to make something like a neural network, but nevertheless this will be a challenging and interesting project.

Another thing I’m working on is a custom theme for this blog. Now that I’m not limited by WordPress.com I can write my own PHP code so I can achieve just want I want. I’m going to take my sweet time on this as it is low on my priority list.

LDraw viewer

At university we are taught C#, however the exercises are quite boring as we have to write some random code which does nothing more exciting than a “Hello, World!” program. So instead I will be working on a project I wanted to do for nearly a year now, a LDraw viewer. It should load a LDraw CAD model and display it on the screen using OpenGL for the graphics.

I’m obviously not trying to create something special here, as there are already several software out there which has similar functionality. This is purely a study project and in particular I want to get a good grip on OpenGL and 3D graphics. However since I also want to cooperate this into my education I will be writing it in C#, to get some proper experience in it. I haven’t written any code so far, but I will do so within a weeks time.


You heard right, I haven’t forgotten about this project. It pains me that I have not completed the ‘level 2’ mode which contains the battles, so I want to do something about that. I might do a bit of work on it from time to time, but don’t expect sudden rapid development on it ; )

6wd Off-roader

I’m still not done with this project, however I’m almost finished now. Just missing a bit of reinforcing of the mechanics and improving my software and I will call it done, I want to move on after all.

What I will do in the future

DDR for keyboarders

One of the project ideas I have on my Projects plan page and I will attempt to start on it this summer. (This was why I did the BPM graphing thing.) I’m been playing Stepmania for 4-5 years now however I absolutely hate the engine. It is slow, buggy, old-fashioned and straightforward annoying. I want to try making an engine which is very different in a lot of points but which still keeps the good old game play.

This is a very ambitious project and I might not end up with anything useful. However I want to challenge myself even further and I want to tell the community that there are people out here that wants to move on from the old DDR arcade days.

This is definitely a large project and I have to make use of a lot of technologies and techniques I haven’t used on the PC before, only with NXT or PHP. OpenGL, threading, databases and perhaps even some driver interaction stuff.


There is really a lot of stuff I want to do and not really that much time. Can I pull all this off without going overdue? Probably not, but I will really want to try my hardest to arrange my time so I will complete everything. I tend to waste a lot of my time doing random stuff which is really a shame when there is so much I want to do.

Jan 30 2012

Linear 4-finger grabber

Category: Lego,TechnicsSpiller @ 20:02

I originally made this design for a small scale pneumatic robotic arm which included a multiplexed pneumatic control station. I here present you a revamped version of it:
Photo of grabber

LDraw file

This design works with both with pneumatics and linear accumulators. The tubing will be a bit tight for the pneumatic version, but if you are worried you can just remove the axle which is in the way. It might also work with the small pneumatic piston which would create a very compact design however I don’t have one of those so I can’t try it out.

In the design each finger is a section of its own and every section is completely the same, just rotated 90 degrees each. I like it as it is something I rarely see in Technic models; mirroring is quite common however rotating is much less seen.

Tags: , , ,

Jan 30 2012

Another – first impressions

Category: AnimeSpiller @ 19:16

I try to keep anime off this blog, but I still wanted to bring this series up.

There isn’t really that much interesting anime this season, actually there is only one series that I’m looking forward to and that is “Another”. It is a horror series which started airing this month and the fourth episode is to air the 31st.

I’m not really a horror fan, mainly because they usually are too predictable and therefore not really that scary, and I do not expect this series to be much different in that regard.


The plot isn’t really that unique at this point. A young boy moves to his grandparents because of family reasons and therefore transfers into class 9-3 at the local school. However that class happens to have a dark history… 26 years ago one of the students died in an accident but as she was popular and loved by the class they started denying her death and pretended that she was still alive. However their actions prevented her to rest in peace and at the time of graduation she shows up in the group photo.

Returning to the present this particular boy tries to fit into his new class only to learn that they are holding something hidden from him which appears to be the cause of the uneasiness that spreads throughout the class. In addition there is this girl in the class that just feels out of place which catches his interests.

That is pretty much the main point of the plot without spoiling too much. The outline is set by the end of episode 3 and I suspect that “accidents” will play a major role in the story.


The main reason for my interest in this because how well it is executed. The visuals are in my opinion on a level rarely seen in weekly series. Not only is it well drawn, it manages to create a mood which matches the series well. This is where many other animations fells short, however Another still manages to excel in this area.

The series director have also made a decent job on this which combined together with the level of the visuals really creates something special.

Screenshot Screenshot

Screenshot Screenshot

Screenshot Screenshot

Screenshot Another logo

If the animation wasn’t good enough, the soundtrack is well done too. The soundtrack have some of the qualities as Ga-Rei Zero, the actual music isn’t great by itself but when used together with the video and sound effects manages to bring out emotions that it can’t do by itself. While it is not on the same level as in Ga-Rei Zero, it is still fairly good.


The plot doesn’t appear to be anything special but it has potential to be interesting if it does not spoil too much too soon. The main strength of this series so far is the execution of the plot. The direction is decent, the visuals are great and the sound is decent too which when combined really makes this an experience to watch.

Tags: ,

Jan 29 2012

Mechanic NOR gate

Category: LDraw,Lego,TechnicsSpiller @ 19:20

Several years ago I tinkered around with making mechanic logic gates, so the LEGO Answers question: Is it possible to build simple logic gates with LEGO mechanics? caught my interest.

Keshav Saharia blog post Mechanical computation from Lego bricks was interesting, but I was not quite satisfied with his NOR gate. First of all the OR gate in it looks rather shabby in my opinion but most importantly it does not reset its state. It starts out in the TRUE position, but when an input becomes TRUE and the output becomes FALSE it will stay FALSE even it the input changes back to FALSE again. So I wanted to try making my own version based on Keshav´s design and the result is shown below:

Top view of my NOR gate  Bottom view of my NOR gate

(CAD file available, I just can’t upload it to WordPress and Brickshelf appears down at the moment.)

My version is a bit smaller as the frame is 6×8 instead of Keshav´s 6×10, but it does use a few more pieces. I’m not quite satisfied with my OR gate either as I’m not sure how much force it can transfer before becoming unreliable.

A rubber band have been added so the gate properly resets itself however it does create a new problem, more force is needed to go through the input in order to operate the gate. This is not a problem with just one gate, but imagine 10 of these stacked together and this force will become rather large.

So I believe that the axle approach will always be limited with that, because while most gates pushes, insert a NOT gate and it will start pulling which could pull the axle out of what might be connecting it.

I tried making an AND gate where the NOT gates are combined with the NOR gate (in order to make it smaller) but I didn’t succeed in making up a good design for the combined double NOT and OR gate. But inspiration have struck me and I have an idea how to make a XOR gate which will end up being about 6×12 and about 5-6 stud high. This will be my next goal.

Tags: , ,

Jan 28 2012

9392 Quad Bike – review

Category: Lego,TechnicsSpiller @ 20:38

One of the new Technic sets, the 9392 Quad Bike, looked rather interesting to me since it has 3 springs, chains links and that the price is low as it is a small set. So I went ahead and bought one.

Assembled Quad Bike


The build was fairly straightforward and if you know what you are doing it shouldn’t cause much trouble. If you are new to Technic it might be a bit tricky at times I guess, as the chassis is constructed of angled beams in an way which isn’t straightforward and there are sub-modules which again isn’t always straightforward to combine with the main model. The instructions are however clear about these areas and does also at times include extra clarifying illustrations of the assembly to make sure you did it correctly.

I don’t like how the pieces were sorted in the backs though. There were a lot of cases were I thought it should be in one bag, but it actually was in the other. For example, the 3m Technic pin was not in the same bag as the 3m Technic pin with Stop Bush, which makes no sense at all. There were 3 bags and they were NOT ordered.

The unboxing and construction of the main model took just under a half hour.

The model’s construction

I was positively surprised of the construction of this model. I have previously been a bit disappointed with Lego’s newer models which just feels weak in my opinion. This model only contains 182 pieces (+26 chain links), yet it manages to impress me. I really like how the chassis is constructed by angled beams and how those angles are used to add details to the construction. I also like how the front is made, it manages to get a cool looking suspension with steering while keeping the piece count down.

There are a few things in the construction which isn’t optimal though. The motor block is rather loose but most importantly, the chassis hits the ground before the front suspension is fully compressed. While I could live with the first, the latter is definitively a flaw in the design.

At times the part usage appears a bit weird, for example a 4m axle with stop is used where a 4m axle without stop actually would have been better, but I guess it is to make the available parts better.

But all in all I like it as it packs a fair amount of features using only ~200 pieces and looks rather nice at the same time.


This sets contains a lot of angled beams, in fact it nearly doesn’t contain any straight beams at all. I rarely don’t use those parts though, in fact I have a whole box of them which I never touch.

The tires, springs, motor block and chain links are a good plus, but it would be nice if there had been 4 springs instead of 3, as this would have made it possible to create a fully suspended car.

The rest is pretty much just normal pieces, but most of them are only in the 1-3 amount so there is a great variety, including some more special pieces.


While there are a few flaws this is definitively a good set and worth buying. The model is cleverly constructed and packs a decent amount of features, at the cost of being a bit more tricky to build. There are about 210 parts in it which are rather varied which makes it a good buy if you have a few sets already and want to spice your collection up.


Nov 30 2011

Color-independent CSS with alpha overlays

Category: Software,WebdevelopmentSpiller @ 00:07

This sidebar design caught my eye:

There are several of these boxes in different colors and I kinda liked the effect. To create this effect two images are used, one which contains the top part of the box, including the rounded corners and another which just contains the rounded corners for the bottom. (These needs to be separated so that the box can grow.)

However for each color there are a separate set of images and you have to set the color in the CSS too. This requires you to download several almost identical images to view the page which is not optimal. Secondly, in the case you want to change the color, you need to create a new set of images and then find the part in the CSS and change that too. If you wanted to mirror the boxes or change the design a little bit, you would have to redo every image, which again is not optimal.

So the optimal solution would be that the implementation didn’t rely on a specific color and that we could just change the color in the CSS and expect everything to work as intended. And this is indeed possible in this case. We can even use CSS3 transformation to change the color on-the-fly!

Color independent implementation

The trick here is to use alpha compositing to create the effect. If we placed a completely white image on top of the orange color, we would obviously end up with an completely white result. However what if the image had been 50% transparent? Then we would have ended up with a lighter orange color since some of it had been replaced with white.

This is exactly the effect we are going to exploit here. With image formats like PNG you can control the alpha (transparency) of each pixel by drawing on the alpha channel. So we will make a completely white image and then draw the two circles on the alpha channel. Let’s start with looking on the original image:

Notice that it is saved in JPEG and weights 7.18 KB. As explained previously, this should have been saved in PNG as it compresses better. So I remade it from scratch, trying to match the original image.

Here is the image, where we have drawn on the alpha channel instead:

(I had to make it blue as otherwise it wouldn’t have been visible as this blog´s background is white.)

Since this image is completely the same color, just with alternating alpha values, it will work nicely with all backgrounds. Try it out on different backgrounds and see the effect! And take a look at the file size too, it is only 1.82 KB, quite a bit less than the original. (The white version was 1.85 KB)

Using CSS3, we can create our box as easily as this:

width: 223px:
min-height: 140px;
border-radius: 5px;
background-color:  #f07575; /* Some random color here */
   background-image: url('overlay.png'),
   -o-linear-gradient( top, rgba(0,0,0,0) 140px, rgba(255,255,255,0.41) 140px);

First we set the width and the minimal height (so that it can expand), nothing special here. Next up is creating the rounded corners and setting the background color we want.

The background-image is the interesting part. First we use the overlay image we just made for this. We have background-repeat set to no-repeat, so it only appears where we want it.

Then a gradient suddenly appear? This is to make it look as intended when the box becomes larger than the 140px the image is. If we didn’t do anything, this would happen:

So to avoid this we could make our overlay image as long as the box possible could be, for example 1024 pixels high. This would increase the file size a little (to 2.97 KB) so let’s use CSS3 to do it in a more fancy way.

Instead of using a single image, we could use two, our normal overlay and a second overlay 1024 pixels high which is fully transparent the first 140 pixels and then becomes our semi-transparent white colors afterwards that. If we place those two on top of each other (using CSS3 multiple backgrounds) we can replicate the combined image.

Why do this? Because we can make our browser generate the second image by exploiting linear-gradients. Linear gradients are pretty flexible, we can specify several color-stops and the positions those stops should be at. So lets take a look at that piece of CSS again:

-o-linear-gradient( top, rgba(0,0,0,0) 140px, rgba(255,255,255,0.41) 140px);

We start at the top with a fully transparent black which should continue to 140px. Then we change the color to a transparent white, which should start at 140px. Our two colors start and stop at the same place, so we are actually not getting a gradient as the switch is instantaneously. However what we do get is the image we want, and it will automatically expand to even more than 1024 pixel if required.

The sample page ends up looking like this:

CSS2 implementation

The only part I will cover here is how to make the rounded corners color-independent. Download the sample page to see the full implementation.

Adding rounded corners so they don’t depend on the color of the box is pretty simple, just draw the inverted corner so that you draw the page background. This will of cause make it dependent on the background of the page, but it is better than it being dependent on both, right?

(Again in blue because of the blog theme.)

Sample page download

You can download the images and HTML+CSS2/3 source here: http://www.box.com/s/rgslnmrbtaqaeyppbly8

The file css2.html contains the CSS2 implementation and the file css3.html contains the CSS3 implementation. The CSS3 implementation also contains a little extra stuff to make it fall-back more gracefully.


« Previous PageNext Page »