HTML＆CSS デフォルトの入力フォーム・ボタンデザインを、ニューモーフィズムへ、背景色・キャレット色変更や入力後ラベルにアイコン追加
デフォルトの入力フォームを Neumorphism デザインへ変更。入力フォームの背景色・文字色・キャレット（フォーカスした時の入力位置に表示される縦棒）色の変更。また、jQueryを使って、入力または更新後に、ラベルにアイコンを追加。
デザイン
HTML＆CSS 
HTML＆CSS CSSのみで簡単に実装！JSライブラリ不要 グラデーションを時間の経過とともに自然と変化させる
要素の背景をグラデーションにし、時間経過とともに自然とグラデーションを変化させていきます。 CSSの@keyframesを使うことで簡単にできます。 グラデーション自体も、参考サイトやジェネレーターを利用すれば、時間節約も可能です。
HTML＆CSS CSSでガラス風のプレートを作成 文字を彫ったように表示したり、取得した時刻をデジタル表示したり
CSSで透け感のあるガラスやアクリル板のようなプレートを作成し壁に取る付けてあるかのように。文字を彫ったように表示させるものと、時刻をデジタル表示させるもの2つ作成しています。 デジタル時計表示の記事の紹介もあります。
jQuery サイトにアナログ時計表示 JavaScriptで時間取得し、jQueryで時計針の角度を計算 CSSで円形の時計に
前回、デジタル時計をサイトに表示させてみました。 序にアナログ時計も作成してみました。 JavaScriptで現在時間を取得し、jQueryのcssメソッドを使い、transformプロパティで時計の短針と長針の角度を変更していきます。
jQuery WEBサイトにデジタル時計を表示 オブジェクトに関数を渡してループ処理、CSSで数字毎にバーを表示
JavaScriptで現在時間を取得し、jQueryとCSSでWEBサイト上に時刻をデジタル表示してみました。 単に時刻を表示するだけのバージョンと、時計に見立てたバージョンを作成しました。 時刻をWEBサイトに表示する機会は少ないかもと思いますが。
HTML＆CSS マウスオーバーで透け感ありのガラス風の両開き扉が開き、背面の画像を表示! CSSのみで実装
マウスオーバーすると、ガラス風に見立てた両開き扉が手前に開くものと、スライドで開くものを作成しました。 扉が開くと下の画像が表示されます。ガラス風扉の利点を活かして、うっすらと下の画像が見えるところがポイントです。
HTML＆CSS 回転する３D立体ボックスに画像を表示し、スライダー風に！ CSSのみで簡単に実装した アレンジバージョン
立体ボックスの一面に画像を貼付けて回転させ、スライダー風に画像を表示。 画像をマウスオーバーした時、画像が上にスライドして下に隠れていたテキストが表示、画像が回転して裏面のテキストが表示さ、画像が上へ押し開きされるアニメーションを実装。
HTML＆CSS 回転する3D立体ボックスに画像を貼りスライダー替わりに！ CSSのみで簡単に実装でき、一時停止も可能
立体ボックスを構成する一面に画像を貼り付けて回転することにより、スライダー風に画像を表示できるのでは？と思い作成してみました。 用途としては、1つの商品の視点を変えた画像を4面に貼り付け、商品（立体ボックス）を並べるというのはありかも。
HTML＆CSS 3D回転するユニークなヘッダー！ かつ多階層メニュー 第2階層はスライドダウンで開閉、第3階層はアコーディオン開閉
メニューそれぞれを立体的な面（四角柱の一面）ととらえ、かつ四角柱をＹ軸を軸として回転させるアニメーションを作成しました（CSSで回転を実現しています）。 第2階層をスライドダウン、第3階層をアコーディオン... 省スペースが可能です。