Css

pixelguesser - あなたのwebデザインのサイズ感に挑戦するクイズ

Pixel Guesser(ピクセル当て)は、ブラウザ上でピクセル(px)指定されたサイズの矩形を答えるクイズサイトです。 幅と高さのpx がお題として出るので、マウスでそのサイズと自分が思う領域を指定します。 あなたが描いたサイズと正しいサイズがオーバーレイで示され、どれぐらい正解に近かったかに応じて点数が加算されます。10問解くと合計が出て終了。 ブラウザ上での矩形領域を勘で指定してうまく当て …

#HEXWORDS - 16進カラーコードで「意味のある単語」をまとめたサイト

HTML/CSS の色指定などで使われる16進コード、0から9とA,B,C,D,E,F までの16文字を使って16進数でRGBの三原色の割合を示すものです。3桁(#3C3)や6桁(#BD2031)で使われます。 #3C3 #BD2031 16文字の中にアルファベットが6文字入っているので、数値によっては英単語のように見えるものもあります。(たとえば #DECAFE) これに、0から9までの数字を似 …

Game of Codes - プログラミングツールやライブラリの勢力を表した架空の世界地図

Game of Codes は、プログラミング技術の人気度を基に勢力争いを架空の地図に表すというプロジェクトです。 フロントエンドJavaScriptライブラリ2021の勢力地図(クリックでオリジナルを表示)がこれ。 React が帝国であるのに対し、Angular, Vue, jQuery が王国、Svelte が公国なのは「規模感」だそうなので、国名はデータからプログラムが決めているわけではな …

正しい(イギリス)英語でCSSが書けるプラグイン

jevakallio/css-properly は、正しい英語でCSSを書くことができるPortCSSのプラグインです。 CSS の整形やトランスパイルを行う PortCSS にこのプラグインを入れて呼び出すことで、以下のように .foo { colour: black; background-colour: lightgrey; text-align: centre; } 色指定を …

laptop.css - 画像をラップトップ化してくれるスタイルシート

laptop.cssは、画像の周りにアスキーアートのラップトップ枠をつけてくれるという単機能のCSSスタイルシートです。オープンソースです。 3種類のサイズのラップトップが用意されています。 どういう時に有用なライブラリなのか、今一つわかりませんが。 縦横比に注意して画像を用意しないといけないみたいですね。そして、画像につけたリンクが無効になってしまった。 (rss フィード経由の方は元ページを開 …

css-only-chat CSSだけで動くブラウザチャット

ケビン・クッチャさん(Kevin Kuchta)のkkuchta/css-only-chat は、JavaScript を使わない非同期ウェブチャットサーバーです。 二つ(以上)のブラウザからこのサーバに接続し、アルファベットをクリックしてメッセージを作り送信すると、同じサーバに接続した他のブラウザでも即時表示される、いわゆるブラウザチャットです。しかし面白いのは、このページで …

CSSスクロールで(マリオ風)横スクロール、(マリオカート風)キャラクター操作

CSSだけで(JavaScript無しで)動くページを作る、というお題でこんなものが “A"キーと"D"キーで車が左右に動いています。 こちらが作者のステファン・クックさん(Stephen Cook)による解説ページで、13行のhtml以外はすべてCSS、画像ファイルも使っていないということです。 CSS内に定義したデータから絵を描くのは、グラデーションと …