Subscribe: Acko.net
http://acko.net/tag/acko.net/atom.xml
Added By: Feedage Forager Feedage Grade C rated
Language:
Tags:
acko net  bit  canvas  css  design  elements  new  page  perspective  scrolling  shapes  simple  site  theme  time  webgl  work  works 
Rate this Feed
Rate this feedRate this feedRate this feedRate this feedRate this feed
Rate this feed 1 starRate this feed 2 starRate this feed 3 starRate this feed 4 starRate this feed 5 star

Comments (0)

Feed Details and Statistics Feed Statistics
Preview: Acko.net

Acko.net





Updated: 2016-05-12T20:06:53+02:00

 



Making Love to WebKit

2012-01-09T00:00:00+01:00

Parallax, GPUs and Technofetishism If the world is going to end in 2012, Acko.net will at least go out in style: I've redesigned. Those of you reading through RSS readers will want to enter through the front door in a WebKit-browser like Chrome, Safari or even an iPad. The last design was meant to feel spacious, the new design is spacious, thanks to generous use of CSS 3D transforms. CSS 3D vs. WebGL This idea started with an accidental discovery: if you put a CSS perspective on a scrollable
, then 3D elements inside that
will retain their perspective while you scroll. This results in smooth, native parallax effects, and makes objects jump out of the page, particularly when using an analog input device with inertial scrolling. This raises the obvious question: how far can you take it? Of course, this only works on WebKit browsers, who currently have the only CSS 3D implementation out of beta, so it's not a viable strategy by itself yet. IE10 and Firefox will be the next browsers to offer it. There's WebGL in Chrome and Firefox that can be used to do similar things, but WebGL is its own sandbox: you can't put DOM elements in there, or use native interaction. And any amount of WebGL rendering in response to e.g. scrolling is going to involve some amount of lag. Still, I wasn't going put a lot of effort into making a CSS 3D-only design without some backup. That's why I actually built the whole thing on top of Three, mrdoob's excellent JavaScript 3D engine. Aside from providing a comprehensive standard library for 3D manipulation, it also lets you swap out the rendering component. Out of the box, it can render to a 2D canvas, a WebGL canvas, or SVG. The DOM Scenegraph So I augmented it with a CSS 3D renderer (GitHub). It reads out the scene and renders each object using DOM elements, shaped and transformed into the right 3D position, orientation and appearance. They sit ‘in’ the page, and the browser projects and composits them for you. Of course, this only works for simple geometric shapes like lines or rectangles, but luckily that's all I need. It would be too slow to have to render out new elements for every frame, so the CSS 3D renderer's elements persist. Moving or rotating an object involves just changing a CSS property. Same for the camera: the entire scene is wrapped in a
that has its own 3D transform. So it's VRML all over again, but this time, it actually sort of performs. With our browsers being actual 3D engines, it's not a huge leap from here to having a tag in HTML6, can-of-worms-factor not withstanding. Having built a quick prototype, I was satisfied with how well it worked, particularly in Safari on OS X, where the cross-pollination from the iPhone's mature tile-based GPU renderer has clearly paid off and there is no lag at all. The DOM tree of this page. Yup, nasty. Previous design (Archive) Initial sketch Scene editor Design Process Now all that was needed was a design. Last time I drew out a manual perspective drawing in Illustrator, which was tedious, but still basically came down to designing a flat image. This time, it would have to work in 3D. I started with a quick sketch to get a feel for the perspective, now that it no longer needed to double as a flat frame for the site's content. Simple geometric shapes, parallel lines, consistent angles. Simple enough. But if real perspective was involved, I would have to place items so they would look good from multiple angles, and each would need convincing depth and shading. To do this all by hand, typing out coordinates and perpetually refreshing the page, would take forever. So instead I built a simple editor to speed up the process. It's super ghetto, and basically just exists to manipulate the colors, positions and orientations of objects in a Three scene. It spits out a JSON object describing them, which can then be unserialized again[...]



Welcome to the World of Tomorrow!

2008-07-20T00:00:00+02:00

(with apologies to Matt Groening)

After about two years, it's time for another make-over of my site.

My last design had a relatively quirky look, with a bold red/yellow theme built from various irregular vector shapes. The idea was to step away from the typical mold of rectangular aligned frames on a page. I tried to incorporate some elements of perspective into the page composition, but it ended up being a relatively flat, geometrical theme.

This time I wanted to work on the depth aspect and try to create something that feels spacious. To do this, I based the entire redesign on a two-point perspective. While the content itself is normal 2D markup, it sits in a 3D frame.

(image)

(image)

The header image is a regular illustration file (which is 100% manual vector work) and the content is typical HTML/CSS. However there is a twist: the perspective from the header is continued into the content with some simple 3D decorations, created on-demand with Canvas tags and JavaScript (highlight canvases, check out the footer).

While this perspective works perfectly near the top, the further down you go, the more vertically stretched the shapes get and it ends up looking weird. To compromise, the projection actually gets more and more isometric the further down you go. This creates an interesting effect when scrolling down.

The design also uses various CSS3 methods (@font-face, text-shadow, box-shadow) throughout, and uses sIFR 3 as a fallback for the headline font. Unfortunately CSS3 is still mostly unsupported in the browserscape, so only Safari 3.1 users get the luxury combo of pretty, fast and no Flash. Everyone else will have to suffer through hacks.

As a total surprise, the canvas-rocket-science trickery even works in IE6 thanks to Google's ExplorerCanvas library.

I'll probably be tweaking it a bit more in the days to come, but feedback is appreciated.




New Design for Acko.net

2006-07-13T00:00:00+02:00

If you're not reading this through an aggregator, you will have already noticed: I've redesigned my website.

The last theme lasted about 2.5 years, so it was time for something new and fresh.

Now, I don't know about you, but honestly I'm a bit tired of all the pastelly rounded corners and soft shadows that are all the rage today. Sure, it looks nice and neutral, but I'd prefer something with a little more oomph. So, after a day of fun with vectors tools, a highly saturated color palette and some browser-fighting, my geometric theme (uncreatively called Acko8) is completed.

(image)

The result is, as you'd expect, tableless and semantic XHTML/CSS. The theme should work from 800x600 up without scrolling (though at higher resolutions, more eye candy sticks out on the sides). Whether it is aesthetically pleasing depends of course on your own tastes. But I sure love the way it turned out!

What's cool is that I specifically crafted the underlying CSS skeleton to allow images to 'break out' of the text flow. The previous design tried this as well, but had several nasty issues with it. The effect is quite nice.

Aside from the looks I already reorganised the site a bit. The front door page was removed in favor of a more direct approach. I put my side projects a bit more in the spotlight as well. Finally, I emphasised the personal aspect, with a clear explanation of the site's purpose in the upper-right corner on every page.

Comments welcome!




Redesign

2004-02-01T00:00:00+01:00

Finally got around to redesigning the site. I didn't really like the previous red one anyway. However, aside from cosmetics I've also reorganised things quite a bit. The site is now divided in 3+1 parts (Art, Blog, Coding and 'everything else'). I hope things will be easier to find for everyone. Oh and note the spiffy Clean URLs too.

I've had to pull some tricks to get the menu to work, and it doesn't yet cascade down for subsections. I hope the menu-system changes in Drupal will be finalized soon.

Comments are welcome as always. The forum is stuck under Dump if you've got something else to talk about. Old accounts will still work, and Drupal authentication is enabled too.