<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    Neil的備忘錄

    just do it
    posts - 66, comments - 8, trackbacks - 0, articles - 0

    How to Style an Application Like Facebook


    Bill Konrad 

    In this article we will explore how we can style our Facebook application to look and feel like an extension of the Facebook platform. We will examine colors, fonts, dimensions and a few common design patterns utlized by the Facebook platform in our quest to fit in with the crowd. 
    Introduction
    So you have a great idea for an application, and you've developed your idea into a somewhat functional Facebook app. The only problem is, it looks completely out of place in the space Facebook has designated for your layout. Let's look at how we can change that. 

    Facebook invested a lot of money in creating the fluid graphic design work you see in front of you, but we won't have to. Using a few handy tools right in our browser you can figure out the majority of what's going on. I won't go into detail about this process, but we primarily used the Firefox extension FireBug and Chrome's built in inspection tools to ferret out the pertinent style attributes. 

    Let's look at the crucial elements of the stylesheet by category and then discuss how to implement them. We'll start with colour. 
    The Colours of Facebook
    Facebook keeps their colour model simple, and it's an effective approach. General text ranges from light to dark grey (never black) and as far as I can tell, every link is in what I call "Facebook Blue". For background and border colours, Facebook uses a pair of light and dark variations on a single colour to create contrast. 

    Let's take a look at the full reference chart. 

    Facebook Blue 

    Facebook Blue #3b5998

    Text Colours 

    Light Text #999999
    Medium Text #666666
    Dark Text #333333
    Link/Anchor Text #3b5998

    Grey Box 

    Background #f7f7f7
    Border #cccccc

    Blue Box 

    Background #eceff6
    Border #d4dae8

    Information Box 

    Background #fff9d7
    Border #e2c822

    Error Box 

    Background #ffebe8
    Border #dd3c10


    Facebook Typography
    A little research revealed that Facebook uses the following set of fonts.
    1. body  
    2. {  
    3.     font-family"lucida grande"tahomaverdanaarialsans-serif;  
    4. }  

    As a quick note for beginners, this CSS states: First check the browser's ability to render text in Lucida Grande, then try Tahoma, etc.
    Important Dimensions / Spacing
    When developing a Facebook application there are a few dimensions that we must be aware of since Facebook determines where your content can be rendered. As a general note, Facebook uses a 10px padding in most of their elements, so for a consistent look and feel, this is probably a good practice in your application. 

    Application Canvas Page 

    Width: 760px
    Maximum Height: N/A 

    Narrow Profile Box 

    Width: 200px (with 8px padding on each side)
    Maximum Height: 400px 

    About Profile Box 

    Width: 500px (with 10px padding on each side) 
    Maximum Height: N/A
    Icon Dimensions
    Facebook uses 16x16 pixel icons throughout their application. For a similar look and feel with great expansion capabilities, check out FamFam's Silk Icons.
    If you look closely in the next section, you'll see one of FamFam's icons used for the comment!
    Ready-To-Use Facebook Components
    We here at SocialSnippets decided that telling you about the CSS styling in Facebook wasn't quite enough. So we went ahead and created a fully functional set of styles that when dropped in your page allow you to instantly being creating some basic "Facebook Components". Here they are in all their glory. 



    General Purpose Grey Box 
    1. <div class="fbgreybox" style="width: 500px;">  
    2.     Recognize this general purpose grey box?  
    3. </div>  


    Recognize this general purpose grey box?


    Common Blue Box
    1. <div class="fbbluebox" style="width: 500px;">  
    2.     Recognize this common blue box?  
    3. </div>  


    Recognize this common blue box?


    Information Box 
    1. <div class="fbinfobox" style="width: 500px;">  
    2.     Recognize this information box?  
    3. </div>  


    Recognize this information box?


    Error Box 
    1. <div class="fberrorbox" style="width: 500px;">  
    2.     Recognize this error box?  
    3. </div>  


    Recognize this error box?


    Facebook Tabs 
    1. <a href="#" class="fbtab">Facebook Tab #1</a>  
    2. <a href="#" class="fbtab">Facebook Tab #2</a>  
    3. <a href="#" class="fbtab">Facebook Tab #3</a>  
    4. <a href="#" class="fbtab">Facebook Tab #4</a>  
    5. <a href="#" class="fbtab">Facebook Tab #5</a>  


    Facebook Tab #1Facebook Tab #2Facebook Tab #3Facebook Tab #4Facebook Tab #5



    How to Use These Components
    It's actually quite easy. The sample code above should get you started. Essentially, you just need to set the class of the div or anchor element to the corresponding class in the stylesheet. If you want to inherit the basic Facebook text styling, wrap your content with a div of class "fbbody". 

    Included below is the full stylesheet. Copy and paste it into either your external stylesheet, or directly into a style element in your markup. 

    Complete Facebook Component Stylesheet
    1. /* Default Facebook CSS */  
    2. .fbbody  
    3. {  
    4.     font-family"lucida grande" ,tahoma,verdana,arial,sans-serif;  
    5.     font-size11px;  
    6.     color#333333;  
    7. }  
    8. /* Default Anchor Style */  
    9. .fbbody a  
    10. {  
    11.     color#3b5998;  
    12.     outline-stylenone;  
    13.     text-decorationnone;  
    14.     font-size11px;  
    15.     font-weightbold;  
    16. }  
    17. .fbbody a:hover  
    18. {  
    19.     text-decorationunderline;  
    20. }  
    21. /* Facebook Box Styles */  
    22. .fbgreybox  
    23. {  
    24.     background-color#f7f7f7;  
    25.     border1px solid #cccccc;  
    26.     color#333333;  
    27.     padding10px;  
    28.     font-size13px;  
    29.     font-weightbold;  
    30. }  
    31. .fbbluebox  
    32. {  
    33.     background-color#eceff6;  
    34.     border1px solid #d4dae8;  
    35.     color#333333;  
    36.     padding10px;  
    37.     font-size13px;  
    38.     font-weightbold;  
    39. }  
    40. .fbinfobox  
    41. {  
    42.     background-color#fff9d7;  
    43.     border1px solid #e2c822;  
    44.     color#333333;  
    45.     padding10px;  
    46.     font-size13px;  
    47.     font-weightbold;  
    48. }  
    49. .fberrorbox  
    50. {  
    51.     background-color#ffebe8;  
    52.     border1px solid #dd3c10;  
    53.     color#333333;  
    54.     padding10px;  
    55.     font-size13px;  
    56.     font-weightbold;  
    57. }  
    58. /* Content Divider on White Background */  
    59. .fbcontentdivider  
    60. {  
    61.     margin-top15px;  
    62.     margin-bottom15px;  
    63.     width520px;  
    64.     height1px;  
    65.     background-color#d8dfea;  
    66. }  
    67. /* Facebook Tab Style */  
    68. .fbtab  
    69. {  
    70.     padding8px;  
    71.     background-color#d8dfea;  
    72.     color#3b5998;  
    73.     font-weightbold;  
    74.     floatleft;  
    75.     margin-right4px;  
    76.     text-decorationnone;  
    77. }  
    78. .fbtab:hover  
    79. {  
    80.     background-color#3b5998;  
    81.     color#ffffff;  
    82.     cursor: hand;  
    83. }  

    Conclusions
    While the research that went into this article was quite extensive, it in no way encompasses every style used in the Facebook platform. If you enjoyed the article, please comment briefly and say what you would like to see more of in the future. Maybe a sequel is in the cards? 

    And, as always, if you have a second, Digg the article and share the wealth!

    <原文地址:  >

    只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。


    網(wǎng)站導(dǎo)航:
     
    主站蜘蛛池模板: 日产乱码一卡二卡三免费| 成人A片产无码免费视频在线观看| 看免费毛片天天看| 一区二区免费在线观看| 成人爽a毛片免费| 亚洲成人免费电影| 成年轻人网站色免费看| 亚洲精品97久久中文字幕无码| 亚洲无码视频在线| 久久久久亚洲Av无码专| jlzzjlzz亚洲jzjzjz| 免费在线观看亚洲| 久久国产精品成人免费| 西西大胆无码视频免费| 男人的天堂亚洲一区二区三区| 亚洲片国产一区一级在线观看| 亚洲AV无码久久| 国产精品亚洲精品| jizz在线免费播放| 在线观看的免费网站无遮挡| 四虎成人免费大片在线| 亚洲色成人WWW永久网站| 亚洲午夜一区二区电影院| 免费无码又爽又黄又刺激网站| 久久狠狠躁免费观看2020| 精品久久免费视频| 久久亚洲国产中v天仙www| 亚洲中文无码永久免| 日韩精品无码免费专区午夜| 免费大片黄在线观看yw| 91麻豆国产自产在线观看亚洲| 亚洲日韩国产精品无码av| 性生大片视频免费观看一级| 18女人毛片水真多免费| 亚洲国产专区一区| 亚洲av无码不卡久久| 91精品成人免费国产| 成人性生免费视频| 亚洲成人中文字幕| 三年片在线观看免费观看大全中国| 182tv免费观看在线视频|