スポンサーサイト


Ads by Google

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Ads by Google

web拍手 by FC2 記事編集
comments powered by Disqus

【知得術!!】画像ファイルをCSSに変換する方法(センスも技術も不必要!)


Ads by Google

001_20130705_imgtocss.png

海外のデザインサイトなどでよく見る画像ファイルを一切使わない「CSS作品」に憧れて、AppleのマークをCSSだけで作ろうとするも2時間で諦めてしまったCofusB1です。 ムズすぎじゃー

今回は、私のように2時間で諦めてしまった人でも簡単に一瞬で画像ファイルをCSSに変換する方法を紹介いたします。因みにCSS作品を作る上で大切なセンス&技術などは全く必要ないですよ。

Ads by Google

まずはコチラのサイトにアクセスしましょう

ズバリ!画像ファイルをCSSに自動的に変換してくれるWEBサービスです。その名も「Img to Css」。
Img to Css - Home Page


利用するにはメールアドレスの登録が必要なので早速説明していきます。(因みに無料で使うには回数制限があるようですので注意を!)


メールアドレスの登録

アクセスするとページ中央にこのようなアカウント作成ボタンがあるのでクリックします。
004_20130705_imgtocss.png


するとこのようなページが開きます。
005_20130705_imgtocss.png


任意のメールアドレスとパスワードを入力します。
006_20130705_imgtocss.png



「Create Account」ボタンを押すと、このような画面が表示されます。
007_20130705_imgtocss.png



お使いのメーラーで入力したメールアドレスのアカウントを開くと、メールが届いているのでリンクをクリックします。


このような画面が表示されると、アカウント登録は完了です
008_20130705_imgtocss.png



「go back to the homepage」リンクをクリックすると、ログイン画面が表示されるので先程入力したメールアドレスとパスワードを入力し「Login」ボタンをクリックします。
0009_20130705_imgtocss.png


使い方

使い方は非常に簡単で、画像ファイを指定して変換ボタンをクリック。これだけです。

今回は手持ちの画像ファイルを用いて変換してみます。
因みに変換する画像はコチラ
002_20130705_imgtocss.png

2時間で諦めてしまったAppleのロゴ画像(PNG)です。
変換できる画像ファイルは、PNG , JPG , GIF , BMP , TIFF , ICO形式のみになります。ページ内にも記載がありますが、PNG画像の方が綺麗にCSS変換出来るようです。


パスワードを入力してログインするとこのような画面が表示されます。
010_20130705_imgtocss.png



変換する画像の指定には、ローカルの画像ファイルとWEB上の画像ファイルの二通りあります。今回は手持ちの画像なのでローカル選択します。
011_20130705_imgtocss.png


後はコチラのボタンをクリックするだけです。
012_20130705_imgtocss.png


画像によっても若干変わりますが、変換完了するのに暫く時間がかかります。


変換が完了するとこのような画面で変換結果とCSSが表示されます。因みにですがページの上のほうに書いてある数字が変換できる回数のようです。
013_20130705_imgtocss.png


後はCSSをコピペして使うだけです。
コチラが実際にCSSだけで作ってみたAppleのロゴです。
DEMO


思ったよりも綺麗に再現されていますよね。というか見分けがつきませんね!

因みに他にもWindows9x時代のマーク(個人的に好きなので)もCSS変換してみましたよ。
DEMO


ソースを見てみるとわかると思うんですが、テーブルを使って再現しているんですよね。流石は機械作業といったところでしょうか。人力でやると中々疲れますよね。
惜しいところといえば回数制限があるところですね。制限なしなら文句なしの素晴らしいWEBサービスなのですが....でも急にCSSで画像を再現したいという時には便利なサービスですよね。

皆さんも使ってみてはどうでしょうか!


Ads by Google

web拍手 by FC2 記事編集
comments powered by Disqus

デジテクノート
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。