Lucky bag: : blog: 背景画像に使える透過 GIF
斜線やストライプの背景画像を Photoshop とかで作ると、色を変えたくなった時にそのたび作り直しってのが面倒。便利で使ってる人も多いかもしれない secondlife さんの Background Image Maker でもそれは同じかな。んで、Photoshop とかで作る場合に、線に色を付けて作るんではなくて、色を付けたい部分を透過にして作っておいて CSS で background-color を指定するやり方にすれば、色を変えたくなった時はCSS で背景色を変更するだけで良いじゃんって、Super Stripes を見て目からうろこ状態。早速インスパイヤしてみた！ 使ってみたい GIF 画像をダウンロードして、CSS で背景画像に。あとは、背景色で好みの色を指定するだけ。ちなみに、サンプルでは背景色を #fa0 と指定している。 斜線 oblique-line_1px.gi
web2.0 なソーシャルレコメンダーサービス「Riffs」 - lucky bag
Riffs: Your Social Recommender - Ratings, Rants, Raves, and Reviews あらゆる物をレコメンドして tag をつけてレビューして rate して共有できる、web2.0 なソーシャルレコメンダーサービス「Riffs」ってのが登場したみたいで、ちょこっと見てみたけど結構面白そう。Firefox のロゴやアイコンをデザインした Jon Hicks が関わっているんだけど、彼らしいデザインになってるなぁ。 レコメンドされたものは、Riffrs と呼ばれるユーザがレビューや評価をする。レコメンドされている物の詳細情報は誰でも edit できたり、簡単なチャット機能なんかもついてたりする。もちろん RSS が用意されていて、注目しているものは最新の情報を受け取ることも出来るみたい。自分の感覚に近い Riffrs をお気に入りとして、その
Lucky bag::blog: リモートロールオーバーを CSS だけでやってみる
リモートロールオーバー、つまり、離れた部分の画像をロールオーバーで変化させる動作は、JavaScript を使わずに CSS だけででも可能。今は無くなってるっぽいんだけど、一時、adaptive path でも使われていてたやつを参考に、サンプルを作ってみた。 remote.html サンプルの (X)HTML コードは下記の通り。 <div id="rollover"> <ul> <li id="food"><a href="#"><em>焼き肉</em></a></li> <li id="sneaker"><a href="#"><em>オニツカタイガー ファブレ74/0123</em></a></li> <li id="beer"><a href="#"><em>仕事の後のビール</em></a></li> <li id="coffee"><a href="#"><em>缶コーヒー
Lucky bag::blog
実践 Web Standards Design が電子書籍になりました 概要 拙著「実践 Web Standards Design」通称ホップ本の電子書籍版が改訂新版として10月3日に発売になりました。 公開日 2011-10-03T19:31:53+09:00 URI https://www.lucky-bag.com/archives/2011/10/wsd-epub.html カテゴリ Misc タグ Book CSS HTML XHTML NAVER Japanにジョインしました 概要 10月1日付けでネイバージャパン株式会社に入社してましたというご報告です。 公開日 2009-11-01T17:56:23+09:00 URI https://www.lucky-bag.com/archives/2009/11/joined-with-naver.html カテゴリ Misc タグ
Lucky bag::blog: CSS を作成する際のお約束
CSS を作成している際に、当然の如くブラウザによって描画結果に違いが出てくるわけで、ムキーとか言いながらその差異を埋めていく作業が一番面倒っちゃあ面倒。んで、ボックスモデルやその他ブラウザごとのバグ以外で、極力そう言った差異を少なくするためには、一番最初に全称セレクタを使ってブラウザのデフォルトスタイルを消してしまうのが手っ取り早い。 * { margin: 0; padding: 0; font-style: normal; font-weight: normal; } ここらへんは基本だと思ってたんだけど、未だにこれをやっていなくて、あのブラウザとこのブラウザで見た目が違うんですけどってのは結構いたりする。上記に text-decoration: none; や font-size: 100%; なんかを加えても良いかも知れないけど、最低限マージンとパディングは無くしておくことをお薦
RSS 用の XSL を公開してみる - lucky bag
MT のデフォルトのテンプレートに、Syndicate this site (XML) ってリンクがあったりして、良く分からない人がクリックしちゃうと XML のソースが表示されて、なんじゃこりゃってのがあるかも知れない。そこで当サイトでは、ブラウザで閲覧してもそれなりに見えるように、浅い知識ながら簡単な XSLT で変換していたりするんだけど、何となくその XSL ファイルを公開してみようかなって今突然思いついたんで、大した物じゃない（いや、マジで）けどご入り用なら如何でしょうかとか言ってみたりして。 xsl.zip ダウンロードして解凍すると、RSS1.0、RSS2.0、Atom0.3 それぞれに対応した XSL ファイルと共通の CSS ファイルが入っている。 atom.xsl Atom0.3 用の XSL ファイル rdf.xsl RSS1.0 用の XSL ファイル rss.xs
Lucky bag::blog: CSS で画像ポップアップ
JavaScript を使わずに、CSS を使ってサムネール画像の拡大画像をマウスオーバーで表示せる方法「CSS ~ Image Pop UP」を参考に、拡大画像をその場で表示させるサンプルを作ってみた。 popup.html 最初に拡大画像を高さ 1px 幅 1px に指定しておき、hover で正寸を指定させることによって実現させている。ちなみに、hover の指定に背景色を指定しないと IE でうまく動作しない。 .photo a.popup:hover { background-color: #fff; } 何となく微妙な感じだけど、サムネールをいっぱい並べて画面遷移なしで拡大画像をみせたい場合に使えるかも。 あの頃のように… - CSS で画像ポップアップさせる (2005年6月10日 19:02) CSS で画像ポップアップ私の中ではかなりの革命です。なぜ今までこれに気が付かな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
