Upgrade to Pro — share decks privately, control downloads, hide ads and more …

2012 web technology by RGBA group

evenwu
January 12, 2013
Technology
140
15k

2012 web technology by RGBA group

RGBA 社群在 2012 年最常被詢問的問題大集合，包含了 重新認識 Web Design、工具軟體、使用 SASS、顏色與形狀、Web 字體、RWD 圖與文、Hi-DPI 設計...

evenwu

January 12, 2013
Tweet

More Decks by evenwu

See All by evenwu
CSS 檔案管理技巧分享
evenwu
138
13k
RWD 一小時就上手
evenwu
107
16k
如何教設計師前端技術
evenwu
46
15k
twitter bootstrap 好用的網頁設計框架
evenwu
93
15k

Other Decks in Technology

See All in Technology
ECテックカンファレンス2023 EC事業部のモバイル開発2023
tatsumi0000
0
340
OCI技術資料 : ロード・バランサー 詳細 / Load Balancer 200
ocise
2
7.2k
ECSコスト削減のブレイクアウトセッションを聴いてきた話 / joining a breakout session on reducing costs with ECS
yayoi_dd
0
140
Hatena Engineer Seminar #23 「チームとプロダクトを育てる Mackerel 開発合宿」
arthur1
0
610
組織に対してSREを適用するとどうなるか
kuniim
9
3k
OCIコンテナサービス関連の技術詳細 /oke-ocir-details
oracle4engineer
PRO
0
780
💰年度末予算消化祭💰 Large Memory Instance で 画像分類してみた
__allllllllez__
0
110
オンプレk8sとEKSの並行運用の実際
ch1aki
0
310
Deep Neural Networkの共同学習
hf149
0
340
創業1年目のスタートアップでAWSコストを抑えるために取り組んでいること / How to Keep AWS Costs Down at a Startup
yuj1osm
3
2.2k
SmartHRからOktaへのSCIM連携で作り出すHRドリブンのアカウント管理
jousysmiler
1
120
NGINXENG JP#2 - 3-NGINX Plus・プロダクトのアップデート
hiropo20
0
250

Featured

See All Featured
The Pragmatic Product Professional
lauravandoore
21
3.5k
4 Signs Your Business is Dying
shpigford
171
20k
How STYLIGHT went responsive
nonsquared
89
4.2k
The Language of Interfaces
destraynor
149
21k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
29
7.9k
Six Lessons from altMBA
skipperchong
15
2.3k
Designing with Data
zakiwarfel
91
4.2k
Why Our Code Smells
bkeepers
PRO
326
55k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
22
1.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
22
1.4k
Code Reviewing Like a Champion
maltzj
508
38k
What’s in a name? Adding method to the madness
productmarketing
12
1.9k

