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

これは面白い。

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

layerstyle

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

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

css3code

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

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

「Web」新着記事

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

Avatar for ホシナ カズキ

ホシナ カズキ

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

Avatar for ホシナ カズキ

ホシナ カズキ

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

Avatar for ホシナ カズキ

ホシナ カズキ

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

Avatar for ホシナ カズキ

ホシナ カズキ

飲食店紹介リンク生成サービス「タベレバ」が公開されていた件

Avatar for ホシナ カズキ

ホシナ カズキ

もっと見る

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

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