Design
記事内に広告が含まれています。
css ：デザイン Design 回転する Cube Cube Cube & HTMLとcssの解説とCopy to Clipboard
今回は虹色グラデーションで回転するCube各種とCube面のテキスト編集(ここにも虹色グラデーション)のためのHTMLとCSSの解説も含んでいます。Code欄に👍(カーソル)を置くことで現れる、のクリックでクリップボードにCopyできます。...
css ：デザイン Design ユーザーによる要素の編集が出来る .htmlも.cssもCopyできます。
contenteditable グローバル属性は、ユーザーによる要素の編集を可能にする列挙型属性です。今回は、<div>タグに「contenteditable」を使用し、配下のコンテナ内に配置したカード内のテキストを編集できる様にしました。...
css ：デザイン Design Cube Cube Cube ➡HTMLとCSSのコードもCopyできます。
今回は、４種の異なるアニメーションCubeをご紹介します。あなたのPCに、コードをコピーして、動きを楽しんでみませんか？Codeは、のクリックでクリップボードにCopyできます。 ８Cube'sと 9Cube's x 6Faceは、カラーク...
css ：デザイン Cube Design 1、8、27のアニメーションとcode解説・Copy も!!!
８Cubeと、27Cubeでは、アニメーションの違い(遅延など)が分かる様に、各Cubeに番号を付けています。Codeは、のクリックでクリップボードにCopyできます。各Cubeの定義には、静止とアニメーション・関連のプロパティ（継続時間、...
css ：デザイン 和色とカラーコード順色見本：備忘録
今回の記事は只の色見本です。が、新たな発見のありました。Webサイトでの色使いや、Blog記事でチョットした色を使いたいとき、微妙なグラデーションカラーを使いたい時など、色の選択と使い方には様々なシュチエーションがあると思います。中には、同...
css ：デザイン デザイン：タグクラウドのアニメーション Tag cloud Design
--tagcloud-Design 数字部分に、カーソルを当ててみて(ホバーして)ください。タイトルが表示されている部分は、クリックすると該当のページにジャンプします。これは、タグクラウドを利用したメニューにもなります。タグクラウド数字部分...
css ：デザイン デザイン：3D Rainbow Sphere
HTMLとcssだけで作る虹色に変化する3DデザインHTMLの基本形はとても簡単なものです。そこからCSSでclassに様々な設定をして３D表示を完成させます。ここではステップを追う事。進捗が見えるようにHTMLとcssの進捗(進化)をco...
css ：デザイン デザイン：無限マーキー・カルーセル➡️操作できます。繰り返し要素なし Blog Card Design
CSS Design cssで作る動きのあるWebサイト・デザイン3D化:☑でカルーセルが左斜め上に移動Overflow:☑でカルーセルのはみ出し表示Speed:スライダーを動かしてスクロール速度調整カード・ホバーでスクロール停止、クリック...
css ：デザイン デザイン：HTMLとCSSだけで作る動く3D Design ➡ Copyできます。
XY軸の値を求める為に、三角関数：sin , cos を使っています。x軸=cos(角度*距離)、y軸=sin(角度*距離) 角度は0～360で変化します。円の面積を求め定数(30)で割って動く３Dの表示範囲を可変にしています（面積内でねじれ表示）グリッドデザイン：コンテナ（display:grid）を利用しています。見出しと概説はコンテナ内の最初に記述しています。見出しの前後に表示(部分透過)されることで３D表示がおわかり戴けると思います。
css ：デザイン デザイン：３D Cube Cube Cube ＆ ファントムゾーン cssも公開
３Dデザインで回転するCubeの色々、 最初の６つは、2累乗(0～5)（1,2,4,8,16,32）秒で回転するCubeです。（CSSのanimation:rotate_s 1s linear infinite; ～ でコントロール ） 次...
