タグ

2013年3月14日のブックマーク (5件)

  • 小粋空間: CSS の after 擬似要素で回り込みを解除する

    float プロパティで設定したテキスト等の回り込みを、CSS の after 擬似要素を用いて解除する方法を紹介します(通常の解除方法も併せて掲載しています)。 1.「回り込み」とは 例えば、画像の左(または右)にテキストを表示することを「(テキストの)回り込み」と呼びます。 マークアップ <p> <img src="hogehoge.jpg" alt="image" style="float:left" /> 回り込みテキスト~(略)~回り込みテキスト </p> 表示 回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト (X)HTMLでこのような表示を行う場合、先に出現する要素(ここでは img 要素)に対して float プロパティを与えます。float プロパティは、指定された要素を左または右に寄せて配置する際に使用しま

    小粋空間: CSS の after 擬似要素で回り込みを解除する
    cnosuke
    cnosuke 2013/03/14
    Send from iPhone.
  • ここまで来てる! (2) ブラウザだけでリアルタイム3D、WebGLデモ「Zephyros Anemos」 【増田 @maskin】 | TechWave(テックウェーブ)

    HTML5の流れとあわせてウォッチしておきたい「WebGL」ーウェブブラウザに実装されるべく仕様策定が進むグラフィック描画API(アプリケーション・プログラミング・インターフェイス)によるデモの中から、筆者が注目したものをお伝えしていく「ここまで来てる!」のコーナー。 先日のACTISKUーWebGLのデモは骨太だったが、今回のデモもそれを上まわるほどだ。 当然ながらプラグイン無しで3Dレンダリングしている。制御はJavaScript。筆者はGoogle ChromeとFirefoxで動作を確認した。 WebGLの互換性だけが問題 このデモでは、地形と空の表現が中心となるのだが、レンダリングしている画面のほかに、小さなウィンドウが表示されて、そこで3D映像のカスタマイズや演算の状況や詳細の動作ログなども取得できるようになっている。 筆者は、昨年末にリリースされた「�Mac mini (2.

    ここまで来てる! (2) ブラウザだけでリアルタイム3D、WebGLデモ「Zephyros Anemos」 【増田 @maskin】 | TechWave(テックウェーブ)
    cnosuke
    cnosuke 2013/03/14
    Send from iPhone.
  • グーグル、「Google Glass」のアプリを披露--「Evernote」や「Path」など

    Googleが再び、同社のウェアラブル技術披露している。今回はSouth by Southwest Interactive(SXSW)において、Google Glassで複数のアプリを使うプレゼンテーションを実施した。 Engadgetが米国時間3月11日にオースティンで取材したこのプレゼンテーションでは、「The New York Times」「Evernote」「Skitch」「Path」などのアプリが紹介された。 もちろん「Gmail」アプリもあった。電子メールが着信すると、「Google Glass」を装着したユーザーはボイスコマンドを使ってGoogleの電子メールサービスに指示し、送信者の写真や件名をGoogle Glassの画面に表示することができる。さらに、返信内容を口述してアプリに伝えることも可能だ。 The New York Timesのアプリは、写真や見出し、署名、投

    グーグル、「Google Glass」のアプリを披露--「Evernote」や「Path」など
    cnosuke
    cnosuke 2013/03/14
    Send from iPhone.
  • 古くて新しいGUI座標系の型の話

    こないだからの話題にちょっと関連する話として、さいきんChromeOSの仕事で手伝っていたマルチディスプレイ対応の機能について解説しよう。 現在販売されているChromebookには何らかのかたちで外部ディスプレイに接続する機能があるが、古いバージョンではミラーリングしかできなかった。それじゃ役に立たないので、複数のディスプレイをくっつけるような拡張デスクトップの機能をサポートした(まぁ、今時どんなOSにだってはじめっから入ってるような機能ではありますが)。Chromeのバージョン25以降でこの機能がオンになっている。ところが、この機能がなかなかの難産だった。 もともとChromeはブラウザだったから、そのGUI部分はウィンドウ基準の座標系だけを気にするようなつくりになっている。一方、ChromeOSではAuraという独自のウィンドウマネージャを実装したが、Auraにはデスクトップがあるの

    cnosuke
    cnosuke 2013/03/14
    Send from iPhone.
  • 「Webサイトの配色で困った!」→「HUE/360使えば良いじゃない」

    Webサイト制作で避けて通れない配色の決定。芸術的素養が絶望的にないのでいつも泣いてるゴロドクさんです、どうも。 所詮素人には理論に基づいた配色など無理ゲーです。先日もちょっとしたデザイン的なゴニョゴニョという場面に出くわしましていつものように悩みつつ、なんか配色決定のためのWebサービスないかなーと思って探してたらこういうのを見つけました。 webでの色指定は基的にRGB値での指定となりますがこれって光の三原色の混色なんですよね。 実際にCSSなんかで数値いじりつつデザインしてると「なんか違うなー」というときにもっと明るくしようとか、もっと彩度上げようってのが感覚的にどの数値をどんだけいじって良いのかってわからないんですよ。 RGB値直接いじって彩度上げようと思ったらくすんじゃった上に色みかわっちゃってオヤオヤ残念なんて日常茶飯事ですよ(いやそのまえにフォトショなりなんなりでデザインカ

    「Webサイトの配色で困った!」→「HUE/360使えば良いじゃない」
    cnosuke
    cnosuke 2013/03/14
    Send from iPhone.