simurai

BonBon Buttons - My goal was to create good looking CSS3 buttons...

Thu, 02 Sep 2010 22:58:36 +0200

BonBon Buttons - My goal was to create good looking CSS3 buttons with minimal markup. They use only one PNG for the background noise, everything else is rendered by the browser.. well, so far only Safari, Chrome and Firefox. I’m quite happy how they turned out, but of course, the lack in cross-browser support makes them just another demo.. for now. ;-)

If you are interested in more details, I wrote some sort of tutorial and of course you can click them. See them live.

ZEPPELIN is an experiment trying to create a glass text effect...

Fri, 20 Aug 2010 04:10:33 +0200

ZEPPELIN is an experiment trying to create a glass text effect (refractive index) with CSS3. Yes, another useless CSS3 demo. But I always try to keep the markup as minimal as possible.. this time there is only one extra

tag needed. I tried to use the :after pseudo-element, but somehow the animation didn’t work.

The refractive index effect is achieved by using two background images on top of each other. The underlying one get’s scaled down a bit and the top one get’s cutout by the text using -webkit-background-clip: text. For the embossing effect a -webkit-text-stroke with a low opacity is used. Something to keep in mind, animating clippings, text-shadows, transparency can make your CPU spike, it’s not just Flash, CSS can be misused too. So make sure you don’t loop the animation forever.

This experiment is inspired by Trent Walton’s example.

See the live demo.

Where are the trees is an experiment trying to create a...

Mon, 26 Jul 2010 19:04:55 +0200

Where are the trees is an experiment trying to create a Tilt-Shift effect on Text using CSS3.

Once again text-shadow was my best friend. By adding a bigger offset-y and blur-radius to the top and bottom edge, the text appears to have a lens blur that is typical for tilt-shift effects. There is also some rotate, rotateX and skewX to make the text match the perspective of the background image.

See the live demo →

melerslimsana: alexsaysrwor: To me, this is 2012.

Tue, 20 Jul 2010 22:30:31 +0200

melerslimsana:

alexsaysrwor:

To me, this is 2012.

Button Theme is my 2nd tumblr theme. It turned out pretty girly,...

Sun, 18 Jul 2010 20:30:00 +0200

Button Theme is my 2nd tumblr theme. It turned out pretty girly, I think. ;-) I just didn’t wanna do another white, clean, minimal looking theme, because there are already plenty great ones in tumblr’s theme garden.

So this theme has a bold title, buttons and a fabric texture that you can customize with your own colors. When you resize the browser, the right part starts to jump down - good for smaller screens. And other tumblogs you follow get added to your “Button Collection” on the left.

Demo
Install

startupquote: Creativity comes from constraint. - Biz Stone

Sun, 18 Jul 2010 13:06:32 +0200

startupquote:

Creativity comes from constraint.

- Biz Stone

CSS3D creates a stereoscopic 3D effect with CSS3 only. First I...

Mon, 12 Jul 2010 20:49:21 +0200

CSS3D creates a stereoscopic 3D effect with CSS3 only. First I just created this red and cyan effect because I thought it looks cool. But then I got some 3D glasses and was shocked that it actually works. Basically you just need one line of CSS. A text-shadow with a red and cyan offset. The trick is to use “em“s for the text-shadows. That way, if you change the font-size, the text-shadows change in the same proportion.

text-shadow: -0.06em 0 red, 0.06em 0 cyan;

See the Demo →

Note: Actually you are not limited to text only. You can use the same technique with box-shadows. It even works when you add some of webkit’s 3D transforms like rotateY.

Update: Wow! I submitted this to Smashing Magazine’s CSS3 Design Contest and it made it on 3rd place, which makes me incredible happy. Thanks!

For comments please use twitter.

I just wanted to thank you for creating the Organ theme. My fiancé used it to propose to me (http://rachelmarry.me)!

Thu, 08 Jul 2010 19:30:07 +0200

Hey, wow.. that’s pretty amazing! Thanks for sharing the good news and I wish you both a happily ever after.

http://rachelmarry.me

CSS3 Image Blur. Is it possible to create a blur effect with...

Sun, 20 Jun 2010 01:58:00 +0200

CSS3 Image Blur. Is it possible to create a blur effect with just one source image and CSS? Well, kind of:

You stack the same image a couple times on top of each other and apply a combination of shifting, scaling and low opacity. The more blurry it should look the more stacking it would need. And there we already have the problem: It’s ugly markup and not really recommended. It probably also makes the browser super slow. Therefore, I’ll leave it at this and wait for CSS4. ;-)

See the Demo →

Update: Some people on twitter pointed out that it’s possible to apply SVG filters to HTML elements. I guess that’s the much better approach.

