画像やパネルのホバー時に、CSS3アニメーションを使った気持ちのいいエフェクトを実装するチュートリアルをまとめました。
画像やパネルのホバー時に、CSS3アニメーションを使った気持ちのいいエフェクトを実装するチュートリアルをまとめました。
tiltShift.js - a jQuery plugin using CSS3 filters to replicate the tilt shift effect CSS3でTiltShiftな写真を作れる「tiltShift.js」 写真にミニチュアや一眼風に効果を与えられるTiltShiftですが、CSS3でも実現が可能なようです。 マウスオーバーで徐々にアニメーションしつつTiltShiftがかかったり消したりという効果も実現可能。スクリプトならではの強みですね。 応用すればマウス位置を中心としてぼかし、なんてこともできちゃうのかも CSS3さんパネェっす、ときっと貴方は言ってるはず。 関連エントリ CSS3でブロック要素を折り紙風にたたんだエフェクトを付けられる「oriDomi」 jQueryでフリップエフェクトを使った良プラグインやサンプル集10 ターミナルに文字を打ってる
Unfolding 3D Thumbnails Concept | Codrops 立体的にブロック要素を別画面に切り替える超カッコいいデモ。 Safariのみ対応のようですが、超カッコよくて何度も切り替えてしまうこと必至のデモが公開されています。 WEB製作者なら一度は見ておきたいデモだと思います。 デモページ とりあえず殆どのブラウザで使えるようになるのは何年後かは分かりませんが、iOS用のサイト等で活用するのもよいかもしれませんね。 関連エントリ CSS3でシャレオツなリストを作るチュートリアル iPhoneのON/OFFスイッチをHTML5/CSS3の形式でジェネレート WEBデザイナーなら見ておくべきCSS3のアニメーションチュートリアル
oriDomi - Fold up the DOM like paper. CSS3でブロック要素を折り紙風にたたんだエフェクトを付けられる「oriDomi」 Safariで見て頂きたいのですが、次のようにブロック要素を立体的に折り紙風にたたんだようなエフェクトをかけることができます。 iPadなどではお馴染みのあのUIをブラウザベースで実現するためのライブラリで、iOSでも使えます HTML5で折畳みインタフェースを持ったアプリを実装する際に便利に使えそうです 関連エントリ WEBデザイナーなら見ておくべきCSS3のアニメーションチュートリアル ピュアCSSなのに折りたたみ可能なツリーメニュー実装例
12 Free jQuery Pre-Loader Plugins CSS3やCanvas、JS等を使ったローディング画像実装プラグイン12がまとまっています。 画像の種類が色々ある上に実装方法も、単なる画像ではない方法が選べます。 画像じゃない方法でローディング画像を実装したい場合は参考にするとよさそう。 画像ではないため、軽量でレスポンシブなサイトにも使えるというところですかね 関連エントリ 超カッコいいローディングを実現できるjQueryプラグイン「Percentage Loader」 HTML5ゲームに使えるローディング表示機能付きプレロード用JSライブラリ「PxLoader」 画像や外部CSSなしでカスタマイズ可能なローディング画像作成ライブラリ「spin.js」
ウェブサイトを制作する際、特にCSSの新しいテクニックにはデザインの可能性を広げるのに役立つものがたくさんあります。 すべてのウェブ制作者が知っておくべき10のスタイルシートを紹介します。 @media screen and (max-width: 960px) { } 「@media」は単に印刷用ページのためだけではありません。最近のウェブサイトで多く見かけるレスポンシブデザインや可変レイアウトでもよく利用されます。 「min-width」などのプロパティを使ってMedia Queryを作る際は、ビューポートのサイズを設定して利用してください。 HTML <meta name="viewport" content="width=device-width, initial-scale=1.0"> スマートフォンでは表示するページの大きさをビューポートの幅に(主に)縮小してフィットさせるため
16 Best CSS3 Transitions And Animations Tutorials WEBデザイナーなら見ておくべきCSS3のアニメーションチュートリアル。 CSS3が登場したことによって、こんなことできるの?という驚きを最近よく感じていますが、そういうデモのチュートリアル集です。 16個ありますので、すべて見るだけでも見ておくべきだと思いましたのでシェア。 紙を折りたたむ風UIは スクロールで驚きのアニメーション 紙の折畳みや折り曲げエフェクト iPadの輝きをインタラクティブに変更 ビットマップグラフィクでマリオ。画像もキャンバスも利用していない、ピュアなCSS 関連エントリ CSS3でシャレオツなリストを作るチュートリアル アニメーションするバナーをCSS3で作るチュートリアル CSS3でクールな角丸テーブルを作る例 CSS3で出来たクールなLightBox実装チュー
Crafting Minimal Circular 3D Buttons with CSS | CSS-Tricks CSS3で画像を使った風の3Dボタンを実装したサンプル。 次のような一見画像を使っているように見えて使っていない(アイコンもフォント)ボタンを実装したデモとチュートリアル記事。 マウスオーバーするとハイライトされたりと、CSS3による利点を生かしてます。 こういう物もフルに生かしたTwitterBootstrapみたいなUIフレームワークが将来的に出てくる予感。 関連エントリ CSS3アニメーションをjQueryで使いやすくするプラグイン「jQuery Transit」 CSS3で出来たクールなLightBox実装チュートリアル CSS3でクールな角丸テーブルを作る例
CSS3 ordered list styles - RedTeamDesign CSS3でシャレオツなリストを作るチュートリアル。 list-styleを無効にしてブラウザ標準の数字部分をやめて、content: counter(li), counter-increment といったプロパティを使って数値部分を独自にデザインしています。 リスト部分の数字のデザインはなかなか難しかったと個人的に記憶していますが、こうした方法でやれば思い通りのリストデザインが作れるんですね、ということでメモ。 CSSを使ったテクニックはどこまで進化するんでしょうね。 関連エントリ CSS3アニメーションをjQueryで使いやすくするプラグイン「jQuery Transit」 アニメーションするバナーをCSS3で作るチュートリアル フルスクリーン背景がスライドショーになるCSS3サンプル CSS3で出来たクー
シンプルなHTMLで画像を配置し、:before, :after疑似要素を使って、写真を重ねたようなエフェクトにするチュートリアルを紹介します。 重ねたエフェクトはホバー時にCSS3アニメーションします。 デモページ ※ホバー時のアニメーションはFirefoxのみです。 実装 HTML HTMLは非常にシンプルです。 ラッパーのdiv要素はWebkit系ブラウザ用で、将来無しでも機能するようになるかもしれません。 <div class="stack"> <img src="image1.jpg" /> </div> [ad#ad-2] CSS スタイルシートは4つのデモのキャプチャと共に、紹介します。 まずは、右端の写真が垂直方向に重なっただけのスタイルシートです。重なりは:before, :afterを使用します。 .stack { position: relative; z-index
サムネイルを拡大表示する際など、単にズームするだけでなくCSS3を使ってバウンドのアニメーションを加えるスタイルシートのチュートリアルを紹介します。 デモページ 実装 HTML 中央に配置する領域をdiv要素で確保し、スライドするパネルはdiv要素で、各アイテムはリスト要素で実装します。 <div id="item-receiver"></div> <div id="thumbnail-wrapper"> <img src="images/plus.png" id="plus" width="60"> <ul class="item-list"> <li><img class="item" src="images/item/craftertees.jpg" width="70"></li> <li><img class="item" src="images/item/gene.jpg" w
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot Seperti yang kita pahami waktu ini ada sangat banyak permainan slot online paling sederhana yang dapat dimainkan dalam sekejap hanya cukup masuk di sana saja ojekslot terunggul. Di sini dapat ada sangat banyak bermacam permainan luar biasa yang pastinya dapat anda temukan dengan ringan. Beraneka permainan terbaik di sini dapat and
「New」「新着」などのちょっとした情報を単に矩形で添えるのではなく、斜めにしたリボンで添えるスタイルシートを紹介します。 Creating CSS3 Image Ribbon Tags [ad#ad-2] デモ 実装 デモ 元記事ではimg要素にリボンが添えられており、当方でdiv要素のパネルのデモを作成しました。 まずは、img要素の画像から。 デモページ:div要素 ※当方作成 実装 実装はimg要素もdiv要素もほぼ同じです。 HTML:img要素版 リボンのテキストはimg要素と並列に配置し、div要素で内包します。 <div class="side-corner-tag"> <img src="1.jpg" alt="" /> <p><span>newest</span></p> </div> CSS:img要素版 このエフェクトの要点はラッパーの「overflow: hidd
<ul id="menu"> <li><a href="#">html</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Perl</a></li> </ul> HTMLは最後まで変更しません。 #menu { width:530px; padding:0; margin:0; list-style-type: none; } #menu li { width:20%; float:left; padding:0; margin:0; text-align:center; } #menu li a { width:auto; color:#fff; font-size:12px; font-weight:
ホバー時:回転完了 実装 HTML パネルは、通常時の一枚画像、ホバー時のインフォメーションをdiv要素で内包します。 <div class="wrapper"> <div class="item"> <img src="images/contact.png"> <span class="information"> <strong>Contact Form</strong> The easiest way to add a contact form to your shop. </span> </div> </div> 実装のイメージは下記のようになります。 通常時は「front side」の画像が表示され、ホバー時に「bottom side」のインフォメーションが表示されます。 CSS まずは、ラッパーのスタイルです。 perspectiveを使用して3Dの奥行きを与え、transfor
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く