Design

今回は、４種の異なるアニメーションCubeをご紹介します。あなたのPCに、コードをコピーして、動きを楽しんでみませんか？Codeは、のクリックでクリップボードにCopyできます。　８Cube'sと 9Cube's x 6Faceは、カラーク...

８Cubeと、27Cubeでは、アニメーションの違い(遅延など)が分かる様に、各Cubeに番号を付けています。Codeは、のクリックでクリップボードにCopyできます。各Cubeの定義には、静止とアニメーション・関連のプロパティ（継続時間、...

Webサイトやブログで「もう少しだけ、この色を添えたい」と思ったことはありませんか？微妙なニュアンスを表現できるグラデーションカラーは、デザインの可能性を無限に広げてくれます。しかし、色の選択は時に迷路のよう。例えば、同じカラーコード #00FFFFでも、※．アクア 「 Aqua」や、シアン 「 Cyan」といった異なる呼び名が存在します。また、「Medium spring green」のように、同じ名前でも※．「 Medium_springgreen　」#00FA9A：（薄い緑系）と、※．「 Medium_Spring_Green」#348017：（濃い緑系）のように、カラーコードが異なる場合もあります。日本の伝統色である和色は、その繊細な色合いと美しい名称で、私たちの心を魅了します。※．「濃紺」：「 のうこん」#1F2F54で「 Navy blue」とも呼ばれますが、※．「 Navy」または、「 Navy blue」でも #000080という別の色も存在します。瑠璃紺：※． るりこん：#19448E　と、紺瑠璃：※． こんるり：#213380のように、似たような名前でもわずかに異なる色合いを持つ和色は、日本文化の奥深さを感じさせます。

--tagcloud-Design 数字部分に、カーソルを当ててみて(ホバーして)ください。タイトルが表示されている部分は、クリックすると該当のページにジャンプします。これは、タグクラウドを利用したメニューにもなります。タグクラウド数字部分...

HTMLとcssだけで作る虹色に変化する3DデザインHTMLの基本形はとても簡単なものです。そこからCSSでclassに様々な設定をして３D表示を完成させます。ここではステップを追う事。進捗が見えるようにHTMLとcssの進捗(進化)をco...

XY軸の値を求める為に、三角関数：sin , cos を使っています。x軸=cos(角度*距離)、y軸=sin(角度*距離) 角度は0～360で変化します。円の面積を求め定数(30)で割って動く３Dの表示範囲を可変にしています（面積内でねじれ表示）グリッドデザイン：コンテナ（display:grid）を利用しています。見出しと概説はコンテナ内の最初に記述しています。見出しの前後に表示(部分透過)されることで３D表示がおわかり戴けると思います。

３Dデザインで回転するCubeの色々、　最初の６つは、2累乗(0～5)（1,2,4,8,16,32）秒で回転するCubeです。（CSSのanimation:rotate_s 1s linear infinite;　～　でコントロール ） 次...