A chevron (also spelled cheveron, especially in older documents) is an inverted V-shaped pattern. The word is usually used in reference to a kind of fret in architecture, or to a badge or insignia used in military or police uniforms to indicate rank or length of service, or in heraldry and the designs of flags.
From Wikipedia, Chevron (insignia)
I still see on many webpages the sign » conveniently used as a right pointing arrow.
In breadcrumbs, after secondary call-to-action links, etc.
This symbol is actually (with it’s brother’s « ) a right quote mark, A.K.A. Guillemet, used in 39 countries in the world (still according to Wikipedia), in languages like Arabic, French, Spanish or Turkish. If you have internationalization in mind, using this as an arrow might look really clumsy.
Even if you don’t plan to localize your site in one of these locales, it is still semantically wrong, and will be understood by a browser (and by screen readers, and search engine spiders) as a right quote mark.
The symbol → might be used for the same purpose with no semantic cost (but it might not exist in the font you like), or you could use an image (and/or CSS magic) if you really are in love with the shape itself…]]>
Who doesn’t love magnetic letters on a fridge?
I saw something like that a while ago, and tried to replicate the same effects in my own, messy way. It was a good occasion to test the css3 rotate property.
It’s here: http://media.dkpn.jp/css/20110112-magnetletters/
It has been tested with Firefox, Safari and Chrome on Mac OSX. It is still a work in progress: characters are–almost–monospaced for now. Colors and rotations are randomized everytime the page is refreshed.
I used some extra rules for the layout, but the actually involved CSS part is quite short.
The lazy, Jquery way:
I used the font League Gothic, from The League of Moveable Type, that we seems to see a lot these days :) , and which doesn’t work bad in this case.
I am sure the code could be optimized (not even talking about features like tracking or multiple lines), and any remark/suggestion is of course welcome…]]>
Uni-ball asked me to build a flash game for the launch of their new pen, the Fanthom.
They already had a clear idea: the game had to be a casual game, based on the popular Luxor.
On this project I worked with Julien, who built the game engine in Flash, and the DB part, while I worked on the game design and graphics.
It was a fun project to work on, with all these halloweenish illustrations to create — I just wish we had more time to add extra features…
The game has the following specs:
It’s in french, but I think that the gameplay is quite easy to understand…]]>
I know that there are many other ways to do this out there, but I just had to come up with my own, that pleased me visually — you know how it is…
The buttons can be found here: http://media.dkpn.jp/css/css3-buttons-01/ (CSS)
They should work with Firefox and Webkit based browsers (Safari, Chrome).
The basic styling looks like this:
You’ll notice the pseudo class :focus, which tells Firefox not to add dots around a clicked element (as found here).
The other “new” elements are the text-shadow property, which seems to work without any prefix on my versions of Firefox (3.6.12) and Chrome (5.0.375.70)/Safari(5.0.1), and the box-shadow one that just doesn’t work for now…
The white-space part if for inline links, to avoid them being cut in two.
The styling for Gecko-based browsers (Firefox):
and Webkit-based browsers (Chrome/Safari/Webkit):
Rounded corners, a subtle gradient for the background, and a 1px drop shadow. I must confess that I used this tool to grab the correct rgb values. Would love hex colors + alpha…
Pretty straightforward. I added two pseudo classes, hover and active for the button states, using the same kind of properties. The only part that might need attention would be this one maybe:
The negative value of the box shadow generates an inner shadow, which I used to give the impression the button is pressed.
I guess you could just then pile up vendor prefixes as you want…]]>
Still messing around JS game things…
This time I tried to implement simple Z-sorting.
Try it here: http://media.dkpn.jp/js/multi-chara-01/
It should work OK on recent versions of Firefox, Chrome and Safari.
15 characters are randomly generated on each refresh. I tried to push a bit the numbers : it’s fine until 50 characters, but starts to be real slow after. 200 or more characters is just incredibly slow, and may even crash the browser…
I guess it’s because of my way of updating depth :
Maybe there is a less CPU intensive way to deal with this ? I didn’t manage to include it directly into the characters animation function…
My code is pretty messy, but if you’re curious it’s here.
Test it here: Chara move test 0.0.1 (only character movements and simple speech bubble)
The music of the demo is not by me. It has been made by the wonderful Ultrasyd.
It’s pretty rough for now, but I think the idea is there. No use or canvas or any other fancy HTML5 feature, just good old divs and Jquery for the animations.
It has been developped with Firefox 3.6.2 on a Mac.
There is a positioning bug in Safari/Webkit and Chrome, I’m working on it… (or if you have any idea, don’t hesitate to mail me). This is fixed. I have no plan of supporting IE for now.
This is a work in progress, and should be updated frequently (well, depending on my time of course).
For now, the only features are :
To do :
I called this “Donut”, because of the character’s face.
Comments and critics welcome !]]>
The first one is online for a while, and I just received the link of the second one. Well, it might be no masterpiece, but I’m still happy with the result, considering the tight deadlines and the complexity of the decision process when working with such a large company as Google.]]>
Custom WordPress theme design and integration for a japanese logo showcase service, for the prolific Lig Inc..
Google needed a couple of B2B videos to explain the benefits of their Mobile Ads service to potential clients.
They wanted something visually simple, that would match Google identity and tone, didactic, and short. It should also be generic enough to be easy to localize in several languages. We didn’t have much time, and went for something quite minimal.
I was responsible of the global direction of the project, visual choices, and animation production.
Visuals were also declined in a couple of give-aways: eco bags, notebooks, etc.
These days, I’m working now on a game interface for a client.
They didn’t like these, saying it was too “simple and childish”. Damn.
But I quite like them anyway, so I decided to turn them into a couple of wallpapers.