css :デザイン HTMLとCSSだけで作る動く3Dデザイン ➡ Copyできます。 XY軸の値を求める為に、三角関数:sin , cos を使っています。x軸=cos(角度*距離)、y軸=sin(角度*距離) 角度は0~360で変化します。円の面積を求め定数(30)で割って動く3Dの表示範囲を可変にしています(面積内でねじれ表示)グリッドデザイン:コンテナ(display:grid)を利用しています。見出しと概説はコンテナ内の最初に記述しています。見出しの前後に表示(部分透過)されることで3D表示がおわかり戴けると思います。 2024.01.26 2024.02.07 css :デザイン
css :デザイン 3Dデザイン Cube Cube Cube & Phantom-Zone. cssも公開 3Dデザインで回転するCubeの色々、 最初の6つは、2累乗(0~5)(1,2,4,8,16,32)秒で回転するCubeです。 (CSSのanimation:rotate_s 1s linear infinite; ~ でコントロール )... 2023.12.04 2024.02.16 css :デザイン
css :デザイン 動きのあるカード デザイン & Link(Button/Card) この様なCard Designは、如何でしょうか? 各場所に配置しているアニメーションCardは、クリックできます。 ボタンを配置している部分も、クリックできます。 カーソルを、Cardまたは、Buttonに持ってくると、背景やボタンの色が... 2023.11.25 2023.11.26 css :デザイン
css :デザイン cssで3D & 回転Design ソースコードを確認&コピペできます。 デザインで遊んでみました。このままの形で実際に、使うことが少ないかもしれませんが、ややこしい部分はHTMLと.cssのSource Codeをご覧いただけます。コピペすればそのままの形で利用できますので。チョッとした発想の転換や他に応用で来... 2023.08.19 2024.01.04 css :デザイン
css :デザイン Gradation Design .cssで作るグラデーション:ここから.cssをコピーできます。 divタグ1つと.cssで実現できるグラデーションここで定義したdivと.cssを利用できます。両方をコピペすることで、あなたのサイトでも利用できます。 <div class="filter_x"></div> 、 <div class="... 2023.07.26 2024.01.04 css :デザイン
css :デザイン 日本の伝統色(抜粋&RGBコード)、ほかの代表的なカラーグループも系統ごとにまとめ デザインで使える日本の伝統的な色を抜粋してコード化とRGB表示でまとめてみました。ほかにも代表的な色を系統ごとにまとめてテーブル表示しています。あなたのウェブサイトデザインにお役立てください。 日本の伝統色「抜粋」 日本の伝統色 色の名前... 2023.07.22 2024.01.04 css :デザイン
生成AI Copilot(GPT-4)に .cssデザインの改善を尋ねてみた(無料) 今回の場合、ChatGPTから提供された回答(スケルトン)を少し修正・変更するだけで、実用になる(使える)ものを入手することができました。ただ、今回の様に必ず旨く通用するもの入手できるか?というと、そうでもない様です。肝心なことは、「執筆分野」に投稿する内容・質(適語表現であることも含め)・難易度だろうと思います。また、技術的なものであった場合、ChatGPTが保有するBigDataが最新のものでは無いため、特に進化の早いIT関連技術では、最新の情報やテクニックは入手し辛いものになっている様です。筆者が、別の切り口で「執筆分野」に投稿したものは、未だ有効な情報の入手が出来ないでいるのが現状です。 2023.05.13 2023.06.03 生成AI
css :デザイン WordPressで、Bootstrap5始めました。 Bootstrapを使ったデザイン。最初にご紹介するのは「グリッドシステム」を使ったDesign、responsiveレスポンシブ Table hover(.text-nowrap クラスを設定する)デザイン、Floatユーティリティークラスを使用した画像配置例(文書付き)Designです。 2023.02.21 2023.08.06 css :デザイン
css :デザイン デザイン:FontAwesomeアイコンでサイトにメリハリを 2 FontAwesomeアイコンで、視覚的なアクセントを持たせる(サイトデザイン)の2回目です。 今回は、「文字と合わせて表示、Linkも!」、「アイコン重ね表示」、「文字とアイコン重ね表示」、「spinの違い」、「アイコンと"fa-spin... 2023.01.12 2023.01.13 css :デザイン
css :デザイン デザイン:FontAwesomeアイコンでサイトにメリハリを 1 今回はサイトで使用しているFont Awesome 5 Freeアイコンを使って、どの様なデザインができるか?その1回目として、FontAwesome5アイコンを組合せて、視覚的なアクセント(着色、拡大、回転、角度変更)を持たせること。また... 2023.01.10 2023.01.12 css :デザイン