はてなブックマーク

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を使い始めていくと、ぶつかる壁に「三角形みたいに尖った角」をどう表現するかというのがあります。三角形って思ったより難しいです。 まぁ無理しないで、イメージで作ればいいんですけど、ちょっとした装飾だったりすると、ちょこっとCSSで作れると楽な時もあります。 そこで、CSS3で「三角形みたいに鋭角を作る方法」を３つ紹介します。ここで紹介する方法には、メリットとデメリットがありますので、使い分けれるようになるといいと思います。 1. グラデーションを使う こちらの記事でも紹介しましたが、背景を background-size と background-position で4分割して、斜めのグラデーションを使うことで角を落とすことができます。 コード 4分割して、4つのグラデーションでそれぞれを塗ります。この方法では、塗りを使っているので、カスタマイズ性が高いですが、グラデーションを使って

CSS3 を使って Windows から見るブラウザ上の "MS Pゴシック" をメイリオみたいに、アンチエイリアスさせて表示する方法を発見してしまったので紹介します。 さて、↓の２つのの文字を見比べてください。 実はどちらも同じ "MS Pゴシック"なんです（Chromeで画像化しています）。 CSS3 の transform を使う さて、これをどうやって実現しているかと言うと、CSS3 の transform を使って、アンチエイリアスさせたいテキストを、少しだけ縦方向に拡大しています。 .clear-type { -webkit-transform-origin: 0 0; -webkit-transform: scale(1, 1.01); -moz-transform-origin: 0 0; -moz-transform: scale(1, 1.01); -ms-transf

CSS3 の border-radius を使えば、ボックスの角を丸めることができますよね？ でも、ベベル（丸くない border-radius）を付けるにはどうしたらいいか、ずーと気になっていたので、調べてみたら見つけました！ ということで、今日の記事では「LEA VEROU」で紹介されていた、↓みたいにボックスの角にベベルを付ける方法を紹介します。 考え方 この方法では 4つの background-image を使います。 まず最初に、background-size を使って背景を4等分します。そして、それぞれの角から斜めの線形グラデーションで、透明を塗りこむことで角を見えなくするというのがこのからくりです。 この「等分すれは、複数のグラデーションを指定できる」というテクニックは、他にも応用できそうなので是非覚えておいてください。 スタイルはこんな感じです。実際に使う場合は、以下のク

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

2012年のWebのトレンドに円があるらしいです。 もちろん、今まで 円という表現がなかったというわけではありませんが、CSS3（border-radius）で簡単に円を表現できるようになったことで、「矩形と同じように円が使える」ってことですからねー。トレンドというよりは、より一般化していくんだと思います。 そこで今回の記事では、円をサイトに使うためのアイディアを紹介します。 また、このブログでも、CSS3で 円を作るチュートリアルなど書いていますので、 そちらも合わせ読んでください。 - CSS3 の border-radius を使って円形のサムネイルを作る方法２つ - CSS3で半透明のリングが波紋のように広がるボタンのエフェクトを作る方法 ※ すべてがCSS3で作られたということでなく、あくまで表現の参考として見てください。 1. アクセントとして使う 一般にWebというメディアは

またまた CSS3 の小ネタです。これがやりたくて、ひそかに研究していました。 とりあえずデモです。↓のボタンにマウスを乗せてみてください。 ※ 最新の Firefox か webkit で見てください。 作り方 まず、CSS3で円をどうやって作るんだ？と思った方は、昨日の記事 CSS3 の border-radius を使って円形のサムネイルを作る方法２つ を読んでみてください。 HTML Aタグでマークアップしています。アニメーションするリングの部分は、SPAN.ring が担当します。 <a class="button" href="#"> <span class="ring"></span> </a> アニメーションするリングの部分は、SPAN.ring をキーフレームアニメーションで動かします。 ※ わかりやすくするために、ベンダープレフィックスは付けていません。 実際のものが欲

今回の記事では、CSS3の border-radius を使った円形いサムネイルの作り方を２種類紹介します。 まず簡単な方から説明しますが、サムネイル画像が正方形の場合であれば、画像のスタイル border-radius に大きめの値を指定するだけで、丸いサムネイルを作れますね。 <img src="thumb.png" width="150" height="150" style="border-radius:400px;" > サムネイルが長方形の場合 写真が正方形の場合でも、きれいな円にしたい場合は、サムネイルを背景画像（background-image）にすることで実現できます。イメージは↓のような感じです。 HTMLソース サムネイルの幅に合わせたボックスに、サムネイル画像を背景画像として設定し、border-radius で背景画像をクリップします。クリックできるようにする場合

「今年こそ、Webサービスを作ってやろう！」と考えているけれど、何を作ったらいいのかわからない... という人のために、新しいWebサービス（に限らず）を考える時に使えそうな「視点を変える方法」をいくつか考えてみました。 「こんなサービスいいなぁ」と思ったら既にあった... を繰り返している人！に読んで欲しいと思います。 1. トレンドの陰に目を向ける Twitter、Facebook、スマートフォンなどのデジタル世代が生み出すトレンドの影に、それに付いて行けない層が必ず存在します。そういった層に対して、代替手段を考えてみたり、助けとなるようなサービスを考えてみるのもいいでしょう。 らくらくフォンとかがその代表例です（今更感はありますが）。 2. トレンドとは違う価値を考える 同じようにトレンドの影で、それにあえてついていかない層が、トレンドの価値観とは全く異なる楽園を作り上げることがあり

Illustrator とかでよくやる「塗りとパスのオフセットを使って実現する線のグラデーション」を、CSS3で実験してみました。 ↓とりあえず、border を使った場合と、線をグラデーションさせた場合の作例です。CSS だけで作っています。モダンブラウザで見てください。 微妙な違いかもしれませんが、線にグラデーションを適用した方、よりリアルで繊細な印象になります。 作り方 border は使いません。替わりに、ネストしたボックスを作り、親ボックスをグラデーションさせることで、線がグラデーションしているように見せます。 HTML 内側に span を入れ込んで「重ねた塗り」を実現します。 <a href="#" class="button"><span>ボタン</span></a> 外側のボックス (a) の padding が線幅になります。内側のボックス (span) は、白で塗りつ

表示中のWebページのスタイルシートを Illustrator のようなビジュアルな UI で、ブラウザから変更できる chrome 拡張、Code Cola を紹介します。 この拡張については、名前だけは、以前から知っていたのですが、実際に使うことがあって、とても便利だったので紹介します。 似たようなことは、ブラウザの開発ツールや Firebug などでも出来ますが、Code Colaは、CSS3 で多用するグラデーションなどを、ビジュアルに編集できるので、併用して使うととても便利です。 特徴 1. グラフィカルに編集 グラデーション、ドロップシャドウ、ボーダーなどの CSS3属性を Illustrator のようなグラフィカルUIで変更できます。 グラデーションなどをグラフィカルに編集できる 2. 最新のCSS3に対応 最新の CSS3 に対応しているので、新しいスタイルを手っ取り早く

「HOW TO CREATE STITCHED LOOK IN CSS」より、CSS3でスティッチ風の飾りを作る方法を紹介します。 スティッチといっても、青い地球外生命体ではなくて、 縫い目のような様な飾りのことです。 仕掛け 点線の部分は、border-style:dotted で実現しています。そのままですね。ポイントは、それだと線が外側になってしまうので、CSS3のbox-shadowを使って、擬似的に点線の外側の塗りを作るところです。 作り方 HTML スタイルを適用したいタグに stitched クラスを設定します。 <a href="#" class="stitched">CSS Stitched Look</a> border-style:dotted と box-shadow の辺りがポイントになります。 .stitched { padding: 5px 10px; bac

Flashでよくやっていた表現で、jQueryで置き換えられるものはないかと考えていて、ふとコレを思いついたので紹介します。応用次第ですので、アイディアのネタとして見てください。 今回も、言葉で表現しにくいので、↓のデモをモダンブラウザで見てください。 マウスオーバでアニメーションします。 作り方 このアニメーションは、同じサイズのPNGファイルを2つ重ね、後ろの画像をアニメーションさせることで、実現しています。 前面画像の白い部分は、透明になっていて、背景画像が透き通ってみえるようになっています。その状態で、背景画像をアニメーションさせることで、塗りがアニメーションしているように見えるというからくりです。 HTML+CSS いたってシンプルです。前面画像をコンテナDIVで囲み、コンテナDIVに背景画像を設定しています。 <!DOCTYPE html> <html lang="ja"> <

メニュー下のラインがマウスを追いかけるようにアニメーションするギミックをjQueryで実現する方法の紹介です。紹介するコードは、Snipplrで見つけたコードに少しアレンジを加えています。 メニューとかで、マウスオーバーすると下の線（アンダーライン）が付いてくる↓のような動きになります。 作り方 HTML メニューの部分を以下のように記述します。アニメーションするバーの部分は、<span></span>タグが担当しています。そして、現在のページには、currentのクラスを設定しています。 <div id="nav"> <a href="#">ホーム</a> <a href="#" class="current">お問い合わせ</a> <a href="#">サービス</a> <a href="#">ギャラリー</a> <a href="#">ブログ</a> <span></span> <

WEBデザインしていて、ちょっとモチベーションが上がらないときなんかに、先人たちのデザインについての洞察を読むと、「デザインってそういうことだったのか」とか、「初心だけど忘れてるねー」とか、小さいですが、そんなところからモチベーション、インスピレーションを分けてもらえることがあります。 この記事では、そんな名言、格言を Web Design Mash, Design Was Here とその他のサイトからピックアップして翻訳しました。 毎日少しずつインスピレーションを取り入れるのに役立てて下さい！ 更新: 2011-12-23 誤訳を2点修正しました。※1の箇所です。また、他何点か分かりにくい表現を見直しました。 初出: 2011-12-20 良いデザインは他のデザイナーに無力感を味わわせるものです。なぜならそれは、彼らにはなかった、その人だけのアイデアだからです。 Good design

今日は、LOGOTYPE MAKERというロゴを生成するサービスを紹介します。 ロゴ生成サービス（Twitter風とかWeb2.0風とか）は、他にもいろいろあるのですが、このロゴジェネレータは、まぁまぁ実用することを目標に作られているところが、すごいと思ったので紹介してみようと思いました。 こんな感じのロゴが作れます ↓は、自動生成で作ったロゴです。どちからと言うとWeb 2.0ぽいデザインになります。後で説明しますが、細かくカスタマイズもできます。 使い方と機能紹介 1) LOGOTYPE MAKERのTopページで、ロゴのテキストを入力して、「Generate Logo」ボタンをクリックします。なお、日本語には対応していないようです。 2) ↓のように、ランダムに生成されたロゴがリストされます。右上の「Refresh」ボタンをクリックすると、リストを再生成することもできます。 3) 微

