精彩人生

根据盒模型，我们可以在巧妙设置宽度和高度的情况下，利用border制造出各种不同三角形和梯形学习资料:点击查看：CSS border三角、圆角图形生成技术简介点击查看：CSS Border使用小分享点击查看：Dotted&Dashed终极分析及IE6透明边框1.4个不同颜色的小三角拼成的正方形.triangleTest1{width:0;he

When you write CSS, there are some problems you may run into. Then, to overcome the situation, you’ll need to use some small and effective CSS tricks.In this article I’ll try to show you some tips a

来源：http://www.css88.com/archives/4492早些天写过了类的实现，接着我们看看的静态类的实现。这东西在Javascript里用得会非常的频繁，因为针对现在的网页，多个基于同一个类对象的页面不多，往往不同块对象的交互就可以解决问题了，这就需要在JS针对元素定义几个静态类就可以完事了，进入正题。这次我们直接看例子：01/

过去，由于加载图片的格式限制(只能使用GIF格式)，设计加载动画不是那么容易。随着技术和浏览器的发展，用 CSS3 和 jQuery 就可以方便地设计加载动画，这种方式的高度可定制化以及服务器的进步使得开发者的各种要求得到满足。下面介绍10个实用的方案。1. Sonic——循环的加载动画Sonic是一个很小的JS“类”，你可以用它来创建自定义加载动画——蛇吞尾似的循环动画。2.

If you’re about to launch a new web product or you just need to improve the user experience for an existing web form, then this tutorial is for you.In this article you’ll find out how to design a cl

When you’re building a responsive site, there will undoubtedly be times when you need to change a background image, or when you need to hide an image for a specific resolution range. Unfortunately if

With the advent of high DPI device screens like Apple's retina display, creating high resolution apps has become a standard for native app developers. But what about us mobile web folks? Most elemen

前几天加上了一个小效果，我叫它为时光流逝效果，最初是在苹果官网看到的，是为了介绍全新ipad可以续航10小时的一个小效果，于是我用我自己的方式把相同的效果写了一下，不是canvas，仅仅是css3而已，因为我看着还可以，于是就挂到博客上了，用来提醒自己一天的时光就这样流逝了,刚好又有童鞋问我这效果是如何实现，并希望我写一篇文章来说明一下，于是就有了这篇文章。效果是webkit only。素

adminCSS3 Animated GearsIn today’s lesson, we have made the animated gears with CSS3. The result looks very nice. I have used CSS3 keyframes, animation and transforms (rotate) in order

The :target pseudo selector in CSS matches when the hash in the URL and the id of an element are the same. The current hash of the URL is "voters" Content:target { background: yellow;}

来源：http://www.itivy.com/html5/archive/2012/4/14/css3-text-path.html之前，我们利用CSS只能让文字横平竖直地显示，连倾斜一个角度都不行，更不用说让一串文字按指定的路径轨迹显示了。但是，CSS3到来之后，这一切实现起来是那么的简单，我们可以利用CSS3的text-transform options: rotation, skew,

图形包括基本的矩形、圆形、椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦。其中绝大部分涉及到CSS3中的border-radius，text-shadow，transform等一些比较复杂的属性，所以需要有一点CSS3基础的最好。特别注意的是此效果不兼容IE1.正方形正方形1 #square {2 width: 100px;3 height: 1

一、简单概要web通信（洋名：web messaging）是一种文档中独立的浏览上下文间的DOM不会被恶意的跨域脚本暴露数据分享方式。得得得，术语啊什么的，比看到凤姐还头疼。有必要把上面一句话拆开讲：web通信是一种数据分享方式（有屁话之嫌）；通信的主体是“浏览上下文”（这是纳尼？）；哦，“浏览上下文”呢是“一个将 Document 对象呈现给用户的环境”，你可以近似理

近日，据国外媒体报道，W3C联合主席Daniel Glazman指出，与IE相比，苹果和谷歌移动浏览器（都基于开源Webkit引擎）的主导地位对Web开放性的影响更为恶劣。因为在Web标准发展的途径。新浏览器通常会引进最终成为标准的新技术，但最初这些新技术只出现在一种浏览器中。Web编程人员在使用这些试验性的技术时，他们必须在命令前加一个前缀。例如，“-webkit”前缘表明基于WebKit的浏览

单从Animation字面上的意思，我们就知道是“动画”的意思。但CSS3中的Animation与HTML5中的Canvas绘制动画又不同，Animation只应用在页面上已存在的DOM元素上，而且他跟Flash和JavaScript以及jQuery制作出来的动画效果又不一样，因为我们使用CSS3的Animation制作动画我们可以省去复杂的js,jquery代码（像我这种不懂js的人来说是件很高

一、卖的什么葫芦药？jquery.zSlide.js是我最近折腾的一个jQuery插件，借助于CSS3和HTML5的一些新特性，在浏览器中实现类似于powerpoint幻灯片展示。二、为何需要？无论是在公司内部，还是在一些技术会议上，我们做分享的时候，用的最多的想必是powerpoint。但是，powerpoint这个东西本身就是缺乏“自由”与“分享”精神的，因为其目前

为什么今天要谈lesscss呢，因为首先css语言是静态的，而lesscss却是动态的，如果有需要的童鞋请点击这里进行下载lesscss，lesscss的官网lesscss.org至今还是被墙的，这里截图留恋吧。css木有变量，但是lesscss有，css木有继承，但是lesscss有，lesscss甚至有函数，可以进行属性合并，重写，lesscss优点还有很多很多，提高代码的维护成本，减

We are certain that you’ll be surprised to see the amazing animated series as we bring for you these 10 CSS3 and jQuery Loading Animation Solutions… the best of the run.Loading animations was tough

目前只的safari支持（Available in Safari 4.0.3 and later running）apple官方解释：Specifies a perspective projection matrix.perspective(depth)ParametersdepthThe distance, in pixels, of the z=0 plan

问题：在移动版safari（iphone/ipad）上textarea顶部出现一个阴影，这个阴影既不是boder也不是background的，用pc的浏览器看没有这个阴影。解决思路：在网上搜索textarea shadow。特定浏览器的问题还是挺多的，特别是针对自定义表单控件。解决方法：在textarea添加如下样式：-webkit-appearance: none;

很神奇啊，今天居然在公司里登录了google+，我是有多么久没上那玩意了。有点意外，于是啊到处点啊点的，结果看到一个列表信息模块上，当鼠标经过的时候，文字从这个模块的下面“爬”上来了。google的东西似乎跟IE这样低端的浏览器有“过节”，好嘛，不看IE，估计有可能是CSS3来实现的，手痒一下，自己写一个玩玩。点击我看效果，在这个demo中可以看到当鼠标经过那几个链接上，文字是“爬”上来了，鼠

Usually, a FAQ page is that long page with lots of questions and answers, the one we are searching for when we need some extra info regarding a subject. So, for example, if you own a website that sell

VIEW DEMO DOWNLOAD SOURCEToday we’ll experiment some more with the adjacent and general sibling combinator and the :checked pseudo-class. Using hidden inputs and labels, we will create an accordion

Here’s a crazy and ridiculous tip that probably has limited uses, but illustrates some quirky possibilities with CSS3 transitions. I’ve written something about this before and Chris Coyier explained

有很多种方法来实现图片的预加载，通常大部分使用Javascript让事情滚动。不要再受Javascript预载的束缚了吧，用CSS你就可以毫不麻烦的预载你的图片。为什么使用预载你为什么会考虑使用预载呢？你是否曾有个网站，在那个网站你要滚动你的导航然后有个延迟直到图片被加载完……嘿嘿。预载将在这方面帮助你。它将在页面加载的时候加载那些图片并将其存储在浏览器的缓存里面。这样当用户滚动导航的时候，很

下面的示例展示了使用纯CSS制作的各种图形，你可以自由地修改文中的CSS代码。这个收集的原文在这里。经测试，IE9, Chrome, FF, Safari都可以正常显示。正方形长方形圆形椭圆形三角形（向上）三角形

img:hover {-webkit-transform: rotate( random(-5, 5)deg); // generate a random number between -5 and +5-moz-transform: rotate( random(-5, 5)deg); // generate a random number between -5 and +5}

Web中给标题之类描边的效果时不时的有，在以前都只能使用图片来制作这种效果，现在CSS3中的text-shadow虽然的做出类似的描边效果，但效果并不佳，其实CSS3中还有一个属性，制作描边效果非常的棒，这个属性就是——text-stroke。只可惜的是现在这个属性仅有webkit内核的浏览器支持。其使用语法是：.elm { -webkit-text-stroke: width col

今天读了这篇文章http://bradfrostweb.com/demo/mobile-first/article.html ，把学到的记录一下，方便以后使用～1.适配的问题目前的设备尺寸大小不一，各种尺寸都有，我们不可能编写那么多套页面去适配，但是又不可能回避这个问题，因此我们得有一套解决方案。CSS中的media queries（媒体查询）API可以做到。2.mobil

非常不错的css3效果，值得收藏参考，原文见《Showcase of Really Awesome CSS3 Demo》。Responsive IllustrationPortalsBowieFocusRainCarve MeBokehMonsterTilt Sh

其实分析每个css3的案例动画，首先做的应该是先把动画停下来，了解下初始是怎么样的。如这个我们一开始看到这么绚的动画加载效果，一般都认为比较难，但是先把animation这个属性通过firebug禁用后，发现原来原理并不是很复杂，只是运用了border，border-radius和box-shadow，然后给就是rotate的animation。第二个和第一个原理一样，只是设置的border-co

Responsive设计就不说是什么了？如果你不太了解，可以先点击这里做一定的了解，也可以点击这里查看一些有关于Responsive的案例。今天要跟大家说的是有关于Responsive导航的制作。众所周知，导航对于一个网站来说是非常重要的，特别是一个响应式布局的网站，如何让导航也具有响应式就显得更重要了，特别是在移动端设备上显示，这个响应式菜单就更显重要，他帮助访问者更容易的找到你的网站内容。

这几天做关于html5 +css3的东西，其中遇到了一个问题，就是给一个div设置动画，如何让动画结束后保持最后一个动作。查阅了资料，发现有这样这个事件webkitAnimationEnd，只要监听这个事件就可以了。[html] view plaincopydiv id="carousel">div>  [html] view plaincopy

content属性早在CSS2.1的时候就被引入了，可以使用:before以及:after伪元素生成内容。此特性目前已被大部分的浏览器支持：(Firefox 1.5+, Safari 3.5+, IE 8+, Opera 9.2+, Chrome 0.2+)。另外，目前Opera 9.5+ 和 Safari 4已经支持所有元素的content属性，而不仅仅是:before和:after伪元素。

在Webdesignerwall.com逛时，看到一篇文章《5 Simple, But Useful CSS Properties 》一文，细看以之后真的很有用，这几个属性大家都有见过，也很常用，但有几个人会认为他很有用呢？不信，我们来一起看看。《5 Simple, But Useful CSS Properties 》原文是这么描述的“这篇文章是关于5个用的CSS属性，你应该非常的熟

浏览器可以被认为是使用最广泛的软件，本文将介绍浏览器的工 作原理，我们将看到，从你在地址栏输入google.com到你看到google主页过程中都发生了什么。将讨论的浏览器今天，有五种主流浏览器——IE、Firefox、Safari、Chrome及Opera。本文将基于一些开源浏览器的例子——Firefox、 Chrome及Safari，Safari是部分开源的。根据W3C（World

body:before { content: ""; position: fixed; top: -10px; left: 0; width: 100%; height: 10px; box-shadow: 0px 0px 10px rgba(0,0,0,.8

设计行业可能是不断变化和发展的行业，设计师必须时刻关注所有的事情，包括在视觉设计方面的新趋势，以及jQuery、HTML5和CSS3等方面的技术。设计师用这些技术来表达更多的创意的设计，使用户体验更丰富。在这里为大家分享一些神奇的、漂亮的CSS3教程，通过这个集合我们学习新的东西，并准备着应用到将来的设计中。Quickly Build a Swish Teaser Page With CS

If you've ever printed a page and noticed that it looks different than the actual page displayed in the browser you've more than likely witnessed a CSS media type in action. By using CSS media types s

一、碎碎念~前言我们都用过jQuery的CSS()方法，其底层运作就应用了getComputedStyle以及getPropertyValue方法。对于那些只想混口饭吃的人来讲，晓得CSS()如何使用就足够了。对于希望在JS道路上越走越远的来人说，简单了解一些JS库底层实现对自己的学习很有帮助。可能谈不上信手拈来的使用，至少对创造一些创意新颖的新技术拓宽了思路。jQuery