見るだけでもワクワクする、CSS3とjQueryのかっこいい7つのエフェクトページを開いた瞬間、ユーザーの目を引きつけるようなCSS3とjQueryを使ったタイポグラフィのかっこいいエフェクトを紹介します。 Typography Effects with CSS3 and jQuery [ad#ad-2] かっこいい7つのデモ 実装のポイント かっこいい7つのデモ デモは7つあり、どれもトキメクようなかっこいいエフェクトです。 デモを楽しむには、Chrome, Safari, Firefoxでご覧ください。 Demo 1
[JS]グリッドに沿ったアニメーションが面白い、HTML5ベースの画像ギャラリーのスクリプト -Mosaiqy
サムネイル画像がグリッドに沿って縦横にアニメーションでスライドする画像ギャラリーを実装するjQueryのプラグインを紹介します。 画像はFlickr, Instagramなどを利用することも可能です。 サムネイル表示を4x3にしたデモ Mosaiqyの利用可能なサービス 画像は共有サービスのものを利用することもできます。 Flickr Flickrのデモ Instagram Instagramのデモ Panoramio Panoramioのデモ Mosaiqyの実装 実装の準備 IEのHTML5用と必要な外部ファイルを準備します。 HTML5を使用するにあたっては、「HTML5 boilerplate」を参考にしてください。 <!doctype html> <!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <
エレメントに多彩な動きのエフェクトを当てられる「Morf.js」:phpspot開発日誌
Morf.js ? Custom Easing Functions for CSS3 Transition Joe Lambert エレメントに多彩な動きのエフェクトを当てられる「Morf.js」。 CSS3のTransitionを使ったアニメーションや、JavaScriptによるカスタムアニメーション等、様々なアニメーション効果を作れるライブラリです。 動きをもたせることでUIを格段に分かりやすくすることが出来たりすると思いますがそうした際に使えそうです。 アニメーションの種類も豊富で求める動きもみつかりやすいはず。 デモページ 次のような分かりやすいコードでの実現が可能です。 関連エントリ 透過PNGで枠だけ作って背景をCSS3アニメーションするという新テクニック CSS3なキーフレームアニメーションのデモ 特定要素内の文字をタイプライター風にアニメーションさせるjQueryプラグイン
テキストシャドウを自在にアニメーションさせられるjQueryプラグイン「animate-textshadow.js」:phpspot開発日誌
テキストシャドウを自在にアニメーションさせられるjQueryプラグイン「animate-textshadow.js」 2011年06月08日- animate-textshadow.js - Animated CSS text shadows with jQuery Alex Peattie, a web developer and designer. テキストシャドウを自在にアニメーションさせられるjQueryプラグイン「animate-textshadow.js」。 普通にCSS3で指定すると固定された影ですが、これをjQueryで動かしてしまおうということでできたライブラリ。 カーソルをあわせるとテキストの影が動いたり、なかなか面白い効果が得られるようです。 カーソルを合わせると徐々に輝く カーソルを合わせると影の色とサイズが変わる 同じようにグラデーションや、角丸など、CSS3で指
Retiring two old projects – animate-textshadow.js and CSS floating feedback button
Retiring two old projects – animate-textshadow.js and CSS floating feedback button Happy New Year! First of all I’d like to wish everyone reading a wonderful 2016 😁. New years are traditionally associated with new beginnings - clearing out the clutter of the previous year to start afresh. In that spirit, I’m retiring a couple of my old projects animate-textshadow.js and my CSS floating feedback b
Account Suspended
Account Suspended This Account has been suspended. Contact your hosting provider for more information.
CSS3なキーフレームアニメーションのデモ:phpspot開発日誌
CSS3 Keyframe Animation Demo CSS3なキーフレームアニメーションのデモ。 CSS3で動くアニメーションとそのサンプルコードが確認できます。 こんなことが出来るとは知りませんでした。ちょっとやり過ぎのような気もするけれど数年後には当たり前の技術になっていたりして。 日がくれていくというシンプルなアニメーション。 コードも公開されています。 WebkitかFirefox5が必要とのこと。 関連エントリ CSS3をフル活用した立体的な画像ギャラリー作成デモ CSS3のよく使いそうな１０個のテクニックのまとめ CSS3で実装されたボタンのサンプルやチュートリアル総まとめ CSS3な背景パターンのギャラリーサイト「CSS3 Patterns Gallery」
実例から学ぶ、CSS3とjQueryを併用する際の切り分け方法
CSS3でもjQueryでも実装できるシャッターのようにスライドするエフェクトを例に、CSS3とjQueryを併用し切り分けて実装する方法を紹介します。 Garage Door Style Menu デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 マークアップとスタイリング jQuery Method CSS3 Method CSS3とjQueryの併用 -Modernizr マークアップとスタイリング HTML HTMLはクリーンでセマンティックに実装されています。 <ul id="garagedoor"> <li id="shutter1"><a href="#1">Link 1</a></li> <li id="shutter2"><a href="#2">Link 2</a></li> <li id="shutter3"><a href="#3">Link 3
CSS3とjQueryでフォームを美しく装飾する方法
2014年8月22日 CSS, jQuery どんなWebサイトでも設置されているフォーム。なんの装飾もなく味気ないフォームより、デザインされたもののほうが連絡してみたくなるはずです！そんなフォームも少し手を加えるだけで素敵なデザインに変身させることができます。今回はCSS3とjQueryを使ってより美しいフォームを作成する方法を紹介します。 ↑私が10年以上利用している会計ソフト！ フォームの仕様 今回チャレンジするフォームの主な仕様です！ グラデーション・ボックスシャドウを使って立体感を表現 角丸で丸みをつける（モダンブラウザ） 対応ブラウザ: IE7△, IE8△, IE9, Firefox, Chrome, Safari フォーム制作の流れ CSS3ってなんだ？という人もひとつひとつ記述していけば意外と簡単に作れるはずです！リンクをクリックで各項目にジャンプします。 テキストボック
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Transit - CSS transitions and transformations for jQuery
Red Team Design
CSS3、HTML5、jQuery、デザインなどウェブ制作のテクニックが動画で学べるサイト