「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野...

Preview:

DESCRIPTION

2013年11月8日、JPタワー(東京・丸の内)で開催されたCREATE NOW / PLUS ONE DAYの「画像をなるべく使わずにWebをレイアウトするテクニック」セッションのスライドです。 http://adobe-createnow.jp/event

Citation preview

鷹野雅弘(スイッチ)

近いところで、複眼をつかってさまざまな角度から注意深く見る

高いところから俯瞰(ふかん)する目のこと

水の流れや潮の満ち干、つまり、世の中の流れを敏感に感じる目水の流れや潮の満ち干、つまり、世の中の流れを敏感に感じる目

Samsung GalaxyS IV

Nexus 7

Samsung GalaxyNote II

Nexus 4

HTC One

#btn {! display:block;! width:300px;! font-size:28px;! font-weight:bold;! text-align:center;! line-height:2em;! height:2em;! text-decoration:none;! border:1px solid #225588;! color:#ffffff;! background:#337fcc;! border-radius:5px;! text-shadow:0 -2px 0px #225588, 0 -2px 0px #225588;background:-moz-linear-gradient(rgba(34,85,136,0.5), rgba(34,85,136,1));! background:-webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(34,85,136,0.5)), to(rgba(34,85,136,1)));! box-shadow:1px 2px 2px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.5) inset, 0px -1px 0px rgba(255,255,255,0.2) inset;}#btn:hover {! background:-moz-linear-gradient(rgba(34,85,136,0.4), rgba(34,85,136,0.9));20 background:-webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(34,85,136,0.4)), to(rgba(119,170,221,0.9)));}

#btn {! display:block;! width:300px;! font-size:28px;! font-weight:bold;! text-align:center;! line-height:2em;! height:2em;! text-decoration:none;! border:1px solid #225588;! color:#ffffff;! background:#337fcc;! border-radius:5px;! text-shadow:0 -2px 0px #225588, 0 -2px 0px #225588;background:-moz-linear-gradient(rgba(34,85,136,0.5), rgba(34,85,136,1));! background:-webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(34,85,136,0.5)), to(rgba(34,85,136,1)));! box-shadow:1px 2px 2px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.5) inset, 0px -1px 0px rgba(255,255,255,0.2) inset;}#btn:hover {! background:-moz-linear-gradient(rgba(34,85,136,0.4), rgba(34,85,136,0.9));20 background:-webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(34,85,136,0.4)), to(rgba(119,170,221,0.9)));}

#box { background: rgba(51,153,204,0.5)}

#box { background: rgba(51,153,204,0.5)}

.角丸長方形_1 { border-radius: 10px; background-color: rgb( 234, 104, 162 ); position: absolute; left: 270px; top: 194px; width: 142px; height: 142px; z-index: 2;}

画像化

Web Desktop

Google Fonts

Typekit

ありがとうございました。

Vol.2ベルサール九段

14のショートセッション

ネタ祭り20132013.11.23

swwwitch

swwwitchtakan.masahiro

http://bit.ly/plus1day-takanodemo data

Recommended