vimperator2.4 で css に よる tab number - caisuiの日記2010/12/09 記事訂正 css だけで 実現できたので、この script は 必要ありません。 id:tsukkee さん ありがとうございました。 vimperator 3 の tab number のように css で いけるようにしてみた。 https://github.com/caisui/vimperator/blob/master/plugin/tab-number.js 以下の stylesheetで こんな感じになります。
【レビュー】CSS3で歩く男 | エンタープライズ | マイコミジャーナル
Andrew Hoyer's Blog How I Learned to Walk - experiment!においてCSS3とHTMLを使って制作されたデモが公開されている。ChromeまたはSafariなどのWebKit系ブラウザで動作するデモページで、対応するブラウザでアクセスすると歩く男がレンダリングされる。歩く男の下にある「Show」というリンクをクリックするとワイヤーフレームでのレンダリングになる。対応していないブラウザでアクセスすると、直立している男性が表示されるだけで、歩き出したりはしない。 How I Learned to Walk - Andrew Hoyer's Blog デモの閲覧例 - Chrome 8 / Windows XP How I Learned to Walk - Andrew Hoyer's Blog デモの閲覧例 - Chrome 8 / Wind
フォントブログ
フォントブログ閉鎖と一部記事の移管について 平素はフォントブログをご覧いただき誠にありがとうございます。 数年前よりブログの更新を中止したまま、諸般の事情で過去の記事は公開をしていましたが、 時代に合わない内容や、すでに古い情報をこのまま残しておくのは良くないと考え、 フォントブログを閉鎖することにいたしました。 これまでお世話になった方々、私に様々な機会を与えてくださった方々、 そして約25年間に当ブログをご覧いただいた方々に心より感謝いたします。 私自身2014年に関東から地元へUターンをし、 書体デザイナーやフォントメーカーの方、文字関係者の方と直接お会いする機会が減ってしまったこと、 また私自身の環境の変化により、以前のように情報収集をする時間の確保が難しくなってしまいました。 フォント好きとして初心に帰り、過去の一部の記事は順次個人サイト (PETITBOYS) のブログのほうへ
Firefox 4: Drawing arbitrary elements as backgrounds with -moz-element ✩ Mozilla Hacks – the Web developer blog
Firefox 4: Drawing arbitrary elements as backgrounds with -moz-element This is a guest post by Markus Stange. Markus usually works on the Firefox Mac theme implementation, but this time he went on a small side trip through the Gecko layout engine in order to implement -moz-element. In Firefox Beta 4 we’re introducing a new extension to the CSS background-image property: the ability to draw arbitra
CSS Transitions, Transforms and Animation Tutorial
CSS3 Transitions, Transforms, Animation, Filters and more! Introduction This website is designed to help you build modern sites that are able to make use of some of the newer, exciting parts of CSS. The site is currently focussed on CSS Transitions, Transforms and Animation, though I will be adding other topics as they become available on any major platform. Though of course your browser must supp
User CSS - grid.in.th
An extension for Safari 5 to Safari 11 that allows the user to override stylesheets for any web page with real-time updating of web pages. It is no longer maintained due to deprecation of JavaScript-based extensions in Safari 12. The extension is licensed under MIT license. Downloads Download v1.3.2 Source code Note Due to a limitation with Safari's URL parsing, domain wildcard only works for subd
Firefox 4: CSS3 calc() – Mozilla Hacks - the Web developer blog
Thanks! Please check your inbox to confirm your subscription. If you haven’t previously confirmed a subscription to a Mozilla-related newsletter you may have to do so. Please check your inbox or your spam filter for an email from us. Gary van der Merwe OMG – That will rock!!!! June 10th, 2010 at 05:39 iGEL Some questions about the -moz prefix: 1. At which point will interpret CSS3 without the -moz
IE8.0のバグ ～テキストの右側にリンクが表示されてしまうバグ
こんにちは、馬場です。 今回は「画像の縦方向のセンタリング その２」を ご紹介する予定でしたが、予定を変更して、 IE8のバグ？について、お話しをさせていただきたいと思います。 実は、（CSSプログなのに）CSSのお話しではありませんが、 個人的に旬な話題でしたので、ご紹介させていただきます。 まずはこちらのサンプルをWindowsのIE8でご確認ください。 ▼スクリーンショット ※スクリーンショットは、Windows Internet Explorer 8.0のものです。 （htmlコーディング） <p><a href="#test1">ホーム</a> > <a href="#test2">カテゴリ</a> > 詳細</p> サンプルを表示 サンプルは、Webサイトで良く使われている「パンくずリスト」を再現したものですが、 リンク
CSSセレクタの高速化の話を検証 - os0x.blog
CSSセレクタの高速化の話し - Webtech Walkerの件。元ネタは続・ハイパフォーマンスWebサイト ―ウェブ高速化のベストプラクティスで、元ネタの元ネタはWriting Efficient CSS for use in the Mozilla UI - MDC。 先に書いておくと、この元ネタのMozillaの記事には、in the Mozilla UIとある通り、FirefoxなどのUIレベルの話です。Mozillaの場合、ウィンドウとかタブとか、とにかくなんでもCSSでスタイルを指定できる(している)のでCSSのパフォーマンスについて考慮する点が他のブラウザとはズレています。 とはいえ、実際にどうなのか検証したことなかったので、少し試してみました。 今回の検証方法は、dl>dt+ddを5重に入れ子にした300KB強の大きめなHTMLを用意して、CSSを動的に適用したときの時間
GoogleのChromeブラウザの構成モジュールのそれぞれのバイナリ・サイズの表 - [モ]Modern Syntax
ビリー・ジョエルがトレイ・パーカーとマット・ストーンのディープ・フェイク・カンパニー「DeepVoodoo」と協力して作成した新曲のPVは自分のキャリアの中の4つの世代の顔をディープ・フェイクを使って再現して歌うというものです。 今のビリー・ジョエルを知る人は昔のビリー・ジョエルのこの姿を想像するのは難しいかもしれませんが、昔を知る私としては「ああ、ビリー・ジョエルだ！」と懐かしい気持ちになるのでした。
The CSS 3 Flexible Box Model ✩ Mozilla Hacks – the Web developer blog
Thanks! Please check your inbox to confirm your subscription. If you haven’t previously confirmed a subscription to a Mozilla-related newsletter you may have to do so. Please check your inbox or your spam filter for an email from us. Christian Thanks for the great article! Too bad there is no support in IE yet. Btw shouldn’t the following be converted from: 1 to: 1 April 22nd, 2010 at 10:22 Christ
CSS Sprite Script - collamo
もうネタとしてはかなり賞味期限切れだと思うんですが、 CSSスプライトを簡単に作れるPhotoshopスクリプトっていうのをちょっと前に作ったので公開します。 前にTonttuっていうAirのCSSSprite支援ツールを作ったんですが、 プロジェクトをttdファイルっていう独自のフォーマットでしか保存出来なく、これだとまだまだ不便だなーとずっと思っていたので、いっそpsdのプラグインにしちゃえってことでこんなもの作りました。 http://collamo.jp/cssspritescript/CssSpriteScript.zip PhotoshopでSprite画像を組み立てて、あとはjsxを実行すればHTMLとCSSを吐き出すようなツールになっています。 スプライトを作ったpsdをそのまま残しておけば良いので、運用で画像差し替えなんかあっても便利に使えるんじゃないかと思います。 以下
ウィンドウサイズによってスタイルシートを変える - builder by ZDNet Japan
ウェブページを表示するブラウザのウィンドウサイズは、閲覧環境によってさまざまだ。特定のウィンドウサイズを想定してウェブページを作成すると、それ以外の大きさのウィンドウではコンテンツが読みづらくなるなどの問題が発生する。最近ではiPhoneのような携帯端末からのアクセスも考慮する必要性が出てきているが、サイズ別にページを用意するのは制作にも管理にも手間がかかってしまう。 こんなとき、CSS3の「Media Query（メディアクエリ）」の機能を利用すれば、ウィンドウサイズに応じて適用するスタイルシートを切り替えて、ユーザーの環境ごとに最適なデザインでページを表示することができる。 現在、Media Queryの規格はW3Cの勧告候補（Candidate Recommendation）となっており、Firefox 3.5以上、Safari、Google Chrome、Operaが対応している。
日記 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
ストレスの無いCSSアニメーションを - latest log
今日は、CSSアニメーション機能を担当する uu.tween.js のリライトをしていました。 uu.tween.js を組み込むと、CSS の色, サイズ, 位置を利用したアニメーションが可能になります。これ自体はよくある機能なのですが、他のライブラリにない特徴として、CSSプロパティ個別に easing 関数を割り当てられます。 デモ http://pigs.sourceforge.jp/blog/20091216/ ノード3個 と 15個版があります。ノード数が違うだけで何身は一緒です。デモにある円弧軌道は、left, top に別々の easing 関数を割り当てて実現しています。 easing 関数 デフォルトの easing関数 は easeInOutQuad です。plug/easing/uup.easing.js を組み込むと他の関数を利用できます。 http://code
CSS Animations
Friend: You should learn how to write CSS! Me: … Friend: CSS; Cascading Style Sheets. If you’re serious about web design, that’s the next thing you should learn. Me: What’s wrong with <font> tags? That was 8 years ago. Thanks to the hard work of Jeffrey, Andy, Andy, Cameron, Colly, Dan and many others, learning how to decently markup a website and write lightweight stylesheets was surprisingly eas
CSSグラデーションのちょっとしたテクニック #2
前回のエントリのような応用するための基本というものではなく、CSSグラデーションはこういう使い方もできるよ的なもので３つ。普通のグラデーションの作り方はcss gradients in Firefox 3.6とかで。#3はない。 以下プレビュー画像のリンク先がデモ・ページになっているのでそちらも参照のこと。もちろん対応ブラウザのFirefox 3.6とSafari 4やChrome 4以降でないと動作デモは確認できない。 Vista風のテカってるボタン ありがちだけど作れたらなかなか便利そうなので挑戦してみたら、意外に簡単だった。実はdoubleなborderが重要で、これが無いとちょっと間抜けな感じになる。コード的には難しいことはなく、上半分にrgb(138, 138, 138)からrgb(102, 102, 102)、下半分にrgb(36, 36, 36)からrgb(0, 0, 0)と
CSSグラデーションのちょっとしたテクニック #1
リリースを間近にひかえたFirefox 3.6で対応されるので、そこかしこで取り上げられているCSSによるグラデーション。基本的な書き方はIntroducing CSS Gradientsやcss gradients in Firefox 3.6を始めとして腐る程あるのですっ飛ばすとして、実際にボタン等で利用する時にどうすれば簡単に書けそうかということをちょっと考えてみようとかいう話。勢いで#1とかつけてしまった……。 button要素にCSSによるグラデーションをかけるには以下のように書くことになる。 button { background-image: linear-gradient(top, rgb(204, 204, 204), rgb(102, 102, 102)); background-image: -moz-linear-gradient(top, rgb(204, 204
kzms2 – html,css,javascript » レイアウトについて(1/4) – css3を触ってみて思った4個の利点
このブログをリニューアルして思ったこと やっぱりCSS3は便利でした。 自分でちゃんと触ってみて4点ほど、利点があったのでそれについてチマチマ書いて見ます。 レイアウト組むのが楽ちん セレクタが便利 画像に頼らず色々出来る アニメーションが素敵 といった4点が利点かなー なんて思いました。 本日はレイアウトについて便利だったことを書いてみます。 詳細は続きで。 まず始めに css2までは基本的に、FloatかPositionのどちらかでレイアウトを組んでいたと思います。 css3からは違う概念でレイアウトを組むことが可能になっています。 表示確認には、Firefox3.5、Chrome4を使用しています。 ※ちなみに説明する中で「-webkit-」（Webkit系）「-moz-」（Mozilla系）「-ms-」（IE系）などのプロパティがありますが、ブラウザごとの独自規格扱いになっ
Firefox 3.6以降でＭＳ Ｐゴシックを無効にする
CSSの@font-faceではユーザーがインストールしていないフォントをウェブ上に用意してやりそれをダウンロードさせてページ上で利用することを主眼としているが、ローカルのフォントを置換、つまりＭＳ Ｐゴシックをメイリオに置換するなどということもできる。Firefoxでは3.6から可能になった(Beta版でももちろん可能)。ユーザー・スタイルシートでの利用が中心になると思う。 ＭＳ Ｐゴシックをメイリオに置換する場合は以下のようにuserContent.cssに記述する(userChrome.cssではない)。 @font-face { font-family: "ＭＳ Ｐゴシック"; src: local("メイリオ"), local("Meiryo"), local("ＭＳ Ｐゴシック"); } @font-face { font-family: "MS PGothic"; src:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
