Clik here to view.
css3选项卡标题样式设计1
说起来惭愧，这个实例以前看起来的时候，看得莫名其妙，一时云里雾里。于是静下心来仔细研究下，才终于发现这个窍门。这里我们看到的选项卡tabs标题的高度并不是由height来撑起来了，各位firebug就可以知道了，设置的height是为0，然后line-height为30px，其实这个还不是关键，关键在于设计了border-bottom为30px。至于上面的那个斜角效果则是border-right为t...
View ArticleClik here to view.
css3选项卡标题样式设计2
本实例的tabs斜角效果跟border没有一毛钱关系了，呵呵也跟:before和:after没有关系，却是运用了渐变背景制作的。给了一个角度的渐变，由transparent到红色的220度渐变。然后设置了一个box-shadow的左右偏移为负，使右侧看起来颜色比较深。 demodownload css主要代码： #tabs { overflow: auto; width: 100%;...
View ArticleClik here to view.
css3选项卡标题样式设计3
这是第三个tabs的标题设计了，这次应用的又跟上两个不是一样的技术。这里用了:after来生成了，然后对生成的内容水平方向上扭曲skewX来达到斜切的效果。当然li的margin距离要刚好等于生成a:after生成内容的宽度。然后就是注意box-shadow了。注意火狐14.0更新后，skew得写成skewX或skewY分别表示水平方向和竖直方向偏移，这里它的demo用的是skew，所以火狐下并没有...
View ArticleClik here to view.
css3面包屑设计
这里总共有四种面包屑效果，其中第一种运用:before和:after，运用border生成同等大小的尖角，叠加起来左右错动1px；第二个还是运用:before和:after，运用border生成不同的尖角，一个在左一个在右；第三个是运用一个:after生成一个正方形，设置border-radius然后rotate旋转45度；第四个直接运用水平扭曲就skewX就可以了。 demodownload...
View ArticleClik here to view.
css3标题设计
本实例主要是对:before及:after的应用，比较初级，浅显易懂，适合入门。第一个使用border-left和负margin，跟css3没有关系，就是应用了rgba这个属性，使border的颜色有一定的透明值；第二个运用:before和:after生成两个三角叠加起来；第三个背景应用了linear-gradient，然后加上:before和:after生成的三角左右两边各一个；第四个则应用了:a...
View ArticleClik here to view.
css3导航设计1
本实例通过:before和:after生成高度和宽度透明度都为0且背景为渐变的两个内容，两个不同点在于绝对定位的位置一个为left，一个为right，然后渐变背景的方向刚好相反；最后当鼠标滑过改变高度宽度及透明度，就完成了该动画。因为是对:hover状态下的:before和:after生成的内容进行宽度变化，所以该实例如同先前的那个:hover状态下的激发伪元素动画一样，webkit内核是不支持的。...
View ArticleClik here to view.
纯css3列表切换动画
本实例的思路和之前说的用radio来控制手风琴效果有异曲同工之效。主要应用radio单选按钮来确认状态，然后对这个状态下的兄弟元素进行css控制。当然这里不比手风琴有几个radio就有几个内容，这里是一个内容，所以所有的radio应该和这个内容是兄弟元素，以便使用兄弟元素选择器~。 demodownload html主要代码： <input name="view-control"...
View ArticleClik here to view.
css3大背景运动
其实这个的大背景运用和之前背景运动的那个demo，核心点都是一样的，关键就是animation对背景定位的改变。只不过这里我们在一个标签中同时应用了三张图片，注意多背景图片时其层次与其书写顺序有关，其层次高低随着书写顺序依次递减，所以第一张图片在最高层，所以这个时候千万不要定义背景色啊，不然会把后面的全部覆盖了。如果要写背景色的话，请在最后一张图片上面加上。同理你可以做个简单的飘雪或蒲公英散落等一些...
View ArticleClik here to view.
css3图片与文字3D transform切换
这是个3D的切换效果，不太明白，在我的概念里还没有建立好一个3D模型，不知道如何把一个二维的图形如何转成三维。更谈不上动画了，所以这个案例对于我来说，暂时只是欣赏。如有明白的可以给讲一下，先谢过。...
View ArticleClik here to view.
css3 3D图片展
再来一个css3 3D效果的实例，哈哈。今天在群里看到有人推荐张鑫旭的css3 3D文章，去看了下，太棒了，想学css3 3D特效的必备学习参考资料啊，所以晚上回来更新了下上一篇文章，把那篇文章的地址贴进去了。顺便再来一个css3...
View ArticleClik here to view.
css3按钮大集合
用css3来制作按钮，不论对于初学者还是想提高的都是一门可以研究的东西，一开始其用到的属性一般为gradient、border-raidus、rgba、text-shadow、font-face，然后随着css3的发展，又加入了用font-face的icon、伪元素、动画、3D等等。这里我们收集一批css3制作的精致按钮，对于初学者，可以顺便学学这些简单的属性，而对于提高者也可以扩展下视野，激活下灵...
View ArticleClik here to view.
css3 3D动画效果
呵呵又来一个3D制作，就不相信搞不定3D是吧。多看几个demo，多实践下，整个简单的3D原来也没想象的那么难的，还是可以搞定的。这个案例出现的还是很早的，只是当时只拿来欣赏吧，现在终于可以拿过来分析分析了。本实例先给li元素设置一个透视值为500px，然后给图片和文字信息都设置一个Y轴上的旋转30度，即rotateY(30deg)，然后要实现文字和图片有个层级的效果，就给文字设置了Z轴上的偏移,即t...
View Article创建渐变文字
此效果仅限于webkit内核，先设置background-image为渐变的颜色，然后设置-webkit-background-clip为text，最后设置填充颜色为透明即-webkit-text-fill-color: transparent; p{ font-size:80px; background-image: -webkit-linear-gradient(top,...
View ArticleClik here to view.
css3 download按钮设计
本实例主要应用gradient，然后使用box-shadow和border-raidus生成一个看起来很酷的按钮。然后download文字和版本文字分为两层，download文字层的z-index大于版本文字的z-index，鼠标滑过的时候改变download文字的宽度，露出下面的版本文字层。 demodownload css主要代码： #btn-wrap { position:relative;...
View ArticleClik here to view.
css3 icon导航
本实例主要应用了border-radius，transition，font-face。先设置一个宽度并设置overflow为hidden，然后鼠标滑过用transition来改变其宽度，以显示文字信息部分。至于三个icon，前面两个为font-face做的，后面一个为图片。至于三个icon，前面两个为font-face做的，后面一个为图片。 demodownload css主要代码：...
View ArticleClik here to view.
将css3 3D实体化
这两三天一直比较关注css3的3D特效，从最初的稀里糊涂，到现在大概摸进门路，不得不感谢张鑫旭的这篇神作：好吧，CSS3 3D transform变换，不过如此！...
View ArticleClik here to view.
css3树形导航
本实例主要是比较好看哈哈，然后使用了css3初级学习者一般不理解的:target这个伪元素，所以收纳。运用的css3有gradient生成渐变背景，:before生成前面的图标及二级菜单的箭头，:target来实现折叠效果，同时还应用了个transition来改变opacity的动画。当然这个案例其实左边的小图标还可以用font-face来制作，那样就更好了。 demodownload...
View ArticleClik here to view.
css3 3D旋转正方体
再来一个3D的案例，本实例自谷歌，技术自然不用说了，那是一级棒。个人能力有限，我就挑简单的分析下呵呵。说下这个正方体的实现吧，先设置父级元素的transform-style:preserve-3d，然后定义各个面的宽高及绝对定位并设置scale3D为1.2倍，最后就是把各个面分别运用rotateX，rotateY，再运用translateZ拉开距离。至于旋转的运动则是设置父元素的animation从...
View ArticleClik here to view.
CSS美化图片
很久没有写blog了，不知道是时间太紧的原故还是人懒惰了。今天在webdesignerwall.com看到一篇不错的文章《CSS Decorative Gallery》，文章中介绍了多种不同的方法，用于美化Web页面中的IMG。学得很有意思，其实早在《CSS3制作图片样式》和《jQuery和CSS3给图片制作圆角》中有介绍过怎么美化img，但是今天这篇文章更有意思。我们不仿一起来看看：...
View ArticleClik here to view.
CSS3美化图片
有关于美化图片的教程，W3cplus有好几篇了，比如说《CSS3制作图片样式》、《jQuery和CSS3给图片制作圆角》这两篇是针对于美化图片圆角效果的教程，昨天在《CSS美化图片》一文中介了使用标签给图片设置朦板效果。...
View Article