Tagged

渐变

A collection of 8 posts

before

一些上流的CSS3图片样式

译自:CSS3 Image Styles 中文:一些上流的CSS3图片样式 请尊重版权,转载请注明来源,多谢~~ 直接在图片元素上直接应用CSS3 inset box-shadow 或 border-radius时,浏览器并不能完美的渲染它们。不过,如果把这个图片用作背景图,你就可以可以给它添加任何样式了,浏览器也会很好地渲染。Darcy Clarke和我做了一个简单的教程,讲解如何使用jQuery来动态地制作完美的圆角图片。今天我将重温这个主题然后向你展示使用background-image的方法可以实现多少效果。我将向你展示如何使用box-shadow、border-radius 和 transition 来创作不同的图片风格。 先看下demo 问题 (见 demo) 看一下demo,请注意在第一行的图片中使用了border-radius和inset box-shadow。Firefox会直接在图片元素上渲染border-radius,但不会渲染inset box-shadow。chrome/safari则两者都不渲染。 解决方案 要让 border-radius 和 inset box-shadow 正常工作,解决方案就是将实际图片变作background-image. 动态方法 要想动态实现,

css3

纯CSS3文字 渐变内发光投影效果

前阵子做了个css3文字效果,涉及css3投影,渐变,蒙版,伪类等知识点,现在写下设计思路,仅供参考。发个效果图大家看先: 投影shadow box-shadow 一般我们都是用css3的box-shadow来实现盒投影,用text-shadow来实现文字投影,box-shadow设置方型盒子投影,用raidus的话可以让盒子产生圆角,看起来就很圆滑舒服,一般的写法是这样的: -moz-box-shadow:1px 1px 5px #000; 1px(水平方向偏移)  1px(垂直方向偏移)  5px(阴影羽化)  #000(颜色); 当偏移量为负数时就向反方向偏移,试试就明白了,这里不贴图。 这个是一般的投影效果,如果是内阴影,那么就加个inset属性,写法如下: -moz-box-shadow:**inset** 1px 1px 5px #000; 这样就变成了PS里面的内阴影,效果很赞,很实用,如果需要内发光效果,则背景底色深,投影颜色浅,这样就会感觉是发光,而背景颜色深,

文字渐变

CSS3 文字渐变

之前,我们有发表过CSS文字渐变效果,但是其实那并不是纯粹的基于CSS的渐变,它需要一张半透明渐变的png图片。今天我们将介绍两种使用CSS3实现实现文字的方法。嗯,只有webkit浏览器支持,请暂时无视其它浏览器。 1.-webkit-mask 在《CSS的未来:一些试验性CSS属性》中,我们提到了这个属性,相对于Firefox只能用svg做mask,webkit则灵活很多,图片和css3渐变均可。最初注意到这种效果是在舜子的PJblog中: .textGradient1{ -webkit-mask: -webkit-gradient(linear,0% 0%,0% 100%,from(rgba(222,187,71,0.8)),to(rgba(36,142,36,0.2))); } 不足:这个方法是利用蒙板的透明度来实现的,而蒙板的颜色并不能用于渐变中,从例子中可以看到设置的渐变色被无视了,有用的只是alpha值。那么这里的渐变要依赖字体的颜色——也就是说,只支持单色渐变。 2.

css3

webkit对于CSS3渐变样式语法的更新

