入力フォームにフォーカスすると鉛筆でカキカキするアニメーションを表示するアイディア 『Simple focus in/out input animation』
inputのフォーカスすることで、入力中であるアニメーションを表示させるアイディアです フォーカスするとPENが左から現れて、カキカキとアニメーションするのが入力中だというのがわかりやすくて良い
画像を右クリックでメニューを出現させるテクニック 『Radial context menu』
子猫の画像の上でマウスの右クリックをすることで、円盤のメニューが出現します 円盤にはなにか機能を付けたりSNSへの共有のリンクを付けたりして使えます
【CSSのcalc()って知ってますか？】 パーセントでwidth、heightを指定して固定値のpaddingやmarginを使って100％にぴったり収める
CSSで高さや横幅の計算に使える calc() というものがあり、パーセントからピクセルを引いたりと柔軟な計算をする事ができる。
CSSのコピペだけで出来る良質な5つのグラデーション 『Gradients By boltaway』
Gradients By boltaway いい感じのグラデーション5種です。コピペでそのまま使えちゃいます カラーコディネートとか、グラデーションの作成とか得意な方じゃないのでこういうのは助かりますね & […]
Bootstrapを使ってWEBサイトを作ってみようぜ 第1回 「CSSフレームワークって何？」
第1回 「CSSフレームワークって何？」 第2回 「グリッドシステムって何？ グリッドシステムを学ぶ」 第3回 「セットアップして利用開始できる環境を作ろう」 第4回 「制作事例をみてイメージを膨らまそう」 第5回 「全 […]
ギフトボックスをイメージして作られたパララックスがおもしろ、楽しい 『Gift box』
プレゼントの包み紙を解いて、そして箱を開けるというのをスクロールしていくことで、表現するパララックスです 下にスクロールしているのに、リボンが横にスライドしていくのはなんだか不思議な感じもします
jQueryでHTML要素にある属性を removeAttr()を使って消す方法
あまりHTMLにある属性 style=””やwidth、height、等々を消す機会ってあまりないと負います 逆に付け足すってことは多いと思います。もしくは付けたり消したりをtogglecalss […]
Canvasを使ったカッコイイ幾何学的なアニメーション 『Polycircuit』
Canvasでつくられたアニメーションです 何かのオープニング等で使えそうな演出じゃないですかね
CSSのopacityとtransition を使ってフェードイン・フェードアウトの効果を作ってみよう！
WEBサイトにアニメーションを設定すると、WEBサイトが少しリッチになります(過剰な演出はちょっとウザくなります)、ということで今回はopasityを使って、画像やテキストが スーーーっと消えたり現れたりするアニメーショ […]
注釈をレスポンシブで表示位置を変えるアイディア 『Responsive Footnotes』
こういう発想はなかった そもそも注釈を作る機会がなかったので、これは面白いアイディア
text-shadowを使ったかわいい、いい感じの簡単なタイポグラフィ 『Close shade example』
SALEという文字に、影を複数指定して作られたものです 文字の色、影のサイズ感もちょうどいい感じ。
カスタムフィールドの値があるときに表示するもの、無いときに表示するものを切り替えるコード 【WordPress】
カスタムフィールドの値が空の時に表示するコード、カスタムフィールドの値があるときに表示するコードを振り分けて表示することで、値を囲っているHTMLも制御出来ます 例えば <div class="custom"> […]
自動で近い色を選んでくれるカラーピッカーをウェブに実装出来るコード 『Color Wheel picker similar to Kuler』
丸いサークルのところは画像を使用しています サークルにある、中心になる点をクリックしたまま動かすことで色の選択をします
カスタムフィールドを使いやすくするプラグインで操作性をアップさせる 『Advanced Custom Fields』
カスタムフィールドとは 投稿・固定記事にある情報、タイトル、カテゴリ、タグ、本文等以外にも情報をプラスするためのものです 投稿を一つの商品のページとして、それに色々な情報を加えたいときにカスタムフィールドを使うと便利です […]
WordPressの投稿をアイキャッチ・画像を添付してTwitterに投稿出来るプラグイン NextScripts: Social Networks Auto-Poster を設定する
実は前々から探していた機能で Wordpressの投稿と連動してTwitterに自動的に投稿をして、さらに画像を添付するとういう動作を求めていたのですがついに見つけました 自動でTwitterに投稿してくれるプラグインは […]
テキストをジュースのように飲み込むアニメーションとそのアイディアが素晴らしい 『Text animation path[Debbie Harry]』
テキストが流れるようにするテクニックを応用して、テキストを液体に見立ててドリンクを飲みんでいるのを表現していてとてもユニーク
IE8・IE7でCSS3のnth-childを使えるようにするハック
nth-childはCCS3で使えるもので 使い方は数値で指定、もしくはn+1といった形で指定することが出来ます nth-child(5)とした場合は、連続する要素で5番目のみに対して何かスタイルを与えるというものです […]
スマホブラウザシュミレーションのMobilizer、iBBDemo3でウェブフォントが正しく表示されないんだけどどうしたらいいかの話
実機で確認せずに、PCで手軽にWEBサイトのデザインの確認をするのに使えるのが iBBDemo3とMobilizer ディティールも実機に近いのでWEBサイトを表示してスクリーンショットを撮ってそれを加工して使うっていう […]
WordPressの自動下書きやリビジョンを停止するぐらいなら、データベース最適化プラグインで一石二鳥に 『WP-Optimize』
WordPressのリビジョンや自動下書でデータベースが圧迫されるという理由から停止するプラグインを導入する方が居ます、またそれをおすすめする記事等もありますが。私はブラウザがフリーズしたりサーバー側のダウン等で作成して […]
Google+でプロフィール(ページ)の埋め込みを作りWEBサイトに貼り付ける方法
Google+のプロフィールやGoogleのページをWEBサイトで紹介するときにリンクとかよりも、見栄え的に埋め込みを使うといい感じに仕上がります その埋め込みを作る方法です 埋め込みの作成 https:/ […]
