CSS3を使った画像のエフェクトやスタイリングについて、思いつく限り一挙にまとめてみました。 たくさん画像を扱うサイトなどを作る際に、CSSでできる表現のカタログとして使ってもらえたらと思います。 ※ 2/24 「2. めくれた風」を書き忘れていたので追記しました 目次 1. シャドウ 2. めくれた風 3. トイカメラ風トンネル効果 4. カラー調整 5. 回転 6. 角丸 7. 楕円のフレーム 8. 円のフレーム 9. 三角形フレーム 10. 重なった風 11. ぼかし 12. フェード（シャドウ編） 13. フェード（グラデーション編） 14. 反射 15. リボン 16. 差し込んだ風 17. フレームだけを傾ける 18. 半透明フレーム まとめ ※ 実際の表示はこちらから確認できます。 ※ この記事で掲載しているCSSは、シンプルにするためにベンダープリフィックスを付けていません

提案資料や設計資料をアイコンや図入りでわかりやすくしたいけれど、寄せ集めたアイコンは図柄がばらばら…足りないものがある･･･など思ったことはありませんか？ そんなご要望に答えて、資料に使えそうなアイコンセットをぷちぷち自作してみました。 今回は需要の多いビジネス系アイコン60種類(png形式)です。 顔あり顔なしバージョンがありますので用途に合わせて。 ↓アイコン見本↓ ↓使用例↓ 個人使用も商用もフリーですので、気に入ったら提案書や設計書で、デザインのポイントとして、是非使って下さい。(二次配布はご遠慮願います) もし好評でしたら、次回作も？ こんなん欲しいなーというご要望も、 コメント欄・ブコメ・Twitter などでお待ちしています！ ダウンロードはこちらから Tweet hinata Webデザイナーをやっているイラスト描き屋さん。 記事を書きながらデザイン勉強していきます！ が、

CSS3 の新しいプロパティーを総動員したら、Photoshopとかで作ったきれいなアクア風（ガラス風）ボタンにどこまで近づけるか？ というのを実際にやってみました。 チュートリアル風に、ステップごとに分けて説明していますので、CSS3を使ったリアルな表現のためのテクニックとして、ポイントだけでも覚えておくと、いろんなところで応用できると思います！ こんな感じになりました 何はともあれ↓が出来上がったものです。 今はやりの CSS3ジェネレータ には負けてないと自負しています... さて、これを作る手順です。 ※Chromeで表示して画像にしています。実際のものはこちらから見れます。 作成ステップ ステップ1 : ベースとなるHTMLを用意 まずは、こんなHTMLを用意しました。このHTMLをベースに、CSS3を総動員していきます。A タグの中に SPAN が入っていますが、こいつらには後