Who doesn’t love magnetic letters on a fridge kostenlose spiele herunterladen kartenspiele?
I saw something like that a while ago, and tried to replicate the same effects in my own, messy way. It was a good occasion to test the css3 rotate property google chrome voor windows 7en.
The demo
It’s here: http://media.dkpn.jp/css/20110112-magnetletters/
It has been tested with Firefox, Safari and Chrome on Mac OSX documents mac. It is still a work in progress: characters are–almost–monospaced for now. Colors and rotations are randomized everytime the page is refreshed.
The CSS
I used some extra rules for the layout, but the actually involved CSS part is quite short download netflix movies does not work.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | @font-face { font-family: LeagueGothic; src: url(‘../fonts/LeagueGothic.otf’); } #whiteboard { background: url(../images/whiteboard1.jpg) no-repeat 50% 50%; margin-top:40px; padding-top:120px; height:365px;} .magnet { font-family: ‘LeagueGothic’, arial, serif; margin:0; margin-left:10px; margin-right:10px; text-transform: uppercase; font-size:80px; display: block; text-align: center; min-height:100px; position: relative; margin:0 auto; } /* letters colors */ .mPiece {color:#000;} .col0 {color: #009fff;} .col1 {color: #ff3c00;} .col2 {color: #b83823;} .col0 { ‑moz-text-shadow: 0 1px 0 #165981; ‑webkit-text-shadow: 0 1px 0 #165981; ‑o-text-shadow: 0 1px 0 #165981; text-shadow: 0 1px 0 #165981;} .col1 { ‑moz-text-shadow: 0 1px 0 #722812; ‑webkit-text-shadow: 0 1px 0 #722812; ‑o-text-shadow: 0 1px 0 #722812; text-shadow: 0 1px 0 #722812;} .col2 {-moz-text-shadow: 0 1px 0 #751f0e; ‑webkit-text-shadow: 0 1px 0 #751f0e; ‑o-text-shadow: 0 1px 0 #751f0e; text-shadow: 0 1px 0 #751f0e;} |
The Javascript
The lazy, Jquery way:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | $(document).ready( function(){ $(‘.magnet’).each(function() { var mString = $(this).html(); var mLength = mString.length; $(this).empty(); for (i=0;i<mLength;i++) { var randomColor = Math.floor(Math.random()*3) var randomDeg = Math.floor(Math.random()*11)-5; var posX = i*30; if (mString[i] == “m” || mString[i] == “M”) { posX -= 5; }; var mAngle = ”; mAngle += ‘-webkit-transform: rotate(‘+randomDeg+‘deg); ‘; mAngle += ‘-moz-transform: rotate(‘+randomDeg+‘deg); ‘; mAngle += ‘transform: rotate(‘+randomDeg+‘deg); ‘; mAngle += ‘position: absolute; ‘; mAngle += ‘left:’+posX+‘px; ‘; $(this).append(‘<span class=“mPiece col’+randomColor+’ ” style=“ ‘+mAngle+’ ”>’+mString[i]+’</span>’); }; charW = posX+30; $(this).width(charW); }); }); |
I used the font League Gothic, from The League of Moveable Type, that we seems to see a lot these days :) , and which doesn’t work bad in this case ts3 download chip 64 bit deutsch kostenlos.
I am sure the code could be optimized (not even talking about features like tracking or multiple lines), and any remark/suggestion is of course welcome.. herunterladen.