crossriderは、jQuery（JavaScript）で各種プラウザに対応した↓のような、ブラウザの拡張を作ることができるオンラインサービスです。 ブラウザの拡張を本気で作るというよりは、何か自分用にちょっとした拡張を作りたい時とかに向いているかもしれません。 現在のところベータ版稼動中で、以下ブラウザのみ対応となっています。その他のブラウザ（Safari）については、今後対応していくようです。 Firefox 3.5+ Chrome Internet Explorer 7+ ユーザーインターフェースが英語なので、とっつきにくいですが、実際の動きの部分をJavaScriptで書くだけで、各ブラウザ用のパッケージができるので、自分用に使う様な「ちょっとした拡張」を作るのに便利なサービスだと思います。 どんなものが作れるか デモアプリのページでは、crossriderで作られた拡張を実際

今回は、オレンジ色をテーマにかっこいいサイトを集めてみました。 オレンジといっても、赤に近い色や黄色に近い色、暗い色など様々ですので、使う色によってどのように、印象が変わるかも見てください。 ※ 黄色、茶色に近い色も混じっています。 01. nationalstudentshow.com 02. Glue Simple Publishing 03. Grip Limited 04. Merge 05. Mealeo 06. Genext Languages 07. Dotfusion 08. BLACK5 09. The Modlet brought to you by ThinkEco 10. Pampaneo 11. Solo 12. Invoicera 13. The Portfolio of Alex Pierce 14. Daylite Touch 15. Lenka Vanšu

