Jérôme Sénaillat » XHTML

Magnet letters tentative with JQuery and CSS3

Jérôme — Tue, 08 Feb 2011 15:45:56 +0000

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.

The demo

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.

The CSS

I used some extra rules for the layout, but the actually involved CSS part is quite short.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

@font-face {
font-family: LeagueGothic;
src: url(’../fonts/LeagueGothic.otf’);
}
#whiteboard {
background: url(../images/whiteboard1.jpg) no-repeat 50% 50%;
margin-top:40px; padding-top:120px; height:365px;}
.magnet {
font-family: ‘LeagueGothic’, arial, serif;
margin:0; margin-left:10px; margin-right:10px;
text-transform: uppercase; font-size:80px;
display: block; text-align: center;
min-height:100px; position: relative;
margin:0 auto;
}

/* letters colors */

.mPiece {color:#000;}
.col0 {color: #009fff;}
.col1 {color: #ff3c00;}
.col2 {color: #b83823;}

.col0 {
–moz–text-shadow: 0 1px 0 #165981;
–webkit–text-shadow: 0 1px 0 #165981;
–o–text-shadow: 0 1px 0 #165981;
text-shadow: 0 1px 0 #165981;}
.col1 {
–moz–text-shadow: 0 1px 0 #722812;
–webkit–text-shadow: 0 1px 0 #722812;
–o–text-shadow: 0 1px 0 #722812;
text-shadow: 0 1px 0 #722812;}
.col2 {–moz–text-shadow: 0 1px 0 #751f0e;
–webkit–text-shadow: 0 1px 0 #751f0e;
–o–text-shadow: 0 1px 0 #751f0e;
text-shadow: 0 1px 0 #751f0e;}

The Javascript

The lazy, Jquery way:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

$(document).ready(
function(){
$(’.magnet’).each(function() {
var mString = $(this).html();
var mLength = mString.length;
$(this).empty();
for (i=0;i<mLength;i++) {
var randomColor = Math.floor(Math.random()*3)
var randomDeg = Math.floor(Math.random()*11)-5;
var posX = i*30;
if (mString[i] == “m” || mString[i] == “M”) {
posX -= 5;
};
var mAngle = ”;
mAngle += ‘-webkit-transform: rotate(‘+randomDeg+‘deg); ‘;
mAngle += ‘-moz-transform: rotate(‘+randomDeg+‘deg); ‘;
mAngle += ‘transform: rotate(‘+randomDeg+‘deg); ‘;
mAngle += ‘position: absolute; ‘;
mAngle += ‘left:’+posX+‘px; ‘;
$(this).append(’+randomColor+’” style=“‘+mAngle+’”>’+mString[i]+’’);
};
charW = posX+30;
$(this).width(charW);
});
});

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…

Simple Css 3 buttons

Jérôme — Mon, 12 Jul 2010 20:22:55 +0000

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

a._but {text-decoration: none; outline: none;}
a._but:focus {–moz–outline-style: none;}
._but {
background: #ccc;
border:1px solid #d9d9d8;
padding:7px 10px;
font-size:14px;
text-shadow: 0px 1px 0px #fff;
font-weight: bold;
color:#000;
box-shadow: 0px 1px 0px #666;
cursor: pointer;
white-space:nowrap;
}

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):

1
2
3
4
5
6
7

background: –moz-linear-gradient(
center bottom,
rgb(224,224,224) 26%,
rgb(238,238,238) 63%
);
–moz-border-radius: 10px;
–moz-box-shadow: 0px 1px 0px #666;

and Webkit-based browsers (Chrome/Safari/Webkit):

1
2
3
4
5
6
7
8
9

background: –webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.26, rgb(224,224,224)),
color-stop(0.63, rgb(238,238,238))
);
–webkit-border-radius: 10px;
–webkit-box-shadow: 0px 1px 0px #666;

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:

1 2	–moz-box-shadow: 0px –1px 0px #666; –webkit-box-shadow: 0px –1px 0px #666;

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…

Pecha Kucha 20X20

Jérôme — Tue, 03 Nov 2009 09:44:51 +0000

For the second time, we did a complete redesign of the PechaKucha Night website, called PechaKucha 20X20. I was responsible of the whole design, and also worked on HTML/CSS integration.

For those who never heard about PechaKucha, here is what the site itself say:

PechaKucha 20x20 is a simple presentation format where you show 20 images, each for 20 seconds. The images forward automatically and you talk along to the images.

We completely rebuilt the system, and also made quite drastic changes to the global design and accessibility, trying to rethink information hierarchy and to simplify the design. We also integrated the blog to the global website, and added many new features:

You are now able to see presentations online, directly on the site.
You can now login with both your PechaKucha account or your Facebook one.
iCal export, to keep in touch with the calendar.
Geolocalisation: the site will display events in your area in priority.
…and many small usability enhancement using Javascript/Ajax.

Red Bull Crowdcast

Jérôme — Fri, 11 Sep 2009 02:53:23 +0000

Red Bull Crowdcast allow people to upload live content (only text and photos for now) to both a mobile and a PC sites, in real-time. The user get a specific email address by scanning a QR-code, which is linked to an event (for example, as we did for the Red Bull Sound Clash, or, more recently, the Red Bull Box Cart Race).

Uploaded content is accessible almost immediatly, and can also been broadcasted during the event itself via a flash vissualisation module. We built also a very simple, ajax-driven live moderation tool.

I was responsible for the whole art direction of the project: from the logo and the overall look and feel, to more technical aspects like CSS and HTML integration. The project was built using the Symfony framework.

As Mike wrote on his blog,

Email on mobile phones in Japan has been a standard feature since the beginning and often acts as the primary email address for many Japanese people. It is a natural interface to participation. The time from sending your email to appearing on the stream can be as little as 5–10 seconds, so the reward for participation is almost immediate.

NSFTweets

Jérôme — Sat, 05 Sep 2009 21:38:12 +0000

According to the Urban DIctionary,

“Not Safe For Work.” Used to describe Internet content generally inappropriate for the typical workplace, i.e., would not be acceptable in the presence of your boss and colleagues (as opposed to SFW, Safe For Work).

“NSFW” labeled contents can be quite offensive, yes. But it can also just be intriguing, disturbing, or more simply, just not consensual.
We tried to filter the too obvious porn spam by excluding keywords too “explicit”, and hoped for the best.

You’ll find NSFTweets there: http://bienoubien.jp/nsfw/

Alban made the code, and I was responsible for the design and css part.

Nua Japan

Jérôme — Sun, 29 Mar 2009 13:24:23 +0000

Nua is a young company specialized in the Brazilian Waxing in Japan. I let you browse the nuajapan.com FAQ for more information about the techniques. We used symfony1.0 to build the website, running in 2 languages, with a little administration interface to update products, news and campaigns.

How can you refuse to work for someone who claim to sell the “the one gift that guarantees a woman will take her clothes off” ?

www.nuajapan.com

Expedia Ecity

Jérôme — Mon, 02 Feb 2009 03:56:14 +0000

Ecity is an Expedia Japan passive game campaign. Basically, the user create a virtual city and have nothing else to do than sharing his personal game url to play. Every time a new visitor will visit his page, the city will grow. So the more visitor you have, the biggest is your city!

The Main part of the game is made of Flash/AS3. The site backend is (of course) a symfony project, version 1.2. This guys communicate via AMF. Each user got his own unique sub-domain URL, making the thing easier to share.

Of course, this project was more than inspired by the great work of the Motion-Twin guys.

This project is not online anymore.

Candyland.jp

Jérôme — Sat, 22 Nov 2008 16:39:24 +0000

Candyland.jp is a blog written buy French people living in Japan (and therefore, it’s written in french).

I created a custom WordPress theme, based on a modification of the Sandbox theme, which has MANY css hooks for easy customization.
The blog works with the usual suspects : SEO Optimization, Super cache, Google sitemap and a couple of few other plugins.

Binbo Date

Jérôme — Sat, 27 Sep 2008 22:28:25 +0000

Having a date but no money? Binbo Date helps you out :-) simply indicate how much you want to spend and where you want to go, and a selection of bars, restaurants and TAB events is shown on an embedded Google Map.

Binbo Date won two awards at the 2008 Sun Microsystems / Recruit’s Mash-up award.

Swarovski Fashion Rocks

Jérôme — Mon, 30 Jun 2008 20:42:37 +0000