2005年10月26日

[ネタ]CSSのみでドット絵

dotcat.gif

対応ブラウザ: IE6.0 / NN7.0 / Mozilla / FF / Opera8 / 他は知らん

今日紹介するサンプルは恐らく一生使うことの無い、何の役にも立たない、どうしようもない、CSSを使ったサンプルです。
その名も「ドット絵CSS」
CSSのみでドット絵を描く事が出来る一見優れものような気がするサンプルです。
本当は何の役にも立たないゴミです。
作った画像を保存できないなんて当たり前。
自分でPrintScreenしてください。
一度描いたら修正不可!男なら一発勝負です。
操作性?レスポンス?そんなの知りません。
ってぐらい使えないものです。
あえてCSSのみでやる所にロマンを感じてください。
サーバーに負担が掛かるのでサンプルはダウンロードしてローカルで試してください。

サンプル

アップロード前にウイルスチェック済みですが、念のためダンロード後ウイルスチェックをする事をお勧めします。

解説

ソース見れば分かります。visitedの色を変えてるだけです。

posted by 高速内弁慶 at 23:17| Comment(0) | TrackBack(0) | CSS | このブログの読者になる | 更新情報をチェックする

2005年10月24日

CSSのみで折りたたみナビゲーションっぽいリンク


対応ブラウザ: IE6.0 / NN7.0 / Mozilla / FF / Opera8 / 他は知らん

ツッコミいただいたのでpタグをspanタグに直しました。
改めてDTDでの要素の定義をみたらAタグの中にブロック要素は入れたら駄目となってました。
ありがとうございました。
spanタグにしたのでスタイルはずした時用にbrタグを書いてdisplay:none;で内消しときました。
適当にbrタグにスタイル掛けてみたんですが、brタグってスタイル効くんですね。
普段あんまし使う事ないと思うけど。


手抜きサンプルの日でちょこっと紹介したCSSのhoverを使って遊んでたやつです。
リンクって「link visited hover active」をきちんと定義しないといけなかったような、どうでも良かったような。
例によって適当に書いてる所もあるので、ある程度は脳内補完してください。

サンプル

スタイルなし


CSS適用

続きを読む
posted by 高速内弁慶 at 23:27| Comment(66) | TrackBack(1) | CSS | このブログの読者になる | 更新情報をチェックする

2005年10月23日

アスキーアートでチャット(AAchat)

aachat.gif

対応ブラウザ: IE6.0

思いつきで作ってみました。
AAを使ったチャットです。互換性とか考えずに取り合えず適当に形だけ作っただけなので、IE6にしか対応してません。
説明するより触ってみた方が分かりやすいと思うので、サンプルで遊んでみてください。 久しぶりの更新ですが、ずーっとこれ作ってた・・・というわけではなく、ただ単に怠けてました。

サンプル

AAchat v0.0.1

続きを読む
posted by 高速内弁慶 at 13:47| Comment(11) | TrackBack(2) | PHP | このブログの読者になる | 更新情報をチェックする

2005年10月13日

そうえば今日はStudio8日本語版の発売日でした。

マクロメディアからメールが届いてて気がつきました。
みなさんすでに体験版おとしていますか?
世間ではFlash8が注目されてる昨今ですが、あえて今回はそこには触れません。
Fireworks8について触れておきます。
とりあえず体験版を触ってみた感じでは、オブジェクト毎にロック出来るようになっています!
イラストレーター使いの方から見たら当たり前の事でしょうが、Fireworks MX2004はレイヤー単位でしかロック出来ませんでした。
Fireworks信者としてはこれはうれしい!
他には、また約にたたなそうなフィルタやらなんやらが追加されてて、未だにグループ化した中身がレイヤーウィンドウから操作出来ません。
次回に期待です。

Studio 8 トライアルダウンロード
posted by 高速内弁慶 at 23:02| Comment(1) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

手抜きサンプルの日

さてさてブログをはじめて一ヶ月たちました。
飽きやすいのでそろそろ更新がストップするような予感です。
最近はCSSのみで動く小ネタばかり考えてます。
(適当に作っただけなので動きはするけど中身が適当です。)
そのうちまとめます。

posted by 高速内弁慶 at 22:20| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

2005年10月10日

Ajaxで伸びるグラフアンケート

対応ブラウザ: IE6.0 / 他未確認

FLASHに頼らないCSSで出来る伸びるグラフで紹介したCSSを利用した簡易アンケートのサンプルを作ってみました。
Ajaxのライブラリは高橋登史朗氏の暫定版Ajax用ライブラリ v037を使用しています。
投票を押したらグラフが伸びます。
通常こういうのは一人一回しか応募できなくするんですが、サンプルなんで何度でも応募出来るようにしています。
適当に作ったので(というかほとんどライブラリがやってくれてる)、今回はソースを載せません。

posted by 高速内弁慶 at 18:46| Comment(2) | TrackBack(0) | Ajax | このブログの読者になる | 更新情報をチェックする

2005年10月06日

FLASHに頼らないCSSで出来る伸びるグラフ

対応ブラウザ: IE6.0 / IE5.5 / IE5.2Mac / NN7.0 / FF1.0 / Opera8 / Safari

CSSのみで伸びるグラフを実現します。とは言ってもCSSのみでは動的に数値を変更する事は出来ないので、他にサーバーサイドスクリプトと連動させる必要がありますがFlashに頼らず動的にグラフの長さを変更することが出来ます。
アンケートフォームの結果や、ヒットカウンタなどと連動すれば面白いものが出来るかもしれません。


サンプル

今ココだよ!

続きを読む
posted by 高速内弁慶 at 18:30| Comment(223) | TrackBack(1) | CSS | このブログの読者になる | 更新情報をチェックする

Mozilla FirefoxではWEB上からローカル画像が参照出来ない!?

お蔭様で謎が解けました。続きを読む
posted by 高速内弁慶 at 00:56| Comment(10) | TrackBack(1) | 日記 | このブログの読者になる | 更新情報をチェックする

2005年10月04日

はてなブックマークのちから

hatenabookmark.gif

はてなのトップページに・・・・もう、涙で前がみえません。
これは見間違えなんでしょうか?何かアクセス解析がうちのサイトとは思えない数字を叩き出してます。

posted by 高速内弁慶 at 23:42| Comment(25) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

ブラウザ別CSSハック一覧表

どうやら、CSSハックネタはウケが良いようなんで、CSSハック一覧表作ってみました。
途中で眠くて力尽きてます・・・続きはまた今度 (現在随時続きを追加しています。)

2005年10月現在使用可能CSSハック

複合技CSSハックは一つでもブラウザがバージョンアップすると使えなくなる可能性があります。
また、理論上は可能というだけなので、適用されない場合もあるかもしれません。ご了承ください。
ここまでするぐらいならブラウザ別にCSSを外部読み込みさせた方が良い気もします。
注:全部自分で確認したわけじゃありません。(Mac持ってません)使用する前にご自分の環境で必ず確認してください。

用途別CSSハック一覧表
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;
#color: #000; }
スター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;
}
続きを読む
posted by 高速内弁慶 at 00:26| Comment(125) | TrackBack(258) | CSS | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。