<p class="overimg"> <a><img src="http://www.nowamagic.net/librarys/images/201402/2014_02_15_01.jpg"></a> <i class="light"></i> </p> .overimg{ position: relative; display: block; /* ov…

原文:http://www.nowamagic.net/librarys/veda/detail/2600 资料参考: http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html  CSS3 经典教程系列:CSS3 线性渐变(linear-gradient) HTML <p class="overimg"> <a><img src="http://www.no…

css3中的线性渐变 线性渐变公式: background-image: linear-gradient( [ <angle> | <side-or-corner> ]?, <color-stop> [, <color-stop>]+ ); 意为:(角度deg或者方位词,一个或多个渐变颜色关键结点(多个的话用","隔开)); 此种写法跟正则表达式类似: [ ]:代表一个字符位,一般跟 “|” 连用,表示从[ ]中选择一个: |:表示“或”…

原文:利用纯CSS3实现超立体的3D图片侧翻倾斜效果 上午的时候我在jQuery论坛上看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是创意不错.先来看看效果图. 如何,看上去挺不错吧,倾斜.阴影,让一张很普通的图片变得如此霸气. 另外你也可以在这里查看DEMO演示,鼠标滑过图片时会出现这样的效果. 那么接下来我们分析一下源码吧,显示html代码,非常简单: <div onclick=""> <figur…

css3线性渐变可以设置3个参数值:方向.起始颜色.结束颜色.最简单的模式只需要定义起始颜色和结束颜色,起点.终点和方向默认自元素的顶部到底部.下面举例说明: CSS Code复制内容到剪贴板 .test{ background:linear-gradient(red, blue); } 上述代码的效果如图所示. 最简单的线性渐变效果 如果要在一些旧版本的浏览器(除IE)下可以正常显示如图5.9的效果,则需要添加兼容代码: CSS Code复制内容到剪贴板 .test { background:…

看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是创意不错.先来看看效果图.那么接下来我们分析一下源码吧,显示html代码,非常简单: <div onclick=""><br> <figure><br> <figcaption>Autumn, by Lucien Agasse</figcaption><br> </figure>…

渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果上来看,与设计并无任何差异. 事实上这种方法是比较麻烦的,因为首先需要设计师进行设计,然后进行切图,在通过样式应用到页面中.另外,在实际应用中可扩展性差,还直接影响页面性能. 值得庆幸的是,W3C组织将渐变设计收入到CSS3标准中,让广大的前端设计师直接受益,可以直接通过CSS3的渐变属性制作类似渐…

渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果上来看,与设计并无任何差异. 事实上这种方法是比较麻烦的,因为首先需要设计师进行设计,然后进行切图,在通过样式应用到页面中.另外,在实际应用中可扩展性差,还直接影响页面性能. 值得庆幸的是,W3C组织将渐变设计收入到CSS3标准中,让广大的前端设计师直接受益,可以直接通过CSS3的渐变属性制作类似渐…

3 线性渐变实例 一.颜色从顶部向底部渐变 制作从顶部到底部直线渐变有三种方法,第一种是起点参数不设置,因为起点参数的默认值为“top”:第二种方法起点参数设置为“top”:第三种起点参数使用“-90deg”关键词.为top_bottom设置从顶部向底部的渐变,三种方法的CSS代码如下: 第一种方法: 第二种方法: 第三种方法: 上述三种css设置运行的效果相同,top_bottom的背景变为从白色到黑色的自上而下形成线性渐变.在浏览器中查看效果如图1所示: 图1  顶部到底部的线性渐变 同样,…

安卓官方确实提供了好多非常强大的工具给我们了,例如我们最近经常在shape中加入gradient(渐变),像我的项目中用的是线性渐变, <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <corners android:radius="5dip&q…