taken
код для районов
Код:[dohtml] <link href='http://fonts.googleapis.com/css?family=Sacramento' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'> <style type="text/css"> #shippingme { position:relative; width:500px; height:500px; margin:0 auto 10px; border:0px #aaa solid; padding:10px; } #shippingme .center { width:500px; position:absolute; bottom:20px; } #shipme { width:400px; height:400px; background-image: url(http://4.bp.blogspot.com/-oWSdRkKbL2U/UJKYeUkvuUI/AAAAAAAAEi8/gfYhFt6TxHs/s400/tumblr_mb3edjbAek1rx67wto1_400_large.jpg); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; position:absolute; top:50px; left:60px; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; transition: all 2s ease-in-out; box-shadow: inset 0 0 0 16px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.1); -webkit-box-shadow: inset 0 0 0 16px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.1); -moz-box-shadow: inset 0 0 0 16px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.1); -ms- box-shadow: inset 0 0 0 16px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.1); -o- box-shadow: inset 0 0 0 16px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.1); } #dd1, #dd2, #dd3, #dd4 { width:180px; height:180px; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; position:absolute; top:200px; left:250px; background-color:#888888; background-image: url(http://i59.tinypic.com/2uyk8r7.png); -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; transition: all 2s ease-in-out; /* Ensures that the element is being transformed in the 3d context so that hw acceleration kicks in where appropriate. */ -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity:0; box-shadow: inset 0 0 0 8px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.1); -webkit-box-shadow: inset 0 0 0 8px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.1); -moz-box-shadow: inset 0 0 0 8px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.1); -ms- box-shadow: inset 0 0 0 8px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.1); -o- box-shadow: inset 0 0 0 8px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.1); } #dd1 { -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; -ms-transition-delay: 0.1s; transition-delay: 0.1s; } #dd2 { -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s; } #dd3 { -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; -o-transition-delay: 0.3s; -ms-transition-delay: 0.3s; transition-delay: 0.3s; } #dd4 { -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -o-transition-delay: 0.4s; -ms-transition-delay: 0.4s; transition-delay: 0.4s; } #shippingme:hover #shipme { opacity:.8; -ms-transform: scale(.5); /* IE 9 */ -webkit-transform: scale(.5); /* Chrome, Safari, Opera */ transform: scale(.5); /* Standard syntax */ } #shippingme:hover #dd1, #shippingme.hover_effect #dd1 { -webkit-transform: translate(-250px,-178px); -moz-transform: translate(-250px,-178px); -o-transform: translate(-250px,-178px); -ms-transform: translate(-250px,-178px); transform: translate(-250px,-178px); opacity: 1; } #shippingme:hover #dd2, #shippingme.hover_effect #dd2 { -webkit-transform: translate(90px,-178px); -moz-transform: translate(90px,-178px); -o-transform: translate(90px,-178px); -ms-transform: translate(90px,-178px); transform: translate(90px,-178px); opacity: 1; } #shippingme:hover #dd3, #shippingme.hover_effect #dd3 { -webkit-transform: translate(-250px,90px); -moz-transform: translate(-250px,90px); -o-transform: translate(-250px,90px); -ms-transform: translate(-250px,90px); transform: translate(-250px,90px); opacity: 1; } #shippingme:hover #dd4, #shippingme.hover_effect #dd4 { -webkit-transform: translate(95px, 90px); -moz-transform: translate(95px, 90px); -o-transform: translate(95px, 90px); -ms-transform: translate(95px, 90px); transform: translate(95px, 90px); opacity: 1; } .yourstuffback { width:142px; height:142px; background-color:rgba(255,255,255,.8); padding:10px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%;-o-border-radius: 50%;-ms-border-radius: 50%;position:relative; top:9px; left:0px } .yourstuff { width:102px; padding-right:10px; height:105px; text-align:justify; overflow:auto; color: #222; font-family: arial; font-size:10px; line-height:95%;position:relative; top:18px; left:5px; } </style> <center> <div id="shippingme"> <div id="shipme"><div style="font-family: sacramento; font-size: 48px; text-transform: lowercase; color: #fff; text-shadow: -1px -1px 0 rgba(44,44,44,.8), 1px -1px 0 rgba(44,44,44,.8),-1px 1px 0 rgba(44,44,44,.8),1px 1px 0 rgba(44,44,44,.8); position:relative; top:200px;">character name</div> <div style="width:200px; height:15px; font-family: open sans condensed; text-transform: uppercase; font-size: 12px; letter-spacing: 1px; background-color: rgba(44,44,44,.7); line-height:15px; color: rgba(255,255,255,.8);position: relative; top:210px;">group - age - playby</div></div> <div id="dd1"><div class="yourstuffback"> <div class="yourstuff">Your character is a boss and this is where you get to talk all about their amazingness. Have fun. Your character is a boss and this is where you get to talk all about their amazingness. Have fun. Your character is a boss and this is where you get to talk all about their amazingness. Have fun. </div> </div> </div> <div id="dd2"><div class="yourstuffback"> <div class="yourstuff">Characters need friends of all shapes and sizes. Talk about those bad boys here. Characters need friends of all shapes and sizes. Talk about those bad boys here.</div> </div></div> <div id="dd3"><div class="yourstuffback"> <div class="yourstuff">Everyone has haters Everyone has people they can't stand. Talk about all that fun stuff here. Everyone has haters Everyone has people they can't stand. Talk about all that fun stuff here. Everyone has haters Everyone has people they can't stand. Talk about all that fun stuff here. </div> </div></div> <div id="dd4"><div class="yourstuffback"> <div class="yourstuff">All you need is love[s]rs[/s]. All of that stuff goes here. </div> </div></div> </div> </center> [/dohtml]