natalie86的专栏

@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体，你们当中或许有许多人会不自然的问，这样的东西IE能支持吗？当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶。我的Blog就使用了许多这样的自定义Web字体，比如说首页的Logo，Tags以及

当你设置一个页面元素的高度(height)为100%时，期望这样元素能撑满整个浏览器窗口的高度，但大多数情况下，这样的做法没有任何效果。你知道为什么height:100%不起作用吗？按常理，当我们用CSS的height属性定义一个元素的高度时，这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如，如果一个div元素的CSS是height: 100px;，那它应该在页面的竖向空间

Codrops：Codrops 上有许多 HTML+CSS+JS 的华丽 Demo 和 Source Code

这是一款效果非常炫酷的纯CSS3 3D旋转立方体动画特效。该3D立方体使用CSS3 perspective制作，可以在水平方向、垂直方向和平面视角方向旋转，效果相当震撼。查看演示 纯CSS3超酷3D旋转立方体动画特效.zip (28.78 KB, 下载次数: 67)HTML结构立

这是一款非常实用的jQuery和CSS3网页固定背景视觉差特效插件。该固定背景特效可以在页面中固定某些元素，在页面滚动的时候可以修改这些元素的视觉效果，从而制作出一种滚动视觉差的特效。该固定背景视觉差特效的效果都是使用CSS3来完成的，jQuery代码只是用于管理上下导航按钮的事件。该效果主要使用CSS的background-attachment属性来实现。在例子中，使用一幅手机的图片作为

所以你学会了基础的id，类和后代选择符，然后你就一直用它们了吗？如果是这样，你丢失了（css的）巨大的灵活性。在本文中提到的很多选择器属于CSS3规范的一部分，因此，只有在现代浏览器中才可使用。1.** { margin: 0; padding: 0; }对于初学者，在学习更多高级选择器之前，最先了解的选择器。星号选择器将匹配页面里的每一个元素。

通过CSS3的新特性，我们可以不使用javascript或Flash就可以将元素从一个状态过渡到另一个状态。它允许元素在指定的时间里改变它们的值，使各种可以动画的属性执行动画效果。查看演示  下载插件通过CSS3的新特性，我们可以不使用javascript或Flash就可以将元素从一个状态过渡到另一个状态。它允许元

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　  假如只是开发简单的弹窗效果，懂得通过z-index来调整元素间的层叠关系就够了。但要将多个弹窗间层叠关系给处理好，那么充分理解z-index背后的原理及兼容性问题就是必要的知识储备了。本文作为对W3C Recommendation-Layered presentation学习后整理的笔记，以便日后查阅。  由于

随着硬件的发展，用位图做的网页越来越不能满足用户体验的需要，因此SVG类的网页元素慢慢的开始流行起来，而今天分享的就是JS&css实现的SVG纹理图案代码效果打包下载，文章包含了相关的js代码下载，和展示效果，肯定可以给您的网页设计带来一些新的想法和灵感，enjoy！演示效果：Demojs纹理图案代码.zip

CSS动画实现比JS简单很多，但是对于新手来说还是很多代码的，而且还要不停的刷新来计算动画效果，不过没关系，今天小编为大家分享一个可以在线生成CSS动画的工具：AniCollection，而且他们的动画数量很多，能满足一般需要求了。PS：类似工具还有《在图形界面上制作CSS3动画：cssanimate》目前AniCollectio

原理介绍：这种折叠效果是小编我在一个英文网站上学的，这个英文网站上的很多特效都很不错，推荐给你们进去看看，这个网站叫codrops接下来正式简单介绍一下原理。折叠效果利用了css3里面的perspective 属性，这是一个3D画图里面的东西——透视；透视我就不具体介绍了，推荐一篇专门讲解perspective属性的文章——http://www.zhangxinxu.com/wordpr

瀑布流主要应用在图片展示页面上。如果有一大批图片需要展示，原始图片尺寸不一致，又希望每张图片都能不剪裁，完整显示，那么就要给图片规定一个宽度，解放它们的高度。利用网页高度不限这个特性，充分利用页面的空间，尽可能的展示多的图片。瀑布流的实现方法挺多，但能做到响应式列数变化，自由布局的并不多。这次自己开发了一个作品集页面，正好研究一下响应式瀑布流的实现方法。 需要解决的问题：1.

剪裁和遮罩都是用来隐藏元素的一些部分、显示其他部分的。当然了，这两者还是有区别的。区别主要在于这几方面：他们能做的东西，不同的语法，涉及到的不同技术，是新的还是旧的，以及浏览器支持的差异。但不幸的是总是有相当多的过时信息在那儿，所以一起来看看能否解决这个问题。剪裁和遮罩之间的区别遮罩使用的是图像，剪裁使用的是路径。想象一张从左到右、从黑到白渐变的正方

