HTML&CSS

HTML&CSS

CSSのborderで切手風フレームを作成

border-image-sourceの値に、円を描画した画像を設定します。ここで円の色(sgvのfillの値)は、親要素と同色にしておきます。 それをborder-image-sliceで分割し、四辺に割り当て、borderの幅の半分外側に配置します。
2022.07.15
HTML&CSS

千鳥格子模様をCSSのgradientで作成して背景模様にする

先日、千鳥格子をSVGで作成したのですが、模様をじーと見てみると、CSSのgradientでも簡単に作れることに気づきました。単純なconic-gradientと、repeating-linear-gradientを重ねます。
HTML&CSS

CSSのclamp()でメディアクエリ 要素の表示切替

CSSの @media を使用せず、clamp() 関数で要素の表示切替をしてみました。clamp(最小値、推奨値、最大値)となっており、推奨値は最小値と最大値の間にある場合にのみ適用されます。 よって、最小値に0px、最大値に表示したい要素のサイズ、推奨値は切替の為の条件式を記述します。
2022.08.17
HTML&CSS

CSSのborder-image-sourceの値にSVGコードを指定し、星やハートのボーダーを作成する方法

重要なのがborder-image-sliceです。 指定された画像を縦横3分割にし、上下左右のボーダーに割り当てます。 ボーダーに使用するシェイプを縦横3×3配置するSVGコードを作成し、border-image-sourceの値にしました。
2022.07.05
HTML&CSS

千鳥格子模様をSVGとCSSで背景模様にする

千鳥格子模様をSVGで作成し、CSSのbackground-imagプロパティで背景模様にします。CSSで背景模様にするには、background-imagの値のURLにSVGタグを埋め込むのですが、変更を加える箇所があります。
2022.07.06
HTML&CSS

オブジェクトを要素とする配列について オブジェクトの特定のプロパティにreduceを実行

forEachの中でオブジェクトの特定のプロパティにreduceを実行するコードのメモです。sliceで元の配列の一部(現在のindexまでの)のコピーを作成します。背景色の色相(hslのhの値)をそれまでに出てきた要素の色相の値を平均したものにしています。
HTML&CSS

イラストレーターなし ハートのSVGタグを作成する方法

開始点、ベジェ曲線の方向点、下部の先端の座標と、上部の円弧の半径が分かれば描画できます。可愛らしいハートにするため座標を変更してみました。ジェネレーターで簡単にSVGタグが作成できます。塗色fillと同色のstrokeを太めにすると、ハートの上部の二つの円の溝を埋めることができます。
2022.07.13
HTML&CSS

マウスオーバーでアニメーションするグラデーションボーダー

マウスオーバーでテキストとボーダーのグラデーションがアニメーションするボタンを作成しました。ポイントは、マウスオーバーがはずれたら、アニメーションを停止し(初期位置に戻らない)、再びマウスオーバーで停止した箇所からアニメーションを再開するところです。
2022.05.19
HTML&CSS

CSSカスタムプロパティとclampを利用してレスポンシブなフォントサイズ

指定した範囲で端末の横幅に比例してサイズを大きくするフォントの設定を、CSS変数とclampを利用して計算した時のメモ フォントの最小値と最大値、フォント最小値の時の端末の横幅とフォント最大値の時の端末の横幅を変数に代入するため変更が容易です。
2022.07.09
HTML&CSS

JavaScriptで座標を計算 SVGで星を作成

SVGで多角形を描画するpolygonタグのpoints属性の値(座標)を JavaScript で計算しています。それは2つの五角形の頂点で、五角形の外接円を元に計算できます。そのため、円の半径を変更すると星の大きさや角度も調整可能になります。
2022.06.09
HTML&CSS

CSSで星柄の背景を作成 JavaScriptで五角形の座標を計算

CSSのグラデーションで星を作成。conic-gradient() の開始位置は五角形の頂点となるため、座標(%で指定)を JavaScript で計算しスタイルをあてています。星の大きさ(星の内側の五角形の外接円の半径による)や先端の角度も調整可能です。
2022.06.07
HTML&CSS

CSSでアーガイル模様の背景を作成する方法

CSSの扇形グラデーションconic-gradient()と線形グラデーションlinear-gradient()でアーガイル模様を作成しています。菱型は角度が120度と60度です。背景模様の高さをJavaScriptで計算しています。
2022.05.24
スポンサーリンク
タイトルとURLをコピーしました