CSS3のふわりとしたアニメーションが気持ちいい画像ギャラリーを実装するチュートリアル
CSS3アニメーションとjQueryを使って、アニメーションの動きが気持ちいい水平型のギャラリー・ポートフォリオを実装するチュートリアルを紹介します。 デモページ：サムネイルのホバー時 サムネイルのホバー時だけでもキャプションの表示だけでなく、画像などのサイズ変更、テキストの表示、各アイテムの可視化、配置変更などもアニメーションで行われています。 実装 実装はポイントをまとめて紹介します、Stepは3つです。 元記事では詳細に書かれているので、参考にしてください。 Step 1: HTML 画像、2つのパラグラフ、タグが一つのセットになっており、それぞれをリスト要素で実装します。 <ul class="portfolio-items"> <li class="item"> <figure> <div class="view"> <img src="images/1.jpg"> </div>
なぜリセットではなく Normalize.css を使うのか | Yomotsu net
まずは、歴史をみてみよう。 初期* { margin:0; padding:0; border:none; } table レイアウトから CSS レイアウトへの移行期に考案された。すべてゼロにするというコードで、実装者が書いたコードのみが適用できるという手法。弊害として input 要素の枠線など、本来、スタイルをゼロにする必要がない箇所までスタイルが消えてしまい、しょうがないので更に上から枠線を加えるなどが必要になっていた 中期今から 5 年ほど前の 2008 年、エリックメイヤー氏によるリセット CSS や YUI のリセット CSS が登場した。全称セレクター「*」 ではなく、要素セレクターそれぞれに対して CSS をゼロにするという手法。 ただし、p や見出し要素の上下マージンや li のリストスタイルまでも依然としてゼロになっていたため、次のような、本末転倒な HTML まで
HTML5 × CSS3 × jQueryを真面目に勉強してみる – #1 jQuery再入門 | DevelopersIO
そんな訳で、ここらでHTML5 × CSS3 × jQueryに真面目に取り組んでいきたいと思います。 「今更なんだか恥ずかしい…」なんて怖じ気ずかずに勇気を持っていきます。 今からでも間に合います。 「人生に挑戦するのに年齢なんて関係ない。もともとこの世には時間などない。それは人間が勝手に作ったものだ。私は時計師だからそのことがよく分かる。」 -フランク・ミュラー 大丈夫だ、問題ない。 とりあえずの予備知識 それぞれの基礎的な予備知識については、当ブログでは割愛します。こちらを参照するのが手っ取り早いです。 jQueryなら:ノンプログラマーのためのjQuery HTML5なら:IBM developer Works - CSS入門 CSS3なら:HTML5.jp とりあえず今回はjQueryから手を付けるとします。 上で紹介したサイトにある情報の補足として、以下の内容を知っておくと後の
プロジェクトの成功に求められるWeb解析のスピード化（CSS Nite参加レポート）
物凄い仰々しいタイトルになっていますが、実は先日行ってきた「CSS Niteビギナーズ：Web解析」の受講レポートになります。すばらしく濃い内容で「ビギナーズ？嘘つけ！」などと思ったりもしましたが、すぐに試したいネタが満載で大変勉強になりました。 色々あって公開が遅くなりましたが、以下にナカムラが大事だと感じたポイントを書き留めて行きたいと思います。 一貫していた「解析と施策のスピード」という考え方 豪華メンバーの揃った今回の講演。皆さんほぼ共通していたのは「Web解析にはもっとスピードが必要だ！」という考え方でした。 解析はPDCAサイクルで言うところの C（チェック）の部分なので、さっさと A（改善）に移ってアレコレ試さなきゃ役に立たないよ！ということですね。 で、沢山の解析効率化ネタが紹介されたんですが、中でも特に僕の気になった物を以下にピックアップしてみます。 イベントトラッキング
なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！ | ゴリミー
今のウェブデザインの流行りは「レスポンシブ・ウェブデザイン」！ 昨日、とあるアプリの紹介ページについて話し合っていたのだが、株式会社LIGのデザイナブログに書いてあった「必読！5分でわかる流行のレスポンシブWebデザインまとめ」に載っていた「NHKスタジオパーク」のレスポンシブ・ウェブデザインがイケイケすぎて感動したので、紹介する！これは本当にすごい！！ まず普通に表示するとこんな感じ。よくある3コラムベースのウェブサイト。 少し幅を狭めると、下にあったコンテンツが右サイドバーに移動し、右サイドバーにあったコンテンツが下に移動した。 さらに狭めてみると、右のサイドバーが完全に無くなった。 さらに狭めると今度は左のサイドバーが消えた。 ブラウザの限界まで狭めてみると、各パーツの幅も狭まってこのような形に落ち着いた。 これを試している時、各要素の動きがあまりにも滑らかでものすごく感動した。皆さ
Cheat Sheets Web Designers Needs: CSS3, HTML5 and jQuery
All The Cheat Sheets An Up To Date Web Designer Needs: CSS3, HTML5 and jQuery When it comes to CSS, HTML or jQuery codes, you just can’t know them all. It’s pretty hard but with the help of these cheat sheets for web designers you can manage to get pretty close to knowing them all, considering that you have everything in from of you and it is easy to search. It is possible that a few of these chea
jQuery Zoom
A plugin to enlarge images on touch, click, or mouseover. Demo Hover Grab Released under the MIT License, source on Github (changelog) Download Compatible with: jQuery 1.7+ in Chrome, Firefox, Safari, Opera, Internet Explorer 7+. Install via NPM npm install jquery-zoom Instructions Zoom appends html inside the element it is assigned to, so that element has to be able to accept html, like <a>, <spa
jQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログ
JavaScriptjQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを５つに絞って紹介します。何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある※ この記事は jQuery 1.2.6 のソースコードを元に記述しています1. 何度も同じセレクタを実行しない改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
