标签分类:CSS

CSS3中的transform3D变换总结

技术宅的CSS3 3D transform总结

#secondary li{
	-webkit-perspective: 400px;
	-moz-perspective: 400px;
	-o-perspective: 400px;
	perspective: 400px;
}
#secondary a {
	display: inline-block;
	position: relative;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	-o-transform-origin: 50% 0;
	transform-origin: 50% 0;
}
#secondary li:hover a {
	-webkit-transform: translate3d(0px,0px,-30px) rotateX(90deg);
	-moz-transform: translate3d(0px,0px,-30px) rotateX(90deg);
	-o-transform: translate3d(0px,0px,-30px) rotateX(90deg);
	transform: translate3d(0px,0px,-30px) rotateX(90deg);
}
#secondary a::after {
	content: attr(title);
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	color: white;
	background: #333;
	-webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	-o-transform-origin: 50% 0;
	transform-origin: 50% 0;
	-webkit-transform: translate3d(0px,105%,0px) rotateX(-90deg);
	-moz-transform: translate3d(0px,105%,0px) rotateX(-90deg);
	-o-transform: translate3d(0px,105%,0px) rotateX(-90deg);
	transform: translate3d(0px,105%,0px) rotateX(-90deg);
	opacity:1;
}

WordPress相关轻博客主题开发经验

轻博客类型的主题已经是现今个人站的设计风尚,不少大型设计博客站点也投入轻博客风格的怀抱,典型的就是Smashing Magzine,其站点的样式充分体现了目前实用类博客的结构设计思路,其结构可归纳为: 导航栏 nav.toplevel 主内容区 div#container > div.sidebar+div.main(fluid) 博客导航区 div#wpsidebar 底部功能区  div …

阅读全文

font-weight相关

font-weight算是CSS中最常用的属性之一,值可以使用两套系统:

一种是:lighter,normal,bold,bolder

另一种是:100~900,其中需要关心的是400代表normal,600代表semi bold(最常用),700代表bold

另外需要注意的是JS调用对应的DOM属性object.style.fontWeight的数值也只能是100~900,否则浏览器会提示invalid number并且返回值为空

页面字体设置

几个页面字体适配度比较好的,HTML body 字体的定义:

  • Google: font-family: arial,sans-serif;
  • Twitter:font: 13px/1.5 Helvetica Neue,Arial,Helvetica,’Liberation Sans’,FreeSans,sans-serif
  • 豆瓣:font: 12px/162% Arial,Helvetica,sans-serif;
  • 新浪微博:font-family: Arial,Helvetica,sans-serif;
  • Apple中国:font: 12px/18px “Lucida Grande”,”Lucida Sans Unicode”,Helvetica,Arial,Verdana,sans-serif;
  • 知乎: font: 13px/22px ‘Helvetica Neue’,Helvetica,Arial,Sans-serif;
  • Facebook: font-family: “lucida grande”,tahoma,verdana,arial,sans-serif;
  • Google+: font: 13px arial,sans-serif;

结论:Arial,Helvetica,San-serif 这个组合适配性是最好的,也是最保险的. 可选:Helvetica Neue . 知乎的定义几乎可以直接照用.

腾讯使用的是:font-family: tahoma, verdana, arial, helvetica, sans-serif;

字体设计方面英文理论很容易懂,但相应中文显示方法仍是未知

 

第 1 页,共 3 页123