今日焦点
-
作者: Airen发布时间: 星期日10,11今日点击: 124总点击数: 8,501评论: 0在CSS2中，我们为了达到一定的设计效果，时常都需要添加额外的<div>或使用PNG图片等方法来实现。当CSS3的时代到来之际，我们不应该只局限于这些老技术，我们应该大胆的去尝试一些新技术。今天我们就跟随Ｎettuts的Vasili的教程《11 Classic CSS Techniques Made Simple with CSS3 》。来学习使用CSS3新技术实现十一种经典的CSS样式效果。圆角效果盒子阴影效果文字阴影效果自定义字体效果透明效果RGBA色彩模式效果背景尺寸设置多背景效果多列排版效果图片边框效果动画效果上面的十一种技术，我们将一起来看看CSS2和CSS3实现的对比之...
-
作者: Airen发布时间: 星期二05,11今日点击: 53总点击数: 7,530评论: 0前段时间整理了CSS3中的渐变Gradient、透明度RGBA、边框圆角box-radius三个新属性的使用方法，这几次继续整理了有关于CSS3的text-shadow的使用方法。今天特意花了点时间贴上来与有共同爱好的朋友一起分享这个新属性的应用。text-shadow还没有出现时，大家在网页设计中阴影一般都是用photoshop做成图片，现在有了css3可以直接使用text-shadow属性来指定阴影。这个属性可以有两个作用，产生阴影和模糊主体。这样在不使用图片时能给文字增加质感。text-shadow曾经在css2中就出现过，但在css2.1版本中又被抛弃了，现在css3.0版本又重新捡回...
-
作者: Airen发布时间: 星期六08,11今日点击: 43总点击数: 7,202评论: 11Bootstrap这个东东不好直译，如果直译过来就是“引导”，这里暂且不译，直呼其名“Bootstrap”。Bootstrap是来自国外有名的一个社交网站Twitter。我也是最近得到的资源，公司要求培训这方面的东西，所以今天整理出一份贴上来与大家一起分享Twitter网前端攻城师们给我们事来的成果。Mark Otto（马克奥托）是这样说的“我们很高兴宣布，Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合，它使用了最新的浏览器技术，给你的Web开发提供了时尚的版式，表单，buttons，表格，网格系统等等。”下面我们就一起来分享这个Bootstrap。关于...
-
作者: Airen发布时间: 星期六06,11今日点击: 37总点击数: 2,195评论: 0box-sizing是CSS3的box属性之一。一说到CSS的盒模型（Box model）我想很多人都会比较烦，特别是对于新手，然而这个Box model又是我们CSS运用中比较重要的一个属性。那么CSS3的Box-sizing跟盒模型有什么关系呢？第一句话就说了，Box-sizing是CSS3的Box属性之一，那他当然也遵循CSS的Box model原理，为了能更好的学习和理解这个Box-sizing属性，我们有必要先了解一下CSS中Box model的原理。CSS中Box model是分为两种，第一种是W3C的标准模型，另一种是IE的传统模型，他们相同之处都是对元素计算尺寸的模型，具体说就...
-
作者: Airen发布时间: 星期二08,11今日点击: 31总点击数: 4,057评论: 3去年就初次接触了LESS,并用他制作了一个Less.org的首页页面，但由于CSS的固有模式，没有让自己喜欢上他。由于前段时间学习bootstrap from twitter再次让我接触了这个Less（我在《CSS——Bootstrap From Twitter》有简单的提到过Less），又发现了他的强大与方便，于是横下心来又重新开始学习Less。这次的学习中让我发现了他的更强大，从而也让自己更喜欢上了Less。当然任何东西都有好与坏，我还是那句，他并不影响我对知识的渴望，你要是也喜欢，我们就一起往下看吧。Less是一种动态的样式语言。Less扩展了CSS的动态行为，比如说，设置变量（Vari...
-
作者: Airen发布时间: 星期三05,11今日点击: 26总点击数: 6,333评论: 3上一节我们一起探讨了一下CSS3的文字阴影text-shadow的使用方法，今天我们接着一起来探讨一下CSS3中的另一个属性box-shadow的使用方法。CSS3的box-shadow有点类似于text-shadow，只不过不同的是text-shadow是对象的文本设置阴影，而box-shadow是给对象实现图层阴影效果。本文我们搁下IE不谈，只谈谈box-shadow的具体使用方法语法： E {box-shadow: <length> <length> <length>?<length>?||<color>} 也就是： E...
-
作者: Airen发布时间: 星期四09,11今日点击: 24总点击数: 5,150评论: 10作为一个Web的前端攻城师，在制作页面效果时肯定有碰到下面这种现象：当一个HTML页面中含有较少的内容时，Web页面的“footer”部分随着飘上来，处在页面的半腰中间，给视觉效果带来极大的影响，让你的页面看上去很不好看，特别是现在宽屏越来越多，这种现象更是常见。那么如何将Web页面的“footer”部分永远固定在页面的底部呢？注意了这里所说的是页脚footer永远固定在页面的底部，而不是永远固定在显示器屏幕的底部，换句话说，就是当内容只有一点点时，Web页面显示在浏览器底部，当内容高度超过浏览器高度时，Web页面的footer部分在页面的底部，总而言之Web页面的footer部分永远在页面的...
-
作者: Airen发布时间: 星期四04,11今日点击: 23总点击数: 7,720评论: 5CSS3发布很久了，现在在国外的一些页面上常能看到他的身影，这让我羡慕已久，只可惜在国内为了兼容IE，让这一项技术受到很大的限制，很多Web前端人员都望而止步。虽然如此但还是有很多朋友在钻研CSS3在web中的应用，为了不被淘汰，我也开始向CSS3进发，争取跟上技术的前沿。从现在开始我会不断的发布一些CSS3的应用，和大家一起分享，今天我们首先要看的就是:CSS3： Gradient─CSS3渐变。CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用CSS3 Grad...
-
作者: Airen发布时间: 星期四05,12今日点击: 21总点击数: 423评论: 0有关于使用inline-block来代替float的讨论也蛮多的，最常说的就是使用inline-block来代替float进行布局，或者使用inline-block来实现元素的居中效果。前面《CSS3制作的分页导航》一文中就是使用的inline-block制作的居中效果，不过留下了一上问题，就是使用inline-block的元素之间会存在“4px”的空白间距。那么今天我们就一起来说说这个“4px”的问题。大家首先来看一个DEMO：HTML Markup <ul> <li>item1</li> <li...
-
作者: Airen发布时间: 星期五04,11今日点击: 20总点击数: 5,401评论: 9前面我们一起探讨了一下CSS3 Gradient（css3 渐变），今天我们一起来探讨一下CSS3中的RGBA。RGB对于大家来说一点不陌生，他就是红色R+绿色G+蓝色B，那现在我们所说的RGBA又是什么呢？说得简单一点就是在RGB的基础上加进了一个通道Alpha。从而形成了我们今天需要讨论的RGBA。如果需要更详细的解说，大家就跟着我一起往下看吧。语法:R：红色值。正整数 | 百分数G：绿色值。正整数 | 百分数B：蓝色值。正整数| 百分数A：透明度。取值0~1之间取值：<length> ：Hue(色调)。 0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值...