キーワード検索「background」
877
#sample { width:500px; font-size: 16px; color:#333333; background:#d6e5f5; padding:20px; } #sample li { list-style-type : none; padding:5px 10px; border-bottom:1px solid #84b2e0; } 1. 下に薄いラインを追加してみる こ...
964
上記デモのスタイルシート ※クリックで拡大「CSS3 PIE」の使い方は簡単で、既存のCSS3に一行を追加するだけです。適用前のCSS#myElement {background: #EEE;padding: 2em;-moz-border-radius: 1em;-webkit-border-radius: 1em;border-radius: 1em;}「CSS3 PIE」を適用#myElem...
557
![[JS]これFlashじゃないの？ってなるナビゲーションを実装するjQueryのチュートリアル | コリス](http://capture.heartrails.com/200x130?http://coliss.com/articles/build-websites/operation/javascript/jquery-tutorial-animated-content-menu.html)
まずは、デモページを堪能ください。 ナビゲーションの各ラベルをクリックすると、それに対応したパネルがアニメーションを伴って開くようになっています。デモページ実装HTMLの構造は、背景画像、グリッドのオーバーレイ、ローディングのアイコン、メインメニューの4つから構成されています。HTML：背景背景は、背景画像とオーバーレイとローディングをdiv要素で内包します。<div id="ac_backgro...
341
![[JS]jQueryのプラグイン33+1選 -2011年4月 | コリス](http://capture.heartrails.com/200x130?http://coliss.com/articles/build-websites/operation/javascript/jquery-plugins-best-2011-apr.html)
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Animated fullscreen background image slideshow アニメーションを伴ったフルスクリーンの背景画像を使ったスラ [...]
351
ツールの概要JavaScriptドキュメント利用できるプロパティ@font-faceborder-imageborder-radiusbox-shadowtext-shadowopacityMultiple backgroundsCSS AnimationsCSS GradientsなどCSS3 PIEツールの概要ビヘイビア スクリプト(htc)デモページ利用できるプロパティborder-radi...
275
僕をフォークして魔術師になってよ！norahikoforked:0favorite:1lines:0/115/635license:MIT Licensemodified:2011-03-07 20:51:39pv : 215<script type="text/javascript" src="http://jsdo.it/blogparts/m1WT/js?view=design"></scr...
310
最近のトレンドの一つでもある背景画像をブラウザの枠いっぱいに表示する実装方法はたくさんあります。その中から、理にかなった最新のテクニックや、より多くのブラウザに対応させるテクニックを紹介します。下記は各ポイントを意訳したものです。 各デモはページ下部のDownload Files」で、まとめてダウンロードできます。背景画像をブラウザの枠いっぱいに表示するテクニックとはCSS3を使ったテクニックCS...
298
どんなWebサイトでも設置されているフォーム。なんの装飾もなく味気ないフォームより、デザインされたもののほうが連絡してみたくなるはずです！そんなフォームも少し手を加えるだけで素敵なデザインに変身させることができます。今回はCSS3とjQueryを使ってより美しいフォームを作成する方法を紹介します。フォームの仕様今回チャレンジするフォームの主な仕様です！グラデーション・ボックスシャドウを使って立体感...
273
![[CSS]シンプルなHTMLに付箋紙のデザインを適用するスタイルシート | コリス](http://capture.heartrails.com/200x130?http://coliss.com/articles/build-websites/operation/css/css-tutorial-sticky-notes-with-css3.html)
付箋紙はどんな背景にも適用できます。デモ画像無しで付箋紙Sticky Notes with CSS3 by accidental hacker付箋紙の実装上記の当サイトに設置したデモのコードを紹介します。リスト要素で実装します。p要素は付箋紙には必要ありません。<ul id="notes"><li><p>画像無しで付箋紙</p></li><li><p>Sticky Notes with CSS3<...
236
CSSやJavaScript（jQuery）を使用して、フォームのテキストエリアをより使いやすくする9つのトリックを紹介します。CSS画像の表示には、スタイルシートを利用します。textarea {background: url(images/benice.png) center center no-repeat; /* This ruins default border */border: 1p...
185
動的なウェブサイトを作るときには、クロスサイトスクリプティング (Cross Site Scripting、XSS) の脆弱性をなくすことを意識しますが、Twitter や mix でもセキュリティの欠陥はあるので、初心者には難しいと思います。（両方とも、はまちちゃん がアレしたｗ） Firefox アドオンの 『XSS Me』 では簡単な XSS脆弱性発見ができます。1. XSS Me のインス...
191
ディスプレイ（ブラウザ）のサイズ、画面いっぱいに背景画像を拡大表示するCSSやjQuery プラグインをいくつか試してみたのでレビューをまとめてみました。CSSだけでフルスクリーンで背景表示ができるものや、jQueryのプラグインを使ったものなどいくつかご紹介します。ディスプレイサイズ（ブラウザサイズ）いっぱいに背景画像を表示する方法はいくつかありますが、最近見つけたjQueryのプラグインを試し...
209
![[CSS]画像に美しい角丸とボックスシャドウを適用する方法 | コリス](http://capture.heartrails.com/200x130?http://coliss.com/articles/build-websites/operation/css/css3-rounded-image-with-jquery.html)
img要素で配置した画像にCSS3の角丸とボックスシャドウを適用をすると、Firefoxで角丸が反映されなかったり、Webkitブラウザでボックスシャドウが欠けたりします。 これを解消するCSSのTrickを紹介します。CSS3 Rounded Image With jQuery デモページFirefoxとWebkitブラウザ（Safari）のそれぞれにCSS3の角丸とボックスシャドウを適用すると...
83
テキスト入力エリアなどの残り入力文字数をシンプルに表示するjQueryプラグインです。使い方も簡単で、指定要素に入力文字数と一緒に実行するだけです。動作サンプル必要なファイルを読み込むjQueryとsimpleTextCount.jsを読み込みます。<script type="text/javascript" src="js/jquery.js"></script><script type="te...
157
AmazingGoogle LogosLogos ParodiesMonuments of the worldPicturesWix - Free Website DesignFree CoursesAdobe PhotoshopCorelDraw (In Urdu)MS-WordSlice MockupsFree StuffBackgroundsBrushesFiltersFontsFrames...
63
![[CSS]画像のロールオーバーにフェード効果を与える方法の理想と現実 | コリス](http://capture.heartrails.com/200x130?http://coliss.com/articles/build-websites/operation/css/fade-image-within-sprite-by-css-tricks.html)
CSSスプライトを使用した画像のロールオーバーにアニメーションでフェード効果を与える際の、妥当な実装方法、理想の実装方法、現実の実装方法を紹介します。下記は各ポイントを意訳したものです。最初の方法：妥当二番目の方法：理想三番目の方法：現実デモでは、上から順番に実装されています。最初の方法：妥当HTML元のエレメント内にspanを一つ配置します。確かにこれは余分のマークアップと感じるかもしれませんが...
89
![[JS]ユーザビリティに配慮したアコーディオンを実装するチュートリアル | コリス](http://capture.heartrails.com/200x130?http://coliss.com/articles/build-websites/operation/javascript/jquery-tutorial-simple-accordion.html)
ユーザビリティに配慮しつつ、jQueryのバグにも対応したシンプルなアコーディオンを実装するチュートリアルをSoh Tanakaから紹介します。Simple Accordion w/ CSS and jQuery デモページアコーディオンのロジックは下記の通りです。最初にデフォルトの設定します。 一番目のアコーディオンを開いて、アクティブな状態にします。クリックをすると。 クリックされたアコーディ...
74
![[JS]CSSスプライトにフェードや移動、不透明度の変更を加えるスクリプト -bgFade | コリス](http://capture.heartrails.com/200x130?http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-bgfade.html)
変更後のスタイルのclass名には「span.bg_fade」を含めます。また、display, height, widthは必ず指定します。.myButton {position:relative;height: 75px;width: 500px;cursor:pointer;display:block;background: url('button.png') no-repeat top l...
54
![[CSS]IE6でもそれなりに、CSS3で実装するツールチップのチュートリアル | コリス](http://capture.heartrails.com/200x130?http://coliss.com/articles/build-websites/operation/css/css-tutorial-tooltips-by-red-team-design.html)
吹き出し風デザインの実装イメージ .tooltip { position: relative; background: #eaeaea; cursor: help; display: inline-block; text-decoration: none; color: #222; outline: none; } .tooltip span { visibility: hidden; posit...
53
![[JS]省スペースに最適、コンテンツをローテーションで拡大表示するチュートリアル | コリス](http://capture.heartrails.com/200x130?http://coliss.com/articles/build-websites/operation/javascript/jquery-and-css3-tutorial-rotating-feature-boxes.html)
複数のコンテンツをサムネイルで配置し、ローテーションで打ち出しエリアに拡大表示するフィチャーボックスを実装するチュートリアルを紹介します。デモでは右側に配置されたサムネイルのコンテンツをクリックすると、打ち出しエリアにアニメーションでスライド移動して、全文が表示されます。 ※アニメーションはCSS3で実装されているためChrome, Safariのみで、非対応ブラウザはアニメーション無しです。ロー...
