枠付きグラデで四角い角を丸くする - Nifty++

丸角を作って1ドットの枠線だけじゃ物足りないということで改良した。

Nifty++ サンプル

• 片方だけ丸くすることが可能に。
• 枠の太さを調節可能に。ブラウザが持つ限りどこまでも。
• グラデーションを付けられるようにした。
• 内部の要素に同じ背景色と枠線を付加させたりとか

サンプルページ下部の橙色のところにマウス乗せてホイール回せば枠線が増える。キモいぐらいに。

グラデも搭載。思いっきり手抜きな実装してるにもかかわらずそれなりに見える。

あとは一々枠線や背景色設置するの激しくめどー、なのでそれなりに一括で付けられるように。

で、作ってて思ったんだが、JavaScriptでスタイル再設定とかするのは正直よろしくねーなー、と。

基本的にDOMを扱うので実際に動くのはページの読み込みが完了した後。つまり、一瞬でも設定されてない状態が表示されてから設定されることが多発するわけで、その瞬間がどーしても嫌だなーとか思うわけですよ。

まあ、内部的にはそこまでメンドイことしてないんで直接CSSに書き込んだりしてもいいとは思うが・・・それはそれでローカルソースに内容に関係ない要素一杯とかでなんかムカつくのぅ。

となると・・・やっぱりPHPあたりで生成するのが一番なのかもしれんなーとか思ったり。もしくはCSS3が標準装備されて背景画像が複数設定可能になればみんな幸せになれるんだが、一体何年後になるんだ？

Info

投稿日

2006年1月20日

タグ

css、javascript

このエントリの固定リンク

http://diary/log/1299.html

ブックマークに追加する

コメント

コメントを投稿する

2006
0120

Tagscssjavascript

⇧

JavaScriptで枠付き丸角をつける

Nifty Cornersを見た後、これ利用すれば枠付きもいけるんでね？　というわけで作ってみた。

サンプル

中のpaddingとかmarginとかに左右されるんで、スクリプト設置してすぐに丸角ってわけにはいかないのね。

そこらへんを解消しようと思ったが、スクリプトでさらにスタイル設定したり消したりする必要があるんで、なんか面倒になったんでやめた。がんばれば枠の太さも設定できそうだがさらにめどい。

そこまでする必要がこの枠付き丸角にあるんかね？　と思ったが、CSS2だか3の丸角が結構汚いんで作る価値はあるかもしれん。

そういや作ってる時に思ったんだが、丸角になると1ドットにこだわりたくなるのは何故なんだろう？　いや、美しい曲線を描くには1ドットのズレも許されないわけなんだが、ちょいと色変えてグラデかませばいいじゃんとか思いつつも単色で曲線。むぅ・・・

Info

投稿日

2006年1月17日

タグ

css、javascript

このエントリの固定リンク

http://diary/log/1297.html

ブックマークに追加する

コメント

コメントを投稿する

2006
0117

Tagscssjavascript

⇧

textareaでタブ入力

ここまで書いといてなんだが、textarea走査して頭にタブ入れてコピペで使い回せばいーじゃん、というのが後で浮かんだ。

var ta = document.getElementsByTagName( "textarea" );
for( var i in ta ) {
    ta[i].onselect = ta[i].onclick = ta[i].onkeyup = storeCaret;
    ta[i].onkeydown = keypress;
}
function storeCaret( ) {
    if( this.createTextRange )
        this.caretPos = document.selection.createRange( ).duplicate( );
    else if( this.selectionStart )
        this.caretPos = this.selectionStart;
    else
        this.caretPos = 0;
}
function keypress( e ) {
    e = ( window.event ) ? window.event : e;
    if( e.keyCode == 9 ) {
        insertAtCaret( this, "\t" );
        e.preventDefault( );
        this.focus( );
        return false;
    }
}
function insertAtCaret( tarea, text ) {
    if( tarea.createTextRange && tarea.caretPos ) {
        tarea.caretPos.text =
        ( tarea.caretPos.text.charAt( tarea.caretPos.text.length - 1) == ' ' )
            ? text + ' ' : text;
    }
    else if( tarea.selectionStart && tarea.caretPos ) {
        tarea.value = tarea.value.substr( 0, tarea.caretPos )
                    + text
                    + tarea.value.substr( tarea.caretPos );
    }
    else {
        tarea.value = text + tarea.value;
    }
}

どっか海外の掲示板からコード拝借したんだが場所忘れた。

Info

投稿日

2006年1月7日

タグ

javascript

このエントリの固定リンク

http://diary/log/1284.html

ブックマークに追加する

コメント

コメントを投稿する

2006
0107

Tagsjavascript

⇧