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
HTML&CSS

CSSで花のフォルムを作成し背景(アニメーション)にする

梅の花のようなフォルムをCSSで作成します。使用するのは、background-imageプロパティのグラデーション関数です。放射状グラデーションで円を花びらの5枚分と中心部分の1個分作成するだけですが、その中心点の座標を求めるのが一番の難関かもしれません。
2022.06.12
HTML&CSS

ハートや四葉のクローバーをCSSで作成し背景アニメーションにする

ハートやクローバーの模様を、CSSのbackground-imageプロパティの値にグラデーション関数( radial-gradient()等)を複数使用して作成します。出来上がった模様を繰り返し、背景が移動するアニメーションにもできます。
2022.05.24
HTML&CSS

マウスオーバーでフタが開く3Dボックス(立方体)の作成方法

マウスオーバーすると一つの面(フタ)が開く3D空間上に配置された立方体の作成方法です。 面が二つに分かれていて両開きに開くものと、片開きのものがあります。 マウスオーバーでは、開く面をtransformプロパティを使用して回転します。
HTML&CSS

ブラウザやWEBページ内のスクロールバーをCSSでカスタマイズする方法

ブラウザのデフォルトのスクロールバーのデザインは、CSSの疑似要素 ::-webkit-scrollbar で変更可能です。カスタマイズしたスクロールバーを紹介しています。但し、この機能は標準のものではなく将来的に変更になる可能性があるようです。
2021.12.28
jQuery

今日の年月日をスロット風アニメーションで表示 jQuery $.each()とfor()

Adobe XDの無料キットに数字をスロット風に回転して表示させるNumber counterというものがあったので、これを日付に変えて実装してみました。今日の日付を取得し、jQuery $.each()メソッドとfor()文でDOMに数字を追加します。
jQuery

サムネイル画像をクリックしてふわっと画像を切り替える方法

サムネイル画像をクリックして、メイン画像をふわっと切り替える方法です。imgタグにsrc属性の値をセットしフェードインすると、ふわっとならなかったり、一瞬画像が見えてフェードインしたりすることがあります。対象要素を分けて実装します。
2021.12.11
HTML&CSS

フォームのラジオボタン、チェックボックスの色等を変更する2つの方法

フォームのラジオボタンやチェックボックスはCSSのプロパティで意図通りにカスタマイズできません。デフォルトの要素はdisplay: none;とし新たに作成する方法、appearance: none;としスタイルを削除しカスタマイズする方法が考えられます。
2021.12.05
スポンサーリンク
タイトルとURLをコピーしました