CSSh2やh3などの見出しタグのデザイン等使えるボーダーにグラデーションを使ったCSSサンプル集です。CodePen.右端に向かうにつれてボーダーカラーをグラデーションで透過色にしていく見出し向けのCSSサンプルです。シンプルですが只の横棒が入るだけより、オシャレになります。フェードアウトしていくタイミング別に4タイプのサンプルを設置しておきます。CodePen.複数色を使ったグラデーションをボーダーカラーに施したCSSサンプルコードです。こちらも最後の色にtransparent(透過)を割り当てることで右側手前でフェードアウトしていく感じのボーダーにもなります。CodePen.徐々に変化するのではなく、くっきりとしたグラデーションを指定しています。linear-gradientでくっきり色分けする方法は、色の終点値と次の色の始点値を同じにする事で可能です。)と色を切り替える事で破線を表現しています。CodePen.破線(dashed)と同じく点線(dotted)のボーダーCSSサンプルも設置しておきます。サンプル4は破線と点線の混合タイプです。CodePen.グラデーションさせたボーダーと商用OKのキャラクターのシルエットを合わせた見出しタグ向けCSSデザインです。配布元は以下にリンクしておきます。Downloadシルエットの位置はbackground-position、大きさはpaddingの1つ目の値で調節できます。CodePen.もはやグラデーションとはちょっと違ってきますが、linear-gradientを使って作ったチェック柄をボーダーにした見出しタグ用の下線CSSデザインです。チェック柄については以下にまとめてありますので、宜しければどうぞです。...https://1-notes.com/css-text-check-pattern/ボーダーの位置はbottom、太さはheightで変更・調節です。文字や要素を点滅するCSSアニメーションのパターン集です。要素や文字の色が変化するCSSアニメーションパターンです。...CSSのみで雨が降るアニメーションサンプル集ピュアなCSSのみで雨を降らせてみたアニメーションサンプル集です。柔らかい色を使ったほんわか系CSSボタンです。コメントをキャンセルメールアドレスが公開されることはありません。