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

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. .article { font-family: sans-serif; } .article a { color: blue;

    } .article { font-family: sans-serif; a { color: blue; } } ೹᭵ /FTUJOH
  2. .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
  3. @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
  4. @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
  5. @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; }
  6. ̖ৢৢᛖṺਔ $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᚝ቕୗ⁶ጌḕ㐟◠
  7. ਙᏂʳૹᑾḕ⮩㡫௣஼࿟NJYJOڒ㡳 @mixin title-and-border($color) { color: $color; border-bottom: 5px solid darken($color,

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

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

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

    username Sign in Sign up password username
  11. 㐷ῤ Ө඼ୗ㕸 ୗ㕸㉐᫽ 㐷ῤ ተḕୗ㕸 XGMPBEJOH XGBDUJWF PS 讀取失敗時... XGJOBDUJWF

    <html class="wf-loading" > <html class="wf-active" > <html class="wf-inactive" >
  12. .title { // title style here .wf-loading & { visibility:

    hidden; } .wf-active & { visibility: visible; } } ⱺٕዒʳ㐷ῤ ⱺٕ࿟֤ዒ㐷ῤ
  13. .title { // title style here @include transition(opacity .3s linear);

    .wf-loading & { visibility: hidden; opacity: 0; } .wf-active & { visibility: visible; opacity: 1; } } ⱺٕዒʳ㐷ῤ ⱺٕ࿟֤ዒ㐷ῤ ⑁ʸᴣ᠚ӧḕቶ්㐷ῤ㡠
  14. .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; } } ፙׁ৩ሪḕዒϷˤ٩̨⢫⏄
  15. ⭈᜔ݞ㐜 100% 100% / 16 * 9 img { width:

    100%; height: 100% / 16 * 9; }
  16. ⭈᜔ݞ㐜 .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>
  17. 1

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

    rgba(0,0,0,.3); border-radius: 10px; } $44 Αᴟࢗᬜ
  19. <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"); } ፏ⇈ޢḕՓቴ