-
-
Save littlebusters/7d012621d77dde1bcd0a to your computer and use it in GitHub Desktop.
各アプリが出力するCSSプロパティの比較。
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
/* | |
Sketch.appはプロパティのみでクラスなし。 | |
ボックスサイズに関する情報はなく、あくまでスタイリングのプロパティのみ。 | |
そしてなぜか繰り返される同じプロパティ… | |
*/ | |
.sketch { | |
//* Rectangle 1: */ | |
border-radius: 8px; | |
/* Rectangle 1: */ | |
-webkit-transform: rotate(315deg); | |
-moz-transform: rotate(315deg); | |
-ms-transform: rotate(315deg); | |
-o-transform: rotate(315deg); | |
transform: rotate(315deg); | |
/* Rectangle 1: */ | |
-webkit-transform: rotate(315deg); | |
-moz-transform: rotate(315deg); | |
-ms-transform: rotate(315deg); | |
-o-transform: rotate(315deg); | |
transform: rotate(315deg); | |
background: rgba(255,0,0,0.50); | |
border: 2px solid #000000; | |
} | |
/* | |
Fireworksもプロパティのみ。 | |
オブジェクトの再現性が高い感じ。 | |
ただし回転ではなく変形で形を再現している(Fwの内部で変形のプロパティを持っているため) | |
*/ | |
.fireworks-cs6 { | |
background-color:rgba(255,0,0,0.5); | |
width:48px; | |
height:48px; | |
border-color:rgb(0,0,0); | |
border-width:2px; | |
-moz-border-radius:9px; | |
-webkit-border-radius:9px; | |
border-radius:9px; | |
border-style:solid; | |
-moz-transform:matrix(0.71,0.71,-0.71,0.71,0,0); | |
-moz-transform-origin:center; | |
-webkit-transform:matrix(0.71,0.71,-0.71,0.71,0,0); | |
-webkit-transform-origin:center; | |
-o-transform:matrix(0.71,0.71,-0.71,0.71,0,0); | |
-o-transform-origin:center; | |
-ms-transform:matrix(0.71,0.71,-0.71,0.71,0,0); | |
-ms-transform-origin:center; | |
transform:matrix(0.71,0.71,-0.71,0.71,0,0); | |
transform-origin:center; | |
-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0.71,M21=0.71,M12=-0.71,M22=0.71,SizingMethod='auto expand')"; | |
filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.71,M21=0.71,M12=-0.71,M22=0.71,SizingMethod='auto expand'); | |
} | |
/* | |
Photoshopはクラスあり。 | |
位置情報などカンバスを完全に再現する方向。 | |
border-radiusや回転の情報が取れていない。 | |
*/ | |
.photoshop-cc { | |
border-width: 2px; | |
border-color: rgb( 0, 0, 0 ); | |
border-style: solid; | |
background-color: rgb( 255, 0, 0 ); | |
position: absolute; | |
left: 15px; | |
top: 148px; | |
width: 62px; | |
height: 62px; | |
z-index: 2; | |
} | |
/* | |
Illustratorはクラスあり。 | |
ただし矩形に効果→スタイライズ→角丸では、border-radiusが書き出されないため、 | |
角丸矩形でオブジェクトを作成する必要あり。 | |
回転の情報が取れていない。 | |
*/ | |
.illustrator-cc | |
{ | |
background : #FF0000; | |
background : rgba(255, 0, 0, 1); | |
border-style : Solid; | |
border-color : #000000; | |
border-color : rgba(0, 0, 0, 1); | |
border-width : 2px; | |
border-radius : 11px 0px / 11px; | |
-moz-border-radius : 11px 0px / 11px; | |
-webkit-border-radius : 11px 0px / 11px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment