More Related Content
Similar to What's Sketch.app (20)
What's Sketch.app
- 15. CSSプロパティの取得
15
/* Rectangle 1: */
border-radius: 10px;
-webkit-transform: rotate(330deg);
-moz-transform: rotate(330deg);
-ms-transform: rotate(330deg);
-o-transform: rotate(330deg);
transform: rotate(330deg);
background: #E63615;
border: 1px solid #3C1622;
右クリック or Edit メニューから取得
- 16. CSSプロパティの比較
• 50 × 50px の矩形
• カンバスの左上へ配置
• 1px #000の線
• 黒→白の垂直グラデーション
• デフォルトでできる機能のみを使用
16
- 17. Photoshop CC
17
.rectangle {
border-width: 1px;
border-color: rgb( 0, 0, 0 );
border-style: solid;
background-image: -moz-linear-gradient( 90deg, rgb(255,255,255) 0%, rgb(3,0,0) 100%);
background-image: -webkit-linear-gradient( 90deg, rgb(255,255,255) 0%, rgb(3,0,0) 100%);
background-image: -ms-linear-gradient( 90deg, rgb(255,255,255) 0%, rgb(3,0,0) 100%);
position: absolute;
left: 0px;
top: 0px;
width: 48px;
height: 48px;
z-index: 4;
}
- 18. Illustrator CC
18
.rect
{
background : -moz-linear-gradient(50% 100% 90deg,rgba(255, 255, 255, 1) 0%,rgba(0, 0,
0, 1) 100%);
background : -webkit-linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0,
1) 100%);
background : -webkit-gradient(linear,50% 100% ,50% 0% ,color-stop(0,rgba(255, 255,
255, 1) ),color-stop(1,rgba(0, 0, 0, 1) ));
background : -o-linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1)
100%);
background : -ms-linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1)
100%);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF',
endColorstr='#000000' ,GradientType=0)";
background : linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 100%);
border-style : Solid;
border-color : #000000;
border-color : rgba(0, 0, 0, 1);
border-width : 1px;
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000',endColorstr='#FFFFFF
' , GradientType=0);
}
- 19. Fireworks CS6
19
background-image:-moz-linear-gradient(50% 0% -90deg,rgb(0,0,0)
0%,rgb(255,255,255) 100%);
background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0,
rgb(0,0,0)),color-stop(1, rgb(255,255,255)));
background-image:-webkit-linear-gradient(-90deg,rgb(0,0,0) 0%,rgb(255,255,255)
100%);
background-image:-o-linear-gradient(-90deg,rgb(0,0,0) 0%,rgb(255,255,255) 100%);
background-image:-ms-linear-gradient(-90deg,rgb(0,0,0) 0%,rgb(255,255,255)
100%);
background-image:linear-gradient(180deg,rgb(0,0,0) 0%,rgb(255,255,255) 100%);
width:49px;
height:49px;
border-color:rgb(0,0,0);
border-width:1px;
-moz-border-radius:1px;
-webkit-border-radius:1px;
border-radius:1px;
border-style:solid;
-ms-
filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff000000,endCo
lorstr=#ffffffff,GradientType=0)";
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff000000,endCol
orstr=#ffffffff,GradientType=0);
※コメントオフ
- 20. Sketch.app
20
/* Rectangle 1: */
background-image: -o-linear-gradient(-90deg, #000000 0%, #FFFFFF 100%);
background-image: -moz-linear-gradient(-90deg, #000000 0%, #FFFFFF 100%);
background-image: -webkit-linear-gradient(-90deg, #000000 0%, #FFFFFF 100%);
background-image: -ms-linear-gradient(-90deg, #000000 0%, #FFFFFF 100%);
background-image: linear-gradient(-180deg, #000000 0%, #FFFFFF 100%);
border: 1px solid #000000;
- 55. 得意
• 軽い UI とベクターを活かした、
ラピッドプロトタイピング
• シンプルなグラフィックやパーツ作り
55