opacity が利用可能かを判定する - latest log
コメント欄も見てね。 uupaa.js コードリード用のエントリです。興味がない方は読み飛ばしてください。 IE9(IE9pp2) が CSS3::opacity をサポートしました。これで filter:alpha はレガシーコードになります。 考えた opacity のサポート状況を判定するコードを考えてみました。 ポイントは、4つ IE以外の opacity は String型 IE8までの opacity は 型が不定(代入された値を保持してるだけの入れ物) style.opacity = 0.25; なら Number型になり、style.opacity = "0.25"; なら String型になる IE9pp2 の opacity は Number型 "opacity:.25" で、IE8以下 と IE9pp2 を振り分けている cssText = "opacity:0.25
画像を一切使わずにCSS3だけでドラえもんを描いてみた！ - 裏技shop DD
昨日の画像を使わずにCSS3だけで作ったサイト「NetaGear」に引き続き、本日もCSS3の記事です。ここ最近の私のマイブームはCSS3で色々やってみることなんですが、CSS3を使えば画像なんて使わずに絵が描けるんじゃない？という疑問を抱き実際に作ってみました！ 今回作成したのは日本人なら誰もが知っている国民的キャラクターの「ドラえもん」です。使うものはXHTML+CSS3だけで一切の画像は使いません。画像を使えば簡単にできるのは言うまでもないことですが、すべてソースコードから成り立つことが前提です。 CSS3で作ったドラえもんの完成品！ CSS3 ドラえもん 最近のドラえもんというより、大山のぶ代さんが声をやっていた頃のドラえもんの方が好きなので、そっちをイメージして作りました。注意事項としてはGoogle Chromeとfirefoxで閲覧してください。Operaでは一部CSS3に対
JavaScriptでCSS Minifier - by edvakf in hatena
JavaScript で書かれた CSS Minifier がほしいと思って探してみたんだけど、PHP などは多々あれど JS のは皆無だった。(サーバーサイド JS が流行れば出てくると思うんだけど) 色々探した挙句、こういうのを発見して、 Any recommendations for a CSS minifier? - Stack Overflow そこからのリンクで C# で超高速 CSS Minify アルゴリズムというのがあった。 KO Software - Blog - An Ultra Fast CSS Minify Algorithm やー、Stack Overflow すばらしいですね。 アルゴリズムは正規表現を使うのではなくて、一種のステートマシンを作る方法でやっていて、高速かつ CSS の仕様にもよく適合してるらしい。 というわけで、それを JS で書いてみた。 g
はてダのソースコードをカッコいいフォントで表示する - ずっと君のターン
エイプリルフールだったので、午前中だけこっそりソースコードのとこのフォント変えてました。たぶん誰も気づいてないけど。なんでソースコードだけかというと、変なフォントが英文にしかないから。 「ブログ管理ツール > 詳細デザイン設定」でこんな感じに。 @font-face { font-family: FontName; src: url(FontName.ttf); } div.section pre.syntax-highlight { font-family: FontName; } FontName.ttfのところは自分でよさげなフリーフォント探してください。私が使ってたのはこれ。もっと圧倒的に読めないフォントにしたかったけど、無料の都合のいいフォントを見つけられなかった・・・。 割と新しめのブラウザでしか動きません。IEは言うまでもなく非対応。
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
タブ切り替えパネル風の半透明ポップアップ « Mozilla Developer Street (modest)
Tab Flick 拡張機能 のポップアップは、 Firefox 3.6 以降の Ctrl+Tab によるタブ切り替えパネルのような半透明の見た目となっています。 ここでは、そこに至るまでの実装の経緯を記しました。なお、簡単のためコードの一部は実際とは異なるものとなっています。 第1段階 まず、 browser.xul にオーバーレイし、 #mainPopupSet をマージポイントとして新しい xul:panel 要素を追加します。 <popupset id="mainPopupSet"> <panel id="tabFlickPanel" style="width: 200px; height: 200px;" /> </popupset> openPopup あるいは openPopupAtScreen メソッドでこの xul:panel 要素を開くと、当然見た目はシンプルなポップア
CSS3 「gradient」と「@font-face」
CSS3 「gradient」と 「ウェブフォント（@font-face）」 このページは背景画像を一切使用していません。 背景のストライプ模様はCSS3のbackground-image:gradient、フォントはCSS3の@font-faceでサーバー上に置いたフォントを読み込んで表示しています。これによって、閲覧者のパソコンにインストールされていないフォントも表示する事が出来ます。また、画像文字ではないのでコピーする事も可能。 SEOの一環としても有効です。 2010年1月現在、InternetExplorerとOperaではまだgradientに対応していない為、これらのブラウザでは背景は単色になります。フォントファイルはうっかり領収書５部ダメにできる筆圧を誇るふいさんの作った「まきばフォント」をお借りしています。 フォントの為のスタイル指定 @font-face { font
Firefoxをテキストブラウザ化するcss作った【黒画面】【コンソール】
2008.9.28 12：53 追記 ★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★ 公式サイトを開設しました。デモ動画、マニュアル付きダウンロード・パッケージをご用意しております。当エントリより下記の公式ページより情報を得られる事を強く推奨いたします。 http://zamamin.org/labs/black-out ★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★ _________________ここから下は古い情報▼__________________________________________________ 今、自分のブログをスクラッチしているので、こちらで。→2008/9/28 スクラッチ完了！BLACK-OUT.CSS公式ページ 作りました 【black-out.css】 2008.9.13 23：30 追記wmtg.netドメイン失効に伴い、z
【メモ】 Tumblrに関する情報あれこれまとめ。 | mutter
カスタマイズは、自分のTumblrの右上の「Customize」から行うことが出来ます。基本は、タイトルや説明文の入力、アイコン画像の設定、テーマの変更などですね。その他テーマの変更で「custom HTML」を指定してタグを入力していくことで、自分好みにカスタマイズしていくことが出来ます。 使えるのはHTMLの他、下記のページで定義されているTumblr独自のタグ。これを使用すると様々な情報を記載することが出来ます。 Creating a custom HTML theme | Tumblr また、テンプレートにはJavaScriptを記述してWidgetを動かすことも出来ます。 以下、簡単なカスタマイズ例です。 Followしている人の一覧を表示する Tumblrタグ{block:Following}で実装できます。以下はあるテンプレートに記載されていた実装例です。 {block:Fo
TwitterのuserContent.cssとか書いた - 剽窃人生
某eqeがWindows7でAeroアロエ言ってて妬ましくてやった。無駄な時間だったと思っている。 背景はid:cho45の写真を使わせてもらった。ありがとう。cho45++ CSSこんな感じ。Firefoxは3.6とかで。 @namespace url(http://www.w3.org/1999/xhtml); @-moz-document url("http://twitter.com/"), url("https://twitter.com/") { a,a:visited { color : #fff !important; text-decoration:none !important; } a:hover { color : #fff !important; text-decoration:underline !important; } a#more{ color:#000
CSS to XPath
This converts CSS 3 Selectors to an XPath 1.0 expression. Some CSS 3 Selectors (especially pseudo-selectors) cannot be translated (you'll get an error if you try one of these). To access this programmatically GET http://css2xpath.appspot.com?css={css} -- the response will be the XPath expression (Content-Type: text/plain), or if there is an error the response code will be 400 Bad Request and the
CSSだけでキーボードのキーを表現する方法
タイトルがわかりにくいかな。まあいいや。 「方法」などとエラそうに言うほどのものじゃないんだけど やってみたら何かそれっぽく見える気がしてきたので一応書いときます。 要するに何がやりたいのか ブログなんかの文中で 「このキーを押すんだよ」ということを伝えようとして そのキーに刻印された文字を示すことがある。 でもそのままではキーっぽく見えないので、 それ用のスタイルを用意して 何となくキーに見えるようにしたい。 つまりこのようなことが言いたいときに Shift + ⌘ + 3 で画面をキャプチャーします。 このように表示したいということ。 Shift + ⌘ + 3 で画面をキャプチャーします。 CSS 非対応のフィードリーダーで読んでたらわからんと思うのでサイトに来てください。 あと IE6 だと ⌘ ←が出ませんねごめんなさい。”Command” と読み替えてください。 どのタグを使う
Introduction to CSS in Mozilla
4.2.1. Basic XUL + CSS InteractionXUL and CSS interact at two basic levels in Mozilla. At the file level, XUL picks up CSS information by explicitly loading CSS stylesheets at runtime. At the element level, selectors bind CSS rules to specific XUL elements or groups of elements. For an XUL element to pick up a style defined in a CSS file, the XUL file must load the CSS file, and an element or grou
異なるブラウザでフォントサイズが同じに見える方法を実験してみた: 世界中の１％の人々へ
2009年11月| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 文字サイズ100%でもブラウザによって基本文字サイズが違う。 画像は、このブログを異なるブラウザで開いたスクリーンショットを比較できるようにしたもの。左からInternet Explorer 8.0、Firefox3.5.5、Opera!10.01、Safari4.0.4、Google chrome3.0.195.33で、すべてWindows。 Firefoxの文字サイズが小さいことが一目瞭然。 CSSはこう指定してある。 ◇ベースフォントCSS body { font:100%; arial,helvetica,clean,sans-serif;←モダンブラウザ用 *font-size:medium;←IE
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Firefox3.6以降に適用されるハック - 鳥さんの独り言
http://twitter.com/ku/statuses/11065908938
http://www.01.246.ne.jp/~hatch/iceweasel.html
CSS で画像を空間に散らしてみた - zyxwvの日記
