キーワード検索「border」
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...
466
はてなブックマークとかで盛り上がってたのを見て、せっかくなので、divにborderかけてみたらすごいことになった。話題なのはこのページ経済産業省 会見・スピーチ 大臣記者会見ページ自体は古め*1divの数は下のコードで数えたら309個あった。検証方法firebugにjQuery検証機能を付けるFireQueryというのを使ってjQueryで適当に以下のコードを実行した。var c=new Arr...
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...
298
どんなWebサイトでも設置されているフォーム。なんの装飾もなく味気ないフォームより、デザインされたもののほうが連絡してみたくなるはずです！そんなフォームも少し手を加えるだけで素敵なデザインに変身させることができます。今回はCSS3とjQueryを使ってより美しいフォームを作成する方法を紹介します。フォームの仕様今回チャレンジするフォームの主な仕様です！グラデーション・ボックスシャドウを使って立体感...
262
![[CSS]画像に美しい角丸やボックスシャドウ、グラデーション、アニメーションを適用する方法と注意点 | コリス](http://capture.heartrails.com/200x130?http://coliss.com/articles/build-websites/operation/css/css3-image-styles-by-webdesignerwall.html)
最近のブラウザで生じる問題点 画像に角丸やドロップシャドウを適用すると期待通りにならないことがあります。これはChrome, Safari, Firefoxなど、最近のブラウザでも生じます。 Chromeでの表示 デモでは「border-radius」と内側に「box-shadow」を適用していますが、Chrome, Safariではキャプチャのように欠けて表示されてしまいます。 また、Firef...
238
![[CSS]さりげなく、美しくて分かりやすいテーブルにするCSS3のチュートリアル | コリス](http://capture.heartrails.com/200x130?http://coliss.com/articles/build-websites/operation/css/css3-tables-with-rounded-corners-by-red-team-design.html)
デモページ:Zebra stripes, footer 角丸、セルを交互にカラーリング 実装のポイント CSS3を使って美しく、そして機能するテーブルを実装するポイントです。 画像を使用しないで、角丸を実装。 余分なid, classは使用せず、更新が容易。 ※tableにclassを一つだけ ユーザフレンドリーで、読むことが簡単。 実装 HTML HTMLは非常にシンプルです。 classは、t...
282
![[CSS]角丸やシャドウだけではないCSS3の大切な三つのテクニック | コリス](http://capture.heartrails.com/200x130?http://coliss.com/articles/build-websites/operation/css/3-advanced-css3-techniques.html)
まずは、デフォルトのスタイリングです。* {margin: 0;padding: 0;}ul {list-style-type: none;margin: 2%;border: 1px solid #ccc;padding: 5px;width: 44%;float: left;}ul li {margin-bottom: 5px;padding: 2px;}ここまでのスタイルは下記のように表示さ...
214
![[JS]JS/CSSの管理、ユーザー環境の検出など便利な機能がつまった超軽量スクリプト -Head JS | コリス](http://capture.heartrails.com/200x130?http://coliss.com/articles/build-websites/operation/javascript/js-head-js.html)
複数のJSファイルの管理、CSSのサポートが異なるブラウザへの対応、ブラウザとバージョンの自動検出、スクリーンサイズの自動検出など、headで制御したい便利な機能がつまった超軽量（2.3KB）スクリプトを紹介します。下記に、Head JSでできることを簡単に説明します。 詳しい使い方は下記ページで解説されています。 Usage: Head JS外部JSファイルの読み込みJavaScriptの管理C...
164
greasemonkey, javascript | 応急処置 - リタマス を含むブックマーク" border="0" class="icon" height="12" src="http://d.hatena.ne.jp/images/b_entry_wh.gif" title="Twitter の OAuth 許可ページがあまりにも酷い => 応急処置 - リタマス を含むブックマーク" w...
129
ちょっと素敵だったので備忘録。CSS で見出しを水平線で囲むテクニック です。本とかでよくある表現方法です が、これを画像を使わず実装しよう、 というもの。クロスブラウザで動作 しますので汎用性もありますね。 これはいいですな・・・IE6でも7でも実装出来て、背景カラーや画像にも依存しません。 demo こんな感じ。よく見かけますが、これをCSSのみで実装するTipsです。 CSS h1 { bo...
70
HatenaRecent社内講習わくわくjQuery編1 - jQueryを使ってみようgit diffの結果を差分ファイル群としてエクスポートするRubyスクリプトfacebookページのLike Boxからborderとかを消して無個性にするLESS.appで最小化されたmin.cssも同時に作る方法Sassよりラクチン，LESS.appで簡単CSSコンパイル生活！（Mac限定）LL言語と学習...
68
![[JS]フォームの入力欄を次々にアニメーションで表示するスクリプト | コリス](http://capture.heartrails.com/200x130?http://coliss.com/articles/build-websites/operation/javascript/jquery-tutorial-gravity-registration-form.html)
フォームの項目を入力すると、次の入力欄がアニメーションで表示されるコンテンツを実装するチュートリアルを紹介します。フォームの出来ぐあいは、ウェブアプリケーションとしての成功率を左右する要因となります。 一つのアプローチとして、ユーザーに入力欄の数を少なく感じられるように、入力する項目を一つずつ表示するスクリプトを紹介します。フォームの実装フォームの各項目は、リスト要素で実装しています。HTML<f...
68
CSS3 PIE: CSS3 decorations for IE IE6-8でもCSS3が使えるようになる「CSS3 PIE」。 非対応ブラウザがあるのでまだCSS3はいいやという方もいると思いますが、CSS3 PIEというhtcライブラリを使うことでCSS3に対応させてしまえます。 角丸、ドロップシャドウ、グラデーションといったプロパティに対応しています。 実装の際には border-radi...
51
CSSアニメーションの練習に作ってみた chromeのみ動作確認 /*参考*/ 笑い男 SVG : http://d.hatena.ne.jp/fls/20061023/p1 /*修正*/ before,after要素を導入sonji07forked:0favorite:1lines:0/65/178license:MIT Licensemodified:2011-03-06 17:51:13pv...
289
Inset Border Effect jQuery Pluginby Robin ThriftThis plugin puts a border around the targeted elements (typically images), but unlike normal CSS borders it coversup part of the image. When the element...
56
Demo | jQuery DivCorners | Product of roydukkey 古いブラウザも考慮した角丸実装jQueryプラグイン「DivCorners」 border-radiusで角丸は実装できるようになりましたが、古い非対応ブラウザだとうまく表示されないということで、やっぱりdivでやろうという方は必見のプラグイン。 連番の画像を用意しておくだけであとは簡単に初期化できます...
60
TweetHTML 5 + Javascpritで作る動的なコンテンツ前回の授業では、HTML 5について、その成り立ちや特徴を解説した上で、新しい構造化のための要素について解説しました。また、あわせてCSS3によって格段に進歩した表現力について実際にサンプルページを作りながら解説しました。今までは、Webページで動的に図や画像やアニメーションを描画するにはFlashが代表的な選択肢でした。しかし...
54
結構前に公開していたんですが、きちんとした紹介を書いてなかったので改めて。Githubにて、T.jsという名前のJavaScript用テンプレートエンジンを公開しています。 T.js - DOMBuilder-like template engine for JavaScript T.jsとは JavaScriptでHTMLを書くためのライブラリ（一種のテンプレートエンジン）です。 T.table...