这是一组共4种效果非常炫酷的CSS3移动手机滑动隐藏侧边栏菜单特效。这四种效果分别是：默认的点击滑动侧边栏菜单效果、带3D transforms的滑动侧边栏效果、文字缩放和淡入淡出效果的滑动侧边栏以及使用translate来实现滑动侧边栏的效果。在线演示 4种CSS3超酷移动手机滑动隐藏侧边栏菜单特效.zip (357.24

本文将会告诉你如何用CSS修改/美化浏览器页面上出现的滚动条。改变它们的颜色，调整它们的外形，适配你对页面UI设计。我们首先将会看看谷歌(Webkit)浏览器提供了哪些CSS属性，最后，还将介绍如何用jQuery支持其它类型的浏览器。各种浏览器对CSS滚动条的支持情况这里说的Webkit浏览器包括谷歌浏览器，苹果公司的Safari浏览器，以及最新的Opera浏览器。这些浏览

在辨析两种盒子模型之前，先简单说明一下什么叫盒子模型。原理：先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。特点：

AllAnimation.css是一款带37种3D动画特效的跨浏览器CSS3动画框架。它可以轻松的制作出各种CSS3 3D动画效果，可以在移动手机上使用。并且使用极其简单，使用时只需要添加相应的class即可。查看演示   下载插件　　使用方法　　使用AllAnimation.css时要引入all-animation.css文件。        

IE9及其以下版本完全不支持CSS 3D transforms技术，Opera 12也不支持。具体支持信息请查看caniuse.com。CSS动画是当前一种非常火爆的技术，我说的并不是一些简单的颜色变换或长短属性变换，我说的是3D变换技术；纯CSS实现的翻滚旋转立方体就是最典型的例子。网上能找到很多关于CSS动画的代码，但对于一个程序员来说，真正理解其为什么会动起来的原理是非常重要的。下面

20年前的今天（10月10日），Opera CTO Håkon Wium Lie发布了Cascading HTML style sheets – a proposal。假如Paul McCartney是一名Web开发者，并在今天写下《Sergeant Pepper's Lonely Hearts Club Band》，那他一定会这样写：It was twenty years a

flexbox大全：http://www.w3cplus.com/blog/tags/157.html?from=timeline&isappinstalled=0

Flexbox布局官方称之为CSS Flexible Box布局模块,他是CSS3中的一种新的布局模式。Flexbox可以控制未知容器元素的对齐方式，排列方向，排列顺序等，甚至是在未知大小的容器也能这样做。Flex容器的主要特点是能够修改其子元素（Flex item）的宽度或高度，使其在不同的屏幕尺寸中填补可用的空间。许多设计人员和开发人员发现使用Flexbox来布局更容易，可以使用更

语法：@media screen and (min-width: 320px) and (max-width : 479px) media属性后面跟着的是一个 screen 的媒体类型（上面说过的十种媒体类型之一）。然后用 and 关键字来连接条件（其他关键字还有 not， only，看字面大家能理解，就不多说。），然后括号里就是一个媒体查询语句，稍微懂点css的同学都能看懂，这个

/* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width

这次我们要来分享一组纯CSS3打造的动画图标，总共100多个，每一个图标没有用图片，而是利用CSS3的相关特性来实现。在这些CSS3图标中，有部分是动态的，这些带动画的图标也是利用CSS3的动画属性实现的。在线演示    源码下载

大概大家都知道id,class以及descendant选择器，并且整体都在使用它们，那么你正在错误拥有更大级别的灵活性的选择方式。这篇文章里面提到的大部分选择器都是在CSS3标准下的，所以它们只能在相应最新版本的浏览器中才能生效，你完全应该把这些都记在你聪明的脑袋里面。1. ** {

Myth 是一个预处理器，有点类似于 CSS polyfill 。Myth 让你写纯粹的 CSS，同时还让你可以使用类似 LESS 和 Sass 的工具。您仍然可以使用变量和数学函数，就像你在其它预处理器中使用的一样。 Github主页      官方网站

一般情况下CSS不会直接影响JS的程序逻辑，但是以CSS实现动画的话，这个便不太确定了，这个故事发生在与UED迁移全局样式的过程。曾经我有一段实现弹出层隐藏动画的代码是这个样子的：if (this.needAnimat && typeof this.animateHideAction == 'function' && this.status != 'hide')

最近又遇到许多垂直居中的问题，这是Css布局当中十分常见的一个问题，诸如定长定宽或不定长宽的各类容器的垂直居中，其实都有很多种解决方案。而且在Css3的flexbox出现之后，解决各类居中问题变得更加容易了。搜了搜园子内关于flexbox的文章觉得很多不够详尽，故想借介绍flexbox的同时好好总结一番各类垂直居中的方法。由简至繁：行内元素的水平居中    要实现行内元素（

使用Box-shadow属性表现阴影效果是现代浏览器中是一个非常有用的技巧，通过它我们可以做出很多非常酷的东西。让我们来一步一步的了解box-shadow属性的基本用法，然后进一步了解::before和::after伪元素的用法。基本用法box-shadow:2px 2px 5px #000;box-shadow:0px

今天我们要来分享一组非常漂亮的CSS3自定义复选框checkbox，每一个checkbox都有其各自的特点。有几款checkbox在选中的情况下还会出现动画效果，非常不错的CSS3自定义美化checkbox组合。另外，之前分享过的jQuery实现美化版的单选框和复选框也是非常不错。在线演示   源码下载css3-checkbox-group.rar

这是一组效果非常炫酷的SVG和CSS3表单浮动标签特效。这组浮动标签特效共12种效果，这些浮动标签效果部分在元素的伪元素上使用CSS transitions和CSS animations完成，一部分则使用SVG来制作变形动画。在线演示下载：201503191554.zip       使用方法       HTML结构 

下拉菜单是一个很常见的效果，在网站设计中被广泛使用。通过使用下拉菜单，设计者不仅可以在网站设计中营造出色的视觉吸引力，但也可以为网站提供了一个有效的导航方案。使用HTML5 和 CSS3 可以更容易创造视觉上充满吸引力的下拉菜单。A Flash Blue Menu在线演示     源码下载Fancy Rolling Navigat

css loader地址：http://codepen.io/gastonfig/pen/azJaXG

参照着教程做了一个面包屑式的导航。在这里分享一下实现方式，自己也在温习一下。首先效果如图：HTML代码如下：                        Breadcrumb        复制代码        我们用一个无序列表来填充面包屑导航。每一个导航连接都相当于一个内嵌了元素

1、关闭iOS键盘首字母自动大写IOS的机子，默认英文输入法状态下，首字母是自动大写的，有时候挺烦人的。我们写页面的时候有没有办法把这个自动大写关闭呢？autocapitalize的属性可以实现：    在iOS中，默认情况下键盘是开启首字母大写的功能的，如果业务不想出现首字母大写，可以这样：input type="text" autocapit

新的一周开始了，今天我们要为大家分享一些全新的jQuery插件和HTML5/CSS3应用，这些jQuery插件不仅非常炫酷，而且还挺实用，这次的分享包含jQuery菜单、CSS3按钮已经多种图片特效，一起来看看吧。1、CSS3书本翻页动画 书本翻页效果逼真今天我们要分享一款炫酷而且实用的CSS3动画效果，它是模拟书本翻页的动画特效。当鼠标滑过书本右上角时，书本即可向前翻一页

本文将会告诉你如何用CSS修改/美化浏览器页面上出现的滚动条。改变它们的颜色，调整它们的外形，适配你对页面UI设计。我们首先将会看看谷歌(Webkit)浏览器提供了哪些CSS属性，最后，还将介绍如何用jQuery支持其它类型的浏览器。各种浏览器对CSS滚动条的支持情况这里说的Webkit浏览器包括谷歌浏览器，苹果公司的Safari浏览器，以及最新的Opera浏览器。这些浏览

我最无法忍受的一个事情就是多余的代码。不论是页面中的CSS还是JavaScript，还是浮肿的HTML代码或没有优化的**，这是我们的懒惰和错误让成千上万的访问用户受连累。有一个非常棒的工具，叫做Helium，它能帮助程序员找出样式表中无用的或有问题的样式规则。让我们来**是如何使用它!       第一步是把这个脚本嵌入到你的页面中，在脚本加载后初始化它：

每天坚持做一件事（这事当然是有点难度和意义的事情，而不是睡觉。。。）还真不容易，有两天没有写前端笔记了。一方面是正职工作忙，另一面是感觉能输出的东西越来越少。那今天来分享的什么的，找来找去，觉得less的css3前缀的写法可以分享。因为最近也一直在准备用less写个css3动画库，简化css3动画的开发。    css3前缀    比如我们要写一个animation的css3动画，

border:0;边框存在但不现实 并且占内存border:none;边框未渲染HTML的书写规范：1、标签换行。2、标签缩进。3、标签要关闭。4、标签名属性不能为空。5、首先要！doctype声明。6、编码格式为UTF-8。7、标签要半角英文小写。8、合理注释。9、