您当前位置: 首页 » web前端 »

html5+css3

分类目录归档: html5+css3 - 第2页

css属性在线排序工具

css属性在线排序工具:http://web.zhaicool.net/cssreorder.html 不少人都说css属性的排序也是有一定的讲究的,还有大牛整理了css属性排序的书写规范,比如 1.位置属性(position, top, right, z-index, display, float等) 2.大小(wi …

read more

为什么设置相同宽度input的实际宽度比select的宽?

不知道大家有没有发现,在我们给input和select设置相同宽度的时候,input的实际宽度却比select的宽。造成这种现象的主要原因是属性box-sizing在作怪。W3C给出的介绍是这样的: box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。翻译成“人话”就是我们可以给当前的元素自定义宽高 …

read more

css3画圆、css3画半圆、css3画空心圆和css3画四分之一圆

这篇文章将简述使用CSS3的border-radius来画圆、半圆和四分之一圆,并如何利用它们。 如何使用border-radius属性 下面是border-radius属性最基本的使用方法。 .round { border-radius: 5px; /* 所有角都使用半径为5px的圆角,此属性为CSS3标准属性 */ …

read more

CSS书写顺序及书写规范

  CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, padding, margin) 3.文字系列(font, line-height, letter-spacing, color- text …

read more

css3 animation 制作闪烁的箭头

本案例主要实现箭头自相向上滑动,同时变大变透明的效果。一般在手机端起到引导用户向上滑动页面的作用。 大概思路就是用到css3动画,动画分解成三个部分:1、位移,2、缩放,3、透明度变换。 位移就是bottom或者top、left、right的变化,缩放就是width,height,透明度自然是 opacity。 箭头样 …

read more

css3动画结合jquery打造盒子翻动效果

jquery结合css3动画特效属性如: keyframes、 transform等打造3D盒子翻转特效,懒得写注释了。。。唯一的注释就是以下代码只是草稿,嗯,草稿中的草稿~但是能用! <style type=”text/css”> .wrapper { display: inlin …

read more

CSS3 3D动画之位移、旋转、翻转、缩放、矩阵

作为一个网页设计师,你可能熟悉在二维空间工作,但是在三维空间上工作并不太熟悉。使用二维变形我们能够改变元素在水平和垂直轴线,然而还有一个轴沿着它,我们可以改变元素。使用三维变形,我们可以改变元素在Z轴位置。 三维变换使用基于二维变换的相同属性,如果您熟悉二维变换,你们发现3D变形的功能和2D变换的功能相当类似。CSS3 …

read more

html5移动端meta标签详解

<!– 声明文档使用的字符编码 –> <meta charset=’utf-8′> <!– 优先使用 IE 最新版本和 Chrome –> <meta http-equiv=”X-UA-Comp …

read more

感悟:少用css子元素选择器

少用css元素选择器:”>”,为啥?因为ie6不兼容。。。 当然可以引用一些js来解决如: <!–[if lte IE 6]> <script type=”text/javascript” src=”./views/defa …

read more

css3透明渐变绘制两端透明渐变的分割线

项目需求:绘制一条两端透明渐变的分割线,样式如下: 思路:当然可以用png格式的图片来代替,这样最兼容,但是最好是用css3来制作。用到的是css3的线性渐变属性:linear-gradient与颜色透明属性rgba的结合使用 详细的css3代码很简单: .fgx{ width:100%; height:3px; ba …

read more