HTML&CSS CSSのborderで切手風フレームを作成 border-image-sourceの値に、円を描画した画像を設定します。ここで円の色(sgvのfillの値)は、親要素と同色にしておきます。 それをborder-image-sliceで分割し、四辺に割り当て、borderの幅の半分外側に配置します。 2022.07.14 2022.11.22 HTML&CSS
HTML&CSS 千鳥格子模様をSVGとCSSで背景模様にする 千鳥格子模様をSVGで作成し、CSSのbackground-imagプロパティで背景模様にします。CSSで背景模様にするには、background-imagの値のURLにSVGタグを埋め込むのですが、変更を加える箇所があります。 2022.06.19 2022.07.06 HTML&CSS
HTML&CSS JavaScriptで座標を計算 SVGで星を作成 SVGで多角形を描画するpolygonタグのpoints属性の値(座標)を JavaScript で計算しています。それは2つの五角形の頂点で、五角形の外接円を元に計算できます。そのため、円の半径を変更すると星の大きさや角度も調整可能になります。 2022.02.12 2022.06.09 HTML&CSS
HTML&CSS ブラウザやWEBページ内のスクロールバーをCSSでカスタマイズする方法 ブラウザのデフォルトのスクロールバーのデザインは、CSSの疑似要素 ::-webkit-scrollbar で変更可能です。カスタマイズしたスクロールバーを紹介しています。但し、この機能は標準のものではなく将来的に変更になる可能性があるようです。 2021.12.24 2021.12.28 HTML&CSS
HTML&CSS フォームのラジオボタン、チェックボックスの色等を変更する2つの方法 フォームのラジオボタンやチェックボックスはCSSのプロパティで意図通りにカスタマイズできません。デフォルトの要素はdisplay: none;とし新たに作成する方法、appearance: none;としスタイルを削除しカスタマイズする方法が考えられます。 2021.11.30 2021.12.05 HTML&CSS
HTML&CSS CSSで幾何学模様を作成する方法 CSSの radial-gradient()、conic-gradien() を利用し背景模様を作成します。色の開始点と停止点を指定すると、隣接する色は明確な境界を持ちます。background-imageには複数の値を設定します。 但し、上に記述されるものが優先されます。 2021.11.15 2022.08.02 HTML&CSS
HTML&CSS CSSで市松模様や七宝模様の和柄背景を作成する方法 CSSの関数、repeating-linear-gradient、conic-gradient(市松模様)、radial-gradient(七宝模様)を利用すると、背景模様を作成できます。また、background-imageは複数の値を設定することが可能です。 2021.11.08 2022.06.07 HTML&CSS
HTML&CSS CSSでストライプ、ギンガムチェック、タータンチェック模様の背景を作成する方法 CSSのグラデーションプロパティでタータンチェック、ギンガムチェック、ストライプを作成する方法です。repeating-linear-gradient()を重ねるとチェック模様ができます。それぞれ5パターン、ギ2パターン、3パターン作成しています。 2021.11.05 2022.06.02 HTML&CSS
jQuery 文字を円形状に自動で並べ3D回転する(水平・垂直・斜め)方法 CSSとjQueryで実現 文字を円形に並べ3D回転する方法を紹介しています。jQueryで計算し文字を円形に配置する為、文字数による手計算は不要です。3D円形は水平、垂直、斜め方向のパターンがあります。3D上の手前文字と背面文字が重なり見えづらくならない工夫をしています。 2021.10.30 2021.12.11 jQuery
jQuery 文字を円形や半円状に自動で並べる方法 CSSとjQueryで文字数による計算不要 テキストを円形に配置する方法を紹介します。テキストを1つずつspanタグで囲ったり、文字数を数え角度計算することなく、CSSとjQueryで自動で円または半円状に配置する方法です。円形に配置すれば回転アニメーションも可能になります。 2021.10.17 2021.12.11 jQuery
HTML&CSS CSS レイヤー構成図を3D作成 テキストは面に対して直立し鏡面反射 レイヤー構成図をCSSの3D機能を使って作成する方法を紹介します。 水平方向に並べたパターンと、垂直方向(縦)に少し傾きをつけて並べたパターンがあります。レイヤーには透明感を出しています。 前者ではテキストの下には影を付け鏡面反射させています。 2021.10.12 2022.05.25 HTML&CSS
HTML&CSS テキスト色のグラデーション、色を自然に変化させる方法 テキスト色をグラデーションにし自然と色を変化させる(アニメーション)方法を紹介いたします。1つ目は最初に決めたグラデーションの範囲内で変化する方法、2つ目は色相環を回転していく方法、3つ目はrgbで反転計算された色に変化していく方法です。 2021.10.10 2021.12.02 HTML&CSS