HTML＆CSS CSSで星柄の背景を作成 JavaScriptで五角形の座標を計算
CSSのグラデーションで星を作成。conic-gradient() の開始位置は五角形の頂点となるため、座標（％で指定）を JavaScript で計算しスタイルをあてています。星の大きさ（星の内側の五角形の外接円の半径による）や先端の角度も調整可能です。
オリジナル制作物
HTML＆CSS 
HTML＆CSS マウスオーバーでフタが開く3Dボックス（立方体）の作成方法
マウスオーバーすると一つの面（フタ）が開く３D空間上に配置された立方体の作成方法です。
面が二つに分かれていて両開きに開くものと、片開きのものがあります。
マウスオーバーでは、開く面をtransformプロパティを使用して回転します。
jQuery 文字を円形状に自動で並べ3D回転する（水平・垂直・斜め）方法 CSSとjQueryで実現
文字を円形に並べ3D回転する方法を紹介しています。jQueryで計算し文字を円形に配置する為、文字数による手計算は不要です。3D円形は水平、垂直、斜め方向のパターンがあります。3D上の手前文字と背面文字が重なり見えづらくならない工夫をしています。
HTML＆CSS Vanilla-tilt.jsで立方体（キューブ）をマウス移動で自由自在に回転
3Dホバーエフェクトを簡単に実装可能できるVanilla-tilt.jsを使い、3D空間に作成した立方体を自由自在に回転させます。Vanilla-tilt.jsの詳細説明は前回の記事にまとめていますので、立方体に作成及び回転方法について説明します。
jQuery CSS 文字（数字）を円形に配置してアナログ時計作成 jQueryで自動配置も可能
数字を円形に配置、アナログ時計を作成する方法を紹介いたします。文字の円形配置方法、時計針の角度変更方法を解説します。jQueryで不特定文字数を円形に配置することも可能です。文字の向きも水平方向、内向き方向、外向き方向のパターンを紹介しています。
HTML＆CSS CSS レイヤー構成図を3D作成 テキストは面に対して直立し鏡面反射
レイヤー構成図をCSSの3D機能を使って作成する方法を紹介します。
水平方向に並べたパターンと、垂直方向（縦）に少し傾きをつけて並べたパターンがあります。レイヤーには透明感を出しています。
前者ではテキストの下には影を付け鏡面反射させています。
HTML＆CSS CSSでネオンサイン、イルミネーション電球、SVGでネオン、アニメーション付を作成
CSSでテキスト文字をネオンサイン（文字の内側に影をつける）、イルミネーション電球（順に点灯）を作成する方法を紹介します。また、SVGで描画した図形もネオン管っぽく作成する方法も紹介しています。SVG図形では図形を重ねる工夫をしています。
HTML＆CSS CSS 円形グラデーションで皿を作成方法 レストランメニューに
CSSのradial-gradient()（放射）、いわゆる円形グラデーションのキーワードfarthest-corne等を解説。円形グラデーションを使用してお皿をCSSのみで作成し、且つお皿に文字を彫られたようなイメージに。
HTML＆CSS アニメーション付きローディング画面（読込み中画面）をプラグインなしで実装（回転・ページがめくれる等8パターン）
ローディングアニメーションを8パターンと、あわせてローディング画面実装方法を紹介します。アニメーションの種類は、円が回転するもの、円形に配置されたLoading文字が回転するもの、文字が弾むものページがめくれる等あります。
jQuery jQueryだけでスクロール量に応じてボックス内の要素を移動させ錯覚効果も実現、透明度の変化も可能
単色カラーのボックスで、スクロール量に応じてボックス内の要素をX方向へ移動することで、普通にY方向の上にだけ移動するボックスまで斜め上に上がるような錯覚を生み出します。 透明度の変化もスクロール量に応じて、要素を自然とフェードイン可能です。
HTML＆CSS CSSでガラス風のプレートを作成 文字を彫ったように表示したり、取得した時刻をデジタル表示したり
CSSで透け感のあるガラスやアクリル板のようなプレートを作成し壁に取る付けてあるかのように。文字を彫ったように表示させるものと、時刻をデジタル表示させるもの2つ作成しています。 デジタル時計表示の記事の紹介もあります。
jQuery jQueryとCSSで簡単！WEBサイトの背景色や文字色（デイorナイト モード）の切り替え方法
ユーザーが背景色を選択できるWEBサイトもたまに見かけます。 今回は背景色をデイモードorナイトモードに選択できるように実装してみたところ、案外簡単にできました。 この記事ではその方法についてご紹介いたしますので、ご参考になれば幸いです。