Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)

69,283 views

Published on

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

Published in: Technology, Business
  • 11月8日、JPタワー(東京・丸の内)で開催されたCREATE NOW / PLUS ONE DAYの「画像をなるべく使わずにWebをレイアウトするテクニック」セッションのスライドです。
    http://adobe-createnow.jp/event
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)

  1. 1. 鷹野雅弘 (スイッチ)
  2. 2. 近いところで、複眼をつかってさまざまな角度から注意深く見る
  3. 3. 高いところから俯瞰(ふかん)する目のこと
  4. 4. 水の流れや潮の満ち干、つまり、世の中の流れを敏感に感じる目 ち干、つまり、世の中の流れを敏感に感じる目
  5. 5. Nexus 4 Samsung Galaxy S IV Nexus 7 HTC One Samsung Galaxy Note II
  6. 6. #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;bac ! background:-webkit-gradient(linear, 100% 0%, 100% 100% ! box-shadow:1px 2px 2px rgba(0,0,0,0.3), 0px 1px 0px rg } #btn:hover { ! background:-moz-linear-gradient(rgba(34,85,136,0.4), r 20 background:-webkit-gradient(linear, 100% 0%, 100% 100% }
  7. 7. #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;bac ! background:-webkit-gradient(linear, 100% 0%, 100% 100% ! box-shadow:1px 2px 2px rgba(0,0,0,0.3), 0px 1px 0px rg } #btn:hover { ! background:-moz-linear-gradient(rgba(34,85,136,0.4), r 20 background:-webkit-gradient(linear, 100% 0%, 100% 100% }
  8. 8. #box { background: rgba(51,153,204,0.5) }
  9. 9. #box { background: rgba(51,153,204,0.5) }
  10. 10. .角丸長方形_1 { } border-radius: 10px; background-color: rgb( 234, 104, 162 ); position: absolute; left: 270px; top: 194px; width: 142px; height: 142px; z-index: 2;
  11. 11. 画像化
  12. 12. Web Google Fonts Typekit Desktop
  13. 13. ありがとうございました。
  14. 14. ベルサール九段 2013.11.23 ネタ祭り2013 Vol.2 14のショートセッション
  15. 15. http://2843.jp/ books/nabebon/
  16. 16. swwwitch swwwitch takan.masahiro
  17. 17. demo data http://bit.ly/plus1day-takano

×