HTML＆CSS春、桜模様を背景にしたいなら
See the Pen Cherry Blossoms background by blue moon (@blue-moon) on CodePen. CSSでもSVGでも、お好みの形状の花びらを作れま...
HTML＆CSS
HTML＆CSS
HTML＆CSSCSSのborderで切手風フレームを作成
border-image-sourceの値に、円を描画した画像を設定します。ここで円の色（sgvのfillの値）は、親要素と同色にしておきます。 それをborder-image-sliceで分割し、四辺に割り当て、borderの幅の半分外側に配置します。
HTML＆CSS千鳥格子模様をCSSのgradientで作成して背景模様にする
先日、千鳥格子をSVGで作成したのですが、模様をじーと見てみると、CSSのgradientでも簡単に作れることに気づきました。単純なconic-gradientと、repeating-linear-gradientを重ねます。
HTML＆CSSCSSのclamp()でメディアクエリ 要素の表示切替
CSSの @media を使用せず、clamp() 関数で要素の表示切替をしてみました。clamp(最小値、推奨値、最大値)となっており、推奨値は最小値と最大値の間にある場合にのみ適用されます。 よって、最小値に0px、最大値に表示したい要素のサイズ、推奨値は切替の為の条件式を記述します。
HTML＆CSSCSSのborder-image-sourceの値にSVGコードを指定し、星やハートのボーダーを作成する方法
重要なのがborder-image-sliceです。 指定された画像を縦横3分割にし、上下左右のボーダーに割り当てます。 ボーダーに使用するシェイプを縦横3×3配置するSVGコードを作成し、border-image-sourceの値にしました。
HTML＆CSS千鳥格子模様をSVGとCSSで背景模様にする
千鳥格子模様をSVGで作成し、CSSのbackground-imagプロパティで背景模様にします。CSSで背景模様にするには、background-imagの値のURLにSVGタグを埋め込むのですが、変更を加える箇所があります。
HTML＆CSSオブジェクトを要素とする配列について オブジェクトの特定のプロパティにreduceを実行
forEachの中でオブジェクトの特定のプロパティにreduceを実行するコードのメモです。sliceで元の配列の一部（現在のindexまでの）のコピーを作成します。背景色の色相（hslのhの値）をそれまでに出てきた要素の色相の値を平均したものにしています。
HTML＆CSSイラストレーターなし ハートのSVGタグを作成する方法
開始点、ベジェ曲線の方向点、下部の先端の座標と、上部の円弧の半径が分かれば描画できます。可愛らしいハートにするため座標を変更してみました。ジェネレーターで簡単にSVGタグが作成できます。塗色fillと同色のstrokeを太めにすると、ハートの上部の二つの円の溝を埋めることができます。
HTML＆CSSマウスオーバーでアニメーションするグラデーションボーダー
マウスオーバーでテキストとボーダーのグラデーションがアニメーションするボタンを作成しました。ポイントは、マウスオーバーがはずれたら、アニメーションを停止し（初期位置に戻らない）、再びマウスオーバーで停止した箇所からアニメーションを再開するところです。
HTML＆CSSCSSカスタムプロパティとclampを利用してレスポンシブなフォントサイズ
指定した範囲で端末の横幅に比例してサイズを大きくするフォントの設定を、CSS変数とclampを利用して計算した時のメモ フォントの最小値と最大値、フォント最小値の時の端末の横幅とフォント最大値の時の端末の横幅を変数に代入するため変更が容易です。
HTML＆CSSJavaScriptで座標を計算 SVGで星を作成
SVGで多角形を描画するpolygonタグのpoints属性の値（座標）を JavaScript で計算しています。それは2つの五角形の頂点で、五角形の外接円を元に計算できます。そのため、円の半径を変更すると星の大きさや角度も調整可能になります。
HTML＆CSSCSSで星柄の背景を作成 JavaScriptで五角形の座標を計算
CSSのグラデーションで星を作成。conic-gradient() の開始位置は五角形の頂点となるため、座標（％で指定）を JavaScript で計算しスタイルをあてています。星の大きさ（星の内側の五角形の外接円の半径による）や先端の角度も調整可能です。