在做H5的水平滑动卡片时用到了display:inline-block;却发现处在同一水平线上的元素之间居然产生了缝隙，这很显然不是我想要的效果，所以我就换成了左浮动，这样缝隙的问题是解决了，但是需要设置父元素的宽度才能实现水平左右滚动，这样又增加了代码量，因为卡片的个数不固定，需要实时设置其父元素的宽度，就要用到js，所以代码量增加了，也不是最好的选择。看来最好的解决办法就是用到display:inline-block;了，于是缝隙的问题就...
最近在项目中用到了CSS3中的动画属性。常常容易搞混。所以从网上查了点资料，总结一下，方便有需要的朋友们可以参考学习。Transform在部分的test case当中，每每演示transform属性的，看起来好像都是带动画。这使得小部分直觉化思维的人认为transform属性是动画属性。而恰恰相反，transform属性是静态属性，一旦写到style里面，将会直接显示作用，无任何变化过程。transform的主要用途是用来做元素的特殊变形，对于做设计的人来说并...
1. 回顾一下之前学习过的background属性1.1 background-color1.2 background-image1.3 background-repeat1.4 background-position1.5 background-attchment1.6 background2. CSS3新增的background属性2.1 background-origin2.2 多重背景2.3 background-size1.1 背景颜色属性：background-color颜色的表示方法有3种：单词、rgb表示法、十六进制表示法1. 单词： 能够用单词来表述的，都是简单颜色2. rgb表示法rgb表示三原色“红”red...
英文原文： www.456bereastreet.com/archive/200601/css_3_selectors_explained/中文翻译： www.dudo.org/article.asp?id=197注：本文写于2006年1月，当时IE7、IE8和Firefox3还未发行，文中所有说的浏览器支持均未包括这三个版本的浏览器。在IE8和Fir:nth-of-type():nth-of-type()伪类和nth-child()伪类找使用方法十分相似，只不过他匹配的是规则中指明类型的元素。下面的规则将会匹配每个属于父元素中第三个子元素的p元素（属于第...
这篇文章主要介绍了使用HTML5和CSS3表单验证功能,需要的朋友可以参考下客户端验证是网页客户端程序最常用的功能之一，我们之前使用了各种各样的js库来进行表单的验证。HTML5其实早已为我们提供了表单验证的功能。至于为啥没有流行起来估计是兼容性的问题还有就是样式太丑陋了吧。下面我们将来一步一步创造一个HTML5和CSS3的表单验证，只使用HTML和CSS。完成后的如下：第一步：整理验证字段和类型首先我们需要如下几个字段：姓名(fu...
以前做自定义样式的radio, checkbox 的时候，一直是如下结构<label><span class="diyRadio"><input type="radio" name=" value=""></span><span>文字</span> </label>然后定义diyRadio 的样式作为新Radio, 再用js 做关联。知道今天才知道可以用<label></label>标签的for 属性 + :checked 做，纯CSS（ 真是太不应该了，学东西还是要认真、细致点。 ）DIY 单选项示例如下：<!-- HTML --> <p class="radio-beauty-container"><label><...
整体思路是：通过裁切（clip）产生两个半圆展示出静态的进度条，而后通过旋转（rotate）角度的变化产生动态效果。先来回顾两个基础知识点（1）css的一个不常见的属性：clip: rect(top, right, bottom, left);这个属性规定了一个裁切的矩形，其中top和bottom所指定的偏移量是从元素盒子顶部边缘算起，right和left所指定的偏移量是从元素盒子左侧边缘算起（这里需要重点注意的是bottom和right的计算方式）。看下面这张超级清晰的图（...
这篇文章主要介绍了CSS3中的content属性使用示例,是为CSS3入门学习中的基础知识,需要的朋友可以参考下CSS中主要的伪元素有四个：before/after/first-letter/first-line，在before/after伪元素选择器中，有一个content属性，能够实现页面中的内容插入。插入纯文字content:"插入的文章"，或者content:none不插入内容html:XML/HTML Code复制内容到剪贴板<h1>这是h1</h1><h2>这是h2</h2>cssCSS Code复制内容到剪贴板h1::after{ conte...
CSS3中必须要知道的10个顶级命令，都是一些不错的效果实现代码，喜欢的朋友可以收藏下1.边框圆角（Border Radiuas） 这个是我们在平常很常用的吧，以前我在用p圆角的时候，特别特别的痛苦，不管是用CSS来画圆角，还是用图片来画圆角都不那么容易，但是现在好了，在CSS3中，直接只需要如下面饿代码，就能做出美轮美奂的圆角效果了~~~ 代码如下:#box1 { border: 1px solid #699; /* for Mozilla Firefox */ -moz-border-radius: 20px...
最近的项目都会接触CSS3，万恶的IE却不支持，搜索了一下，发现IE的滤镜挺管用，貌似W3C正在把滤镜标准化,抽时间整理了一下IE的滤镜效果记住请用IE浏览哦,感兴趣的朋友可以了解一下，希望本文对你有所帮助最近的项目都会接触CSS3，万恶的IE却不支持，搜索了一下，发现IE的滤镜挺管用，貌似W3C正在把滤镜标准化。今天先整理一下IE的滤镜效果(请用IE浏览)，明天在把CSS3对应的效果写上(请用Webkit内核浏览)。，如果读者还有其他更好的...
什么是雪碧图雪碧图就是CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，就是把多张小图标合并到一张图片上，然后用css的background-position来显示需要显示的部分。为什么要用雪碧图可以减少加载网页图片时对服务器的请求次数，提高页面的加载速度，解决IE6鼠标滑过时出现闪白的现象。用雪碧图有什么弊端个人认为如果你的雪碧图不是很大，也不是很复杂基本没什么弊端。如果你的雪碧图很大又复杂的话就有出现css代码复查，...
CSS3之前我们可以对背景添加一张图片 CSS3允许我们在一个元素上添加多个图片多重背景图片<p class="demo"></p>.demo { width: 600px; height: 200px; border: 1px solid black; background: url(1.png) no-repeat;}多重背景可以把多个图片资源添加到background属性上，用逗号隔开 然后用background-position把他们定位到你想要的位置.demo { width: 600px; height: 200px; border: 1px solid black; backg...
本篇文章主要介绍了CSS3实现任意图片lowpoly动画效果实例，这是一个利用CSS3的动画属性实现的结合lowpoly（低多边形风格）的效果，主要利用了CSS3 transform属性的rotate旋转，translate移动，scale缩放这是一个利用CSS3的动画属性实现的结合lowpoly（低多边形风格）的效果，主要利用了CSS3 transform属性的rotate旋转，translate移动，scale缩放，CSS代码部分非常简单，唯一有趣的是 nth-of-type选择器的使用，这里UI设计师小伙伴...
CSS3之前渐变色图片只能用背景图片 CSS3的渐变色语法可以让我们省去下载图片的开销 并且在改变浏览器分辨率时有更好的效果颜色值RGBA我们熟悉的rgb颜色标准，是由r（red）、g（green）、b（blue）三种颜色叠加变化形成各种颜色 取值0~255，或0~100% rgba就是在rgb基础上增加了alpha不透明度参数.demo { width: 100px; height: 100px; background-color: rgb(255, 0, 0);}.demo { width: 100px; height: 100px; b...
animation IE10animation的六大属性animation-name规定需要绑定选择器的keyframe名称animation-duration规定完成动画所花费的时间 s ms object.style.animationDuration="3s"animation-timing-function动画的速度曲线默认值ease object.style.animationTimingFunction="linear"语法 animation-timing-function:valueanimation-timing-function使用名为三次Cubic Bezier贝塞尔曲线函数的数学函数，来生成速度曲线 可以使用自己的...