注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

回忆之旅

我很向往山村的农庄生活,他们的热情,让我无法抗拒! 51EOO.COM

 
 
 

日志

 
 

CSS FF内容角度旋转  

2011-07-04 16:51:39|  分类: 技术分享 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
1、Html

页面中html结构如下:

<div class="postdate">
        <div class="month m-06">Jun</div>
        <div class="day d-30">30</div>
        <div class="year y-2009">2009</div>
</div>
.postdate容器包含三个区域,分别对应年月日,这样很好的保证了语义上的完整性。

在类似wordpress这样的CMS系统中,其后端代码是这样的:

<div class="postdate">
        <div class="month m-<?php the_time('m') ?>"><?php the_time('M') ?></div>
        <div class="day d-<?php the_time('d') ?>"><?php the_time('d') ?></div>
        <div class="year y-<?php the_time('Y') ?>"><?php the_time('Y') ?></div>
</div>
2、Css

css是sprite真正发挥作用的地方,利用html中的定义的class属性,让对应的图片得以显示。

首先,让class属性为.postdate的容器相对定位,这样包含其中的三个区域就会绝对定位,并使用同一张背景图片。设置各自的宽度和高度,并将文字移出以显示背景图片。

然后,定义每个月(12)、每天(31)、每年(按10年计)具体的背景位置,以显示与其相对应的图片。

.postdate {
  position: relative;
  width: 50px;
  height: 50px;
  float: left;
}
.month, .day, .year {
  position: absolute;
  text-indent: -1000em;
  background-image: url(/wp-content/themes/ljq/images/dates.png);
  background-repeat: no-repeat;
}
.month { top: 2px; left: 0; width: 32px; height: 24px;}
.day { top: 25px; left: 0; width: 32px; height: 25px;}
.year { bottom: 0; right: 0; width: 17px; height: 48px;}
 
.m-01 { background-position: 0 4px;}
.m-02 { background-position: 0 -28px;}
.m-03 { background-position: 0 -57px;}
... more like this ...
 
.d-01 { background-position: -50px 0;}
.d-02 { background-position: -50px -31px;}
.d-03 { background-position: -50px -62px;}
... more like this ...
 
.y-2006 { background-position: -150px 0;}
.y-2007 { background-position: -150px -50px;}
.y-2008 { background-position: -150px -100px;}
... more like this ...

第二种方法:利用Text Rotation来实现

Jonathan Snook 在他的文章《Text Rotation with CSS》中提到用Text Rotation来实现这种效果。这里对其作简要的描述。

如今,很多主流的浏览器如Webkit和Firefox(从3.5开始)都支持旋转HTML元素。那么要使其垂直排列,就可以利用该属性。但须为每种浏览器加上前缀。

-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg);
对于IE浏览器,可以使用一个称之为BasicImage 的滤镜来达到目的,该滤镜能够旋转任何具有layout属性的元素。但字体较之于使用图片来说,并不显得平滑。

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
该滤镜可以接受四个属性值0、1、2、3,其对应旋转的角度分别为0、90、180、270。尽管它还具有mirroring、masking、greyscale 等属性,但在此对我毫无意义。

在Jonathan Snook的这篇文章的留言中,Ashish 提到在IE中使用css的一个属性writing-mode:tb-rl可以得到同样的效果,本人做过测试,的确可以使文本垂直排列。但与旋转文本略有不同,主要体现在文字起始的方向上。另外,本人在IEtest中测试IE8,使用BasicImage好像不能生效。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>日期垂直排列的两种技巧--示例</title>
<style type="text/css">
.example-date {
background-color:#998877;
float:left;
margin-left:10px;
padding:45px 5px 0;
position:relative;
}
.example-date .day {
font-size:45px;
left:5px;
line-height:45px;
position:absolute;
top:0;
}
.example-date .month {
font-size:25px;
text-transform:uppercase;
}
.example-date .year {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
display:block;
font-size:1.1em;
background-color:#998877;
position:absolute;
right:0px;
top:10px;
float:right;
}
.example-date .year_1 {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
display:block;
font-size:1.1em;
background-color:#998877;
position:absolute;
right:0px;
*right:-20px;
_right:0;
top:10px;
writing-mode:tb-rl;
float:right;
}
hr{ clear:both;margin:15px 0;}
</style>
<!--[if IE]>
<style type="text/css">
.example-date .year {
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.example-date .year_1 {
*right:-20px;
_right:0;
writing-mode:tb-rl;
}
</style>
<![endif]-->
</head>
<body>
<h3>使用滤镜</h3>
<div class="example-date">
<span class="day">31</span>
<span class="month">July</span>
<span class="year">2009</span>
</div>
<p>使用使用滤镜,在IEtest中查看,IE8 beta中文字并不垂直排列。</p>
<hr/>
<h3>writing-mode</h3>
<div class="example-date">
<span class="day">31</span>
<span class="month">July</span>
<span class="year_1">2009</span>
</div>
<p>使用writing-mode,IE显示并不靠右,这里我使用css Hack设置right属性为-20px。这样使其回到正常的位置。</p>
</body>
</html>

第三种方法:
<html>
<head>
<title>CSS控制文字竖向排列的代码 - www.webdm.cn</title>
<style type="text/css">
.verticaltext{
position: absolute;
left: 13px;
top: 80px;
width: 16px;
writing-mode: tb-rl;
}
</style>
</head>
<body>
<script type="text/javascript">
var myverticaltext='<div class="verticaltext">我是竖着排的,好看吗?</div>'
var bodycache=document.body
if (bodycache  &&  bodycache.currentStyle  &&  bodycache.currentStyle.writingMode)
document.write(myverticaltext)
</script>
</body>

<br />
<a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!



CSS FF内容角度旋转 - Tony - 回忆之旅
  评论这张
 
阅读(202)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017