対応ブラウザ： IE6.0 / NN7.0 / Mozilla / FF / Opera8 / 他は知らん
今日紹介するサンプルは恐らく一生使うことの無い、何の役にも立たない、どうしようもない、CSSを使ったサンプルです。
その名も「ドット絵CSS」
CSSのみでドット絵を描く事が出来る一見優れものような気がするサンプルです。
本当は何の役にも立たないゴミです。
作った画像を保存できないなんて当たり前。
自分でPrintScreenしてください。
一度描いたら修正不可！男なら一発勝負です。
操作性？レスポンス？そんなの知りません。
ってぐらい使えないものです。
あえてCSSのみでやる所にロマンを感じてください。
サーバーに負担が掛かるのでサンプルはダウンロードしてローカルで試してください。
アップロード前にウイルスチェック済みですが、念のためダンロード後ウイルスチェックをする事をお勧めします。
ソース見れば分かります。visitedの色を変えてるだけです。
対応ブラウザ： IE6.0 / NN7.0 / Mozilla / FF / Opera8 / 他は知らん
ツッコミいただいたのでpタグをspanタグに直しました。
改めてDTDでの要素の定義をみたらAタグの中にブロック要素は入れたら駄目となってました。
ありがとうございました。
spanタグにしたのでスタイルはずした時用にbrタグを書いてdisplay:none;で内消しときました。
適当にbrタグにスタイル掛けてみたんですが、brタグってスタイル効くんですね。
普段あんまし使う事ないと思うけど。
手抜きサンプルの日でちょこっと紹介したCSSのhoverを使って遊んでたやつです。
リンクって「link visited hover active」をきちんと定義しないといけなかったような、どうでも良かったような。
例によって適当に書いてる所もあるので、ある程度は脳内補完してください。
対応ブラウザ： IE6.0
思いつきで作ってみました。
AAを使ったチャットです。互換性とか考えずに取り合えず適当に形だけ作っただけなので、IE6にしか対応してません。
説明するより触ってみた方が分かりやすいと思うので、サンプルで遊んでみてください。
久しぶりの更新ですが、ずーっとこれ作ってた･･･というわけではなく、ただ単に怠けてました。
さてさてブログをはじめて一ヶ月たちました。
飽きやすいのでそろそろ更新がストップするような予感です。
最近はCSSのみで動く小ネタばかり考えてます。
（適当に作っただけなので動きはするけど中身が適当です。）
そのうちまとめます。
対応ブラウザ： IE6.0 / 他未確認
FLASHに頼らないCSSで出来る伸びるグラフで紹介したCSSを利用した簡易アンケートのサンプルを作ってみました。
Ajaxのライブラリは高橋登史朗氏の暫定版Ajax用ライブラリ v037を使用しています。
投票を押したらグラフが伸びます。
通常こういうのは一人一回しか応募できなくするんですが、サンプルなんで何度でも応募出来るようにしています。
適当に作ったので（というかほとんどライブラリがやってくれてる）、今回はソースを載せません。
対応ブラウザ： IE6.0 / IE5.5 / IE5.2Mac / NN7.0 / FF1.0 / Opera8 / Safari
CSSのみで伸びるグラフを実現します。とは言ってもCSSのみでは動的に数値を変更する事は出来ないので、他にサーバーサイドスクリプトと連動させる必要がありますがFlashに頼らず動的にグラフの長さを変更することが出来ます。
アンケートフォームの結果や、ヒットカウンタなどと連動すれば面白いものが出来るかもしれません。
今ココだよ！
はてなのトップページに・・・・もう、涙で前がみえません。
これは見間違えなんでしょうか？何かアクセス解析がうちのサイトとは思えない数字を叩き出してます。
どうやら、ＣＳＳハックネタはウケが良いようなんで、ＣＳＳハック一覧表作ってみました。
途中で眠くて力尽きてます・・・続きはまた今度
(現在随時続きを追加しています。)
複合技CSSハックは一つでもブラウザがバージョンアップすると使えなくなる可能性があります。
また、理論上は可能というだけなので、適用されない場合もあるかもしれません。ご了承ください。
ここまでするぐらいならブラウザ別にCSSを外部読み込みさせた方が良い気もします。
注：全部自分で確認したわけじゃありません。(Mac持ってません)使用する前にご自分の環境で必ず確認してください。
| CSSハック | 対応ブラウザ | 対応ブラウザのみ適用 (color:黒→赤を適用) |
対応ブラウザ以外適用 （color:黒→赤を適用） |
|---|---|---|---|
| 対応ブラウザのみ適用 | 対応ブラウザ以外適用 | ||
| 通常 | CSS対応ブラウザ |
p {
color: #F00;
}
|
|
| スターハック | WinIE4.0〜6.0 MacIE4.0〜5.2 |
* html p {
color: #F00;
}
|
p{
color: #F00;
}
* html p {
color: #000;
} |
| アンダースコアハック | WinIE4.0〜6.0 |
p{
_color: #F00;
}
|
p{
color: #F00;
_color: #000;
}
|
| バックスラッシュハック | MacIE5.0〜5.2 | p {
color: #F00;
/*\*/ color:＃000; /* */
} |
p {
/*\*/ color: #F00; /* */
}
|
| Caioハック | NN4 |
p {
color: #F00;
/*/*/ color: #000;/* */
}
|
p {
/*/*/ color: #F00;/* */
}
|
| ハッシュハック |
WinIE4〜6 MacIE5.0〜5.2 Opera7 Mozilla Firefox |
p{
#color: #F00;
} |
p{
color: #F00;
|
| スター7ハック |
WinIE5.5〜6.0 MacIE5.0〜5.2 Safari |
html*p {
color: #F00;
} |
p {
color: #F00;
}
html * p1 {
color: #000;
} |
| Fbriceインバージョン |
NN4 Opera4〜5 |
p{
/*/*//*/
color:#F00;
/* */
} |
p{
color:#F00;
}
p{
/*/*//*/
color:#000;
/* */
}
|
| :root擬似クラス |
MacIE5.0〜5.2 Mozilla FireFox Safari |
:root p{
color:#F00;
}
|
p{
color:#F00;
}
:root p{
color:#000;
}
|
| xmlns属性 |
Mozilla FireFox Opera7.5〜 Safari |
html[xmls] p{
color:#f00;
}
|
p{
color:#F00;
}
html[xmls] p{
color:#000;
}
|
|
名称不明 （プロパティ名の前に全角スペース） |
WinIE4〜6 WinOpera8 |
p{
color:#f00;
}
|
p{
color:#F00;
}
p{
color:#000;
}
|
|
複合CSSハック スターハック スター7ハック |
Safari |
html*p {
color: #F00;
}
* html p {
color: #000;
}
|
p {
color: #F00;
}
html*p {
color: #000;
}
* html p {
color: #F00;
}
|
この広告は90日以上新しい記事の投稿がないブログに表示されております。
