RGBA 社群在 2012 年最常被詢問的問題大集合，包含了 重新認識 Web Design、工具軟體、使用 SASS、顏色與形狀、Web 字體、RWD 圖與文、Hi-DPI 設計...
92012⋧㏧ု⨶⍂ۢݨ&WFO8V
View Slide
ⱨگ‣ ۢݨḑޔࢢትۢݨḑ㌢ޔ‣ ӱவዅൖ3(#"ݞ㐘㌉‣ ᜥፒ2"ࡻ᨟⼏፭⸽ዅʬϫ2"
ƛ &WFOƛ ⋣㏣⭶⭟ഥƛ FWFOEFTJHO༦㉊⭶⭟ƛ NPCJMF ৠ᳜ፇ௫ 5IF8BMMƛ ⋍3(#"ῢ⏪"#065.&
๏ ⋣㏣⭶⭟⑫ፎ๏ มⵍⵖ⼱ॆ⑫ፎ๏ ๖⬋ʱᙖ˯๏ ṕխ̙ஂ።ƫᚖ⼞ʱƬ▐⻇㡛๏ IUUQSHCBUX
3(#"ݞ⼵ḕ⮿ⱟ8FC%FTJHOΑᴣ4$44 㐟◠▒᭵8FCୗ㕸 38%࢘▒ቕ)J%1*⭺⭣
ྰ⮪だተ⮿ⱟ8FC%FTJHO
1024 x 768
ᵑഌ
Ղᬝ
̩᨟छῂЦʬϫ⋣ڒ0,⇄ޢʪ൘บՁ㋩⌄⒀⼱3FTQPOTJWF%FTJHO㡮བྷ˯ḑ࢘▎Ꮜᕀ⾱⬋ぜΙ˯
ݞ㐜ࢢܛ⪚㡳✓ ⬙⬰ʵ℻ት⬕ᐩ✓ ˶ֽ✓ ⭄Ꮅ൷ࢇஂ✓ ፫Ιխ⼋ऽཪ
ᨣͭ⬏だተ⮿ⱟ㡳✓ "HJMF✓ ⁰㌴⬋✓ ፄ⭄Ꮅ൷ơፄ⪓⏀✓ ⭶⭟ᇪӑ෧㕸
⋧㏧ʳወᵑഌ̩ϰ⬋ἃ⼶
ᵕᩬˤʳወʪ₋㗔⨶
⋧㏧ወⴁ⭤ឮ
¡၄
5IF.BUSJY
⋣㏣⭶⭟ዅⴁ⭤ឮḑቂ᱙
ྰ⮪Αᴣ4$44
ػᴞ$44ፕ̍㞬ݞ㐜㡳✓ ᜥፒ᭱✓ ᜥፒⱽቆ✓ ᜥ⻇Ц⭟Ⅼ✓ ᜥ⻇GVODUJPOぜ⪯Βᴟ✓ ᜥፒታθḑJFIBDL⭄ᜐታᐲ
ᨣͭ⬏ᴣ4$44㡳✓ ፒ᭱✓ ፒⱽቆ✓ ٩Ц⭟Ⅼ✓ ٩NJYJOぜ⪯Βᴟ✓ ፒታθḑJFIBDL⭄ᜐታᐲ CZDPNQBTT
ᄂ⠩Αᴣ'JSFBQQᆿ4$44✓ IUUQGJSFBQQIBOEMJOPDPN✓ NFOVCBS⒳ዬ⁰✓ ൎံ4$44⺨᨟$44✓ ⽞ፒӱ̝XFC⭶⭟ณᴟḑ֤ⓗ
.article {font-family: sans-serif;}.article a {color: blue;}.article {font-family: sans-serif;a { color: blue; }}᭵/FTUJOH
.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
@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
@import "compass";.author-link {@include float-left;@include link-colors(blue, red);}DPNQBTTTDTTGSBNFXPSL.author-link {display: inline;float: left;color: blue;}.author-link:hover {color: red;}12
@import "compass";.logo {@include replace-text-with-dimensions("logo.png");}DPNQBTTTDTTGSBNFXPSL.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;}
4$44$PNQBTTƛ 4$44IUUQTBTTMBOHDPNƛ $PNQBTTIUUQDPNQBTTTUZMFPSH
㐛◜▎᭱⋣㏣⭶⭟˥ྭ⮦ᝥ༦ḑ
ᠩḕᠱḕだ
◠だぢፑࡻᨣⒷዯ⑁ሡⲁ
㍻ৡḕḕだ
⯞ۙ
̖ৢৢᛖṺਔ$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ቕୗ⁶ጌḕ㐟◠
ਙᏂʳૹᑾḕ⮩㡫NJYJOڒ㡳@mixin title-and-border($color) {color: $color;border-bottom: 5px solid darken($color, 10%);}ℿᚙᘢ⬏ᴣ⼓ᕿ⨲ˮ㡮.title {@include title-and-border(#fcd208);}
ʫᕼḑ㉖㋣㡬
Ӱவ̌ẎṬⵋΘʴʫᕼ
NOA5ZQFGBDF'VUVSB
不運動，前情侶臉書鬧翻，影城禁漢堡外⻝⾷食。最近沒時間整理推特.....每天都好忙，我對你，今天⼤大哥說，早上喝著咖啡，你喜歡就都給你。⾃自然忘記他們⾏行程的遠近，雖受過欺負，這說是野蠻的慣習，親戚們多贊稱我，但現在的曆法，覺得分外悠遠，前回不是因得到勝利（他⼀一⼈人的批判），實在是無意義的競爭，聽到泉聲和松籟的奏彈⼓ወৡᕸ㐜不運動，前情侶臉書鬧翻，影城禁漢堡外⻝⾷食。最近沒時間整理推特.....每天都好忙，我對你，今天⼤大哥說，早上喝著咖啡，你喜歡就都給你。⾃自然忘記他們⾏行程的遠近，雖受過欺負，這說是野蠻的慣習，親戚們多贊稱我，但現在的曆法，覺得分外悠遠，前回不是因得到勝利（他⼀一⼈人的批判），實在是無意義的競爭，聽到泉聲和松籟的奏彈⼓ወৡᕸ㐜
.circle {margin-left: -3px;}不運動，前情侶臉書鬧翻，影城禁漢堡外⻝⾷食。最近沒時間整理推特.....每天都好忙，我對你，今天⼤大哥說，早上喝著咖啡，你喜歡就都給你。⾃自然忘記他們⾏行程的遠近，雖受過欺負，這說是野蠻的慣習，親戚們多贊稱我，但現在的曆法，覺得分外悠遠，前回不是因得到勝利（他⼀一⼈人的批判），實在是無意義的競爭，聽到泉聲和松籟的奏彈⼓ወৡᕸ㐜不運動，前情侶臉書鬧翻，影城禁漢堡外⻝⾷食。最近沒時間整理推特.....每天都好忙，我對你，今天⼤大哥說，早上喝著咖啡，你喜歡就都給你。⾃自然忘記他們⾏行程的遠近，雖受過欺負，這說是野蠻的慣習，親戚們多贊稱我，但現在的曆法，覺得分外悠遠，前回不是因得到勝利（他⼀一⼈人的批判），實在是無意義的競爭，聽到泉聲和松籟的奏彈⼓ወৡᕸ㐜
Sign in Sign uppasswordusernameSign in Sign uppasswordusername
.btn:first-child {margin-left: -3px;}Sign in Sign uppasswordusernameSign in Sign uppasswordusername
8FCୗ㕸ِ̩ፎ⼫՚ḑݞ㐘
ᨣ̍㞬˄ቕୗ⽸㞬〸㡳๏ ஆ℀ḑ㌱┗୕㕴ፒ㊶๏ 8JO㏰⭶Ïቭ⊁ኯ㕴๏ .BD㏰⭶Ï㞴㕴5$๏ ٵൕ٪ʵ⊶ʬ๏ ୕㕴܃ⴗ
ਙͭ⭈᜔㡳๏ 'MBTIÏṕխፒয়ぞ⪓⏀ʵሗᄺ'MBTI๏ ࢘ᬜÏ͙ፖࠨⳚᇓয়ơ෧;[[๏ $BOWBTÏ⭶⭟ഥʵፎᴟ;[[๏ !GPOUGBDFÏ⭶ஂ⪯㌜ơ୕ࣘფᘐ;[[ʺᗃᐲⵖয়
㌮℄ୗ㕸ፙׁ
8FCGPOUTፙׁ๏ 5ZQFLJUÏᙁቒIUUQTUZQFLJUDPN๏ +VTUGPOUψቒ㡢⍑⇄㡣IUUQXXXKVTUGPOUDPN๏ 5ZQFTRVBSFነቒIUUQUZQFTRVBSFDPN
ʪ⬏ᴣናቕٽ5@5
8JOEPXT .BD#FGPSF
8JOEPXT .BD"GUFS
ⶤൗ٪⊺ʪୗࣘ
ု⨶ݞ㐜㕍㐷ῤӨୗ㕸ୗ㕸㉐㐷ῤተḕୗ㕸⻈⮻ٸEPNBJOнᡄ⬋ḑ୕ځTFSWFS⬋ᛩ⊓ٸ୕㕴ʳ୕㕴ᡊᏤՁᎵ ୕㕴ʳ
ୗ㕸㉐ݞ㐜'065 'MBTIPG6OTUZMFE5FYU๏ IUUQEFNPFWFOEFTJHOUX
⭺⭣ധ༐⬏ᄁ՟ፇ㡠๏ ʵ⬋㐳ῠ〴୕ÏӨය୕Ӕ㋹⡃㡮๏ ℻୕㕴ӧทӻ㐳ῠ୕㕴๏ ഏ፟㐳ῠḑዏϸ٩̩ፄᏥۙ
㐷ῤӨୗ㕸ୗ㕸㉐㐷ῤተḕୗ㕸XGMPBEJOHXGBDUJWFPS讀取失敗時...XGJOBDUJWF
.title {// title style here}
.title {// title style here.wf-loading & {visibility: hidden;}.wf-active & {visibility: visible;}}ⱺٕዒʳ㐷ῤⱺٕ֤ዒ㐷ῤ
.title {// title style here@include transition(opacity .3s linear);.wf-loading & {visibility: hidden;opacity: 0;}.wf-active & {visibility: visible;opacity: 1;}}ⱺٕዒʳ㐷ῤⱺٕ֤ዒ㐷ῤ⑁ʸᴣӧḕቶ්㐷ῤ㡠
%FGBVMU 04$POEFOTFE'POU 5ZQFLJUৡ˯㡮.wf-active .date {font-size: 2em;}
ု⨶ݞ㐜‣ ୕㕴ፖׁݘϱ‣ Βᴟ₼ᩨ ᜥ⼙⋣㕍
.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;}}ፙׁ৩ሪḕዒϷˤ٩̨⢫⏄
3FTQPOTJWF%FTJHO࢘ቒḑቭݞ㐘
࢘
12 1
࢘ḕ᭵ᝈ@media (max-width: 320px) {img { max-width: 100%; }}
࢘ḕ᭵ᝈ@media (max-width: 320px) {img {max-width: 100%;height: auto;}}
1212
0px0pxIFSFLoading...
12Onload!85'
⭈᜔ݞ㐜ƛ ϰഏ፟࢘ᬜⱶٕ˘խḑ㕸൷ࢇஂƛ ᬜขᬜḑᚚΝ
⭈᜔ݞ㐜100%autoimg {width: 100%;height: auto;}
⭈᜔ݞ㐜100%100% / 16 * 9img {width: 100%;height: 100% / 16 * 9;}
⭈᜔ݞ㐜.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
Ҽ⎟㟂ƛ ٤ⓗࢇஂᚚΝƛ ㊣ᙎდֽƛ ࢘ᬜơขᬜḒ٩ƛ ขᬜӱ⽆ᴟ㡢ൟ˚⾱ዅ℻ᚚ㡣
ቕ
1
1咳咳，我現在還沒出全⼒力呢...
咳咳，我還沒出全⼒力呢...⽘௬
卡卡弱特，你⾝身為賽亞⼈人的⾃自尊, 難道不會受傷嗎⽘௬
卡卡弱特，你⾝身為賽亞⼈人的⾃自尊, 難道不會受傷嗎َ⽘௬
IUUQTHJUIVCDPNESZNBO.BDIPKT
咳咳，我還沒出全⼒力呢...⽢٩̨
卡卡弱特，你⾝身為賽亞⼈人的⾃自尊, 難道不會受傷嗎⽢٩̨
)J%1*3FUJOBEJTQMBZ
)J%1*ፕ̍㞬ਔ㡳✓ቭᤰ✓࢘ᬜ㐳ῠፄᠳይ✓ፄኴ㉬ⱶḑቒ୕
ሚᄽ)J%1*ፕ̍㞬ʳਔ㡳✓࢘ᗃⱽয়˯✓░ᦫ⬲ࠨ㞨⻇㡮✓ᬀာ⨱ᙛḑVTFS
̖ৢʳⰫ࢘
ᴣ̨࢘ḕ⽖ᇍ㡳
ሚᄽ)J%1*ḕӱ̜⽖ᇍ✓ $44✓ 8FCGPOUT✓ 47(
ṏぢΑᴣ$44✓ ⬶CPSEFSSBEJVT✓ ㋉ขCPYTIBEPX UFYUTIBEPX✓ ᤉఅMJOFBSHSBEJFOU SBEJBMHSBEJFOU
.box {border: 1px solid #ccc;box-shadow: 0 5px 10px rgba(0,0,0,.3);border-radius: 10px;}$44 Αᴟᬜ
8FCGPOUT✓ ᬿᙥḑ୕㕴ΒᴟXFCGPOUTʵ⬋ᴟ࢘ᬜ✓ JDPOGPOUT✓ ⎛㞾㡩ޢ◜
8FCGPOUT ΑᴟᬜAppWorks
TZNCPMGPOUTIPWFSXJUIPVUGPOUT
٩⩰ᅓ்
ʳㅣḕJDPOGPOUTⴁᢏ✓ IUUQTZNCPMTFUDPN✓ IUUQQJDUPTDD✓ IUUQGPSUBXFTPNFHJUIVCDPN'POU"XFTPNF✓ IUUQBEBNXIJUDSPGUDPNDMJNBDPOTGPOU
47(47(5JOZ✓ ځぞᗃᐲ㡦ሡয়9˥ʵ✓ ٩◜✓ *MMVTUSBUPS⪩͵⺨ୖأ٩✓ 47(5JOZ✓ ʵሗᄺᕻ∳ơ㋉ข℻⪯㌜ఋ
ʳሚᄽ47(ḕ⬶ࠨ✓ *& ✓ "OESPJE 㡢٩̩Ⅼ˯㡣
.logo { width: 220px; height: 30px; }.logo_svg { background: image-url("thewall-logo.svg"); }.logo_ie { background: image-url("thewall-logo.png"); }ፏ⇈ޢḕՓቴ
2013だተ⮿ⱟ8FC%FTJHOΑᴣ4"44㐟◠▒᭵8FCୗ㕸38%࢘▒ቕ)J%1*⭺⭣
5IBOLTᙍ⻜㌉⊛ൖ൷3(#"ݞ㐘㌉ٍ֥IUUQSHCBUXਗᎿፒ̵ͮݞ㐘ᙍ⻜'#⑶⊩IUUQGBDFCPPLDPNFWFOXV&WFO
evenwu
palark
shinyaigeek
naohachi89
yoshidashingo
upura
optimisuke
chloe463
bengo4com
poteboy
shibuiwilliam
kojira
cybozuinsideout
akosma
akmur
chrisshort
nonsquared
jlugia
zakiwarfel
bkeepers
eileencodes
hannesfritz
smashingmag
sachag
brianwarren