CSSに関するm_c2nのブックマーク (2)

  • こんなことができるんだ!CSSのボーダーを破線や点線にするスタイルシートのテクニック

    ただし、このCSSでは破線や点線の大きさや長さをコントロールできません。また、ボーダーに傾斜やフェードやアニメーションを与えることもできません。 しかし、いくつかのテクニックを使用することで、それが実現できます! Amit Sheenが作成したDashed Border Generatorで簡単に実現できます。 See the Pen Dashed Border Generator by Amit Sheen (@amitsheen) on CodePen. このテクニックのポイントは4つの背景(background)を使用することです。backgroundプロパティはカンマ区切りの値を取るため、4つの背景(上下左右に沿って1つずつ)を設定し、それらをボーダーのようにサイズ変更することで、borderプロパティの制約を解除することができます。 ジェネーターで自分好みのボーダーを簡単に作成で

    こんなことができるんだ!CSSのボーダーを破線や点線にするスタイルシートのテクニック
    m_c2n
    m_c2n 2020/08/25
  • CSSの新しい疑似クラス:is()と:where() なんだこれ便利すぎる!

    複数のセレクタを1つにまとめられる:is()、セレクタの詳細度を0にする:where()、CSSの新しい疑似クラスが、SafariとFirefoxで利用できるようになりました。 そんな:is()と:where()の便利な使い方を紹介します。 CSS :is() and :where() are coming to browsers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSの新しい疑似クラス「:is()」「:where()」がブラウザに登場 :is()を使用すると、繰り返しを減らせる :where()を使用すると、詳細度を低くキープできる CSSの新しい疑似クラス「:is()」「:where()」がブラウザに登場 CSSの新しい疑似クラス「:is()」「:where()」が、Safari(Tech Preview 1

    CSSの新しい疑似クラス:is()と:where() なんだこれ便利すぎる!
    m_c2n
    m_c2n 2020/06/18
  • 1