人物のシルエットにマウスオーバーすると写真がフェードインするjQueryプラグイン
cssやプログラミングSilhouette Fadeins これは結構実用的なテクニック なのでは。人物のシルエットに マウスオーバーすると写真が フェードインします。 これは結構実用的なテクニック なのでは。人物のシルエットに マウスオーバーすると写真が フェードインします。というか、 人物じゃなくても良さそうなので 色々使い道がありそう。 css trickの画像をフェードインさせるjQueryとcssのクールなテクニックをメモ。 Silhouette Fadeins フワッと出てくる写真がかっこええっす。IE6では表示されませんでしたが、コンテンツを際立たせるのにいいテクニックじゃないかなと思います。 ロールオーバーにはcssスプライトを採用してるみたいです。多少ズレるのでやや暗めの写真にした方がいいかな・・ マークアップも記載されています。 ダウンロードとデモは以下からGOです。
知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ
最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか？ Zen-CodingはHTML/CSSをショートカット＋スニペットで簡略化してコードを書くことができるライブラリです。 独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。 ※音が出ますのでご注意ください。 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo 一体何がおこわれているのか？という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。 Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studio
30分でできる！Webサイトを高速化する6大原則 (1/4)
Webサイトを制作するとき、「パフォーマンス」を気にしたことがあるだろうか？ もしまったく気にしたことがないなら、気をつけた方がいい。閲覧に時間のかかる“遅いWebサイト”はユーザーにフラストレーションを与え、閲覧をやめさせてしまう恐れがある。 下記のグラフは、「Simple-Talk」という海外のオンラインメディアで発表されたユーザー調査の結果だ。アンケートページの表示にかかる時間を意図的にコントロールし、表示時間によってユーザーが感じるフラストレーションの違いを調べたものだ。 縦軸がフラストレーション（10段階）、横軸が表示までの時間を表している。1～5秒以内にページが表示された人に比べ、ページ表示までに5秒以上かかった人は2倍以上もフラストレーションを感じている。フラストレーションがあまりに高ければ、せっかく何らかの目的を持って訪れてきたユーザーも待ち切れずにブラウザーを閉じてしまう
私がWEB制作ネタを探している海外サイトベスト10
最近よく聞かれるのですが、一体Yamada氏のネタ元はどこですかと聞かれます。 ネタ師であるブロガーがネタ元を晒すのはどうかと思っていたのですが、有益である情報は晒すべきだと友人に言われてしまったのと、海外でまとめエントリにされていたので公開に乗り切ります。 より有益な情報を得る為に 友人いわく、公開してその上を目指せ、とか意味がわからないことを言われましたが、結局のところ海外の数々の有益な情報からピンポイントで発信するからこそ価値があるのであって、まとめサイトが有益なものであるとは限りません。 これらネタ元をつかって、より多くの方にピンポイントで面白い記事の発掘が出来るようになれば、それはそれで自分にかえって来るんだなぁと思います。 WEB制作者向け発掘サイト DZone - fresh links for developers デザイン、CSS等に関して有益なエントリが上ってくるシステ
jQueryを使ってCSSを補強するテクニック15 – creamu
Web Developer Plusで、jQueryを使ってCSSを補強するテクニックが紹介されています。 ざっといくつかご紹介。 jQueryでカラムの高さを統一する equalHeights pluginを使って、一行でカラムの高さを同じにする 入力中のフォームをハイライトする highlighting the label along with the selected input fieldを使って、フォームのユーザビリティーを上げるテクニック 角丸 jQuery Curvy Cornersで角丸を実装する メニューの背景をアニメーションさせる メニューにマウスオーバーしたときに、一瞬でhover画像に切り替えるのではなく、ふわ〜っとアニメーションして切り替えるテクニック。例：Create an Attractive jQuery Menu with Fade In and Fade
シンプルだけど便利なCSSプロパティー5 – creamu
WebDesignerWallで、シンプルだけど便利なCSSプロパティーが紹介されています。 ざっとご紹介しますね。 CSS Clip 画像にレクタングルのマスクをかける Min-height 高さの最小値を指定する「min-height」。コンテンツの高さがサイドバーよりも低いときなどに。IE6に対応させるハックもある White-space 「white-space:nowrap」を使って、アルファベットが途中で切れてしまうときに改行させる Cursor ボタンがDisabledになったときに「cursor:default;」を指定してクリッカブルでないことを明示する Display inline / block displayプロパティーを使って、ブロックレベル要素をインライン要素に。その逆もあり 復習がてらに一度見てみてください。 5 Simple, But Useful CSS
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
