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 をキーフレームアニメーションで動かします。 ※ わかりやすくするために、ベンダープレフィックスは付けていません。 実際のものが欲
やっと理解できた！JSオブジェクト指向プログラミング再入門 | ゆっくりと…
既に多くの方が JavaScript のオブジェクト指向的側面についての解説を記事にされていますが、読み手側から見ると、例えばプログラミング言語への習熟度やオブジェクト指向自体に対する理解度がマチマチなわけで、私自身、「おお、なるほど！」 っていう、頭の中のスイッチがパチンッ！と入るような境地には達していませんでした。 かつて私も オブジェクト指向なJavaScriptプログラミングのススメ なんていう翻訳記事を書いてはいるのですが、正直なところ prototype.constructor の存在は知りませんでしたし、Function.call や Function.apply をどう使えばよいのかなどをちゃんと理解できてはいませんでした。 そんな中、2011年12月に書かれた Doc Center | Mozilla Developer Network の記事 オブジェクト指向 Java
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
