<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)航:
     
    主站蜘蛛池模板: 美女啪啪网站又黄又免费| 亚洲日韩乱码中文无码蜜桃| 亚洲av无码专区国产不乱码 | 永久黄网站色视频免费观看| 亚洲国产精品专区| 欧洲一级毛片免费| 亚洲香蕉在线观看| 好男人视频社区精品免费| 国产精品亚洲综合久久| 免费无码看av的网站| 国产精品亚洲一区二区无码 | 好大好硬好爽免费视频| 亚洲精品无码成人片久久不卡| 国产国产人免费视频成69大陆| 国产大陆亚洲精品国产| 亚洲最大AV网站在线观看| 在线播放免费人成毛片乱码 | 亚洲一区二区三区高清在线观看| 午夜私人影院免费体验区| 国产99久久亚洲综合精品| 亚洲中文无韩国r级电影| 免费黄网站在线看| 亚洲国产精品综合久久久 | 又粗又硬免费毛片| 在线观看片免费人成视频播放| 亚洲a一级免费视频| 最近最新中文字幕完整版免费高清 | 国产精品酒店视频免费看| 免费视频精品一区二区| 亚洲欧洲日产国码无码久久99| 中文字幕视频免费| 亚洲欧美日韩中文字幕一区二区三区| 亚洲AV永久无码精品一区二区国产| 成人妇女免费播放久久久| 亚洲国产模特在线播放| 免费大黄网站在线看| 99re免费视频| 国产亚洲漂亮白嫩美女在线| 亚洲国产精品第一区二区| 国产黄色片在线免费观看| a级毛片在线免费观看|