Last active
December 18, 2015 13:19
-
-
Save daiiz/5788817 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <!-- Copyright (C) 2013 daiz --> | |
| <html> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <head> | |
| <style> | |
| body { | |
| font-family: "Meiryo"; | |
| font-size: 28pt; | |
| } | |
| #pnl { | |
| font-size: 11pt; | |
| } | |
| .MMA { | |
| margin-left: -20px; | |
| height: 180px; | |
| width: 490px; | |
| } | |
| .m_1 { | |
| width: 45px; | |
| height: 178px; | |
| margin: 20px; | |
| margin-left: 63px; | |
| position: relative; | |
| -webkit-transform: skewX(-26deg); | |
| -moz-transform: skewX(-26deg); | |
| -ms-transform: skewX(-26deg); | |
| } | |
| .m_2 { | |
| width: 59px; /*61*/ | |
| height: 120px; | |
| margin: 20px; | |
| margin-top: -198px; | |
| margin-left: 109px; | |
| position: relative; | |
| } | |
| .m_3 { | |
| width: 19px; | |
| height: 178px; | |
| margin: 20px; | |
| margin-left: 124px; | |
| margin-top: -140px; | |
| position: relative; | |
| -webkit-transform: skewX(-26deg); | |
| -moz-transform: skewX(-26deg); | |
| -ms-transform: skewX(-26deg); | |
| } | |
| .m_4 { | |
| width: 11px; | |
| height: 178px; | |
| margin: 20px; | |
| margin-left: 143px; | |
| margin-top: -198px; | |
| position: relative; | |
| -webkit-transform: skewX(-26deg); | |
| -moz-transform: skewX(-26deg); | |
| -ms-transform: skewX(-26deg); | |
| } | |
| .m_5 { | |
| width: 25px; | |
| height: 178px; | |
| margin: 20px; | |
| margin-left: 153px; | |
| margin-top: -198px; | |
| position: relative; | |
| -webkit-transform: skewX(-26deg); | |
| -moz-transform: skewX(-26deg); | |
| -ms-transform: skewX(-26deg); | |
| } | |
| .m_6 { | |
| width: 11px; | |
| height: 178px; | |
| margin: 20px; | |
| margin-left: 177px; | |
| margin-top: -198px; | |
| position: relative; | |
| -webkit-transform: skewX(-26deg); | |
| -moz-transform: skewX(-26deg); | |
| -ms-transform: skewX(-26deg); | |
| } | |
| .m_7t { | |
| width: 89px; | |
| height: 10px; | |
| margin: 20px; | |
| margin-left: 187px; | |
| margin-top: -198px; | |
| position: relative; | |
| } | |
| .m_7b { | |
| width: 38px; | |
| height: 10px; | |
| margin: 20px; | |
| margin-left: 106px; | |
| margin-top: 158px; | |
| position: relative; | |
| } | |
| .m_8 { | |
| width: 68px; | |
| height: 168px; | |
| margin: 20px; | |
| margin-top: -188px; | |
| margin-left: 197px; | |
| position: relative; | |
| } | |
| .m_9 { | |
| width: 12px; | |
| height: 99px; | |
| margin: 20px; | |
| margin-top: -119px; | |
| margin-left: 187px; | |
| position: relative; | |
| } | |
| .m_11 { | |
| width: 24px; | |
| height: 178px; | |
| margin: 20px; | |
| margin-left: 286px; | |
| margin-top: -198px; | |
| position: relative; | |
| -webkit-transform: skewX(-26deg); | |
| -moz-transform: skewX(-26deg); | |
| -ms-transform: skewX(-26deg); | |
| } | |
| .m_12 { | |
| width: 12px; | |
| height: 90px; | |
| margin: 20px; | |
| margin-top: -189px; | |
| margin-left: 264px; | |
| position: relative; | |
| } | |
| .m_13 { | |
| width: 11px; | |
| height: 99px; | |
| margin: 20px; | |
| margin-left: 295px; | |
| margin-top: -119px; | |
| position: relative; | |
| -webkit-transform: skewX(-26deg); | |
| -moz-transform: skewX(-26deg); | |
| -ms-transform: skewX(-26deg); | |
| } | |
| .m_14 { | |
| width: 10px; | |
| height: 99px; | |
| margin: 20px; | |
| margin-left: 290px; | |
| margin-top: -40px; | |
| position: relative; | |
| -webkit-transform: skewX(-26deg); | |
| -moz-transform: skewX(-26deg); | |
| -ms-transform: skewX(-26deg); | |
| } | |
| .m_15 { | |
| width: 45px; | |
| height: 178px; | |
| margin: 20px; | |
| margin-top: -198px; | |
| margin-left: 330px; | |
| position: relative; | |
| } | |
| .m_16 { | |
| width: 12px; | |
| height: 43px; | |
| margin: 20px; | |
| margin-top: -119px; | |
| margin-left: 319px; | |
| position: relative; | |
| } | |
| .m_17 { | |
| width: 19px; | |
| height: 178px; | |
| margin: 20px; | |
| margin-left: 335px; | |
| margin-top: -142px; | |
| position: relative; | |
| -webkit-transform: skewX(-26deg); | |
| -moz-transform: skewX(-26deg); | |
| -ms-transform: skewX(-26deg); | |
| z-index: 100; | |
| } | |
| .m_18t { | |
| width: 60px; /*70*/ | |
| height: 10px; | |
| margin: 20px; | |
| margin-left: 320px; | |
| margin-top: -198px; | |
| position: relative; | |
| } | |
| .m_18b { | |
| width: 78px; | |
| height: 10px; | |
| margin: 20px; | |
| margin-left: 195px; | |
| margin-top: 158px; | |
| position: relative; | |
| } | |
| .m_19 { | |
| width: 43px; | |
| height: 178px; | |
| margin: 20px; | |
| margin-left: 354px; | |
| margin-top: -198px; | |
| position: relative; | |
| -webkit-transform: skewX(-26deg); | |
| -moz-transform: skewX(-26deg); | |
| -ms-transform: skewX(-26deg); | |
| z-index: 99; | |
| } | |
| .m_20 { | |
| width: 44px; | |
| height: 178px; | |
| margin: 20px; | |
| margin-top: -198px; | |
| margin-left: 398px; | |
| position: relative; | |
| } | |
| .m_21 { | |
| width: 43px; | |
| height: 45px; | |
| margin: 20px; | |
| margin-left: 387px; | |
| margin-top: -65px; | |
| position: relative; | |
| -webkit-transform: skewX(26deg); | |
| -moz-transform: skewX(26deg); | |
| -ms-transform: skewX(26deg); | |
| z-index: 99; | |
| } | |
| .m_22p { | |
| width: 21px; | |
| height: 43px; | |
| margin: 20px; | |
| margin-left: 364px; | |
| margin-top: -63px; | |
| position: relative; | |
| -webkit-transform: skewX(-26deg); | |
| -moz-transform: skewX(-26deg); | |
| -ms-transform: skewX(-26deg); | |
| } | |
| .m_23p { | |
| width: 30px; | |
| height: 31px; | |
| margin: 20px; | |
| margin-top: -150px; | |
| margin-left: 180px; | |
| position: relative; | |
| } | |
| .m_24p { | |
| width: 35px; | |
| height: 35px; | |
| margin: 20px; | |
| margin-top: 0px; | |
| margin-left: 249px; | |
| position: relative; | |
| } | |
| .m_25p { | |
| width: 30px; | |
| height: 31px; | |
| margin: 20px; | |
| margin-top: -106px; | |
| margin-left: 307px; | |
| position: relative; | |
| } | |
| .MMA{-webkit-transform:scale(0.6, 0.6);-moz-transform:scale(0.6, 0.6);-ms-transform:scale(0.6, 0.6);margin-left: -85px;} | |
| .M_left {background: rgb(000,000,000)} | |
| .M_middle_outer {background: rgb(000,000,000)} | |
| .M_middle_inner {background: rgb(256,256,256)} | |
| .A_right {background: rgb(000,000,000)} | |
| .white {background: rgb(256,256,256)} | |
| </style> | |
| <script> | |
| function change_color() { | |
| mleft = document.getElementsByClassName("M_left"); | |
| mo = document.getElementsByClassName("M_middle_outer"); | |
| mi = document.getElementsByClassName("M_middle_inner"); | |
| aright = document.getElementsByClassName("A_right"); | |
| for(i=0; i<mleft.length; i++) { | |
| mleft[i].style.backgroundColor = document.getElementById("m").value; | |
| } | |
| for(i=0; i<mo.length; i++) { | |
| mo[i].style.backgroundColor = document.getElementById("ml").value; | |
| } | |
| for(i=0; i<mi.length; i++) { | |
| mi[i].style.backgroundColor = document.getElementById("mi").value; | |
| } | |
| for(i=0; i<aright.length; i++) { | |
| aright[i].style.backgroundColor = document.getElementById("a").value; | |
| } | |
| } | |
| function ks() { | |
| v = document.getElementById("range").value; | |
| document.getElementById("val").innerHTML = v; | |
| scl = "scale("+ v +", "+ v +")" | |
| document.getElementsByClassName("MMA")[0].style.webkitTransform = scl; | |
| document.getElementsByClassName("MMA")[0].style.marginLeft = eval(v*100) +"px"; | |
| } | |
| </script> | |
| <title>CSS3 MMA Logo</title> | |
| </head> | |
| <body onload=''> | |
| <div id='pnl'> | |
| 1_M:<input type='color' id='m'' value='#000000'><br>2_M:<input type='color' id='mi' value='#ffffff'><br>2_M_線:<input type='color' id='ml'' value='#000000'><br>3_A:<input type='color' id='a'' value='#000000'> | |
| <br><br><button onclick='change_color()'>色を変更</button> | |
| <br> | |
| </div> | |
| <div class='MMA'> | |
| <div class="m_1 M_left"></div> | |
| <div class="m_2 M_left"></div> | |
| <div class="m_3 white"></div> | |
| <div class="m_4 M_middle_outer"></div> | |
| <div class="m_5 M_middle_inner"></div> | |
| <div class="m_6 M_middle_outer"></div> | |
| <div class="m_7t M_middle_outer"></div> | |
| <div class="m_7b M_middle_outer"></div> | |
| <div class="m_8 M_middle_inner"></div> | |
| <div class="m_9 M_middle_outer"></div> | |
| <div class="m_10 M_middlev"></div> | |
| <div class="m_11 M_middle_inner"></div> | |
| <div class="m_12 M_middle_outer"></div> | |
| <div class="m_13 M_middle_outer"></div> | |
| <div class="m_14 M_middle_outer"></div> | |
| <div class="m_15 M_middle_inner"></div> | |
| <div class="m_16 M_middle_outer"></div> | |
| <div class="m_17 white"></div> | |
| <div class="m_18t M_middle_outer"></div> | |
| <div class="m_18b M_middle_outer"></div> | |
| <div class="m_19 A_right"></div> | |
| <div class="m_20 A_right"></div> | |
| <div class="m_21 A_right"></div> | |
| <div class="m_22p white"></div> | |
| <div class="m_23p M_middle_inner"></div> | |
| <div class="m_24p M_middle_inner"></div> | |
| <div class="m_25p M_middle_inner"></div> | |
| </div> | |
| <br> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment