タグ

CSSに関するkirononoのブックマーク (3)

  • 待ち時間をもっと楽しく!コピペできるCSSローディングアニメーション38個まとめ

    開いているウェブページが読み込み中であることを、分かりやすく伝えるローディングアニメーション。これまではGIFなどで作成されることもしばしばでしたが、CSSの進化によって自由でカスタマイズ性の高いローディングアニメーションがたくさん登場しています。 今回はコピペで利用できるCSSローディングアニメーションを、コミュニティサイト Codepen よりピックアップしご紹介します。 よりオリジナル性の高いデザインを作成することができ、待ち時間が楽しみになるようなエフェクトを中心に揃えています。どうしてもファイルサイズが大きくなってしまうページなどに活用してみてはいかがでしょう。 詳細は以下から。 待ち時間が楽しくなる、CSSコピペで実装できるローディングアニメーションまとめ #22 – Loader with Pure CSS 動きに合わせて、背景のグラデーションカラーが美しく変化するローディン

    待ち時間をもっと楽しく!コピペできるCSSローディングアニメーション38個まとめ
    kironono
    kironono 2016/10/06
    見てて楽しい!
  • http://buchineko.website/chrome-devtools-cording/

    http://buchineko.website/chrome-devtools-cording/
  • GitHubのエラー・ページ

    GitHubのStyleguideにエラー・ページのセクションがあるのを知った。それによると外部ファイルに依存しないように書いているらしい。CSSはstyle要素で、JavaScriptはscript要素で、画像ファイルはBase64エンコードしてData URIで、それぞれHTMLに直接埋め込むというスタイル。 実際に404のテンプレートでもちゃんとそうなっていた。フロントエンド脳なので、HTTPリクエストを減らして、エラー・ページのコストを下げたいのかなと単純に考えてしまったけど、Not Foundの連鎖を避けることとか外部ファイルがCDN経由の場合の確実性を上げることとかの方が強い理由のようだ。エラー・ページを単独で機能するようにしておき、エラー時に余計な負荷を与えないようにすることにより、より速やかに復帰できるように、ということになりそう。 HTTPエラー・ページの意味も重要だけど

    GitHubのエラー・ページ
  • 1