CSS3で作られたレイヤースタイル風CSS3ジェネレーター

これは面白い。

CSS3ではかなりいろいろなことが実現できるようになって、様々なチュートリアルやらサンプルが出回りつつありますが、今回CSS3で作られたPhotoshopのレイヤースタイル風なCSS3ジェネレーターを見つけましたよ。

layerstyle

Photoshopのそれとは項目数も少ないですし、実際にはないものもあったりしますが、グラデーションのカラーを変えたり、ドロップシャドウやシャドウ(内側)、境界線をいろいろとぐりぐりいじって変更することができます。角丸の調節なんかももちろんできちゃいます。

で、ぐりぐりっといじった後は、CSS3のコードを取得可能。
画面左下の「CSS Code」というところをクリックすると、下からミョッとコードが出てくるので、そのコードをコピペすればOK。

css3code

感覚的にはホントPhotoshopのレイヤースタイルを使っているのと同じなので、Photoshopを使い慣れている人にとっては非常に操作しやすいんじゃないでしょうかね。

CSS3のグラデーションや角丸、シャドウといった要素をググッと作りやすくしてくれるジェネレーターだと思うので、覚えておいても損はないかも。

「Web」新着記事

個人向けInstagram分析ツール「InStats」が正式ローンチ

ホシナ カズキ

使うかどうかすごい悩ましい目覚ましサービス「メザミー」

ホシナ カズキ

ブログサービス「JUGEM」が事業譲渡 GMOペパボからメディアーノへ

ホシナ カズキ

「フリーランスDB」をフリーランス協会が公開 協会員のフリーランスが探せるサービス

ホシナ カズキ

「楽天西友ネットスーパー」爆誕! 忙しいママの強い味方になりそうじゃないか

ホシナ カズキ

もっと見る

モバデビはモバイルやウェブのネタ、ニュースMaciPhoneなどのApple関連、WordPressのことなど、いろいろ書く雑食系ブログメディア。
ためになるかもしれないし、ならないかもしれない。そこそこ更新してますそこそこ。

このブログについてもっと詳しく