文章の目隠しをし、それを解除するのにCSSのアニメーションを巧みに使った アイディア
ネタバレ防止の目隠しのアイディア。文字を透明にして、文字の影だけを表示するだけで まるでボカシを書けたかのように表現するテクニックと、アニメーションによる解除が秀逸
紙のような、質感を出す 影を使った 浮き上がったり、めくれたりするのを表現したボタンのデザイン
紙のようなボタンを作成するコード、うまく影を使い立体感を演出し。マウスオーバーで動きを加えたボタン。 リアルな質感が素敵
カードを重ねているかのように表示させるタイポグラフィを手軽に作ることが出来るコード
一つの文字が一つのカードとなっていて、それが重なりあって表示されるタイポグラフィ。リンク先のコードで文字の部分だけ変えれば手軽に美しいタイポグラフィが出来上がる
CSSだけで作られてスライドインしてくるアニメーションがあるシンプルなドロップダウンメニューが作れるコード
スライドインしてくるエフェクトがついた、多層型のドロップダウンメニューを作るコード。ドロップダウンメニューを作るときの参考のコードにも
美しいてかわいい系な完成度の高いローディング画面のコード
美しいデザインのローディング画面、LOADINGの文字がふわっと、ふわっと、風で揺らぐ感じのアニメーション。また背景もすごくセンスが有る
時針と分針に現在の時間、分数がそれぞれ表示されるようになった 時計のアイデア
時計を時針と分針を使って、ちょっと変わった見せ方をするアイディア。それぞれの針に文字で現在の時刻を表示することで時間がわかるように
背景がオーロラのように変化していくCSSだけで作られたコード
javascriptが使われていない、CSSのアニメーションのみで作られた色が変化してオーロラのような感じを実装できるコード
CSSのtext-shadowで作られた立体感がある影を コピペで作れるコード
CSSのtext-shadowを使って、少し高級感のある立体的な文字になるような影を演出するコード。コードもコピペで使えてシンプル
1カラムのスクロール型のページで要素の継ぎ目を斜めにするテクニック
CSSでrotateを使って、ブロックとブロックの継ぎ目(境界)を斜めにするテクニック。HTMLはシンプルなままで、実現可能です。デモとサンプルのダウンロードもあります
スクロール量に合わせて変化を与える コード ScrollMe.js
ScrollMe 簡単にスクロールの動作に合わせて、要素にアニメーションを加える事が出来るスクリプト。classの付与とdataでアニメーションの効果を指定するだけで使える
HTMLのTableの内容をソートして並び替えできるようにするjQueryプラグイン tablesorter
HTMLのTABLEで表計算ソフトで出来るようなソートを実装するためのjQueryプラグイン tablesorterの使い方
ボタンをクリックした時に、波紋のようなエフェクト効果を与えるコード
ボタンをクリックした時に、波紋状のようなものが効果として表示されるエフェクト。border-radius、scale、opacityのをそれぞれ組み合わせて作られている
超シンプルにCSSのflexで作らえれた、hoverで縦に割られた領域が拡大縮小するテクニック
CSSのDisplay: flex;を使ったテクニック。flexで当分割したものをマウスオーバーで割合を変化させることで、表現したもの。とてもシンプルなコードで使い勝手がいい
CSSでノートの罫線を作ることが出来るグラデーションのコード
CSSで作られたノートの罫線、background-imaegを使って背景で表現されている、手書き風のフォントと組み合わせうろより雰囲気が出る
自動的に要素の数に合わせてナビゲーションを増減させるスクリプト
jQuery、javascriptで作られた 自動的に要素の数に合わせてナビゲーションを作成してくれるコード。スクロールにも合わせて反応するようにできている
1つの要素と擬似要素でborderを使って、三角形のアウトラインを作り出すテクニック
CSSのborderをつかって、中身が無い繰り抜かれた状態の三角形を作り出すテクニック。2つの要素を重ねあわせて、重なる部分のborderだけを表示することで三角形を作り出す
input要素に簡単に実装することが出来る、電卓・計算機のプラグイン 「jCalculator」
input要素に簡単に実装することが出来る 電卓・計算機を導入するプラグイン、利用にはjQueryも必要。手軽に実装できるので、飾り的に使ってみるのも有りかと思う
CSSだけ、javascriptを使わずに作られた バーガーボタンを押すとスライドインして現れるメニュー
CSSだけで作られたトグルボタンを使ったメニュー。メニューが現れる際のアニメーション等にも凝ったメニューで比較的流用しやすいコードとなっている
scaleを使った、hoverでアンダーラインが中心から広がっていくアニメーションを実装するコード
CSSのscaleを使ったテクニック。hoverによってリンクにアンダーラインがアニメーションで伸びるように現れるようにする事が出来るコード
CSSで和の波模様の青海波(せいがいは)のパターンをアニメーション付きで表現したもの
CSSだけで作られた和柄の青海波文様。日本の波を表す模様です。またアニメーションもついていて、すこし遊び感がある背景パターンです
