タグ

2018年1月22日のブックマーク (4件)

  • CSSのこのアイデアはすごすぎる!Webページのトラッキング・解析ができるスタイルシート -Crooked Style Sheets

    結果ページ どのリンクをいつクリックしたのか、いつホバーしたのか、指定エリアでどのくらいマウスを動かしたのか、フォームに特定の文言を入力したのか、チェックボックスをクリックしたのか、ブラウザは何か、解像度はいくつか、ディスプレイの向きはどっちなのか、などの情報が表示されました。 ※出力する際には、PHPが使用されています。 Crooked Style Sheetsの仕組み Crooked Style Sheetsは、外部CSS一つを加えるだけで、Webページのユーザーに関するさまざまな情報を取得できます。 基的な仕組み CSSではurl()関数を使用して、外部リソースを追加できます。url()関数の値は呼び出された時のみロードされるため、これをリンクがクリックされた時に利用します。 リンクを記述するHTMLは、要素を特定できるようにidを与えます。

    CSSのこのアイデアはすごすぎる!Webページのトラッキング・解析ができるスタイルシート -Crooked Style Sheets
  • これから開発されるFirefoxの新規機能は、HTTPSにしか対応しない。新規のCSSプロパティなども対象

    これから開発されるFirefoxの新規機能は、HTTPSにしか対応しない。新規のCSSプロパティなども対象 Firefoxを開発するMozillaは、Firefoxにおいてこれから開発されるWeb関連の新機能はすべて安全なコンテキスト(Secure Context)のみを対象にすると、Mozilla Security Blogの1月15日付の記事「Secure Contexts Everywhere」で明らかにしました。 安全なコンテキストとは? 安全なコンテキストとは、W3Cのドキュメント「Secure Contexts」で厳密に定義されています。日語での説明はMDNの「Secure Contexts」で読むことができ、次のように説明されています。 (HTTPS / TLS を介して) コンテンツが安全に配信され、安全ではないコンテキストとの通信の可能性が限られているという合理的な確信

    これから開発されるFirefoxの新規機能は、HTTPSにしか対応しない。新規のCSSプロパティなども対象
  • SVGでリアルな湯気を作ってみる | Tips Note by TAM

    もう7年ほど前になりますがFlashでサイト製作をしていた時代に、表現に悩まされるものがありました。 それが『湯気』です。 イラストを使った可愛い表現なら問題ないですが、リアルな感じを作ろうと思うとこれがなかなか難しい。最近では動画やアニメGIFなどで代用されていたりすることも多いと思いますが、今回はそんな素材がない時に使える 『SVGで作るリアルな湯気』 を紹介したいと思います! See the Pen Steam by uenaka (@uenaka) on CodePen. SVGで湯気を書く まずはSVGで湯気の形を自由に書いてみてください。 難しく聞こえるかもしれませんが、後々ボカして使用しますので形に拘る必要はありません。 参考までに私が書いてみた湯気がこちらです。 SVGにanimateを追記して動す よりリアルな動きに見せるため、SVGで書いた湯気を動かします。 ここも動き

    SVGでリアルな湯気を作ってみる | Tips Note by TAM
  • Illustrations | unDraw

    Browse to find the images that fit your needs and click to download. Use the on-the-fly color image generation to match your brand identity.

    Illustrations | unDraw