CSS Vertical Text

CSS Vertical Text代码
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 
 4 <head>
 5 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
 6 <title>CSS Vertical Text</title>
 7 <meta name="Author" content="Geovin Du 塗聚文"/>
 8 <meta name="Keywords" content="Geovin Du 塗聚文"/>
 9 <meta name="Description" content="Geovin Du 塗聚文"/>
10 
11 <style type="text/css">
12 p.css-vertical-text {
13     color:#333;
14     border:0px solid red;
15     writing-mode:tb-rl;
16     -webkit-transform:rotate(90deg);
17     -moz-transform:rotate(90deg);
18     -o-transform: rotate(90deg);
19     white-space:nowrap;
20     display:block;
21     bottom:0;
22     width:20px;
23     height:20px;
24     font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
25     font-size:24px;
26     font-weight:normal;
27     text-shadow: 0px 0px 1px #333;
28 }
29 /* Text rotation exmaples styles */
30 .datebox
31 {
32     float: left;
33     background-color: #2c7ad0;
34     border: 1px solid #000000;
35     color: #ffffff;
36     position: relative;
37     margin: 0 0 0 20px;
38 }
39     .datebox .month
40     {
41         display: block;
42         text-align: center;
43         font-size: 30px;
44         line-height: 30px;
45         padding: 2px 0;
46         background-color: #1e528c;
47         text-transform: uppercase;
48     }
49     .datebox .day
50     {
51         display: block;
52         text-align: center;
53         font-size: 80px;
54         line-height: 80px;
55         font-weight: bold;
56         padding: 2px 24px 2px 0;
57     }
58     .datebox .year
59     {
60         display: block;
61         writing-mode: tb-rl;
62         -webkit-transform: rotate(90deg);    
63         -moz-transform: rotate(90deg);
64         position: absolute;
65         right: 0;
66         bottom: 9px;
67         font-size: 24px;
68     }
69     *:first-child+html .datebox .year { right: -28px; } /* IE7 positions element differently to IE6 & 8 */
70     .datebox span:nth-child(3)
71     {
72         right: -16px;
73         bottom: 24px;
74     }
75 </style>
76 </head>
77 
78 <body>
79 <p class="css-vertical-text">CSS Vertical Text geovindu hi how are you</p>
80 
81     <div class="datebox">
82 
83         <span class="month">July</span> 
84         <span class="day">31</span> 
85         <span class="year">2009</span>
86     </div>
87 
88 </body>
89 
90 </html>
91 

 

posted @ 2010-07-13 12:12  ®Geovin Du Dream Park™  阅读(316)  评论(0)  编辑  收藏  举报