Transcript

  1. 9 2012 ⋧㏧ု⨶᥵⍂ۢݨ &WFO8V

  2. ⱨگ ‣ ۢݨḑ਒ޔ௡ࢢትۢݨḑ㌢ޔ ‣ ӱவዅൖ3(#"ݞ㐘㌉ ‣ ᜥፒ2"ࡻ᨟⼏፭⸽௡ዅʬϫ2"

  3. ƛ &WFO ƛ ⋣㏣⭶⭟ഥ ƛ FWFOEFTJHO༦㉊⭶⭟ ƛ NPCJMF ৠ᳜ፇ௫ 5IF8BMM

    ƛ ⋍᫙3(#"ῢ⏪ "#065.&

  4. ๏ ⋣㏣⭶⭟⑫ፎ ๏ มⵍⵖ⼱ॆ⑫ፎ ๏ ๖⬋ʱᙖ˯ ๏ ṕխ̙ஂ።ƫᚖ⼞ʱƬ▐⻇㡛 ๏ IUUQSHCBUX

  5. 3(#"ݞ⼵ḕ ⮿ⱟ8FC%FTJHO Αᴣ4$44 㐟◠▒෺᭵ 8FCୗ㕸 38%࢘▒ቕ )J%1*⭺⭣

  6. ͸ྰ⮪ だተ⮿ⱟ8FC%FTJHO

  7. 1024 x 768

  8. None

  9. ᵑഌ

  10. Ղᬝ

  11. ̩஻᨟छῂЦʬϫ⋣⃳ڒ 0,⇄ޢ ʪ൘บՁ㋩⌄ ͹⒀⼱3FTQPOTJWF%FTJHO޹㡮 བྷ˯࿝ḑ࢘▎Ꮜᕀ⾱⬋ぜΙ˯

  12. ݞ㐜ࢢܛ⪚㡳 ✓ ⬙⬰ʵ℻ት⬕ᐩ ✓ ˶ֽ຀೽ ✓ ⭄Ꮅ൷ࢇஂ ✓ ፫Ιխ⼋ऽཪ

  13. ᨣͭ⬏だተ⮿ⱟ㡳 ✓ "HJMF ✓ ೸⁰㌴⬋ ✓ ፄ৙⭄Ꮅ൷ơፄ৙⪓⏀ ✓ ⭶⭟ᇪӑ෧຀㕸

  14. ⋧㏧ʳወᵑഌ ࿼̩࿝ϰ⬋ἃ⼶

  15. ᵕᩬˤʳወʪ₋㗔⨶

  16. ⋧㏧ወⴁ⭤ឮ

  17. None
  18. None

  19. ¡ ၄

  20. None
  21. None
  22. None
  23. None

  24. 5IF.BUSJY 

  25. 5IF.BUSJY 

  26. ⋣㏣⭶⭟ዅ ⴁ⭤ឮ ḑቂ᱙

  27. ͸ྰ⮪ Αᴣ4$44

  28. ػᴞ$44ፕ̍㞬ݞ㐜㡳 ✓ ᜥፒ೷᭱஺᝖ ✓ ᜥፒⱽቆ ✓ ᜥ⻇᝖Ц⭟Ⅼ ✓ ᜥ⻇᝖஺GVODUJPOぜ⪯Βᴟ ✓

    ᜥፒታθḑJFIBDL⭄ᜐታᐲ

  29. ᨣͭ⬏ᴣ4$44㡳 ✓ ፒ೷᭱஺᝖ ✓ ፒⱽቆ ✓ ٩Ц⭟Ⅼ ✓ ٩஺NJYJOぜ⪯Βᴟ ✓

    ፒታθḑJFIBDL⭄ᜐታᐲ CZDPNQBTT

  30. ᄂ⠩Αᴣ'JSFBQQ ᆿ஼4$44 ✓ IUUQGJSFBQQIBOEMJOPDPN ✓ NFOVCBS⒳ዬ⁰෇ ✓ ൎ͹ံ4$44⺨᨟$44 ✓ ⽞ፒӱ̝XFC⭶⭟ณ਒ᴟḑ֤ⓗ

  31. .article { font-family: sans-serif; } .article a { color: blue;

    } .article { font-family: sans-serif; a { color: blue; } } ೹᭵ /FTUJOH

  32. .content-navigation { border-color: #3bbfce; color: #2b9eab; margin: 8px; } $blue:

    #3bbfce; $margin: 16px; .content-navigation { border-color: $blue; color: darken($blue, 9%); margin: $margin / 2; } ⲁ቉ 7BSJBCMFT

  33. @mixin table-base($padding) { th { text-align: center; font-weight: bold; }

    td, th { padding: $padding; } } .table { @include table-base(2px); } .data { @include table-base(10px); } .table th { text-align: center; font-weight: bold; } .table td, .table th { padding: 2px; } .data th { text-align: center; font-weight: bold; } .data td, .data th { padding: 10px; } 4$44.JYJOT $44

  34. @import "compass"; .author-link { @include float-left; @include link-colors(blue, red); }

    DPNQBTT TDTTGSBNFXPSL .author-link { display: inline; float: left; color: blue; } .author-link:hover { color: red; } 1 2

  35. @import "compass"; .logo { @include replace-text-with-dimensions("logo.png"); } DPNQBTT TDTTGSBNFXPSL .logo

    { text-indent: -119988px; overflow: hidden; text-align: left; background-image: url('/images/logo.png?1357639334'); background-repeat: no-repeat; background-position: 50% 50%; width: 214px; height: 50px; }

  36. 4$44$PNQBTT ƛ 4$44 IUUQTBTTMBOHDPN ƛ $PNQBTT IUUQDPNQBTTTUZMFPSH

  37. 㐛◜▎෷᭱ ⋣㏣⭶⭟˥ྭ⮦ᝥ༦ḑ

  38. None

  39. ᠩḕ᚝ᠱḕだ

  40. None

  41. ◠だぢፑࡻᨣⒷዯ⑁ሡⲁ

  42. None

  43. ㍻₟ৡḕ᚝௓ḕだ

  44. ⯞ۙ

  45. ̖ৢৢᛖṺਔ $y: #fcd208; .title { color: $y; border-bottom: 5px solid

    $y; } ̖ৢৢᛖṺਔ $y: #fcd208; $dark-y: darken($y, 10%); .title { color: $y; border-bottom: 5px solid $dark-y; } 㐟◠㌚ᩬʪᕿ͠CPSEFSةፕ⹵̈ḕ༵ٖ㡳 ࿿̨࿠ϯ⬏⊰˯CPSEFS᚝ቕୗ⁶ጌḕ㐟◠

  46. ਙᏂʳૹᑾḕ⮩㡫௣஼࿟NJYJOڒ㡳 @mixin title-and-border($color) { color: $color; border-bottom: 5px solid darken($color,

    10%); } ℿ͸ᚙᘢ⬏ᴣ⼓ᕿ௣⨲ˮ㡮 .title { @include title-and-border(#fcd208); }
  47. None

  48. ʫᕼḑ㉖㋣㡬

  49. Ӱவ̌ẎṬⵋΘʴʫᕼ

  50. None
  51. None

  52. NOA 5ZQFGBDF 'VUVSB

  53. 不運動，前情侶臉書鬧翻，影城禁漢堡外⻝⾷食。最 近沒時間整理推特.....每天都好忙，我對你，今天 ⼤大哥說，早上喝著咖啡，你喜歡就都給你。⾃自然 忘記他們⾏行程的遠近，雖受過欺負，這說是野蠻 的慣習，親戚們多贊稱我，但現在的曆法，覺得 分外悠遠，前回不是因得到勝利（他⼀一⼈人的批 判），實在是無意義的競爭，聽到泉聲和松籟的 奏彈 ⼓ወৡᕸ㐜 不運動，前情侶臉書鬧翻，影城禁漢堡外⻝⾷食。最

    近沒時間整理推特.....每天都好忙，我對你，今天 ⼤大哥說，早上喝著咖啡，你喜歡就都給你。⾃自然 忘記他們⾏行程的遠近，雖受過欺負，這說是野蠻 的慣習，親戚們多贊稱我，但現在的曆法，覺得 分外悠遠，前回不是因得到勝利（他⼀一⼈人的批 判），實在是無意義的競爭，聽到泉聲和松籟的 奏彈 ⼓ወৡᕸ㐜

  54. .circle { margin-left: -3px; } 不運動，前情侶臉書鬧翻，影城禁漢堡外⻝⾷食。最 近沒時間整理推特.....每天都好忙，我對你，今天 ⼤大哥說，早上喝著咖啡，你喜歡就都給你。⾃自然 忘記他們⾏行程的遠近，雖受過欺負，這說是野蠻 的慣習，親戚們多贊稱我，但現在的曆法，覺得

    分外悠遠，前回不是因得到勝利（他⼀一⼈人的批 判），實在是無意義的競爭，聽到泉聲和松籟的 奏彈 ⼓ወৡᕸ㐜 不運動，前情侶臉書鬧翻，影城禁漢堡外⻝⾷食。最 近沒時間整理推特.....每天都好忙，我對你，今天 ⼤大哥說，早上喝著咖啡，你喜歡就都給你。⾃自然 忘記他們⾏行程的遠近，雖受過欺負，這說是野蠻 的慣習，親戚們多贊稱我，但現在的曆法，覺得 分外悠遠，前回不是因得到勝利（他⼀一⼈人的批 判），實在是無意義的競爭，聽到泉聲和松籟的 奏彈 ⼓ወৡᕸ㐜

  55. Sign in Sign up password username Sign in Sign up

    password username

  56. .btn:first-child { margin-left: -3px; } Sign in Sign up password

    username Sign in Sign up password username

  57. 8FCୗ㕸 ِ̩ፎ⼫՚ḑݞ㐘

  58. None
  59. None

  60. ᨣ̍㞬˄ቕୗ⽸㞬〸㡳 ๏ ஆ࿶℀ḑ㌱┗୕㕴ፒ㊶ ๏ 8JO㏰⭶Ïቭ⊁ኯ㕴 ๏ .BD㏰⭶Ï㞴㕴5$ ๏ ٵൕ٪ʵ⊶ʬ ๏

    ୕㕴܃ⴗ೽

  61. ਙͭ⭈᜔㡳 ๏ 'MBTIÏṕխፒয়ぞ⪓⏀ʵሗᄺ'MBTI ๏ ࢘ᬜÏ͙ፖࠨⳚᇓয়ơ෧຀;[[ ๏ $BOWBTÏ⭶⭟ഥʵፎᴟ;[[ ๏ !GPOUGBDFÏ ⭶ஂ⪯㌜ơ୕ࣘფᘐ;[[␽ʺᗃᐲⵖয়

  62. ㌮℄ୗ㕸ፙׁ

  63. 8FCGPOUTፙׁ ๏ 5ZQFLJUÏᙁቒ IUUQTUZQFLJUDPN ๏ +VTUGPOUψቒ㡢⍑ ⇄㡣 IUUQXXXKVTUGPOUDPN ๏ 5ZQFTRVBSFነቒ

    IUUQUZQFTRVBSFDPN
  64. None
  65. None
  66. None
  67. None
  68. None

  69. ʪ஄⬏ᴣናቕ੓ٽ[email protected]

  70. None
  71. None

  72. 8JOEPXT .BD #FGPSF

  73. 8JOEPXT .BD "GUFS

  74. ⶤൗ٪⊺ʪୗࣘ

  75. ု⨶ݞ㐜 㕍 㐷ῤ Ө඼ୗ㕸 ୗ㕸㉐᫽ 㐷ῤ ተḕୗ㕸 ⻈⮻ٸ᝖EPNBJO нᡄ͹⬋ḑ୕ ځTFSWFS⬋ᛩ⊓ٸ୕㕴

    ʳ⹶୕㕴 ᡊᏤՁᎵ ୕㕴ʳ⹶୹࿜

  76. ୗ㕸㉐᫽ݞ㐜 '065 'MBTIPG6OTUZMFE5FYU ๏ IUUQEFNPFWFOEFTJHOUX

  77. ⭺⭣ധ༐⬏ᄁ՟ፇ৛㡠 ๏ ʵ⬋㐳ῠ〴୕ÏӨය୕Ӕ㋹⡃㡮 ๏ ℻୕㕴⹶ӧทӻ㐳ῠ୕㕴 ๏ ഏ፟㐳ῠḑዏϸ٩̩ፄᏥۙ

  78. 㐷ῤ Ө඼ୗ㕸 ୗ㕸㉐᫽ 㐷ῤ ተḕୗ㕸 XGMPBEJOH XGBDUJWF PS 讀取失敗時... XGJOBDUJWF

    <html class="wf-loading" > <html class="wf-active" > <html class="wf-inactive" >

  79. .title { // title style here }

  80. .title { // title style here .wf-loading & { visibility:

    hidden; } .wf-active & { visibility: visible; } } ⱺٕዒʳ㐷ῤ ⱺٕ࿟֤ዒ㐷ῤ

  81. .title { // title style here @include transition(opacity .3s linear);

    .wf-loading & { visibility: hidden; opacity: 0; } .wf-active & { visibility: visible; opacity: 1; } } ⱺٕዒʳ㐷ῤ ⱺٕ࿟֤ዒ㐷ῤ ⑁ʸᴣ᠚ӧḕቶ්㐷ῤ㡠

  82. %FGBVMU 04 $POEFOTFE'POU 5ZQFLJU ৡ௑˯㡮 .wf-active .date { font-size: 2em;

    }

  83. ု⨶ݞ㐜 ‣ ୕㕴ፖׁݘϱ⃳ ‣ Βᴟ␹₼ᩨ ᜥ⼙⋣ 㕍

  84. .title { // title style here @include transition(opacity .3s linear);

    .wf-loading & { visibility: hidden; opacity: 0; } .wf-active & { visibility: visible; opacity: 1; } .wf-inactive & { visibility: visible; opacity: 1; font-family: helvetcia, arial, sans-serif; } } ፙׁ৩ሪḕዒϷˤ٩̨⢫⏄

  85. 3FTQPOTJWF%FTJHO ࢘ቒḑቭݞ㐘

  86. ࢘

  87. 1 2 1

  88. ࢘ḕ᭵ᝈ <img src="foo.png"> @media (max-width: 320px) { img { max-width:

    100%; } }

  89. ࢘ḕ᭵ᝈ <img src="foo.png" height="640" width="480"> @media (max-width: 320px) { img

    { max-width: 100%; height: auto; } }

  90. 1 2 1 2

  91. 0px 0px IFSF Loading...

  92. 1 2 Onload! 85'

  93. ⭈᜔ݞ㐜 ƛ ࿝ϰഏ፟࢘ᬜⱶٕ˘խḑ㕸൷ࢇஂ ƛ ᪊ᬜ࿡ขᬜḑᚚΝ

  94. ⭈᜔ݞ㐜 100% auto img { width: 100%; height: auto; }

  95. ⭈᜔ݞ㐜 100% 100% / 16 * 9 img { width:

    100%; height: 100% / 16 * 9; }

  96. ⭈᜔ݞ㐜 .img-wrapper { position: relative; width: 100%; height: 0; padding-top:

    100% / 16 * 9; } img { position: absolute; top: 0; left: 0; width: 100%; height: auto; } .img-wrapper <img>

  97. Ҽ⎟㟂 ƛ ٤ⓗࢇஂᚚΝ ƛ ㊣ᙎდֽ ƛ ࢘ᬜơขᬜḒ٩ ƛ ขᬜ௛ӱ⽆ᴟ㡢ൟ˚⾱ዅ℻ᚚ㡣

  98. ቕ

  99. 1

  100. 1 咳咳，我現在還沒出 全⼒力呢...

  101. 咳咳，我還沒出全⼒力 呢... ⽘௬

  102. 卡卡弱特，你⾝身為賽亞 ⼈人的⾃自尊, 難道不會受傷 嗎 ⽘௬

  103. 卡卡弱特，你⾝身為賽亞⼈人的⾃自尊, 難道不會受傷 嗎 َ⽘௬

  104. IUUQTHJUIVCDPNESZNBO.BDIPKT

  105. 咳咳，我還沒出全⼒力 呢... ⽘௬

  106. 咳咳，我還沒出 全⼒力呢... ⽢٩̨

  107. 卡卡弱特，你⾝身為賽亞 ⼈人的⾃自尊, 難道不會受傷 嗎 ⽘௬

  108. 卡卡弱特，你⾝身為賽亞 ⼈人的⾃自尊, 難道不會 受傷嗎 ⽢٩̨

  109. 卡卡弱特，你⾝身為賽亞⼈人的⾃自尊, 難道不會受傷 嗎 َ⽘௬

  110. 卡卡弱特，你⾝身為賽亞⼈人的⾃自尊, 難道不會 受傷嗎 ⽢٩̨

  111. IUUQTHJUIVCDPNESZNBO.BDIPKT

  112. )J%1* 3FUJOBEJTQMBZ

  113. )J%1*ፕ̍㞬ਔ㡳 ✓ቭᤰ ✓࢘ᬜ㐳ῠፄᠳይ ✓ፄ஖ኴ㉬ⱶḑቒ୕

  114. ሚᄽ)J%1*ፕ̍㞬ʳਔ㡳 ✓࢘ᗃⱽয়˯ ✓░ᦫ⬲ࠨ๪㞨⻇㡮 ✓ᬀာ⨱஑ᙛ͹ḑVTFS

  115. ̖ৢʳⰫ࢘

  116. ᴣ̨࢘৘ḕ⽖ᇍ㡳

  117. ሚᄽ)J%1*ḕӱ̜⽖ᇍ ✓ $44 ✓ 8FCGPOUT ✓ 47(

  118. ṏぢΑᴣ$44 ✓ ࢖⬶CPSEFSSBEJVT ✓ ㋉ขCPYTIBEPX UFYUTIBEPX ✓ ᤉఅMJOFBSHSBEJFOU SBEJBMHSBEJFOU

  119. .box { border: 1px solid #ccc; box-shadow: 0 5px 10px

    rgba(0,0,0,.3); border-radius: 10px; } $44 Αᴟࢗᬜ

  120. 8FCGPOUT ✓ ᬿᙥḑ୕㕴ΒᴟXFCGPOUTʵ⬋ᴟ࢘ᬜ ✓ JDPOGPOUT ✓ ⎛㞾㡩ޢ◜

  121. 8FCGPOUT Αᴟࢗᬜ AppWorks

  122. None

  123. TZNCPMGPOUT IPWFS XJUIPVUGPOUT

  124. ٩⩰ᅓ்

  125. ʳㅣḕJDPOGPOUTⴁᢏ ✓ IUUQTZNCPMTFUDPN ✓ IUUQQJDUPTDD ✓ IUUQGPSUBXFTPNFHJUIVCDPN'POU "XFTPNF ✓ IUUQBEBNXIJUDSPGUDPNDMJNBDPOT

    GPOU

  126. 47( 47(5JOZ ✓ ځぞᗃᐲ㡦ሡয়9˥ʵ๱ ✓ ٩෻◜ ✓ *MMVTUSBUPS⪩͵⺨ୖأ٩ ✓ 47(5JOZ

    ✓ ʵሗᄺᕻ∳ơ㋉ข℻⹱⪯㌜ఋ຀
  127. None

  128. ʳሚᄽ47(ḕ᦯⬶ࠨ ✓ *&   ✓ "OESPJE 㡢٩̩Ⅼ˯㡣

  129. <a class="brand" href="/"> <!--[if IE]> <div class="logo logo_ie"></div> <![endif]--> <!--[if

    !IE]--> <div class="logo logo_svg"></div> <!--[endif]--> </a> .logo { width: 220px; height: 30px; } .logo_svg { background: image-url("thewall-logo.svg"); } .logo_ie { background: image-url("thewall-logo.png"); } ፏ⇈ޢḕՓቴ
  130. None
  131. None

  132. 2013 だተ⮿ⱟ8FC%FTJHO Αᴣ4"44 㐟◠▒෺᭵ 8FCୗ㕸 38%࢘▒ቕ )J%1*⭺⭣

  133. 5IBOLT ᙍ⻜㌉⊛ൖ൷3(#"ݞ㐘㌉ ٍ֥IUUQSHCBUX ਗᎿ͹ፒ̵ͮݞ㐘ᙍ⻜'#⑶⊩࿝ IUUQGBDFCPPLDPNFWFOXV &WFO