旧愛生会病院HPをCSSアニメーションで再現するサンプル4種
サイケデリックで目の痛いデザインで有名な旧愛生会病院のホームページをCSSアニメーションで再現してみるサンプル。
タグ 23件
CSS
-
-
記事内で使えるアラート表示のテンプレート3種
このブログの記事内で使っているアラート表示の装飾。ブログ記事作成に役立つ。
-
CSSアニメーションの開始位置をランダムにする
CSSアニメーションはロード直後に0%から開始するが、ページを開いていつも同じ場所から始まるのはつまらないのでJavaScriptで開始位置をランダムにしてみる。
-
CSS Gridでcodeブロックがある場合に横幅をはみ出してしまう現象の解決策
CSSのGridでレイアウトを組んでいて、グリッドアイテムにcodeブロックが含まれている場合に、横幅がGridの横幅をはみ出し制御できなくなる現象を解決する方法。
-
調和数列の文字サイズをCSS変数で再現
このブログの文字サイズはすべて調和数列に基づいて設定している。これについては下記のサイトで提言されているものを参考にした。
-
リセットCSSで消え去ったselectのスタイルを元に戻す
リセットCSSといえば、destyle.cssとかnormalize.cssとかress.cssなどいろいろあります。
-
PC版Twitterの右カラム(トレンド、おすすめユーザー)を消すCSS
Twitterは公式アカウントを情報収集目的で見るくらいで、他人の反応とかトレンドとか1ミリも興味ねえよ！って方向けの、PC版Twitterをカスタマイズする記事です。
-
pointer-events:noneするとcursorプロパティが効かないのを回避する
このブログのトップページのページャーで、disabledになっているボタンにhoverしたとき、cursorをnot-allowedにしようとしたらうまく適用されず、気になって調べたことのメモ。
-
JavaScriptでCSSを動的にセットする方法2種 (styleタグ、style属性)
CSSを動的にセットしたいときに便利なJavaScriptの関数の雛形です。
-
highlight.jsのスタイルをダークモードに応じて切り替える
ページ上のコードにシンタックスハイライトを適用するのに、highlight.jsというプラグインがあります。