今日からCSS3アニメーションを使えるようになるチュートリアル
CSS3のアニメーションってスゴい！ 先日のぽんたくんの記事でも紹介されたように、CSS3ではアニメーションも制御できるようになりました。 ということで、ぼくもCSS3のアニメーションを使ってdemoをいくつか作ってみました。 SafariやChromeなどwebkitブラウザで表示してみてください。 コピペで使えるCSS3アニメーション - jsdo.it ※PLAYボタンをクリックすると表示されますよ 見れない人のために動画も撮ってみました。 どうですか？CSSだけで、まるでFlashを使ってるような表現ができちゃうんです。 今回はこのCSSのアニメーションのチュートリアルをご紹介します。 「NEW!」というアイコンが、1文字ごとにぴょこんぴょこん跳ねるアニメーションを作ってみましょう。 上記のdemoでいうと二つ目の動きです。 HTML <p class="animetionNew
[CSS]サイズが分からない要素を真ん中に配置するテクニック
width, heightのサイズが分からない要素を天地左右の真ん中に配置するスタイルシートのテクニックを紹介します。 Centering in the Unknown [ad#ad-2] 下記は各ポイントを意訳したものです。 要素のサイズが分かっている場合 要素のサイズが分からない場合 まとめと対応ブラウザ 要素のサイズが分かっている場合 「真ん中に配置するエレメント」と「その親エレメント」両方の高さと幅のサイズが分かっているのであれば、エレメントを真ん中に置くのは簡単です。 「真ん中に配置するエレメント」を「position: fixed;」にし、topとleftを50%、marginのtopとleftをエレメントの半分のサイズでネガティブマージンで配置します。 CSS .centered { position: fixed; top: 50%; left: 50%; margin-t
アコーディオン、ロールオーバーなどjQueryでウェブデザインを便利にする機能を一元管理できる「simplelib」 | バニデザノート
現在は、以下のようなプラグインをサポートしているようです。 accordion シンプルなアコーディオンナビゲーション button マウスオーバーやマウスダウンで画像を切り替えたり、選択状態と非選択状態によって画像を切り替える checkAll チェックボックスの一括選択 fixHeight 要素の高さを揃える ie6PngFix Internet Explorer 6でも透過PNGを使えるようにする ie6PositionFixed nternet Explorer 6でもCSSの position:fixed を使えるようにする imgSwap a要素をクリックして、既存のimg要素の画像を切り替える lightBox jQuery lightBoxプラグインを読み込む overlayOthers 指定した要素の子のa要素にマウスオーバーすると他のa要素にcssで背景色や背景画像を指
無料もしくは稟議を出しやすい価格のストックフォトサービスまとめ - バニデザノート
無料もしくは、稟議や提案を出しやすい価格のストックフォトサービスのなかで 最近調べたり、検索したりしたものを中心にまとめておきます。 写真素材って無料だからいいってわけではなくて すこしのお金でライセンスが取得できるのであれば そちらのほうが後々楽だったりしますので、無料と有料は混ざっています。 「よく使う・参考にする」サイト PIXTA ピクスタ 【有料】Sサイズ525円〜。DLできるクレジット付きカンプが大きいので デザイン案などで重宝します。 ライセンス 写真素材 足成 【無料】人物写真・風景写真・動物写真など。 利用ガイド 「気になる」サイト modelpiece 【無料】フリーの人物素材を配布しているサイト PAKUTASO 【無料】自然系・人物・動物系 ロイヤリティーフリー素材のストック・フォト 【有料】最近できたばかりのよう。Sサイズで189円〜。今後の素材の充実に期待。 海
メガネは水洗いが常識なので、メガネのシャンプーがおすすめ｜男子ハック
どうも、sakuです。会社でメガネ君と呼ばれることもある僕から、「メガネのシャンプー」をご紹介。これ、ちょっと高いんだけど、超キレイになるのでおすすめです。 メガネは汚れた状態で放置すると、レンズもテンプルも痛みます。だからって、クロス(布)でふくときにゴミが付着したままだと、レンズを傷つけてしまいますだから、メガネは水洗いするのが常識。油汚れは水だけでは取れないので、 中性洗剤を使いましょう。僕はメガネのシャンプーを使っています。コレマジおすすめ↓ メガネのシャンプーの使い方こんな感じでアワアワにしましょう。 ほらすっきり。 メガネ水洗いの注意点「メガネのシャンプー」ではなくとも、中性洗剤であればOKただし、アルカリ性、酸性の洗剤はダメ、絶対。レンズのコーティングを痛める可能性があります。ごしごしこすらないようにまた、注意したいのが、「中性」と書いてあっても、弱アルカリ性や弱酸性でも「中
画面上で誰かがタイピングしているようにアニメーションできるjQueryプラグイン「jticker」:phpspot開発日誌
画面上で誰かがタイピングしているようにアニメーションできるjQueryプラグイン「jticker」 2011年11月01日- webdev.stephband.info | jticker 画面上で誰かがタイピングしているようにアニメーションできるjQueryプラグイン「jticker」 タイピングしているようにアニメーションさせて動きを作ることで利用者の注目を集められます。 文書を読んでもらいたい場合なんかにも効果があるかもしれません。 流れる様にテキストアニメーション。 複数の文書を続けてスライドショーっぽくすることも出来るみたいです。 これはなかなか使えそうですね 関連エントリ テキストをCSS3でぼやけさせてアニメーションできたりするjQueryプラグイン「TextBlur」 カスタマイズ可能なアニメーションスクロールが実現できるjQueryプラグイン「PageScroll」 テキ
とてもとても簡単な、jQueryプラグインのつくりかた。 | Ginpen.com
こんなに短いコードですが、jQueryプラグインを作る上で忘れられない、5つのポイントがあります。 $がjQueryである事を期待しない。 jQuery.fnにメソッドを定義する。 実行コンテキストthisはjQueryオブジェクト。 .each()を使って処理する。 thisをreturnする。 他のプラグインと併用し、$がjQueryを指していない場合も考慮して、直接$は使いません。全体を無名関数にして、その引数としてjQueryを$という名前で受け取るようにしましょう。 jQuery.fnのプロパティとして関数を設置しておくと、それが$(elem)のメソッドとして呼び出せるようになります。またその際の「実行コンテキスト」つまりthisは、当然ですがメソッドを呼び出しているjQueryオブジェクトになります。このときに複数の要素を内包している場合がある（$('.hoge')を想像してく
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
simplelib with jQuery