デザイン：3D Rainbow Sphere
HTMLとcssだけで作る虹色に変化する3DデザインHTMLの基本形はとても簡単なものです。そこからCSSでclassに様々な設定をして３D表示を完成させます。ここではステップを追う事。進捗が見えるようにHTMLとcssの進捗(進化)をco...
Design
デザイン：無限マーキー・カルーセル➡️操作できます。繰り返し要素なし Blog Card Design
CSS Design cssで作る動きのあるWebサイト・デザイン3D化:☑でカルーセルが左斜め上に移動Overflow:☑でカルーセルのはみ出し表示Speed:スライダーを動かしてスクロール速度調整カード・ホバーでスクロール停止、クリック...
デザイン：HTMLとCSSだけで作る動く3D Design ➡ Copyできます。
XY軸の値を求める為に、三角関数：sin , cos を使っています。x軸=cos(角度*距離)、y軸=sin(角度*距離) 角度は0～360で変化します。円の面積を求め定数(30)で割って動く３Dの表示範囲を可変にしています（面積内でねじれ表示）グリッドデザイン：コンテナ（display:grid）を利用しています。見出しと概説はコンテナ内の最初に記述しています。見出しの前後に表示(部分透過)されることで３D表示がおわかり戴けると思います。
デザイン：３D Cube Cube Cube ＆ ファントムゾーン cssも公開
３Dデザインで回転するCubeの色々、 最初の６つは、2の累乗(0～5)（1,2,4,8,16,32）秒で回転するCubeです。（CSSのanimation:rotate_s 1s linear infinite; ～ でコントロール ） ...
デザイン：動きのあるカード デザイン ＆ Link（Button/Card）
この様なCard Designは、如何でしょうか？各場所に配置しているアニメーションCardは、実サイトでは（クリックできます。ボタンを配置している部分も、カーソルを、Cardまたは、Buttonに持ってくると、背景やボタンの色が変化します...
デザイン：cssで3D ＆ 回転Design ソースコードを確認＆コピペできます。
デザインで遊んでみました。このままの形で実際に、使うことが少ないかもしれませんが、ややこしい部分はHTMLと.cssのSource Codeをご覧いただけます。コピペすればそのままの形で利用できますので。チョッとした発想の転換や他に応用で来...
css ：デザイン デザイン.cssで作るグラデーション：ここから.cssをコピーできます。Gradation Design
divタグ１つと.cssで実現できるグラデーションここで定義したdivと.cssを利用できます。両方をコピペすることで、あなたのサイトでも利用できます。<div class="filter_x"></div> 、<div class="fi...
css ：デザイン デザイン：日本の伝統色(抜粋&RGBコード)、ほかの代表的なカラーグループも系統ごとにまとめ
デザインで使える日本の伝統的な色を抜粋してコード化とRGB表示でまとめてみました。ほかにも代表的な色を系統ごとにまとめてテーブル表示しています。あなたのウェブサイトデザインにお役立てください。日本の伝統色「抜粋」 日本の伝統色色の名前よみか...
生成AI 生成AI：Copilot（GPT-4）に .cssデザインの改善を尋ねてみた（無料）
今回の場合、ChatGPTから提供された回答（スケルトン）を少し修正・変更するだけで、実用になる（使える）ものを入手することができました。ただ、今回の様に必ず旨く通用するもの入手できるか？というと、そうでもない様です。肝心なことは、「執筆分野」に投稿する内容・質（適語表現であることも含め）・難易度だろうと思います。また、技術的なものであった場合、ChatGPTが保有するBigDataが最新のものでは無いため、特に進化の早いIT関連技術では、最新の情報やテクニックは入手し辛いものになっている様です。筆者が、別の切り口で「執筆分野」に投稿したものは、未だ有効な情報の入手が出来ないでいるのが現状です。
css ：デザイン WordPressで、Bootstrap５始めました。
Bootstrapを使ったデザイン。最初にご紹介するのは「グリッドシステム」を使ったDesign、responsiveレスポンシブ Table hover（.text-nowrap クラスを設定する）デザイン、Floatユーティリティークラスを使用した画像配置例（文書付き）Designです。