[B! Article][css lib] bleu-bleutのブックマーク

head内でパフォーマンスの問題がある箇所、Webページのレンダリングを妨げる要因を明らかにするCSS

Webページのレンダリングを妨げる要因、<head>タグ内でレンダリングをブロックしているCSSやJavaScript、サードパーティーのリソースなどを表示して、どこを修正すればよいか教えてくれるCSSのスニペットを紹介します。ちなみに下記のグリーンは問題なし、レッドはエラーで対応が必要、オレンジは特定のシナリオで問題が発生する、です。 ct.css ct.css -GitHub ct.cssの特徴 ct.cssのデモ ct.cssの使い方 ct.cssの特徴 <head>内にあるタグは、ページのレンダリングを妨げる要因となる最大の箇所で、正しい形式であることは非常に重要です。ct.cssは、Webページの<head>タグ内に潜在するパフォーマンス上の問題を明らかにするCSSのスニペットです。 ct.css ct.cssの使用にあたっての制限事項は、下記の通りです。一致しないmedia

bleu-bleut 2021/10/18

リンク

ローディングのアニメーションの次の段階、インターフェイスプレビューに対応するための軽量スタイルシート

Webページやスマホアプリを読み込む際に、ローディングのアニメーションを表示するのをよく見かけます。しかし、最近ではFacebookやSlackなどでインターフェイスプレビューとして、表示される予定のコンテンツをプレースフォルダーで先に表示しています。表示される予定のコンテンツとして利用できる画像や見出しやテキストなどをプレースフォルダーで表示できる軽量のスタイルシートを紹介します。そのまま使用してもよし、カスタマイズもCSSベースで簡単にできます。

bleu-bleut 2017/05/29

リンク

Web制作者がチェックしておきたい、CSSのライブラリのまとめ

ページのレイアウト、アニメーションをはじめ、エフェクトやフィルターなど、ここ数年でCSSでできる表現の幅がかなり広がりました。 Web制作に携わる人がチェックしておきたい、これからどんどん取り入れていきたいCSSのライブラリを紹介します。 Driveaway -GitHub デモページレスポンシブ対応のMasonryレイアウトをスクリプト無し、CSSで簡単に実装できます。CSSアニメーションを使ったインタラクションも豊富に用意されており、パネルが回転する「Flip」、パネルにフォーカスがあたる「Focus」、鼓動のように動く「Pulse」など、楽しませてくれます。

bleu-bleut 2017/02/04

Imagehover.cssとimage hover 63とCSSShakeをスクラップ。

リンク

[CSS]超簡単！Flexboxでグリッドを実装する時のベースになるスタイルシート -Fukol Grids

レスポンシブに完全対応、でも面倒なブレイクポイントの設定は必要なし、すべてのブラウザを配慮したプログレッシブエンハンスメントを取り入れ、Flexboxでグリッドを実装するスタイルシートを紹介します。ファイルサイズはわずか93bytesで超軽量、シンプルなHTMLを使って汎用性のある柔軟なグリッドを簡単に利用できます。 Flexboxを初めて導入する人も、Flexboxをガンガン使ってる人も必見です。

bleu-bleut 2016/11/01

わずか10行とな。

リンク

[CSS]手間がかかるCSSアニメーションがコピペで簡単に実装できる -ShortSnippets.css

CSSもここ数年でかなり進化し、アニメーションをCSSで実装する機会が増えてきました。しかし、難点は実装に手間がかかること。気持ちのいい動きのスピナーから、あまり見かけない面白い動きをするものまで、コピペで簡単に実装できるスニペットをまとめたShortSnippets.cssを紹介します。 ShortSnippets.css ShortSnippets.css -GitHub ShortSnippets.cssのデモ ShortSnippets.cssの使い方 ShortSnippets.cssのデモ ShortSnippets.cssではチョウチョのスピナー、ボックスシャドウを使ったアニメーションなど、あまり見かけない面白いものが多いです。チョウチョは、ひらひら舞っています。