08.06.11:
'postit-note' how I built this css3 'box' with {border, shadow, background color:
the 'in-line style' is used to create this box { view the code with rotate attribute }
*<style="box-shadow:5px 5px 5px rgba(20, 126, 0, 0.8); font-size:14px; background-color:lightyellow; border:2px solid gray; border-radius:10px; margin-left:2px; padding:5px; width:440px ">
musical eighth note: ♪ = ♪
musical single bar note: ♫ = ♫
musical double bar note: ♬ = ♬
musical flat note: ♭ = ♭
musical natural note: ♮ = ♮
musical sharp note: ♯ = ♯
You can copy the bxx; (ampersand, pound, 4 digit numbar, semi-colon) from here, But, if you copy the code from 'page source' you will have to change the amp (&) 'code' to an actual single character Ampersand .
characters by Ron at answers.yahoo - [code] by Landis.
[code string] ♩ ♪ ♫ ♬ ...... ♩&# 9834;&# 9835;&# 9836; [/code string]
renders this
...... ♬ ♫ ♪ ♩ ...... ♩ ♪ ♫ ♬ ......
or
...... ♩ ♪ ♫ ♬ ....... ♬ ♫ ♪ ♩ ......
also see my 'post-it-note' 01 with rotation or my Special Character html, hex, unicod encoding page
the code for the above <hr> as defined in my css stylesheet
hr.hg { height:3px; border-width:1px; color:rgba(32,32,32,0.7); background-color:rgba(200,200,200,0.7); }
to use as inline style drop { } insert in <hr style=" -code- " > *see css hr
{ ☡ show / hide 'Post-it' code }
this is the <stylesheet> or <head> 'long form' of my 'box' element
Rotation-Selectors are 'rem'd' (remarked, commented out) because the code to 'workaround' the rotation in ie (internet explorer), early firefox and mac safari,,, Sucks!
the code for above, dotted '<hr>' defined with style:
<hr style="height:1px; border-width:1px; color:gray; border-bottom-style:dotted; border-top-style:none;" / >
<style type="text/css"> *see css hr
div.postit-yellow {
/* this works great, but... inserting onto a table or 'cell' shifts other things. Need to try puting on top of page and specifing location with margin properties.. another day. 08.06.11 - Landis */
width:280px;
padding:0px;
border:2px solid gray;
border-radius:10px;
/* margin:60px; /* changes position relative to where it's inserted, Nope, puts a border or 'margin' on all 4 sides. need to use margin-right etc */
margin-left:10px;
/* margin-top Minus 100px is an attempt to 'move' the box outside of the td it's in */
margin-top:-100px;
/* margin-top Minus,,, Yep... It works, cool ! Landis */
background-color:yellow;
/* rotation-point:50% 50%; /*as of 08.06.11, not yet supported */
/* rotation:45deg; /*as of 08.06.11, not yet supported */
/* transform:rotate(30deg); /*might not be supported yet either, 08.06.11 */
/* Rotation, for now, this is how (08.06.11) */
transform:rotate(20deg);
-ms-transform:rotate(10deg); /* IE 9 */ /*Does NOT work on any ie bellow 9.. ie and ms suck! */
/* Minus Rotation - this is an atempt to see if a Negitive Rotation works or does it only work 'clock-wise' ie -10 would be 350deg */
/* Yes, again, cool. Minus (-10deg) works... */
-moz-transform:rotate(-10deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
/* Rotation, for now.. Freaking Works... Cool - 08.06.11 Landis (got this from w3schools.com */
}
hr.sharpie {
width:90%;
background-color:black;
border:2px solid gray;
/* border-color:gray; /* will use 'grey' , but seems to like 'gray' with an A - Actually this is Not even Used - *see above border */
border-radius:25px;
height:5px;
}
</style>