之前,我在前端观察发表了一篇《理解CSS3线性渐变》,相信很多同学都有研究过CSS3的渐变,大部分人都会感到纠结吧,webkit和firefox的语法有很大的不同啊。事实上,对比W3C规范,可以发现Firefox的语法更规范一些。现在好消息来了,Webkit开始优化CSS3渐变的语法了。真搞不懂当年(08年)webkit为什么采用那种写法。 具体哪种写法更优秀就不讨论了,近日webkit在其博客中介绍了渐变的新写法,新写法采用了W3C和Firefox所用的语法,即,将-webkit-gradient拆分为-webkit-linear-gradient和-webkit-radial-gradient。 让我们直接看一下具体的代码如何: .selector{ background:-moz-linear-gradient(left, white, black);/gradient for firefox/ background:-webkit-linear-gradient(left, white, black);/*new gradient for webkit */ background:-webkit-gradient(linear, 0 0, 0 100%, from(#white), to(#black));/the

css

理解CSS3线性渐变

译自:[Quick Tip: Understanding CSS3 Gradients ](http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-understanding-css3-gradients/) 中文:[理解CSS3线性渐变](http://www.qianduan.net/understand-the-css3-gradient.html) 请尊重版权,转载请注明来源,多谢! - - - - - - 为了显示一个渐变而专门制作一个图片的做法是不灵活的,而且很快会成为一种不好的做法。但是遗憾的是,截至写这篇文章,可能还必须这样做,但是希望不会持续太久。多亏Firefox 和Safari/Chrome,我们现在可以使用最少的努力实现强大的渐变。在本文中,我们将展示CSS渐变的简单实现以及该属性在Mozilla和webkit内核浏览器中的不同。 PS:本文原文本来提供了一个视频,但是由于众所周知的原因,我们无法观看这个在Youtube上的视频,想看的同学请自己想办法观看(最高720P) : http://www.

文字渐变

网站设计中漂亮的文字渐变效果

原文:[网站设计中漂亮的文字渐变效果](http://www.qianduan.net/web-design-beautiful-text-gradient-effect-of.html) 译自:[Beautiful Gradient Typography in Web Design](http://sixrevisions.com/design-showcase-inspiration/beautiful-gradient-typography-in-web-design/) 版权所有,转载请注明出处,多谢!- - - - - - 使用**色彩渐变**作为一种处理类型是在网站设计中制作迷人的文字的一种非常流行的技术。它们用于多种情况:网站logo、介绍性文字、视觉元素等等。但是请特别小心:造成时尚或俗气的只是在Photoshop设置里面的一些小错误,一点细微的差别就可能适得其反。 如果你正好在寻找网页设计中的渐变文字类的实例和灵感,这里是一些很不错的例子。希望能为你的设计提供些参考。 虽然用Photoshop/Fireworks等制图软件可以很容易的创建漂亮的文字渐变效果,但是我们同样也可以用CSS创建漂亮的文字渐变效果,而用CSS的方法的好处是灵活和重用度高。 1. Bainbridge Studios 2.

css

CSS文字渐变效果

原文:[CSS文字渐变效果](http://www.qianduan.net/css-gradient-text-effect.html) 译自:[CSS Gradient Text Effect](http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/) 版权所有,转载请注明出处,多谢!!- - - - - - 本文介绍的技术很经典,也算是一篇老文章了,相信很多人也都看过,之前神飞有注意到国内有些翻译,但是不全面,这里我就将其完整的翻译了一下。 你想制作漂亮的标题而不用将每个标题都做成图片吗?这里是一个简单的CSS技巧,它将向你展示使用一个png图片制作渐变文字的方法(纯CSS、无Javascript或Flash)。而你所需要的仅仅是在标题里面的一个空<span>标签,它使用背景图片和position:absolute属性将标题覆盖。该技巧经主流浏览器测试:Firefox, Safari, Opera,

渐变

网站设计中使用渐变效果的25个实例

译自[SixRevisions](http://sixrevisions.com/design-showcase-inspiration/25-great-examples-of-using-gradient-effects-in-web-designs/) 原文:[网站设计中使用渐变效果的25个实例](http://www.qianduan.net/web-designs-gradient-effects-25-great-examples.html) 版权所有,转载请注明出处,多谢!- - - - - - 使用**色彩渐变**,或者转换两种以上色彩到另一种色彩的效果,是在网站设计最流行的设计技术之一。它们比较容易实现,但是想处理的非常恰当却颇为困难。在本文中,比将会看到使用色彩渐变的25个**最佳实例**。 其实,我们之前有收集过一些Photoshop渐变图层样式和一些Fireworks渐变样式。使用这些渐变样式,我们很容易就能创建出很棒的渐变效果。但是,在具体的项目中使用适当的色彩渐变,才是最主要的。 ECTOMACHINE Reinvigorate Central Snowsports Mediastroika Anderbose Tim Van Damme Rise