[CSS]三角・丸・アロー・吹き出し・アイコンなど、全200種以上のさまざまな形状をつくるスタイルシート -Neo CSS
ボックスの角を丸くして表現するいわゆる「角丸」。 実装するにはdiv要素をいくつも入れ子にして角丸画像を背景として指定し表現していました。 しかし、CSS3で追加されました「border-radius」プロパティを使ってdiv要素を多用せずに角丸デザインを実装することができます。 このプロパティでは4つ角すべて「角丸」にすることも、任意のところだけを「角丸」にすることもできます。 border-radiusプロパティは、IEはサポートしていないためjQueryを使用してクロスブラウザに対応します。jQueryプラグインの「jQuery corner」を使用します。 デモ 4つ全て角丸 【HTML】
CSS3には興味深い様々なプロパティがありますが、これらを勉強するにあたって知っておきたいCSS3の基礎をまとめてみます。 過去の記事に手を加えたものや新たに書いたものなど幅広くまとめてみましたので、ぜひ抑えておいてください。 今回は結構ボリュームもあるので目次を作っています。 1. スタイルシートの構造 CSS3に限ったことではないですが、CSSの構造は下の図のように、セレクタ、プロパティ、値となっています。 もちろんプロパティと値は一対です。CSSといえば、プロパティのイメージが強いですが、セレクタも結構奥が深いです。 CSS3ではセレクタもプロパティも新たに追加されていますので、違いをちゃんと理解しておきましょう。 2. CSS3セレクタ CSSセレクタはスタイルを適用する対象を選択するものです。普段何気なく使っているclassやidなどもセレクタの1つです。 CSS3セレクタはW3
最終更新:2023-02-23 CSS3とは CSS3は、CSS 2.1仕様を核とし、CSS 2.1仕様の機能を追加・改訂するモジュール群です。CSS 2.1ではひとつの巨大な仕様にすべてのモジュールが定義されていましたが、CSS3では仕様を分割し個別のモジュールとして定義するものです。 現在のCSSは、CSS Snapshotで定義されています(2023年時点ではCSS Snapshot 2023でした)。 このページについて このページでは、CSS3の日本語訳を収集していましたが、管理人が興味をなくしてしまったこともあり、このページのメンテナンスを行わないことにしました。かつてのページの様子は、Waybackから見ることができます。 多数のCSSの日本語訳は、triple-underscore氏がWeb 関連仕様 日本語訳で公開していますので、そちらを参照するとよいでしょう。(CSS以
============================ ====== PIE ====== ============================ Mmmmmm, pie. CSS Level 3 brings with it some incredibly powerful styling features. Rounded corners, soft drop shadows, gradient fills, and so on. These are the kinds of elements our designer friends love to use because they make for attractive sites, but are difficult and time-consuming to implement, involving complex spri
NOTE: This script is obsolete. You should use the far superior CSS3PIE instead. CSS3 support for Internet Explorer 6, 7, and 8 What is it? IE-CSS3 is a script to provide Internet Explorer support for some new styles available in the upcoming CSS3 standard. How it works If you're viewing this page in Internet Explorer, some of the elements have been rebuilt by the script in Vector Markup Language (
Sup tooltip Yeah thats how we roll.. ▲ Close HTML5Studio Hey chief, So the idea here is: See cool stuff. Learn how it's done. Use it in your own work. The HTML5 Studio has nine demos that show off some fanciful sides of HTML5, CSS3 and friends. Peek around, look under the covers at the source, and feel free to reuse the code in your own applications and sites. Many samples use experimental HTML5/C
CSS3の「変形・アニメーション関連」のプロパティは面白いですね。これらのプロパティの登場によって、CSSの持つ表現力が「どかーん」と拡大するように感じました。この記事では、WebKit Nightly Buildsでの表示を対象に、 CSS3で新たに定義されたプロパティを色々と使ったサンプルを作ったので、それを紹介したいと思います。 サンプルページは、CSS3のプロパティの練習として作っていたので、 表示の対象はこれらのプロパティを先行実装しているWebKitエンジンのブラウザーの中でも、 描写速度が激的に改善されている開発者向けのWebKit Nightly Buildsになります。 Safari4やGoogle Chromeでも見られますが、アニメーションはスムーズに再生されません。また、HTML5のaudio要素に対応していない場合は音が出力されないようです。非常に高負荷な処理が盛
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く