CSS Tips

 (markodenic.com)
21 ポイント 投稿者 xguru 2021-04-28 | 2件のコメント | WhatsAppで共有

ほかのチュートリアルではあまり見かけないTips集

  • タイピング（点滅するカーソル）効果

  • drop-shadow(); フィルター

  • scroll-behavior: smooth; なめらかなスクロール

  • 中央揃えにする

  • 画像/絵文字カーソル

  • テキストの切り詰め

  • -webkit-line-clamp : 指定した行数でテキストを切り詰める

  • ::selection

  • resize: both; ですべてをリサイズ可能にする

  • :target で Modal を作る

  • calc()

  • :empty セレクター

  • カスタムスクロールバー

  • position: sticky;

  • CSS Scroll Snap

  • attr() を使った動的ツールチップ

  • caret-color でカーソルの色を変更

  • ::in-range, ::out-of-range

  • background-clip で印象的な背景の見出し文字を作る

関連記事

2件のコメント

 
alstjr7375 2021-04-30

タイピング効果は知らなかったのですが、便利ですね。
 
xguru 2021-04-28

最近は中央揃えは記事だと3行ですが……こんなふうに2行でもできるそうです。

.center {

display: grid;

place-items: center;

}