Facebookの新しいUIデザインで見つけたCSSのテクニックのまとめ
先月からエンドユーザーに段階的に適用され始めたFacebookの新しいUIデザイン、そこで見つけたCSSのテクニックを解説した記事を紹介します。 CSSの実践的なテクニックが数多く使用されており、パフォーマンスや何らかの制約による実装時などの参考になると思います。 CSS Findings From The New Facebook Design by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに アバターにSVGを使用する マージンの代わりにスペーサーdivを使用する CSSフィルターの使用 シャドウに画像を使用する CSS変数の多用 テキストの省略表示（複数行テキストの切り捨て） ホバーエフェクトにdivを使用する insetプロパティの使用 dir=autoとCSSの論理プロパティ
ユーザーにスクロールを予測させるCSSの書き方について | mkasumi.com
受託案件でレスポンシブ対応をするようになって4年半ほど。未だに悩むのがテーブルのレスポンシブ対応。 テーブル要素をレスポンシブ対応する方法はいろいろとあると思うのですが、私がよく使うのはテーブルをスクロールさせる方法。ただ、このテーブルにはデザインの面で抱えている問題があります。それは、スクロールできることがユーザーには伝わらないこと。ぱっと見、途中でコンテンツが切れているように見えてしまう。もっとひどい場合にはthやtdの区切り線と同じタイミングで見切れてしまっていてその先にもっとコンテンツが存在することが予測できない可能性があります。 今回は続きのコンテンツの存在をグラデーションで表現し、CSSのみでスクロールを予測させる方法について記述しています。 実装方法 box-shadowやbackgroundプロパティでグラデーションを適用すればいいと思ってしまいがちですが、ただ単にこのプロ
Illustratorでのデザイン作業に変化を与えた便利な機能・テクニックのまとめ
Illustratorも他のソフトウェアと同様にバージョンアップを繰り返し、より使いやすくより便利なものに進化し続けています。 デザインをIllustratorでする際に変化を与えた、ここ数年の間に学んだ便利な機能、新しいテクニックをSpoonGraphicsから紹介します。 Illustratorはクオリティの損失なしで拡大縮小が無限にできるベクターのアートワークを扱います。あなたがそのサイズを変える時、アートワークが太ったり痩せたりして困惑してしまうことはありませんか？ もしその線幅や効果を一緒に拡大縮小したいのであれば、環境設定パネルを確認してみてください。 設定方法 「環境設定 - 一般」の「線幅と効果も拡大・縮小」をチェック はさみツール
ランダムフォレストと他の機械学習（or統計）を組み合わせて使う - じじいのプログラミング
もしかしたら、プロにとっては当たり前のテクニックかもしれませんが、自分は初めて見たので書きたいと思います。また、おそらく大きい効果を出すのが難しいテクニックだと思われるので、まずは基本的なことを先にやったあとに試したほうがいいでしょう。 追記 3/13 このテクニックは「stacking」と呼ばれるそうです。Twitterで教えていただきました。ありがとうございます！ Stacking, Blending and Stacked Generalization | Garbled Notes Ensemble learning - Wikipedia, the free encyclopedia ここから本題です。 前々回のTopCoder機械学習マラソンマッチTripSafetyは、飛行機のフライトデータから、違反フライトを予測するという問題でした。問題やデータはこちら 予測精度をよくする
これで大丈夫！超広角レンズのパースの仕組みと使いこなし。
広角レンズには”広い範囲を写せる”という特徴の他に、"強烈なパース*（遠近感）が得られる"という特徴（クセ）もあります。 ＊正しくはパースペクティブと言いますが、省略してパースと言うことが多いです。 この”クセ”を理解する事こそが、広角レンズの使いこなしで最も大事な事なのでは無いかと思いますので、今回は「広角レンズのクセ」について少しだけ掘り下げてみようと思います。超広角レンズが搭載されたスマホをお持ちの人にも十分応用出来る内容だと思いますよ！ （超）広角レンズにはクセがあるなんとなく、「広角は難しい」 と考えている人が多い気がします。難しいと考えている多くの人は「たくさんのものが映り込んで構図の処理が難しい」と口を揃えるのですが、この人たちは恐らく、 広角レンズ = 広い範囲を写せるレンズ という認識にとらわれているからなのでは無いかと思うのです。 確かに「広角レンズ = 広い範囲を写せ
透過PNGをSVGを利用して軽くするテクニック
透過PNGは現状では唯一に近いフルカラーの透過画像を作成する手段だが、ファイル・サイズが大きくなりがちだ。対してJPGはファイル・サイズという点で大きく優るが、透過することは出来ない。このあちらを立てればこちらが立たずの問題をSVGのマスク機能を使って透過だけを受け持つPNGとJPGを組み合わせることで両立させるテクニックを知った。 透過させた画像をまず普通に作る。それから透過してないJPG画像と、透過を反転させてマスクに使うPNG画像を生成する。それらをHTMLでSVGのmask要素をインラインに書くことで組み合わせる。ベースとなるJPG画像が一般的にファイル・サイズに優れ、マスクに使うPNGは空白が多いこと、SVGの記述はごく短いもの、というわけで最終的に低ファイル・サイズが実現できる。 SVGのセキュリティ上の制限により、HTMLにインラインで記述するケースでしか使えないのでCSSの
[CSS]チェックしておきたい、最近のスタイルシートのテクニックのまとめ -2014年秋
次のプロジェクトでちょっと使ってみたくなる実用的なものから実験的なものまで、CodePenで多くのユーザーをうならせたスタイルシートのテクニックを紹介します。 まずはアニメーションが楽しいデモから。 ※上から10個くらいはアニメーションgifです。
![[CSS]チェックしておきたい、最近のスタイルシートのテクニックのまとめ -2014年秋](https://cdn-ak-scissors.b.st-hatena.com/image/square/d68594e0182d8d63cfb96eda05e4f18be75583c9/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014091401-04.gif)
Web技術者も知るべきデモ・プレゼンの極意（西脇資哲氏）「Microsoft de:code」イベントレポート
Web技術者も知るべきデモ・プレゼンの極意（西脇資哲氏）「Microsoft de:code」イベントレポート 岩瀬 義昌（HTML5 Experts.jp編集部） 5月29日、30日にかけてMicrosoftの開発者向けイベントである「de:code」が開催された。本記事では、Microsoftのエバンジェリストである西脇資哲氏のセッション「de:code参加者に捧げる最新Microsoftデモ・プレゼンの極意」について紹介する。 プレゼンテーション・デモとは プレゼンテーションでは相手に、話をする、画像・動画・デモを見せる等を行う。このプレゼンテーションにおいて、重要なことはまず相手に伝わること、そして相手に伝わった結果、さらに重要なのが相手が動いてくれることだ。相手が動いてくれるとは、例えばプロジェクトについて説明した結果、相手が人・お金のリソースを出してくれる、ということだ。 この
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの素晴らしいアイデアが満載！2014年スタイルシートのテクニックのまとめ