ハートがドクドクと鼓動しているCSSで作られたアニメーション css3 beating heart
ハートがドクドクと動いているように表現したCSSアニメーションです キュートな何かのローディング画面に使ったりも出来そうですね
HTML5アプリケーションで作られた、計算履歴が残る電卓(計算機)
スゴイですね！電卓をHTMLベースで作ってしまっています javascriptのコードは実践的な演算のコードの勉強にも使えそうです
スマホ用のボタンに使えそう！クリックで変形するアローマーク（矢印）
クリックすることでアローマークが変形するアニメーションが付いたボタンです、動作にはjQueryが必要です このボタンと連動する要素を作成して、jQueryの方で関連付けてやれば要素が展開するようなボタンにする事が出来ます
飛び上がっていくような動作が楽しい SNSボタン
SNSボタンをアイコンのフタのようなもので覆い、マウスオーバーするとそれがクルクルと回転しながら上の方へ消えていくアニメーションです。
HTML5でMP3ファイルをWEBサイトで表示して再生できるようにする
HTML5では簡単にMP3ファイルを埋め込むことが出来ます 再生用のインターフェイスも自動で作ってくれます HTML5には、audioタグが追加されました このタグを使ってMP3ファイルを読み込ませるだけでWEBサイトに […]
画像を使わずにカーブのかかった吹き出しを実現するCSSデザイン Comic Sans Criminal
CSSだけでコミック風の吹き出しを作った例です 一般的な鋭利な三角形の吹き出しではなく、カーブが掛かったデザインになっています
ボタンをクリックで全画面にログインフォームを表示するアイディア Fullscreen Login
Go Fullscreenというボタンをクリックすると、ログインフォームが全画面に羊皮される仕組みです、ログインフォームは右上のペケで消せる用になっています。
HTML5ならjavascriptを使わずに検索ボックスに消える文字をplaceholderを使って入れることができる！
今まではjavascriptで行っていた検索に予め文字を入れておいて、フォーカスが当たると消える仕組みをHTML5ならjavascriptを使わずに簡単に実現することが可能です。 javascriptの時と若干動作が違い […]
YOUTUBE動画の埋め込みをリピート再生でサイトのBGMに使う方法
HTML5なら簡単にBGMにMP3の音楽を流すことが出来ますが そこをYOUTUBEを使ってやってしまおうというものです なぜYOUTUBEなのか？ YOUTUBEは無料だし、YOUTUBEを使えばサーバー側の転送量を気 […]
レスポンシブなサイトをわかりやすく表現するのに良いアニメーションで魅せるアイディア
レスポンシブサイトを人に紹介するときに、その場にいて実際にブラウザのサイズを変更して見せてやることができればベストですが、こんな表現の方法もあります
SVG画像のサイズをHTML,CSSで自在にコントロールしてWEBで表示する方法
SVG画像ってご存知でしょうか？ ベクトル画と言って、線や色の情報をデータとして持っていてそれを再現して画像のように幼児するものです。なのでSVGだと画像のサイズが変わろうが画質が劣化しません、大きく表示したからといって […]
検索のアイコンマークをクリックすると、にょーんっ伸びて検索ボックスが出現
検索のアイコンをクリックすると、横方向に伸びて検索ボックスがアニメーションで出現する仕組みです 普段はシンプルに見せておいて、検索するときだけ検索ボックスが出現するように演出できます
WordPressでビジュアルエディタの見出しをテーマの見出しと揃える方法
ブログの見た目に出来るだけ近い状態でビジュアルエディタが使えたほうが、実際に表示される時との違いが少なくて言いに決まっているのですが、ビジュアルエディタはテーマのCSSを読み込んでくれては居ないようです(pre等の一部を […]
Canvasを使った 文字が分裂して散らばっていく美しいアニメーション
Canvasを使って作られたものです 文字が大きい文字が、小さい文字で構成されて散らばっていくアニメーションです とても楽しいアニメーションです
CSSだけで雲をかき分けて進むかのような演出をアニメーションで表現
幾つもの雲の画像を使って遠近感を出しながら、アニメーションするものです javascriptは使われておらずCSSのアニメーション効果で作られています
WP PostViewsで自動で記事のカテゴリでランキングを好きなレイアウトで表示させる方法
WP PostViewsで好きなレイアウト好きな場所で表示させるときに、さらにその記事が含むカテゴリを自動で取得してランキングを表示させる方法です。 WP PostViews http://wordpres […]
面白いギミックを仕込んだ入力フォームのデザイン
ユニークなキャラクターと入力フォームです、入力フォームに各フォームにフォーカスが当たるとキャラクターの手が動いて指さしている感じになります、面白いアイディアですね。腕の部分はパーツになっていてrotateをつかって回転を加える事で方向を変えています 変化を加える条件は[data-position=' ']をつかってフォームの順番で操作されています
CSSだけで作られた目玉のモンスターっぽくデザインされたスイッチ(チェックボックス) Toggle Switch
ものすごくユニーク、とても楽しいスイッチボタンになっています クリックすると目玉のタイプ・色・方向がアニメーションして変わります。
CSSのスケール(scale)を使えばマウスオーバーで画像を拡大したり縮小したりが簡単に出来ちゃう
CSSを使えば画像の拡大、縮小はwidth、heightを使って行えますが これだと拡大した時の位置が動いたり、周りの要素に影響を与えたりします そんな時scaleを使えばとても簡単に画像を拡大・縮小する事が出来ます & […]
マウスオーバーでパカっとカバーが開くキュートな SNS・ソーシャルボタンのデザイン Social Button
ボタンにマウスポインターを乗せると、パカっとカバーが開いて中にあるSNSのボタンが見えるという仕組みです ロゴ(アイコン)はウェブフォントで表示されていますので、レイアウトだけ変えてそのまま使えそうです。
