CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
MdN Design｜総合情報サイト
text-shadowはその名のとおり、テキストに影をつけるプロパティだ。うまく使えば画像を使わずとも、テキストを際立たせることができる。運用の効率化や、テキストコピーができるなどメリットも多い。 基本的な指定方法は、テキストから影までの距離（縦、横）とぼかしサイズ、影の色を指定して調整する【1-1】。CSS3でよく使われる、-moz-や-webkit-などのベンダープレフィックスの記述は、textshadowでは必要ない。カンマで区切れば、1つの要素に対して複数の影を指定できる【1-2】。また、影の色はrgba（半透明）で指定することもできる。影を半透明にしておけば、どのような背景色でも自然になじませることができるので便利だ【1-3】。 【1-1】「ぼかしサイズ」と「影の色」は省略可能 【1-2】カンマ(,)区切りで複数指定できる。工夫次第で複雑な表現も可能だ 【1-3】カラーコードをr
css-lecture.com - css lecture リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
IEでもCSS3のプロパティ、エフェクトを表現できるようにするリソース＆スニペット
CSS3 ノンサポートの IE でも CSS3 の border-radius、box-shadow、text-shadow などの、エフェクト系プロパティを利用する為のライブラリをご紹介します。また、最後に IE の filter を使ったコードもまとめてあります。 IEでも CSS3 の表現をするためのライブラリを使ってみました。IE9 がどれくらい普及するか分かりませんが、IE9 の CSS3 のサポートを見る限り、相変わらず IE だけ特別扱いしてあげないとダメなところもありそうですねー。以下のリンクで、IE9 の CSS3 サポートの状況をチェックできます。 Impressive Webs CSS3 Support in Internet Explorer 9 今回は、IE8 以下でもいくつかの CSS3 のプロパティを利用できるようにするためのライブラリを、2つほどご紹介します
CSS3が日本語の禁則処理、傍点、縦書きなど対応へ、ドラフト公開
スタイルシートの新たなWeb標準として現在策定が進められているCSS3に対して、日本語に対応した禁則、傍点（圏点）、縦書き仕様などの機能が追加されたドラフトが公開されました。 9月28日にPublickeyで公開した記事「電子書籍フォーマット「EPUB」で縦書きとルビのサポート、来年5月には仕様完成の見通し」では、EPUBでの縦書きやルビ、傍点などの仕様を策定中であることを紹介しましたが、EPUBはXHTMLやCSSをベースにした仕様であるため、仕様策定の作業はEPUBとCSSのそれぞれのグループが協力してCSS3に対して機能を追加する方法で行われていました。 これが最終的にCSS3の仕様として策定されれば、Webブラウザ上での禁則処理、傍点、縦書きなどの組み版処理が充実することになります（ルビはまだ作業中ですが）。大げさではなく、世界中のWebブラウザに対して日本の日本語文化に対応した表
borderに画像を使用したcss3プロパティをサクッと生成するジェネレーター・border-image-generator - かちびと.net
今まで知らなかったんですが、 css3ってborderに画像を使える んですね・・・勉強不足でした。 border-image-generatorはその css3による画像borderをサクッと 作ってくれるWebジェネレーター です。勉強がてら触ってみるのも いいかも。 css3便利ですねぇ・・もちろんIEでは使用できません。webkit系(safariとかChrome)とmoz系(Firefoxとか)に対応しています。 直感で使えるので使い方は割愛します。使用したい画像のアップロードも出来るのでいろいろテストできそうです。 以下のようなプロパティでborderに画像を指定するんですね。 .border-images{ border-width: 28px 27px; -moz-border-image: url(abc.png) 28 27 repeat; -webkit-border
CSS3の擬似クラスをIE6-8でも使えるようにする「Selectivizr」:phpspot開発日誌
Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8 CSS3の擬似クラスをIE6-8でも使えるようにする「Selectivizr」 便利なCSS3の擬似クラスがIEでも使えて効率的なスタイリングが可能になります。 jQuery, prototype, mootools等と同時に使うことができ、 使えるプロパティはライブラリごとに違うようで、サイト上にそれぞれ掲載されています。 完璧ではないようですが、便利なものが多く使えるということで、活用してみてもいいかもしれませんね。 関連エントリ 便利なCSS3ツール6つ＋α IE6-8でもCSS3が使えるようになる「CSS3 PIE」 ピュアCSS3で3Dアニメーション IE6-8でもCSS3に対応するライブラリまとめ
Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8
Enhancing IE's selector engine Selectivizr adds support for 19 CSS3 pseudo-classes, 2 pseudo-elements and every attribute selector to older versions of IE. It can also fix a few of the browsers native selector implementations. JavaScript-knowledge: none Selectivizr works automatically so you don't need any JavaScript knowledge to use it — you won't even have to modify your style sheets. Just start
jQueryとCSS3、HTML5でここまで出来るホバーインタフェース:phpspot開発日誌
WanderWall ? A jQuery, CSS3 & HTML5 Hover-Based Interface | AddyOsmani.com | Where User Interface Ideas Grows jQueryとCSS3、HTML5でここまで出来るホバーインタフェース。 jQueryで様々なことが出来るようになっているのはご存知だと思うのですが、更にCSS3とHTML5も組み合わせるともっとすごいよ、という１つのデモです。 まだまだインタフェースは進化するのだな、という可能性を感じるものになっているので一回見ておいたらよいかも。 WanderWallのデモ とにかく実際にHTML5対応のブラウザで見てみもらうのが一番分かりやすいです 上のメニューにカーソルを合わせると画面がアニメーションしながらクールに切り替わります。 HTML5ブラウザがデフォルトになり、こうした技
[CSS]CSS3の効果的な使い方と陥りやすいワナ
CSS3で何ができるのかという「CSS3で何ができるの？ という時にみておきたいサイト集」という記事をとりあげました。 今回は、そのCSS3を実際どのように使うのか？ ウェブページに効果的に使用した例、陥りやすいワナとその対処方法をWeb Design Wallから紹介します。 CSS3 Examples and Best Practices 下記は各ポイントを意訳したものです。 はじめに テキストのエンボス効果 繊細な角丸とシャドウ アニメーションで回転するDVD 半透明のバー 角丸 微妙なテキストのシャドウ 陥りやすいワナと対処方法 はじめに CSS3の人気はいっそう高くなっています。実際CSS3の新しい機能はウェブに多くの新しい可能性をもたらします。 しかしながら、CSS3はまだ完全にすべてのブラウザにサポートされていないので、あまり興奮しないでください。 だからといって、CSS3を
Error
Welcome!! Create your free hosting account now at https://freewha.com. FREE FEATURES: 1500MB webspace, unmetered traffic, PHP 5.6, 7.1, 7.2 or 7.3, MariaDB mysql database, ftp, apache 2.4 webserver and more. => Free short subdomains like yourname.6te.net, yourname.eu5.org, yourname.ueuo.com. => Free domain hosting for already registered domains of any kind. IDN (xn-- format) are accepted as well.
画像は一切使ってない！？CSS3だけで描いた“ドラえもん”がすごい - はてなニュース
こちらの“ドラえもん”のイラスト、どうやって描かれていると思いますか？PhotoshopやIllustratorなどの画像編集ソフトで描かれているようにも見えますが、実はこのイラスト、なんと画像を一切使わずに「XHTML」と「CSS3」のソースコードのみで描かれているとのことです。 ▽CSS3 ドラえもん インターネット上でイラストを公開するには、JPGやGIFといった画像ファイルでアップロードするのが一般的。しかしこちらのドラえもんはそういった画像ファイルではなく、Webサイトを構築する際に使われるXHTMLとCSS3のソースコードのみで作られています。そのため“右クリックで保存”ができなかったり、ブラウザの種類やバージョンによって見え方が異なるのが特徴です。 こちらはFirefox3.6の場合です。FirefoxやGoogle ChromeはCSS3に対応しているので、グラデーションま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
http://css3-buttons.heroku.com/generator
IDEA * IDEA
IDEA * IDEA
HTML5, CSS3, jQuery1.4, WordPress3の厳選チートシート集
CSS3.0 Maker | CSS3.0 Generator | CSS 3.0 Generator | css3 generator
Adobe、Dreamweaver CS5 HTML5 Packの配布を開始 - MdN Design Interactive
http://www.designwalker.com/2010/05/css3.html
