CSS3 の border-radius を使って円形のサムネイルを作る方法２つ
今回の記事では、CSS3の border-radius を使った円形いサムネイルの作り方を２種類紹介します。 まず簡単な方から説明しますが、サムネイル画像が正方形の場合であれば、画像のスタイル border-radius に大きめの値を指定するだけで、丸いサムネイルを作れますね。 <img src="thumb.png" width="150" height="150" style="border-radius:400px;" > サムネイルが長方形の場合 写真が正方形の場合でも、きれいな円にしたい場合は、サムネイルを背景画像（background-image）にすることで実現できます。イメージは↓のような感じです。 HTMLソース サムネイルの幅に合わせたボックスに、サムネイル画像を背景画像として設定し、border-radius で背景画像をクリップします。クリックできるようにする場合
CSS3で半透明のリングが波紋のように広がるボタンのエフェクトを作る方法
またまた CSS3 の小ネタです。これがやりたくて、ひそかに研究していました。 とりあえずデモです。↓のボタンにマウスを乗せてみてください。 ※ 最新の Firefox か webkit で見てください。 作り方 まず、CSS3で円をどうやって作るんだ？と思った方は、昨日の記事 CSS3 の border-radius を使って円形のサムネイルを作る方法２つ を読んでみてください。 HTML Aタグでマークアップしています。アニメーションするリングの部分は、SPAN.ring が担当します。 <a class="button" href="#"> <span class="ring"></span> </a> アニメーションするリングの部分は、SPAN.ring をキーフレームアニメーションで動かします。 ※ わかりやすくするために、ベンダープレフィックスは付けていません。 実際のものが欲
個人でWebサービスを発想する時に参考になるかもしれない「視点を変える方法」を考えてみた
「今年こそ、Webサービスを作ってやろう！」と考えているけれど、何を作ったらいいのかわからない... という人のために、新しいWebサービス（に限らず）を考える時に使えそうな「視点を変える方法」をいくつか考えてみました。 「こんなサービスいいなぁ」と思ったら既にあった... を繰り返している人！に読んで欲しいと思います。 1. トレンドの陰に目を向ける Twitter、Facebook、スマートフォンなどのデジタル世代が生み出すトレンドの影に、それに付いて行けない層が必ず存在します。そういった層に対して、代替手段を考えてみたり、助けとなるようなサービスを考えてみるのもいいでしょう。 らくらくフォンとかがその代表例です（今更感はありますが）。 2. トレンドとは違う価値を考える 同じようにトレンドの影で、それにあえてついていかない層が、トレンドの価値観とは全く異なる楽園を作り上げることがあり
CSS3で線（border）をグラデーションさせるテクニック
Illustrator とかでよくやる「塗りとパスのオフセットを使って実現する線のグラデーション」を、CSS3で実験してみました。 ↓とりあえず、border を使った場合と、線をグラデーションさせた場合の作例です。CSS だけで作っています。モダンブラウザで見てください。 微妙な違いかもしれませんが、線にグラデーションを適用した方、よりリアルで繊細な印象になります。 作り方 border は使いません。替わりに、ネストしたボックスを作り、親ボックスをグラデーションさせることで、線がグラデーションしているように見せます。 HTML 内側に span を入れ込んで「重ねた塗り」を実現します。 <a href="#" class="button"><span>ボタン</span></a> 外側のボックス (a) の padding が線幅になります。内側のボックス (span) は、白で塗りつ
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
jQueryでメニューのアンダーラインがアニメーションするギミックを作る
メニュー下のラインがマウスを追いかけるようにアニメーションするギミックを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デザインとは何か？迷った人に読んでほしい言葉 80+
WEBデザインしていて、ちょっとモチベーションが上がらないときなんかに、先人たちのデザインについての洞察を読むと、「デザインってそういうことだったのか」とか、「初心だけど忘れてるねー」とか、小さいですが、そんなところからモチベーション、インスピレーションを分けてもらえることがあります。 この記事では、そんな名言、格言を Web Design Mash, Design Was Here とその他のサイトからピックアップして翻訳しました。 毎日少しずつインスピレーションを取り入れるのに役立てて下さい！ 更新: 2011-12-23 誤訳を2点修正しました。※1の箇所です。また、他何点か分かりにくい表現を見直しました。 初出: 2011-12-20 良いデザインは他のデザイナーに無力感を味わわせるものです。なぜならそれは、彼らにはなかった、その人だけのアイデアだからです。 Good design
ちょっとしたブラウザ拡張を作るのに便利！jQueryでブラウザ拡張が作れるcrossrider
crossriderは、jQuery（JavaScript）で各種プラウザに対応した↓のような、ブラウザの拡張を作ることができるオンラインサービスです。 ブラウザの拡張を本気で作るというよりは、何か自分用にちょっとした拡張を作りたい時とかに向いているかもしれません。 現在のところベータ版稼動中で、以下ブラウザのみ対応となっています。その他のブラウザ（Safari）については、今後対応していくようです。 Firefox 3.5+ Chrome Internet Explorer 7+ ユーザーインターフェースが英語なので、とっつきにくいですが、実際の動きの部分をJavaScriptで書くだけで、各ブラウザ用のパッケージができるので、自分用に使う様な「ちょっとした拡張」を作るのに便利なサービスだと思います。 どんなものが作れるか デモアプリのページでは、crossriderで作られた拡張を実際
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
