エンジニアだけで高品質なカード型UIを作れる！Bootcardsがスゴい
TwitterやGoogle Nowのようなカード型のUIを作れる便利なUIフレームワークの登場です。OS別のスタイルにも対応。デザイナーに頼む予算がなくても、WebアプリのUIをほどよく整えられる優れものです。 Bootcardsは、カード型インターフェイスを作るためのUIフレームワークです。その名が示す通りBootstrapフレームワークで使用し、デスクトップとモバイルの両方に対応できる柔軟性があります。 現代は至るところに情報があふれ、私たちはそのとてつもない量に混乱しています。モバイルデバイスの普及にともない、UXデザイナーたちは過剰な情報によってユーザーを混乱させない、ミニマルなインターフェイスを目指してきました。 カード型インターフェイスは、重要な情報だけにフォーカスできるうえに、視覚的にユーザーをひきつけることから、大きな注目を集めるようになりました。 Bootcardsは多
真似したい!使いたい!オシャレなCSSテキストエフェクト31個 | 楽天ティップスRakutenTips
CSS 3 Transform Experiment CSS3トランスフォームを使ったpure CSSトリック。モダンブラウザ＆IE9＋みたいなので使うサイトは選ぶかなっと。 Animated Text Fill javascriptを使わずcssアニメーションでストライプを表現したテキストエフェクト Text Animation 見出しに追加して置きたいアニメーション Elastic Stroke CSS + SVG SVGを使ったカラフルなテキストアニメーション Fun With CSS Text-Shadow イベント時などに使いたいテキストシャドーを使ったインパクトあるポップなテキストエフェクト Box-bubble Cutout in CSS 写真にフィルターを掛けた背景に合わせた日付入りボックス Fly in, fly out JS &CSSで実装するアニメーション Maske
『jQuery 最高の教科書』サンプルサイト
Chapter 02 3 ステップではじめるかんたん jQuery 入門 # Easing Chapter 04 確かな基礎力を養う jQuery の基本テクニック 01 さまざまなホバーエフェクトで学ぶ動きのある表現の基本 02 画像とキャプションの表現 03 丸いボタンのレイアウト 04 見え隠れするサイドバー 05 タイポグラフィの表現 # Chaper 04 完成版 Chapter 05 活用の幅を広げる jQuery の必修テクニック 01 なめらかな動きの スライドショー Basic 02 多機能なスライドショー Advanced 03 スティッキーヘッダー Basic 04 デザインが変化する スティッキーヘッダー Advanced 05 画面領域を有効活用できるタブ Basic 06 高機能で拡張しやすいタブ Advanced 07 スムーズスクロール Basic 08 拡
クロスフェードするスライドショー（ナビゲーションボタン付き） | nagachan.net
jQueryを使った、クロスフェードするスライドショーを自作してみました。 いろんなサイトでも見かけるかと思いますが、お勉強のために自作です。 ■作りたい仕様 一定時間で画像が切り替わるスライドショー クロスフェードのような処理をさせたい 指定した画像に直接切り替えられるボタンもつけたい 切り替えたい画像をリストに配置すれば、切り替えボタンは自動生成されます。 クロスフェードでなく、一旦画像を消してフェードインさせるのであればもっと簡単にできますね。 今の所、ナビボタンに画像が２桁になった処理を入れていないので、写真の数は９個までしか配置できませんw そのうち改良します・・・。 デモはこちら HTML <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javas
jQueryで簡単に作れるマウスオーバーでアニメーションするボタン５種
jQueryで簡単に作れるマウスオーバーでアニメーションするボタン５種 ちょっと前まではマウスオーバーといえば画像の切り替えくらいでしたけど、最近ではアニメーションで切り替わるマウスオーバーも増えてきましたね。 ということでこの記事ではjQueryを使用して、わりと簡単に作れるマウスオーバーアクションをご紹介します。 投稿日2010年10月24日 更新日2012年03月05日 ナビゲーションはテキストにしないとseo的にあれだよとか言われていますが、コーポレートサイトではまだまだ画像を使用されていることが多いと思います。なので、今回は画像ナビゲーション限定です。（テキストでもあまり変わらないと思いますが……） 縦型+テキストタイプのナビゲーションはこちらの記事をご覧ください。 「jQueryで作るマウスオーバーアニメーションするテキストタイプの縦型ナビゲーション10種」 htmlと画像の準
jQueryで作るマウスオーバーアニメーションするテキストタイプの縦型ナビゲーション10種
ベースとなるhtml 今回はテキストタイプなので文字列をリストで並るだけですね。 一部spanを入れた方が動作が安定することがあったので入れてます。javascriptのコードにspanを指定していなかったら外してください。 html <ul id="nav1"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">GALLERY</a></li> <li><a href="#">LINK</a></li> </ul> 1.マウスオーバーでスライドするボタン 単純に横にスライドするアニメーションは「marginLeft」を変化させます。 テキストの色はcssで変えてます。 このナビゲーションに限ってはliにspanを入れると安定して動作するっぽいです。 html <li><a href="
IE PNG Fix - TwinHelix
IE PNG Fix 2.0 Alpha 4 This script adds near-native PNG support with alpha opacity to IE 5.5 and 6. Now you can have full translucency and no more ugly grey borders! Full CSS background positioning and repeat are supporting (including CSS sprites). It requires only one line in your CSS file, and no changes to your website HTML. <IMG> tags and background images are both supported. Script License Ag
HugeDomains.com
Captcha security check monodez.com is for sale Please prove you're not a robot View Price Processing
Simplemodal(lightbox)パネル関連|リッチなサイトを作ろう
こちらもlightboxの1種で、動作が面白いので取り上げてみました。 当サイトのメインメニュー利用規約で使用しているものです。 オブジェクトも簡単に挿入できます。 このプラグインも単に画像を表示するためのものではなく、画像を含むオブジェクトをオーバーレイで表示するものです。 この例では、MACのOSX風にポップアップを表示していますが、 これもSimplemodalの一部の機能で、このほかにも多くのオプションが用意されています。 Simplemodalのオフィシャルサイトから Download SimpleModalボタンを探して最新版jquery.simplemodal-1.3.3.js (バージョンは異なる場合があります)をダウンロードして、 導入サイトのルートに作成した[jquery]に新しいディレクトリ[simplemodal]を作成し、 この中にファイル名を[simplemod
SCRAPBLOG : Jetpack SDK 0.5 の Selection API
Jetpack SDK 0.5 で追加された Selection API を使用すると、選択範囲の取得や変更などが可能となります。 Selection API を使用するためには、はじめに require 関数でモジュールをインポートします。 var selection = require("selection"); 選択範囲の取得 Selection API の text および html プロパティで選択範囲の文字列あるいはHTMLソースを取得・変更することが可能です。また、Ctrlキーを押下しながら複数の範囲を選択した場合、 contigious プロパティが false となります。この時、 Selection API のオブジェクト自体に対して for ～ in ループで個々のサブ選択範囲（Selection オブジェクト）を取得することが可能です。 以下は、選択範囲が複数ある場
どや！？ひよっこデザイナーにもできるWebページ高速化！鍵は「HTTPリクエストの数を減らすこと」 | デザインどや！？
Webページレイアウト、ナビゲーションプラグイン、フォーム、スライダー＆カルーセルプラグイン、チャート＆グラフプラグイン、イメージエフェクトプラグイン、ビデオプラグインなど。チェックしておきたいです。海外カジノ オンラインサイトの制作はワードプレスのプラグインを利用して様々な機能を付け加えて完成させることができます。2012年のjQueryプラグインまとめでは、デザインの一新や個別のカスタムにも対応した国際的で魅力的なサイト作成に役立つ情報を紹介しています。
[JS]シンプル！軽量！簡単！三拍子揃ったスライドショーのスクリプト -jQuery.TinySlider
jQuery.TinySlider デモ [ad#ad-2] jQuery.TinySliderの実装 HTML スライドで表示されているイメージはdiv要素の背景画像です。 <div id="slider"> <div class="image" style="background-image: url(img/img1.jpg);">Simple</div> <div class="image" style="background-image: url(img/img2.jpg);">Light</div> <div class="image" style="background-image: url(img/img3.jpg);">Easy</div> </div> JavaScript 「jquery.js」と「jquery.slider.js」を外部ファイルとし、下記のスクリプト
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://design-spice.com/2012/06/13/responsive-web-design-image/
[JS]画像を溶け合うように切り替えられるスクリプト -CrossSlide
ばんばん寿しグループの株式会社 坂本