CarveMe tries to simulate an inset text-shadow with CSS3. Since...

Mon, 14 Jun 2010 23:36:51 +0200

CarveMe tries to simulate an inset text-shadow with CSS3. Since Safari5 is out, we now can finally use box-shadow: inset for all our shiny buttons. But what about an inset shadow on text? Unfortunately text-shadow: inset doesn’t work. But there is a technique that kinda simulates the same effect.

background-color: rgba(82,96,117,0.5); -webkit-background-clip: text; color: transparent; text-shadow: rgba(255,255,255,0.5) 0 5px 6px;

So instead of having a dark inset shadow on top of the bright text, we use a bright text-shadow on the dark background.

See the Demo →

FLASHLIGHT is another CSS3 experiment. Again the text color is...

Sat, 12 Jun 2010 18:38:00 +0200

FLASHLIGHT is another CSS3 experiment. Again the text color is set to transparent and text-shadow is added. For the hover effect a rotateY transition is used with a low perspective.

I’m assuming to make this cross-browser would be a nightmare, so I’m not even gonna try. I just got it to work in Safari. ;-(

See the Demo →

ps. For those that don’t have Safari installed, you can see a screenshot on dribbble.

I ♥ BLUR - Once again, I got distracted experimenting with CSS3....

Thu, 10 Jun 2010 23:30:00 +0200

I ♥ BLUR - Once again, I got distracted experimenting with CSS3. ;-) So far I just knew how to make text look blurry by adding a lot of text-shadows like in this example by David. But it’s more a glow, because the text still stays in front. But what if you wanna turn text into smoke? Luckily you can set the text-fill-color to transparent and that gives your text a really nice smoky blur.

color: transparent; text-shadow: #fff 0 0 100px;

That’s it! And if you animate it, it get’s even sexier.

See the Demo →

Update: Ohh.. snap. Some friendly people on twitter pointed out that there is actually an even simpler way to create Text Blur. So before this get’s too embarrassing, I quickly should change the code above. ;-) By using just color instead of -webkit-text-fill-color it also works in Firefox (although the blur looks a bit stronger). Thanks for telling.

Sapporo’s Legendary Biru is really stunning. A journey...

Wed, 09 Jun 2010 10:31:32 +0200

Sapporo’s Legendary Biru is really stunning. A journey through Japan’s rich cultural heritage.

This dribbble invite flowchart hopefully get’s me invited...

Thu, 03 Jun 2010 01:40:00 +0200

This dribbble invite flowchart hopefully get’s me invited into dribbble. I just hope people don’t take it too serious.. ;-)

Update: A million thanks to Peter and Chriskalani for inviting me. They are real winners, everyone else is either a looser, sucker or assh.. naaah. just kidding! ;-)

HTML5 vs Flash is a new Blog I started. The super hero for Flash...

Thu, 27 May 2010 23:38:24 +0200

HTML5 vs Flash is a new Blog I started. The super hero for Flash is pretty obvious: Flash. For HTML5 I picked Green Lantern. Not sure why.. a lot of people think HTML5 is new and fresh and green.. it was also a good fit because I could replace the lantern with an Apple in memory of Steve Job’s thoughts on Flash.

IS Parade turns your twitter followers into a parade. Pretty...

Mon, 24 May 2010 18:00:06 +0200

IS Parade turns your twitter followers into a parade. Pretty cool.

Beautiful Japanese Web Design

Thu, 13 May 2010 18:53:00 +0200

Beautiful Japanese Web Design:

cameronmoll:

Inspiring.

Clients From Hell..

Mon, 03 May 2010 18:54:14 +0200

.. is a collection of anonymously contributed client horror stories from designers. Super funny. An example below:

clientsfromhell:

Client: “Hi, I’d like you to design a website for me, but I need to borrow some money from you.”

Me: ”Ok, but what for?”

Client: ”I need to pay the money I owe to the last designer I hired.”

Organ is my first tumblr theme. See the demo! Well, it’s...

Wed, 14 Apr 2010 01:27:00 +0200

Organ is my first tumblr theme. See the demo!

Well, it’s more a CSS experiment that doesn’t use any JavaScript for the animation. Make sure you test it in Safari/Chrome.

Update: The theme now supports all post types and is blooming in the official theme garden.

Logo for a side project with the name “DB”. The D is...

Mon, 12 Apr 2010 01:01:08 +0200

Logo for a side project with the name “DB”. The D is flipped and if you squeeze your eyes you will see that it has a shape of a ♥ with a dent in it. It’s kinda like the bite from the Apple logo.

No, it’s not for a break-up site and most likely it will never go further than this logo sketch.