[CSS]半透明のパネルを使って、画像にキャプションをかっこよく表示する12種類のスタイルシート -InContent
InContentの使い方 実装はとても簡単です。 Step 1: 外部ファイル 当スタイルシートをhead内に配置します。 <head> ... <link rel="stylesheet" href="css/incontent.css" type="text/css" /> </head> Step 2: HTML 画像のimg要素とキャプションのspan要素をdivで包みます。 <div class="pic"> <img src="img/01.jpg" class="pic-image" alt="Pic"/> <span class="pic-caption bottom-to-top"> <h1 class="pic-title">Pic Title</h1> <p>Some description or text.</p> </span> </div> 用意されているcl
Curo.jp : CSS:マウスオーバーしたときに1px右下にずらす
リンクをマウスオーバーしたときに１px右下にずらすのはやめろぉぉぉ！ガタガタガタってしたくなっちゃうから、さ！ ということで、下のCuro.jpという文字列にカーソルを合わせてみてください。 右下にちょっとずれるのが分かるでしょうか。「ガタガタガタ」というのは、リンクの上側または左側ギリギリにカーソルを当てると、そうなります。これはもう「ガタガタガタ」としか言いようがない。 （Firefox2はガタガタしました。Internet Explorer6, Opera9は大丈夫でした。） position これは、リンクをマウスオーバーしたときに数pxほど右下にずらすようにCSS（スタイルシート）で以下のように設定されています。 a:hover { top:1px; left:1px; position:relative; } なんで右下にずらすのか。おそらくはボタンを押したときのような感覚を狙
はてなブログデザインカスタマイズの解説。WEBデザインのノウハウも詳しく解説。 - showrtpath - iPhone,iPadウェブブラウザアプリ開発ブログ
2014-01-04 はてなブログデザインカスタマイズの解説。WEBデザインのノウハウも詳しく解説。 WEB ライフ こんにちはnasustです。今回は、はてなブログのデザインのカスタマイズが完了したので、どうやってカスタマイズしたのかをノウハウ含めて詳しく解説します。 始めに 今回のはてなブログのデザインカスタマイズは「よりiOSに近づいたOS Xのコンセプトデザイン : ギズモード・ジャパン」で紹介されているフラットデザイン風MAC OS Xデザインをモチーフに行いました。 このデザインに近づける為にカスタマイズしたポイントを解説します。 はてなブログのデザインテンプレートを選ぶ はてなブログのデザインのカスタマイズとは「ブログのテーマ」のCSSを修正するという作業のことです。 何故、CSSの修正かというとHTMLの修正ができないので「ブログのテーマ」の元から設定してあるCSSのスタ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
