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

2012 web technology by RGBA group

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
Avatar for evenwu evenwu
January 12, 2013

2012 web technology by RGBA group

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

Avatar for evenwu

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"); } ፏ⇈ޢḕՓቴ