海外のデザインサイトなどでよく見る画像ファイルを一切使わない「CSS作品」に憧れて、AppleのマークをCSSだけで作ろうとするも2時間で諦めてしまったCofusB1です。 ムズすぎじゃー
今回は、私のように2時間で諦めてしまった人でも簡単に一瞬で画像ファイルをCSSに変換する方法を紹介いたします。因みにCSS作品を作る上で大切なセンス＆技術などは全く必要ないですよ。
Ads by Google
ズバリ！画像ファイルをCSSに自動的に変換してくれるWEBサービスです。その名も「Img to Css」。
Img to Css - Home Page |
利用するにはメールアドレスの登録が必要なので早速説明していきます。（因みに無料で使うには回数制限があるようですので注意を！）
アクセスするとページ中央にこのようなアカウント作成ボタンがあるのでクリックします。
するとこのようなページが開きます。
任意のメールアドレスとパスワードを入力します。
「Create Account」ボタンを押すと、このような画面が表示されます。
お使いのメーラーで入力したメールアドレスのアカウントを開くと、メールが届いているのでリンクをクリックします。
このような画面が表示されると、アカウント登録は完了です
「go back to the homepage」リンクをクリックすると、ログイン画面が表示されるので先程入力したメールアドレスとパスワードを入力し「Login」ボタンをクリックします。
使い方は非常に簡単で、画像ファイを指定して変換ボタンをクリック。これだけです。
今回は手持ちの画像ファイルを用いて変換してみます。
因みに変換する画像はコチラ
2時間で諦めてしまったAppleのロゴ画像（PNG）です。
変換できる画像ファイルは、PNG , JPG , GIF , BMP , TIFF , ICO形式のみになります。ページ内にも記載がありますが、PNG画像の方が綺麗にCSS変換出来るようです。
パスワードを入力してログインするとこのような画面が表示されます。
変換する画像の指定には、ローカルの画像ファイルとWEB上の画像ファイルの二通りあります。今回は手持ちの画像なのでローカル選択します。
後はコチラのボタンをクリックするだけです。
画像によっても若干変わりますが、変換完了するのに暫く時間がかかります。
変換が完了するとこのような画面で変換結果とCSSが表示されます。因みにですがページの上のほうに書いてある数字が変換できる回数のようです。
後はCSSをコピペして使うだけです。
コチラが実際にCSSだけで作ってみたAppleのロゴです。
思ったよりも綺麗に再現されていますよね。というか見分けがつきませんね！
因みに他にもWindows9x時代のマーク（個人的に好きなので）もCSS変換してみましたよ。
ソースを見てみるとわかると思うんですが、テーブルを使って再現しているんですよね。流石は機械作業といったところでしょうか。人力でやると中々疲れますよね。
惜しいところといえば回数制限があるところですね。制限なしなら文句なしの素晴らしいWEBサービスなのですが....でも急にCSSで画像を再現したいという時には便利なサービスですよね。
皆さんも使ってみてはどうでしょうか！
