新出的html5新增了不少标签,性能更强,原来的很繁琐的功能几个标签就能实现,同时CSS3也推出,更是一大亮点,下面是css3的部分用法,在此总结一下,以供需要的朋友们,总共30个例子
1.长方形
#Rectangle{
width: 200px;
height: 50px;
background-color: red;
直接上代码,类名字就能说明意思:
.camnpr-rotate-90 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg)
}
效果如下:
这些三角形用图片都是可以达到一样的效果的,但当颜色和比例需要改动时,CSS只要简单的改变一下border的样式就可以了,图片可是要重新替换的,效果也没有那么容易调试,过多的图片也会对页面性能造成影响,所以还是推荐用CSS来实现喽~
HTML5和CSS3的兴旺,带给用户更炫更好的体验,一些网站不仅在内容,可用性,设计,功能等方面,让人耳目一新;交互设计细节和动画更是与众不同。我们将分享一些模型的经验,分析一下这些简单的模式为什么效果很好。
相信很多人都遇到过在设计中自定义滚动条样式的情景,之前我都是努力说服设计师接受浏览器自带的滚动条样式,但是这样只能规避还是解决不了问题,最近在项目中遇到了,正好来总结一下。当然,兼容所有浏览器的滚动条样式目前是不存在的。
IE是最早提供滚动条的样式支持,嗯,好多年了,但是其它浏览器一直没有支持,IE独孤求败了。
这些样式规则很简单:
手机开发火了很久了,各种app玲琅满目,一直开发pc web版的前端人员,怎么转到移动开发上呢?wap站?好老了,现代浏览器,很大的特点是:webkit内核, 支持html5,css3,国内主流的手机浏览器UC、海豚等,因此pc转移动,也就是要会html5、css3,自然js、html4、css2也是必须的。
高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量、功耗与流畅度。 在PC时代我们更多的是考虑体验上的流畅度,而在Mobile端本身丰富的场景下,需要额外关注对用户基站网络流量使用的情况,设备耗电量的情况。
...
前端面试的时候,很多考官都会提到“盒子模型”,如果你能很好的解释清楚,那么证明你css基本功很不错。下边来说一说盒子模型吧。 盒子模型是CSS中一个重要的概念,理解了盒子模型才能更好的排版。其实盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型。
盒子模型是CSS中一个重要的概念,理解了盒子模型才能更好的排版。其实盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型。他们对盒子模型的解释各不相同,先来看看我们熟悉的标准盒子模型:
...
之前,我们介绍了,sencha touch和phonegap区别,AppCan作为国内数一数二的手机开发平台,那么它和老牌的phonegap,有什么不同?
PhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用iPhone,Android,Palm,Symbian,WP7,Bada和Blackberry智能手机的核心功能——包括地理定位,加速器,联系人,声音和振动等,此外PhoneGap拥有丰富的插件,可以以此扩展无限的功能。PhoneGap是免费的,但是它需要特定平台提供的附加软件,例如iPhone的iPhone SDK,Android的Android SDK等,也可以和DW5.5配套开发。使用PhoneGap只比为每个平台分别建立应用程序好一点点,因为虽然基本代码是一样的,但是你仍然需要为每个平台分别编译应用程序。
...网页素材:显示三角图标的方式有很多,譬如:图片、符号△▲;用纯css的方式,怎么显示三角呢? 三角要怎么用才能美观呢?本站之前的一篇纯css的标签背景就是一个很好的应用方式。
那么本文主要介绍这种纯css显示三角的原理。
先看一下一个简单例子的效果:
HTML代码:
...
之前有说道css2的30个应该记住的CSS选择器,那么新的CSS3又有哪些新属性呢?虽然大多数需要特定的前缀,但你仍然可以在你的项目中使用它,其实上我也鼓励大家这么做。
关键是首先确定你是否对各个浏览器之间的细微的差别有所了解,你能肯定的说IE显示的90度的角就不圆滑嘛?这取决于你的决定。但是要永远记住,网站设计不必看到所有浏览器的不同。在文章的最后,我们将显示一个有趣的最终的案例。
...