‘イバラ’ツノゼミの一種（カメムシ目：ツノゼミ科） A treehopper, 'Vestistilus' sp. 上の写真のように、白い背景の写真を時折目にする。 被写体が際立つし、全体にやわらかい光が当たって美しい。 ぼくも白い背景で撮りたりたくなったけど、フラッシュはひとつしか持っていないし、大掛かりなセットもない。そこで思いついたのが、白いどんぶりスタジオ。 いつも食事で使っている白い洋風の器を使う。半ドーム形なので、上から焚いたフラッシュの光が均等に反射してくれて、どんぶりの中の昆虫は、柔らかい光で包まれるという計算だ。どんぶりを回転させるだけで、昆虫の位置や撮影角度を変えられるのも都合が良い。 特に野外調査では重宝する。なんといっても食事の時にはお皿になるし、きれいに洗えばスタジオになる優れものなのである。 次のページで、どんぶりスタジオで撮影した写真をどうぞお楽しみください。
背景画像をブラウザいっぱいに表示するスタイルシートのシンプルなテクニックを紹介します。 デスクトップだけでなく、スマフォやタブレットにも対応、しかもたった一行なのでスニペットに加えておくと便利です。 デモを幅480pxで表示 コンセプト 「background-size」をビューポート全体をカバーするために使う 「background-size」はレスポンシブ対応にする時に非常に有効なプロパティです。値に「cover」を使うことで、背景画像を相対的に自動で調整します。 ※IE8以下はサポートしていませんが、後述のスクリプトを使用するとbackground-sizeが機能するようになります。 「Media Queries」をスマフォ対策として使う スマフォなどの小さいサイズのスクリーン用にMedia Queriesを使って、小さいサイズの画像ファイルを使うことができます。もっともこれはオプシ
知って得する、Webブラウザ上で利用できるグラフィック関連技術。アニメーションや3Dが表現できる「CSS3」をハックしよう CSSで多彩な表現が可能に 本連載では、Webブラウザ上で利用できるグラフィック関連技術を、読み切りの形で、なるべく分かりやすく紹介していきます。第1回である今回はWebの基本技術の1つであるCSSで実現するグラフィック表現を取り上げます。 従来のCSSはWebページのフォントやレイアウトを整える機能がほとんどで、「グラフィック技術」というには物足りないものでした。しかし、CSS3と呼ばれる近年の拡張によって、アニメーションや3D表現を含む多彩な画面効果が実現できるものに進化しています。 この記事は、そうしたCSS3のグラフィック関連機能の基本的な使用方法をまとめて学習することを目的としています。 ベンダプレフィクスについて CSS3の多くの機能はまだ規格策定段階のも
jQueryプラグイン（スライドショー） Background-Image Transition Plugin jQueryのプラグイン。フェードはきれいだが、フルスクリーンではない。 デモページ 使い方参考ページ Supersized! フルスクリーンの背景スライドショー。 デモページ（フェード有り：動作が少し重い） デモページ（フェードなし：軽い） Smooth fullscreen background slideshow in jQuery こちらもフルスクリーンの背景スライドショー。 ドットが背景の上に重なってるけど取れる。 クロスフェードじゃないが、上記「Supersized!」より動きがスムースできれい。 デモページ Advanced jQuery background image slideshow フェードアウトして次が出るまでの間、bgcolorが表示されてる。 フルス
Automatic Image Montage with jQuery | Codrops 並べた画像を敷き詰めて超カッコよくするjQueryサンプル。 <img>を単に並べるだけであとはブラウザの幅に応じて画像を次のように並び替えてくれちゃうデモとスクリプトのダウンロードが可能です。 画像間の調整や背景色の調整等が行えるようです。 デモページはこちら ブラウザサイズを変更しても画像を再計算して表示しなおしてくれます。 背景を黒にするとよりオシャレな感じです。 関連エントリ 異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 ブロックサイズ内に画像を綺麗に収めるjQueryプラグイン「CJ Object Scaler」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く