(Source: fyeahgoofyanimatedfaces, via shunta)

mignonette:

Secret Ceremony - 1968

mignonette:

Secret Ceremony - 1968

(via johnnychallenge)

lunatictoons:

The Last Temptation

lunatictoons:

The Last Temptation

(Source: , via dtybywl)

(Source: sashastergiou, via johnnychallenge)

(Source: ledouxville, via dtybywl)

nickdrake:

Winona Ryder, Christina Ricci and Cher in Mermaids.

nickdrake:

Winona Ryder, Christina Ricci and Cher in Mermaids.

(via johnnychallenge)

"

ご存知の方も多いと思いますが、文字を上下反転するサービス「Lunicode」の紹介です。

Lunicode
Lunicode

文字反転だけを紹介しているサイトが多いのですが、他にも色々な機能があるのでまとめて紹介したいと思います。

またJavaScriptライブラリがGitHubで公開されているので、利用方法についてあわせて紹介します。

1.文字を上下反転する

使い方を説明するまでもありませんが、ページ上のテキストエリアに文字を入力します。

テキストエリアに文字を入力

上下反転した文字がリアルタイムに下のテキストエリアに表示されます。

上下反転した文字

上下反転した文字は、以下のようにコピー&ペーストすることができます。

ɓɟǝpɔqɐ

下のテキストエリアに文字を入力すれば、上のテキストエリアに上下反転文字が表示されます。

全角文字は対象外のようです。

2.文字を装飾する

このサイトでは上下反転でなく、ミラー(裏返し)や文字装飾なども可能です。左側にあるメニューを選択すれば、文字を装飾することができます。

例えば1項で文字を入力したあと、左メニューの「Bubbles」をクリックします。

Bubbles

これで次のような丸で囲まれた文字が表示されます。

装飾された文字

これもコピー&ペーストすることができます。

ⓐⓑⓒⓓⓔⓕⓖ

上下反転含め、装飾には以下の8種類が用意されています。

3.HTMLを表示する

上下反転や文字装飾をどうやって行っているのか気になるところですが、気になる方はテキストエリア左下にある「Show HTML」をクリックしましょう。

Show HTML

これで元の文字を実体参照で表示します。

実体参照

4.絵文字を表示する

絵文字を表示するには、ページ上部にある「Emoticons」タブをクリック。

Emoticons

これで絵文字の一覧が表示されます。

絵文字の一覧

左側のメニューを切り替えればシンボルなどを表示させることもできます。

左メニュー

5.JavaScriptの利用

ページ右上にある「about」をクリック。

about

GitHubのリンク(オレンジのバナー)が表示されるのでクリック。

GitHubのリンク

リンク先でlunicode.jsをダウンロードしてください。

あとは以下のようにLunicode()でオブジェクトを作成して、tools.flip.encodeなどを実行します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="lunicode.js"></script>
<script>
$(function(){
    var luni = new Lunicode();
    var encode = luni.tools.flip.encode("abcde");
    $('#result').text(encode);
});
</script>
<div id="result"></div>

「flip」の部分がエフェクトを示すもので、他に

が用意されています。

「encode」が反転、「decode」が元に戻す動作になります。

"

文字を上下反転させるサービス「Lunicode」のまとめ: 小粋空間 (via darylfranz)

(via shinoddddd)

designstroy:

(via Alan Mays)

designstroy:

(via Alan Mays)

(via holespoles)

designstroy:

(via worldofmateo)

designstroy:

(via worldofmateo)

(via holespoles)

(Source: backspaceforward, via holespoles)