$30 off During Our Annual Pro Sale. View Details »

2012 web technology by RGBA group

evenwu
January 12, 2013

2012 web technology by RGBA group

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

evenwu

January 12, 2013
Tweet

More Decks by evenwu

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

  3. ƛ &WFO
    ƛ ⋣㏣⭶⭟ഥ
    ƛ FWFOEFTJHO༦㉊⭶⭟
    ƛ NPCJMF ৠ᳜ፇ௫ 5IF8BMM
    ƛ ⋍᫙3(#"ῢ⏪
    "#065.&

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  7. 1024 x 768

    View Slide

  8. View Slide

  9. ᵑഌ

    View Slide

  10. Ղᬝ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  15. ᵕᩬˤʳወʪ₋㗔⨶

    View Slide

  16. ⋧㏧ወⴁ⭤ឮ

    View Slide

  17. View Slide

  18. View Slide

  19. ¡

    View Slide

  20. View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. 5IF.BUSJY

    View Slide

  25. 5IF.BUSJY

    View Slide

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

    View Slide

  27. ͸ྰ⮪
    Αᴣ4$44

    View Slide

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

    View Slide

  29. ᨣͭ⬏ᴣ4$44㡳
    ✓ ፒ೷᭱஺᝖
    ✓ ፒⱽቆ
    ✓ ٩Ц⭟Ⅼ
    ✓ ٩஺NJYJOぜ⪯Βᴟ
    ✓ ፒታθḑJFIBDL⭄ᜐታᐲ CZDPNQBTT

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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;
    }

    View Slide

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

    View Slide

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

    View Slide

  38. View Slide

  39. ᠩḕ᚝ᠱḕだ

    View Slide

  40. View Slide

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

    View Slide

  42. View Slide

  43. ㍻₟ৡḕ᚝௓ḕだ

    View Slide

  44. ⯞ۙ

    View Slide

  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᚝ቕୗ⁶ጌḕ㐟◠

    View Slide

  46. ਙᏂʳૹᑾḕ⮩㡫௣஼࿟NJYJOڒ㡳
    @mixin title-and-border($color) {
    color: $color;
    border-bottom: 5px solid darken($color, 10%);
    }
    ℿ͸ᚙᘢ⬏ᴣ⼓ᕿ௣⨲ˮ㡮
    .title {
    @include title-and-border(#fcd208);
    }

    View Slide

  47. View Slide

  48. ʫᕼḑ㉖㋣㡬

    View Slide

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

    View Slide

  50. View Slide

  51. View Slide

  52. NOA
    5ZQFGBDF
    'VUVSB

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  58. View Slide

  59. View Slide

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

    View Slide

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

    View Slide

  62. ㌮℄ୗ㕸ፙׁ

    View Slide

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

    View Slide

  64. View Slide

  65. View Slide

  66. View Slide

  67. View Slide

  68. View Slide

  69. ʪ஄⬏ᴣናቕ੓ٽ5@5

    View Slide

  70. View Slide

  71. View Slide

  72. 8JOEPXT .BD
    #FGPSF

    View Slide

  73. 8JOEPXT .BD
    "GUFS

    View Slide

  74. ⶤൗ٪⊺ʪୗࣘ

    View Slide

  75. ု⨶ݞ㐜

    㐷ῤ
    Ө඼ୗ㕸
    ୗ㕸㉐᫽
    㐷ῤ
    ተḕୗ㕸
    ⻈⮻ٸ᝖EPNBJO
    нᡄ͹⬋ḑ୕
    ځTFSWFS⬋ᛩ⊓ٸ୕㕴
    ʳ⹶୕㕴
    ᡊᏤՁᎵ ୕㕴ʳ⹶୹࿜

    View Slide

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

    ๏ IUUQEFNPFWFOEFTJHOUX

    View Slide

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

    View Slide

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



    View Slide

  79. .title {
    // title style here
    }

    View Slide

  80. .title {
    // title style here
    .wf-loading & {
    visibility: hidden;
    }
    .wf-active & {
    visibility: visible;
    }
    }
    ⱺٕዒʳ㐷ῤ
    ⱺٕ࿟֤ዒ㐷ῤ

    View Slide

  81. .title {
    // title style here
    @include transition(opacity .3s linear);
    .wf-loading & {
    visibility: hidden;
    opacity: 0;
    }
    .wf-active & {
    visibility: visible;
    opacity: 1;
    }
    }
    ⱺٕዒʳ㐷ῤ
    ⱺٕ࿟֤ዒ㐷ῤ
    ⑁ʸᴣ᠚ӧḕቶ්㐷ῤ㡠

    View Slide

  82. %FGBVMU 04

    $POEFOTFE'POU 5ZQFLJU

    ৡ௑˯㡮
    .wf-active .date {
    font-size: 2em;
    }

    View Slide

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

    View Slide

  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;
    }
    }
    ፙׁ৩ሪḕዒϷˤ٩̨⢫⏄

    View Slide

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

    View Slide


  86. View Slide

  87. 1
    2 1

    View Slide

  88. ࢘ḕ᭵ᝈ

    @media (max-width: 320px) {
    img { max-width: 100%; }
    }

    View Slide

  89. ࢘ḕ᭵ᝈ

    @media (max-width: 320px) {
    img {
    max-width: 100%;
    height: auto;
    }
    }

    View Slide

  90. 1
    2
    1
    2

    View Slide

  91. 0px
    0px
    IFSF
    Loading...

    View Slide

  92. 1
    2
    Onload!
    85'

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide


  98. View Slide

  99. 1

    View Slide

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

    View Slide

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

    View Slide

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

    ⽘௬

    View Slide

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

    َ⽘௬

    View Slide

  104. IUUQTHJUIVCDPNESZNBO.BDIPKT

    View Slide

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

    View Slide

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

    View Slide

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

    ⽘௬

    View Slide

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

    View Slide

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

    َ⽘௬

    View Slide

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

    View Slide

  111. IUUQTHJUIVCDPNESZNBO.BDIPKT

    View Slide

  112. )J%1*
    3FUJOBEJTQMBZ

    View Slide

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

    View Slide

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

    View Slide

  115. ̖ৢʳⰫ࢘

    View Slide

  116. ᴣ̨࢘৘ḕ⽖ᇍ㡳

    View Slide

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

    View Slide

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

    View Slide

  119. .box {
    border: 1px solid #ccc;
    box-shadow: 0 5px 10px rgba(0,0,0,.3);
    border-radius: 10px;
    }
    $44 Αᴟࢗᬜ

    View Slide

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

    View Slide

  121. 8FCGPOUT Αᴟࢗᬜ
    AppWorks

    View Slide

  122. View Slide

  123. TZNCPMGPOUT
    IPWFS
    XJUIPVUGPOUT

    View Slide

  124. ٩⩰ᅓ்

    View Slide

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

    View Slide

  126. 47(
    47(5JOZ

    ✓ ځぞᗃᐲ㡦ሡয়9˥ʵ๱
    ✓ ٩෻◜
    ✓ *MMVTUSBUPS⪩͵⺨ୖأ٩
    ✓ 47(5JOZ
    ✓ ʵሗᄺᕻ∳ơ㋉ข℻⹱⪯㌜ఋ຀

    View Slide

  127. View Slide

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

    View Slide





  129. .logo { width: 220px; height: 30px; }
    .logo_svg { background: image-url("thewall-logo.svg"); }
    .logo_ie { background: image-url("thewall-logo.png"); }
    ፏ⇈ޢḕՓቴ

    View Slide

  130. View Slide

  131. View Slide

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

    View Slide

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

    View Slide