陌上花会开
- 浏览: 39616 次
- 性别:
- 来自: 苏州
-
最新评论
-
yzs1013：
偷别人的样式更快，这类型工具很多人想找。现在有个工具操作起来比 ...
CSS3实战开发:使用CSS过滤效果来改变图片样式 -
mingnianshimanian：
现在谁还用自己写，样式也不好看，现成的插件有很多
Javascript实战开发：教你使用raphael.js绘制中国地图 -
小橙子：
mark!
CSS3实战开发: 手把手教大家实战开发鼠标划过图片动画特效 -
aatend：
mark!
CSS3实战开发: 手把手教大家实战开发鼠标划过图片动画特效 -
wx_hello：
CSS3是不是兼容这些主流浏览器？
CSS3实战开发:手把手教你照片墙实战开发
文章列表
前面花了几个篇幅着重介绍了CSS的选择器的使用，我将其分成三个部分：CSS3基本选择器、CSS3属性选择器详解以及CSS3伪类选择器详解。那么今天我主要想和大家一起来学习——CSS选择器方面的性能优化。因为对性能这一块一直都是很弱的，所以今天先从选择器开始入手，加强自己。如果你也感兴趣那就跟我一起来吧。
浏览器如何识别你的选择器
首先我们需要清楚，浏览器是如何读取选择器，以识别样式，并将相应的样式附于对应的HTML元素，达到美化页面的效果。Chris Coyier曾在《Efficiently Rendering CSS》一文中说过“浏览器读取你的选择器，遵循的原则是从选择器的右边到左边读取 ...
CSS3发布很久了，现在在国外的一些页面上常能看到他的身影，这让我羡慕已久，只可惜在国内为了兼容IE，让这一项技术受到很大的限制，很多Web前端人员都望而止步。虽然如此但还是有很多朋友在钻研CSS3在web中的应用，为了 ...
各位网友，大家好，我是陌上花会开，今天这篇文章，我将手把手教大家如何开发一套纯CSS的折角效果。一如往常，我不提供代码下载，但是我可以保证，只要将教程中的代码复制到本地，绝对百分百获得与我演示的效果一样，希望各位明白我的用意。
好了，直接开始今天的教程吧。首先，我先给大家演示一下今天实战案例的效果：
有人会说这是什么？这就是我们今天的实战开发，我将带领大家开发上图中的右上角折叠效果。
在我讲解完之前，有些人可能觉得很难，不可思议。我想跟你们说：真的so easy。下面就请跟着我的分解步骤一步步学习吧！
首先，我们先创建一块蓝色区域，代码如下：
<!DOCTYPE ht ...
各位网友大家好，我是陌上花会开，人称陌陌。今天我带领大家开发一个仿天猫首页图片展示动画特效的案例。一如往常，我既不提供源码给大家，也不提供Demo给大家，只是希望大家能跟着我的讲解，然后将代码一步步复制到 ...
各位网友，大家好，我是陌上花会开，人称陌陌，在上一篇文章《CSS3实战开发: 手把手教大家实战开发鼠标划过图片动画特效》 中，我已经手把手带领大家开发了一个鼠标滑过时的动画特效。
这篇文章里，我将再带领大家开发另一个动画特效，希望大家能得到启发。还是一如往常，我不提供源码下载，但是可以保证：只要是将本教程中的代码，一步步复制到本地，定会得到楼主同样的运行效果。
好了，废话少说，直接进入今天的学习。楼主是个爱偷懒的人，所以我还是利用上一篇文章中的素材。
首先，我们先看一下今天需要实现的特效效果图：
1. 鼠标划过前：
各位网友大家好，我是陌上花会开，当然大家也可以叫我陌陌。今天这篇文章，我将手把手带领大家实战开发一个鼠标划过图片时的动画特效。在这里我不会给大家提供案例的源码下载，但是本人可以保证，只要大家跟着我的思路，一步步将代码复制到本地，一定会得到同样的运行效果。希望大家明白我的用心。好了不废话，直接进入今天的主题吧。
在今天这个案例里，我准备3个素材，一张背景图，两张风景图片。这个大家可以到网上自行下载。
在写代码之前，我先给大家展示一下，动画特效的效果图。
鼠标花过前：
当鼠标划过图片时，图片将逐渐变亮：
在《CSS3 2D转换技术之translate实战开发》文章中，我给大家列出了CSS3中的2D转换方法：
1. translate() 2. rotate() 3. scale() 4. skew() 5. matrix()
同时对第一个方法 translate()做了非常详尽的介绍，并带领大家实战开发了一个导航条。如果你对translate不了解或不是太熟悉，请阅读我的博文 《CSS3 2D转换技术之translate实战开发》 。
在讲解知识点之前，我先跟大家说明一下，有些程序员会问，为什么我应用了transform后不起作用呢，其实CSS3中的t ...
各位网友大家好，如果你已经阅读过我先前写的关于CSS3弹性盒模型的实例演示，相信你对CSS3弹性盒模型属性知识点应该已经有了一个非常深刻的映像。
从本篇文章开始，我将带领大家，手把手地教大家如何来开发一个适合移动端浏览器的弹性盒模型的响应式页面。同时实战开发中的案例代码可以作为你项目中的精简框架了。
当你学习完成《CSS3实战开发: 弹性盒模型之响应式WEB界面设计》这个系列教程之后，相信你对目前比较流行的前端轻量级框架 Bootstrap等会有一个深刻的认识。
Bootstrap(弹性流体布局式的前端轻量级框架)没听过？那你就out了，国内现在已经有不少互联网网站使用它来 ...
在上一篇文章《CSS3中的弹性流体盒模型技术详解(一)》里，我给大家列出了，从css1到css3各版本中盒子模型的基本元素。本篇我会把余下的属性进行详细讲解。
box-pack 作用：用来规定子元素在盒子内的水平空间分配方式
box-pack 语法：box-pack: start | end | center | justify;
start
对于正常方向的框，首个子元素的左边缘吸附在盒子的左边框显示
对于相反方向的框，最后子元素的右边缘吸附在盒子的右边框显示
从这篇文章开始，会利用几个篇幅，我将跟大家分享 从CSS1到CSS3都是如何实现页面布局的(当然，所指的范畴是利用CSS技术)。
由于盒子模型技术内容比较多，这篇文章我将着重讲解知识点。
下一篇文章，我会带领大家开发一个 ...
今天我们有很多程序员在给文本设置样式时，都感觉无从下手。一般有两种情况：
1) 不知道关于文本到底有哪些样式属性；
2) 即使借助开发工具的自动提醒，依然不清楚样式属性的具体意思，以及具体用法。
今天这篇文章，我将带领大家一起来领受CSS3在文本样式应用方面的超强能力。通过精彩的实例，来使大家重新认识CSS3文本样式，真心希望大家通过此篇文章，即使不能做到精通CSS3的文本样式的应用，也会做到熟练应用。
实例： 如何利用CSS3制作燃烧的字体？
以前，如果我们网页上想要显示一个燃烧着的文本，大家的第一反应就是找美工，让美工PS一张图。虽然可以做到，但是这却带来了 ...
有人会问，为什么我把text-overflow拿出来单独讲解。以前，当一行内容显示不完整的时候，想要显示省略符，需要通过javascript等手段。
但是CSS3引入了text-overflow省略符属性，只需要短短一行代码就可以实现，开发方式的简洁强大不言而喻。
这篇文章，我讲带领大家做一个《今日头条》新闻导航列表，带领大家领略text-overfow的强大魅力。先看一下效果：
好了，看完了效果，现在正式开始今天的开发旅程吧！
首先我们先创建html页面，代码如下所示（红色文字即是我们Demo的主要内容）：
在前面的章节中，我们了解了，可以使用行内样式，ID选择器，类选择器，以及标签选择器来给一个元素应用样式。
如果我们想给定义了那些都定义了某一个属性的元素应用样式，这个时候我们该怎么做呢？
这一节中，我将使用 双色球案例 和 文档类型提示图标案例 来引入和应用属性选择器。
双色球案例：
CSS 又名 层叠样式表，所谓层叠，就是后面的样式会覆盖前面的样式，所以在样式表中，各样式排列的顺序很有讲究。
:link 与 :visited 在样式文件中的顺序可以随便放置。
而focus， hover，active这几个，如果你设置的顺序不同，会直接影响样式的显示效果，下面会详细解释。
:focus -> :hover -> :active
我们有些程序猿在给一个元素(比如div)应用样式的时候，会有一些疑问，为什么我写在后面的样式不能覆盖前面的样式呢，不是说CSS是层叠样式表吗？
如果你在开发中也遇到同样的问题，即在给某一元素应用样式的时候（比如写在外部样式表中），写在后面的样式不能覆盖前面定义的样式。这个时候，你可能就得考虑是不是没考虑优先级问题了。
当我们在给一个标签，比如div应用样式的时候，我们得考虑优先级问题。
下面列出的就是是选择器的优先级：
行内样式 > ID选择器样式 > 类别选择器样式 > 标记选择器样式
标记选择器好比一个更广泛的概念，然后到类别选择器，到ID ...