Broco Broco

Стильные куски от FaceBook.

23.01.10 / Категории Facebook, Примеры кода | Оставить комментарий

1) Шрифты.
Для стандартного шрифта страницы, Facebook использует следующий стиль. Слова написанные таким текстом очень удачно смотрятся, как русские так и английски.

<style type="text/css">
 *{ padding:0px; margin:0px; outline:none;}
 #wrap { width:300px; border:1px solid #CCCCCC; padding:30px; margin:100px auto;}
 p { font-family:"lucida grande",tahoma,verdana,arial,sans-serif; font-size:11px; color: #333333; }
</style>
  <p>
 Это пример текста с использованием стиля от Facebook. Они не используют черный, потому что серый лучше смотрится.
  </p>

1

2) Заголовки

<style type="text/css">
 *{ padding:0px; margin:0px; outline:none;}
 
 #wrap { width:400px; margin:0 auto; font-family:"lucida grande",tahoma,verdana,arial,sans-serif; font-size:11px; color: #333333;}
.some_div h3 { border-bottom:1px solid #CCCCCC; font-size:13px; font-weight:bold; color: #999999; padding-top: 15px; display:block; margin:0; } 
.some_div .upd_on { color: gray; margin: 0 0 0px 5px; font-size:10px; font-weight:normal; padding:0; text-align: right; }
</style>
 <div id="wrap">
<div class="some_div">  <h3>Закачки</h3>  <p class="upd_on">Обновлено  1 Июня, 2010</p>  </div>
</div>

2

3) Кавычки.

<style type="text/css">
 *{ padding:0px; margin:0px; outline:none;}
 
 #wrap { width:400px; margin:0 auto; font-family:"lucida grande",tahoma,verdana,arial,sans-serif; font-size:11px; color: #333333;}
blockquote { background:transparent url(http://www.facebook.com/images/start_quote_small.gif) no-repeat scroll -1px 0;  line-height:14px; margin:14px 0; padding:0 0 0 16px; } 
blockquote span { background:transparent url(http://www.facebook.com/images/end_quote_small.gif) no-repeat scroll right bottom; padding:0 15px 0 0; } 
</style>
   <div id="wrap">
<blockquote>  <span>Кавычки следует использовать там, где надо что-то выделить, либо например для комментариев.</span>  </blockquote>
 </div>

3

4) Таблицы

<style type="text/css">
 *{ padding:0px; margin:0px; outline:none;}
 #wrap { width:400px; margin:0 auto; font-family:"lucida grande",tahoma,verdana,arial,sans-serif; font-size:11px; color: #333333;}
.some_div table { margin-left:20px; margin-top:17px; width:400px; text-align:center; } 
.some_div th.name_heading { color:#333333; font-size:11px; font-weight:bold; width:100px; } 
.some_div th.simple {  width:150px;}
.some_div table th { border-color:#C7CFE0; border-bottom:1px solid #E2E6EF; margin:0; padding:3px; color:#777777; font-size:9px; } 
.some_div td { border-bottom:1px solid #E2E6EF; margin:0; padding:3px; color:#555555; font-size:11px; } 
.some_div table .even_colomn { background:#F8F8F8 none repeat scroll 0 0; } 
</style>
 <div id="wrap">
<div class="some_div">  <table cellspacing="0"><tbody>  <tr>  <th class="name_heading even_colomn"><strong>Куку</strong></th>  <th nowrap="nowrap simple">Ай-яй-яй</th>  <th nowrap="nowrap simple">Ай-яй-яй</th>  </tr>  <tr>  <td class="action_text even_colomn">Ряд</td>  <td>Рядочек</td>  <td>Рядочек</td>  </tr>  <tr>  <td class="action_text even_colomn">Ряд</td>  <td>Ряд</td>  <td>Рядочек</td>  </tr>  <tr>  <td class="action_text even_colomn">Ряд</td>  <td>Ряд</td>  <td>Ряд</td>  </tr>  </tbody></table>  </div>
 </div>

4

5) Ряды

<style type="text/css">
 *{ padding:0px; margin:0px; outline:none;}
 
 #wrap { width:400px; margin:0 auto; font-family:"lucida grande",tahoma,verdana,arial,sans-serif; font-size:11px; color: #333333;}
.forum table { width:200px; } 
.forum table tr { background-color:#FFFFFF; } 
.forum table tr.odd { background-color:#F0F0FF; } 
.forum table td { padding:3px 3px 3px 9px; } 
.forum table .subheader { color:gray; font-size:9px; } 
.forum table h4 { font-weight:bold;margin:0;font-size:11px; } 
</style>
 <div id="wrap">
<div class="forum">  <table cellspacing="0">  <tr class="odd">  <td> <h4>Тема форума 1</h4> <div class="subheader">Rantie - 1 Июня 2008</div> </td>  </tr> <tr> <td> <h4>Тема форума 2</h4> <div class="subheader">Rantie - 1 Июня 2008</div> </td>  </tr> <tr class="odd"> <td> <h4>Тема форума 3</h4> <div class="subheader">Rantie - 1 Июня 2008</div> </td>  </tr> <tr>  <td> <h4>Тема форума 4</h4> <div class="subheader">Rantie - 1 Июня 2008</div> </td>  </tr>  </table>  </div>
 </div>

5

Комментарии

Оставить комментарий