UI

tlk.io is a simple web chat. The idea was to create an open chat without having to signup or login. Chat channels are owner-free and you can invite new people by sharing the URL. The coding is done by the great @antstorm, I did the design.

It’s just a start, there’re lots of ideas how it could get improved. But for now.. Happy tlk.ing..!

Update: We added an option to login with Twitter. This will add avatars and users identities are more clear.

Tried to make a Brushed Metal style in CSS3. The texture is done by using 3 repeating-gradients with different length. That makes it look somewhat random. For the linear version, browser support is pretty ok, but for the radial one it’s not quite there yet. I think only in Safari 5.1 and Chrome Windows.

In addition I tried to add a conical gradient for the circle with just faking it with ellipse gradients. It’s ok for low contrasts and if you cover the middle part with an icon or so.. hehe.. ;-P A much more real looking technique is used in this experiment, but I believe it currently only works in Safari and Chrome Windows. Let’s hope that CSS4 will add support for real conical gradients.

See demo.

ZEN is a demo of a single-song HTML5 Audio Player. It’s powered by jPlayer, styled and mostly animated with CSS3.

I’m really happy how the little details turned out. Like how it morphs from a circle to a square button and the swirl at the beginning. Also that it starts out simple and transforms into fancy pants only when needed.

Credits: Thanks to @maboa and @quinnirill for some JS help. Song from Every Day by Girl Talk.

See the demo.

Note: This is just an experiment and hasn’t been tested enough to be used as a real player. Also, the song is hard coded and would need to be made more dynamic. Use at your own risk. ;-)

umbrUI is a demo of HTML <input> elements styled with CSS3. There are: No images, no extra markup and no JavaScript. If you use appearance: none, it will remove the default styles and you’re free to add your own.

input[type="checkbox"] { -webkit-appearance:none; /* Remove default styles */ /* Add your own styles */ }

So I used as many of the :before and :after pseudo elements as possible and well as the Shadow DOM elements. Browser support: WebKit for now.

Credits: The Rocker switch (checkbox) is based on Mike Bernardo’s original design.

Live demo (Safari or Chrome).