[JS]高性能で設置も簡単、ブラウザ枠いっぱいに背景画像を配置するスクリプト -bgStretcher
デモページ：Super Slider スライドのスーパー版で、斜め方向のスライドで画像を切り替えます。 bgStretcherの主な特徴 セットアップはシンプル 全てのモダンブラウザをサポート 画像は一枚だけでなく、複数枚にも対応 対応ブラウザ Internet Explorer 6, 7, 8, 9 Firefox 2, 3, 4 Opera 9+ Safari Chrome bgStretcherの使い方 Step 1: ファイルのダウンロード サイトの「Download」よりファイル一式をダウンロードします。 一式には必要なファイル全て（jqeury.jsも）が含まれています。 Step 2: 外部ファイル 外部ファイルを下記のように<head>～</head>に記述します。 <script type="text/javascript" src="../jquery-1.5.2.mi
ミレー（MILLET）公式オンラインストア
ミレーの最新情報が届くニュースレターにご登録いただくと、 オンラインストアで使える500円OFFクーポンコードを差し上げます。
[JAVASCRIPT] Vertical Sliding Info Panel With jQuery - スライドするインフォパネル
[JAVASCRIPT] Vertical Sliding Info Panel With jQuery – スライドするインフォパネル Pocket Tweet ページ横にあるタブをクリックすると、スライドして出てくるサイトインフォパネル。jQueryを使って制作されているようです。DIVボックスが拡大しながら出てくるので、なんだかあまり見ない動きで気持ちイイっすねこれ。全部で3パターンのデモがあるんですが、ページ下部に全部まとまってます。3つめのタブ固定バージョンがナイス。ソースコードも同様にページ下部からDLできます。その内使ってみたいなこれ。 Vertical Sliding Info Panel With jQuery
デザインの引出しを203%拡張させる神Webサイトデザインギャラリー | 秒刊SUNDAY
前回このＷＥＢサイトギャラリー特集を行った際には、フルFlash,フルスクリーンのカッコイイサイトが主流でした。当たり前のようにウインドウが最大化 し、当たり前のようにヌルヌルとＦｌａshが動く。時代は変わったもので、もはやFlashのフの字を聞くだけで『iPadじゃ見れないからねー』が付き まとう今日、ＷＥＢデザインはどのように設計したらよいのでしょうか。今回はそんなＷＥＢサイトデザインに役立つサイトをご紹介したい。 ◆Webデザインポータルサイト ■Webデザインのリンク集 Webデザインポータルサイト S5-Style スタイリッシュで非常に見安いサイト。次々に事例を見て行っても苦にならない。 ◆Webデザインリンク集・ソーシャルブックマーク ■Webデザインリンク集・ソーシャルブックマーク - 最近ページングではなくスクロールローディングに変更された。わざわざページングしなくても良
JavaScriptで作られた、見たことないUIデザインのWebサイト
株式会社サイゾー（Cyzo inc.） / Raffael Stüken / La Moulade - Creative St...他...全11件
[JS]jQueryのプラグイン33 1選 -2011年10・11月 | コリス
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 FlexSlider シンプルながら高性能でセマンティックなマークアップのスライダー。 Slidorion 画像スライダーとアコーデ
優美なラインをもったシンプルなフリーフォントのまとめ
ミニマルなデザインにはまる、シンプルで美しいフリーフォントをYou the Designerから紹介します。
[CSS]ボタンのクリックを楽しくするCSS3アニメーションのテクニックいろいろ
ボタンをCSS3で美しくスタイルするだけでなく、ホバー・アクティブ時にもかっこいいCSS3アニメーションを使った7種類のテクニックを紹介します。 ちょっと前まではこういったアニメーションはFlashかJavaScriptを使用しないとでしたが、今ではもうCSS3でとなってきましたね。 Demo 1 ボタン内のテキストや画像は、span要素やimg要素で配置されており、それらをa要素で内包して実装します。 <a href="#" class="a-btn"> <span class="a-btn-slide-text">$29</span> <img src="images/icons/1.png" alt="Photos" /> <span class="a-btn-text"><small>Available on the Apple</small> App Store</span> <
CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ
最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で
[CSS]見出しの両端に水平ラインを天地中央に配置するテクニック
紙媒体でよく見かける、見出しの両端に水平ラインを天地中央に配置するスタイルシートのテクニックを紹介します。 Centered Heading Overlaying a Horizontal Line with CSS [ad#ad-2] 下記は各ポイントを意訳したものです。 実装のポイント Method 1: 疑似要素 Method 2: 隣接兄弟セレクタ Method 3: 線形グラデーション Method 4: 最後にjQueryを使ったメソッド 全部のデモ 実装のポイント 実装するにあたり、下記の点に留意します。 画像は使用しない。 余分なHTMLは使用しない。 Scalable: フォントのサイズを大きくしても調整される。 Fluid: 可変。 JavaScriptは使用しない。 Method 1: 疑似要素 見出しの疑似要素で水平線を配置し、spanタグを内側に配置し水平線が中央
[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
[JS]アニメーションで動作する画像ギャラリーの超軽量すぎるスクリプト -Rhinofader
実用的なオプションを備えた、フェードのアニメーションで切り替わる画像ギャラリーを実装するjQueryのプラグインを紹介します。 操作方法は自動・手動の2つです。 左下のアイコンで再生・停止、左右の矢印アイコンで画像を前後に切り替えます。 Rhinofaderの実装 HTML 画像はリスト要素で実装します。 <ul id="slideshow"> <li><img src="images/001.jpg" alt="" /></li> <li><img src="images/002.jpg" alt="" /></li> <li><img src="images/003.jpg" alt="" /></li> <li><img src="images/004.jpg" alt="" /></li> <li><img src="images/005.jpg" alt="" /></li> <
DRACU-RIOT！
2011/10/29 ゆずソフト最新作「DRACU-RIOT!」の公式ＷＥＢサイトを公開。 よろしくお願い致します。 電撃HIME１２月号にて原画家コメントとディレクターインタビューを掲載しています。 もっと見る
[JS]多彩なアニメーションが実装できる2.3KBの超軽量スクリプト -jsMorph
Tutorial demos さまざまな基本となるアニメーションのユニット集。 [ad#ad-2] jsMorphの実装 外部ファイル 当スクリプトを外部ファイルとして指定します。 <script src="js/jsMorph_min.js" type="text/javascript"></script> JavaScript jsMorphの基本書式です。 var myMorph = jsMorph( Object obj, // HTML element, Array of elements or elementCollection that are rendered Object prop, // css properties of end position [Object params], // parameters that influence the motion (dur
Webデザイナーならば必ず一度は憧れる、余白が美しいWebデザインまとめ59個
artless Inc. / mount inc. / standardimage他...全60件
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]jQueryのプラグイン33+1選 -2012年1月
最近リリースされた高品質なフリーのデザインフォント -2012年1月
WordPressでここまでできる！WordPressで作ったとは思えないWebサイトまとめ12個 - W3Q
最近リリースされた高品質なフリーのデザインフォント -2011年11月
ウェブデザインのセンスを磨こう、素敵なUIデザインのまとめ