今回の記事では、Webサービス開発などで参考になりそうな、かっちょいいモーダルウィンドウ（ダイアログ）のデザインをまとめてみました。 ウィンドウ枠や「閉じるボタン」をどんなデザインにするのか、など考えながら見てください。 モーダルウィンドウとは？ Webデザインでのモーダルウィンドウとは、背景が黒や白くなって親ページの上に子ページが立ち上がるものを言います。主に、ログインフォームや登録フォームなどを、インラインで表示させるのに使われます。 ※厳密な意味は、Wikipediaなどで調べてください。 AddThis Virb Build It With Me Awesome

今回はピンクを使ったサイトを色々集めました。可愛らしいものから、キュート・ビビット・セクシー・女性的・優しさをイメージしたものをピックアップ！

お客さんから送られてきた、Excelデータからせっせとリストや表のHTMLをコーディングしているあなた！そろそろ手がが疲れてきていませんか？ そんなあなたは、この記事で紹介するExcelテクニックをぜひ覚えてください。 面倒な作業が、わずか数秒で終わります！ Excelを使った高速HTML生成 僕たちプログラマーは、ちょっとしたコード生成に、Excelを使います！ DreamweaverでもCSVファイルを取り込むことはできるのですが、<dl>タグでマークアップしたい時とか、カスタマイズしたい場合は、これから紹介するExcelを使った方法が簡単で、効果的です。 さぁ、↓のようなお客さんから送られてきたExcelデータから ... こんな感じの、<dl>タグでマークアップされたHTML生成する流れを説明します。データ数はうんざりするくらいあると思ってください。 Let's Excel 1)