バブル吹き出し実験
| | |
WillMayo.com » Blog Archive » CSS Speech Bubbles
吹き出しライブラリを使ってみました。下のボタンの適用で角丸の「吹き出し」になります。
ugo.nakawaka2007-12-08
うまくいったかなぁ
おおおおおおおお
いろいろいろいろ
艶やかに表現
| effect , javascript | |
上の画像をクリックするエフェクトがかかります。
ライブラリ
glossy.js (with IE 6/7 support)
商用目的でなければ使っていいようです。
cssnoteはcssとかhtmlとかjavascriptを扱うので、もうちょっとかっこいいcssをめざすぞ
| 雑記 | |
cssnoteはcssとかhtmlとかjavascriptを扱うので、もうちょっとかっこいいcssをめざすぞ！！
なので、しばらくいろいろ実験して行く予定。
表示したり消したり
| javascript | |
コメント入力欄を表示/非表示切り替えられるようにした - Blog::R.1000Leaf
表示したり消したりします。
僕なりに改造。
idに識別子を入れるようにしてみた。
<div id="id20071206" style="display:none;">
ここが消えたり表示されたりします。
</div>
<a href="javascript:showform('id20071206')">
リンク
</a>
<script type="text/javascript">
<!--
function showform(id){
var t = document.getElementById(id).style;
if(t.display=='none'){
t.display='block';
return
}
t.display='none';
}
-->
</script>
color chart
| html | |
original
Mandarin Design Daily:The MEG Blog
| 000000 | 330000 | 660000 | 990000 | CC0000 | FF0000 |
| 003300 | 333300 | 663300 | 993300 | CC3300 | FF3300 |
| 006600 | 336600 | 666600 | 996600 | CC6600 | FF6600 |
| 009900 | 339900 | 669900 | 999900 | CC9900 | FF9900 |
| 00CC00 | 33CC00 | 66CC00 | 99CC00 | CCCC00 | FFCC00 |
| 00FF00 | 33FF00 | 66FF00 | 99FF00 | CCFF00 | FFFF00 |
| 00FF33 | 33FF33 | 66FF33 | 99FF33 | CCFF33 | FFFF33 |
| 00FF66 | 33FF66 | 66FF66 | 99FF66 | CCFF66 | FFFF66 |
| 00FF99 | 33FF99 | 66FF99 | 99FF99 | CCFF99 | FFFF99 |
| 00FFCC | 33FFCC | 66FFCC | 99FFCC | CCFFCC | FFFFCC |
| 00FFFF | 33FFFF | 66FFFF | 99FFFF | CCFFFF | FFFFFF |
| 000000 | 003300 | 006600 | 009900 | 00CC00 | 00FF00 |
| 000033 | 003333 | 006633 | 009933 | 00CC33 | 00FF33 |
| 000066 | 003366 | 006666 | 009966 | 00CC66 | 00FF66 |
| 000099 | 003399 | 006699 | 009999 | 00CC99 | 00FF99 |
| 0000CC | 0033CC | 0066CC | 0099CC | 00CCCC | 00FFCC |
| 0000FF | 0033FF | 0066FF | 0099FF | 00CCFF | 00FFFF |
| 3300FF | 3333FF | 3366FF | 3399FF | 33CCFF | 33FFFF |
| 6600FF | 6633FF | 6666FF | 6699FF | 66CCFF | 66FFFF |
| 9900FF | 9933FF | 9966FF | 9999FF | 99CCFF | 99FFFF |
| CC00FF | CC33FF | CC66FF | CC99FF | CCCCFF | CCFFFF |
| FF00FF | FF33FF | FF66FF | FF99FF | FFCCFF | FFFFFF |
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
| FF0000 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
| 000000 | 333333 | 666666 | 999999 | CCCCCC | FFFFFF |
bloggerのnavbarを表示させない。
| blogger , css , jquery | |
bloggerのnavbarを表示させない方法です。
参考
Blogger Beta Tips: NavBarの隠す方法（続き）
上記の参考サイトから
#navbar #Navbar1 iframe{
height:0px;
display:none;
visibility:hidden;
}
何やら、Navbar1にたいして見せないとすればいい感じです。
それで、jqueryを使用して、みつけだしてhiddenにしてみます。
コード
<script src="http://deiji.jp/script/jquery-1.2.1.min.js" type="text/javascript"></script>
<script src="http://deiji.jp/script/jquery_iframe.js" type="text/javascript"></script>
<input type="button" name="隠す" value="隠す" onclick="$('#Navbar1').css('display','none');">
ボタンを押すとnavbarが消えます。
(※firefoxで実験しました。他のブラウザは動作不明)
きちんと高さも０にしてあげれば、完全に痕跡なく消せるかもしれませんね。
箇条書きの書式の変更 塗りつぶされた円
| css | |
箇条書きの書式の変更 塗りつぶされた円にするにはcircleではなくdisc
.post ul li {
list-style-type: disc;
}