スタイルシートだけで画像を回転させ続けてみました
Keep it simple, make it general, and make it intelligible! 日頃モニタ画面でよく見かける "回転し続ける画像" といえば、「ダウンロード中」とか「同期中」「考え中」など、そのコンピュータの処理状況が継続する間という目に見えない時間を可視化するために用いられています。 なのでたまには何かを待つという時間を気にかけることなく、ただ単に「回してみたかったから」「回せるんだから」という視点で、日常では "回す側" に位置していて回ることも回されることもないレコードプレーヤーの画像を回してみました。 しかもタイトルの文字通り、Flash や Javascript を使うことなく、スタイルシートだけで。 この「画像を回転させ続けるスタイルシート」のサンプルは、次の通りです。 .spin_infinite { /* keyframes に任意の名
hover疑似クラスで(マウスが載った際に)リンク画像を切り替える - スタイルシートTipsふぁくとりー
《2016年2月3日 16:07 公開/更新》 hover疑似クラスで(マウスが載った際に)リンク画像を切り替える [イメージ,リンク,配置] 画像リンク(＝リンクになっている画像)の上にマウスポインタを載せたときに、マウスポインタが載っている間だけ別の画像に差し替えるデザインがよくあります。そのような「マウスが載ったときに画像を切り替える」機能は、JavaScriptなどのスクリプトを活用することなく、スタイルシートだけで作れます。 「要素の上にマウスポインタが載ったとき」の装飾は、hover疑似クラスを使うことで指定できます。つまり、hover疑似クラスを使って画像を切り替えれば良いわけです。ただ、表示する画像ファイルそのものを切り替えるよりも、背景画像の表示領域をずらすことで「画像が切り替わったような効果を出す」テクニックの方が、(切り替え先の画像の読み込みを待たずに済む分)動作が高
[使える CSS テクニック] CSSで色々なカラムレイアウト（段組）を実現する | バシャログ。
第 2 回目は「色々なカラムレイアウト（段組）を実現する」です。 WEBサイトには色々なカラムレイアウトが使われています。 その中でも今回は最近よく使われている、レイアウトパターンをいくつかご紹介します。 2カラム固定レイアウト 2カラム固定レイアウトは、企業サイトなどでよく使われるレイアウトパターンです。 サンプルページ 2カラム固定レイアウトの解説 XHTMLの構造は以下のように設定します。 CSSは以下のように設定します（重要な箇所だけ抜粋）。またご紹介するレイアウトすべてで第1回記事のデフォルトリセットも使用しています。 /* ========================================================= ■wrapper ========================================================= */ d
![[使える CSS テクニック] CSSで色々なカラムレイアウト（段組）を実現する | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【HTMLタグの簡単検索】TAG index - ホームページ作成情報
螺旋デザイン｜はじめてのCSS file0.やさしいCSSはじめます。
http://2step-css.com/
