CSS2の疑似要素を使用することで、HTMLを汚さずに、さまざまなデザインのドロップシャドウを簡単に適用することができます。 その美しいドロップシャドウのスタイルを適用するチュートリアルを紹介します。 画像の使用は一切ありません。 CSS drop-shadows without images デモページ [ad#ad-2] デモの対応ブラウザは:before, :after, box-shadowなどを使用しているため、Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+ です。 下記に、デモにある5つのドロップシャドウを紹介します。 HTML HTMLはdiv要素にスタイルシートを適用します。 5つのドロップシャドウはclass名を変更するだけです。 <div class="drop-shadow round"> <h1>CSS drop-sh
The GNU Image Manipulation Program アプリケーションなどのスクリーンショット加工をおこなう際によく用いられる編集のひとつに、操作説明をわかりやすくするために矢印を追加するというものがある。加えて透過グレーのレイヤを追加するなどして選択対象を目立つようにさせると、さらに効果的になる。 OSSの画像編集アプリケーションとしてはGIMPが代表的。しかしGIMPは矢印を簡単にレンダリングする機能を提供していない。矢印などベクターデータとして提供されることが多いデータをレンダリングする場合、Inkscapeなどほかのアプリケーションを併用することになる。しかし、スクリーンショットを加工するのにGIMPとInkscapeの両方を使うというのは、少々面倒だ。 加工前のスクリーンショットの例 選択部分を強調したいために、レイヤを貼りつけて透過グレーをかぶせたうえ、矢印を追
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く