紙のような、質感を出す 影を使った 浮き上がったり、めくれたりするのを表現したボタンのデザイン
紙のようなボタンを作成するコード、うまく影を使い立体感を演出し。マウスオーバーで動きを加えたボタン。 リアルな質感が素敵
WordPressですでにある ショートコードを削除、作りなおす方法
Wordpressでコアファイルにあるショートコードを、コアファイルをいじらずに、削除と再定義するための方法
WordPress でシンプルなプラグインを作る方法
Wordpressでシンプルなプラグインを作る方法。少しコメントを追加するだけでプラグイン化出来るので常用するようなものは プラグイン化して、使いやすくするもの良い
カードを重ねているかのように表示させるタイポグラフィを手軽に作ることが出来るコード
一つの文字が一つのカードとなっていて、それが重なりあって表示されるタイポグラフィ。リンク先のコードで文字の部分だけ変えれば手軽に美しいタイポグラフィが出来上がる
CSSだけで作られてスライドインしてくるアニメーションがあるシンプルなドロップダウンメニューが作れるコード
スライドインしてくるエフェクトがついた、多層型のドロップダウンメニューを作るコード。ドロップダウンメニューを作るときの参考のコードにも
美しいてかわいい系な完成度の高いローディング画面のコード
美しいデザインのローディング画面、LOADINGの文字がふわっと、ふわっと、風で揺らぐ感じのアニメーション。また背景もすごくセンスが有る
WordPressでget_the_tags()で取得したものを出力する時に、特定のタグを除外するコード
Wordpressで get_the_tags()を使って 自由な形式でタグのリストを表示するときのコードにさらに、不要なタグを出力させないようにしたコード
時針と分針に現在の時間、分数がそれぞれ表示されるようになった 時計のアイデア
時計を時針と分針を使って、ちょっと変わった見せ方をするアイディア。それぞれの針に文字で現在の時刻を表示することで時間がわかるように
背景がオーロラのように変化していく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の使い方
WordPressの投稿をカレンダーを使って、予約投稿の管理をするプラグイン WordPress Editorial Calendar
Wordpressで大量の下書きがある場合に、直感的にマウスだけの操作で管理が出来る カレンダー表示のプラグインがとても便利
ボタンをクリックした時に、波紋のようなエフェクト効果を与えるコード
ボタンをクリックした時に、波紋状のようなものが効果として表示されるエフェクト。border-radius、scale、opacityのをそれぞれ組み合わせて作られている
超シンプルにCSSのflexで作らえれた、hoverで縦に割られた領域が拡大縮小するテクニック
CSSのDisplay: flex;を使ったテクニック。flexで当分割したものをマウスオーバーで割合を変化させることで、表現したもの。とてもシンプルなコードで使い勝手がいい
CSSでノートの罫線を作ることが出来るグラデーションのコード
CSSで作られたノートの罫線、background-imaegを使って背景で表現されている、手書き風のフォントと組み合わせうろより雰囲気が出る
自動的に要素の数に合わせてナビゲーションを増減させるスクリプト
jQuery、javascriptで作られた 自動的に要素の数に合わせてナビゲーションを作成してくれるコード。スクロールにも合わせて反応するようにできている
1つの要素と擬似要素でborderを使って、三角形のアウトラインを作り出すテクニック
CSSのborderをつかって、中身が無い繰り抜かれた状態の三角形を作り出すテクニック。2つの要素を重ねあわせて、重なる部分のborderだけを表示することで三角形を作り出す
WordPressでRSSを取得して、リストとして好きなデザインでレイアウトして表示する方法
WordpressでRSSを取得して、表示するコード。このコードを使うことによって、好きなレイアウトのHTMLを組むことが出来、自由度の高い表示が可能になります
