CSS3 Gradient Generator
The CSS3 Webkit Gradient Generator is a showcase for the power of CSS webkit gradients. It also provides a simple graphical user interface for working with CSS webkit gradients, allowing a user preview real time what their gradient will look like and provide the code for the gradient they generated.CSS3 Gradient Generator v2.0 Welcome to the CSS3 Gradient Generator! Please be aware that in order t
CSS Reloader :: Add-ons for Firefox
CSS Reloader is a browser extension for Mozilla Firefox and Google Chrome, that allows you to reload all the CSS of any site without you have to reload the page itself. The goal for this browser extension is to enable developers to become more productive. Usage You can use the keyboard shortcut F9, or the context-menu's option "Reload CSS" to reload the CSS files or at page. Feedback Feel free to
Dev.Opera — CSS3 Borders, Backgrounds and Boxes
IntroductionIn this article, we will showcase some examples made using the new properties in the W3C’s CSS3 Backgrounds and Borders specification. We recommend using Opera 11 or later to view these examples in their full glory. background-clipbackground-originMultiple background imagesbackground-attachmentupdated background shorthandbox-shadowbox-decoration-breakborder-radiusborder-imagebackground
CSSグラデーションのちょっとしたテクニック #1
リリースを間近にひかえたFirefox 3.6で対応されるので、そこかしこで取り上げられているCSSによるグラデーション。基本的な書き方はIntroducing CSS Gradientsやcss gradients in Firefox 3.6を始めとして腐る程あるのですっ飛ばすとして、実際にボタン等で利用する時にどうすれば簡単に書けそうかということをちょっと考えてみようとかいう話。勢いで#1とかつけてしまった……。 button要素にCSSによるグラデーションをかけるには以下のように書くことになる。 button { background-image: linear-gradient(top, rgb(204, 204, 204), rgb(102, 102, 102)); background-image: -moz-linear-gradient(top, rgb(204, 204
一般的なID/クラス名の例のまとめ - blog.takuyan.com
いつも忘れて本を開くので、自分用のメモ。 転職後、WEBデザイン全般も担当するようになり、XHTML&CSSもガツガツ書くようになったが、 なにぶん、ID名とかクラス名が思いつかないことが多いので、以下表の名称を頻繁に使わせて貰っている。 部品例 名称例 本文全体を囲むコンテナ container, wrapper, page, pagebody, all ヘッダー header, header-area ナビゲーション nav, navi, navigation グローバルナビゲーション global_nav, gnav ローカルナビゲーション local_nav, lnav 補足ナビゲーション assist_nav, utility, utility_nav パンくずナビゲーション topicpath, breadcrumbs コンテンツ全体 content(s), container
CSS で table に斜線を引く方法
CSS で table に斜線を引いてみました。下の表の左上の斜線に CSS を使ってます。 サンプル（クリックすればサンプルページに移動します） Windows XP + IE6 / IE7 / Firefox3 / Safri3 / Google Chrome で確認しています。 ポイントは以下です。 th 要素に position: relative; 斜線を引く要素（ここでは span）に position: absolute; を設定。 斜線（border）を適用する要素の前に を設定。 がなかったり、要素の後方に があると、th のスタイルが隠れてしまう。 クロスブラウザにするため、font-size や line-height など、いくつかのプロパティを設定。 HTML <table summary="data"> <thead> <t
liに連番のidを振る方法 │ これからゆっくり考L +α
このブログのサイドメニューにある「最近のエントリー」の項目みたいなことをしたい場合の方法です。 要するに、 <ol> <li id="no1">いちばんめ</li> <li id="no2">にばんめ</li> <li id="no3">さんばんめ</li> </ol> といった感じにする方法をまとめてみました。 JavaScriptで実現 まずはfor文で $(function() { var h=document.getElementById("hoge"); var l=h.getElementsByTagName("li"); for (var i=0;i<l.length;i++){ l[i].setAttribute("id","hoga"+(i+1)); } }); <ol id="hoge"> <li>ほげ1</li> <li>ほげ2</li> <li>ほげ3</li> <
[CSS]スタイルシート設計のベースになる12のCSSのフレームワーク | コリス
specky boyのエントリーから、ブラウザのスタイルの初期化やレイアウトのテンプレートなど、スタイルシート設計のベースとなるCSSのフレームワークを紹介します。
How to Create an Organic Web Design (and Showcase)
Organic design is commonly applied to products such as chairs, electronic equipment, books and home décor. Following the same principles, organic web design has recently emerged as a trend. Professional designers and companies have taken a more natural approach to creating their websites, logos and packaging, leaving behind the overtly technological sheen of the early 2000s. Yes, fellow designers,
にぱぽ -nipapo- ニコニコ動画用CSS ＆ IME辞書
●ニコニコシンプルCSS(ββ) ("nicosimple #41" 2009/04/05 13:00 更新) 広告とか必要のない物を消してニコニコ動画をすっきりシンプルに表示させることができます。 チェックボックスで簡単にいじれるようにしてみた。広告だけ消すこともできます。 気が向いたら更新してます。 「ちゃんと使えねーじゃねーか！！(不具合)」とか「こんな項目追加したらいいんじゃね？(要望)」とか、 何かあれば気軽に[ブログ]か[メールフォーム]から教えてください。 (※ 2009/06/23 に適当に書いたのも晒してみる [nicosimple090623 Download]) ・Operaでの使い方 １．下のチェックボックスを好きなようにいじる ２．"OK"ボタンを押す ３．出てきたコードをコピペして"nicosimple.css"とかてきとーに名前つけて保存す
table系にはposition:relativeが効かない | Takazudo Clipping*
こんなかんじでtable内でtdが2つあり、中にはメイン文章のpと、日付のpがあるんだけど、日付をセルの右下にposition:absoluteでつけよう。そうすればセルの内容増えてもいつも右下によってくれる。だからtdにはposition:relative指定すれば右下に寄ってくれるよね！（下は、こんな風にしたいイメージ） ･･･と思ってると失敗する。 <table> <tr> <td> <p class="whatIdid">I played game whole day today.I played game whole day today.I played game whole day today.I played game whole day today.I played game whole day today.I played game whole day today.I p
HTML5/CSS3は最新Webブラウザでどれだけ実装が進んでいるか？ － Publickey
グーグルがHTML5の機能を駆使したGoogle Waveを発表したことなどをきっかけに、HTML5への関心がこのところ急速に高まっています。以前の記事「いま起きているWeb標準の進化、HTML5、CSS3、JavaScript 2.0」で紹介したように、HTML5やCSS3ではWebアプリケーションの構築に有用な機能が数多く含まれており、策定は現在もW3Cで進んでいます。 最近相次いで登場した最新のWebブラウザ、Firefox 3.5やSafari 4、Google Chrome 2.0などでは、策定中のHTML5やCSSの機能を取り入れ始めています。Video/AudioタグがFirefox 3.5でもサポートされ、プラグインがなくても動画や音声の再生が可能になったことは最近話題になりました。最新のWebブラウザでは、すでにいくつものHTML5の機能が使える状態です。
TypeKitから始まるウェブ文字革命
今月はじめに John が来日したときに「フォント関連で近々発表があるんだよね」と言っていたのですが、ついに全貌が明らかになったようです。Jeffrey Veen を中心に TypeKit というプロジェクトが立ち上がる模様です。既に WebKit, Opera 10, Firefox 3.1 3.5 でサポートされている @font-face。利用者のパソコンにあるなしに関係なく指定のフォントが使えるようになります。つまり、今まで仕方なく画像文字にしていた部分もテキストで処理可能になる可能性があります。 @font-faceでまず問題になるのが著作権に侵害しないかどうかという部分です。多くのフォントはウェブ上での配布を禁じていますし、@font-face の許可をしていないフォントもあります。法的な問題や DRM を気にせず安心して @font-face を使った文字表現をするために生ま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ajaxian
http://www.css-lecture.com/log/css3/css3-border-radius.html
[CSS]スタイルシートの記述をより読みやすくする5つのルール
Google Box - CSS Transform Test
http://blog.e-riverstyle.com/2009/07/-html5css3.html
IDEA * IDEA
Adobe Fonts
