问题标签 [gradient]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
3 回答
7216 浏览

css - CSS圆角和渐变边框

我正在对设计师的 psd 布局进行切割和切片。该设计基于 960 网格系统,由多个框组成(一个 960 像素的框用于顶部菜单,2 个 460 像素的框用于两个内容区域,一个 220 像素和一个 720 像素用于另一个内容设置选项等)。所有这些框都基于纯色背景颜色(主体),但它们都有圆角和 10 像素的近似边框,周围都是渐变的。

我正在考虑在这里采取的最佳路线,明智的 html,同时记住它当然应该验证,良好的语义等。

有什么想法/意见吗?

0 投票
4 回答
868 浏览

flash - 基于文件加载百分比的 RGB 渐变

我正在处理我的第一个 Flash 项目,对于我的预加载器,我想根据加载的百分比做一个非常简单的渐变。预加载器显示“77% 已加载...”,其中数字 77 是一个名为 percentLoaded 的动态文本实例。我希望 percentLoaded 的 textColor 在从 #000000 到 #FFFFFF 的渐变上以灰度变化。

因此,我不能简单地这样做:

这只是将 textColor 转换为 FFFFFF 的倍数,但输出颜色,因为它不是三个独立的组件。目前,这就是我所拥有的:

其中“rgb2hex”是在类中定义的函数,如下所示:

看起来这实际上并没有改变字体的颜色。我已经导入了 flash.text.TextField 和 flash.display.MovieClip,但不确定我是否遗漏了其他内容。使用字符串连接会更容易吗?或者 currentValue/100 可能发生了什么并将其作为数字传递?

如果好奇,我在这里找到了 rgb2hex 的代码。

谢谢!

0 投票
1 回答
669 浏览

css - 为背景图像渐变精心设计的 css

我伙计们。这可能更像是一个设计问题,但我想我会试一试,以防有人有一些我可以使用的高超 CSS 技术。如果没有,我会为反对投票和不说的冲击做好准备!

您可以看到这里的徽标持有人有一个向右渐变的背景图像,并且显然是半透明的。我的客户正在寻找顶部和右侧的渐变。关于我如何做到这一点的任何想法?

替代文字 http://www.linkhostmedia.com/blog/wp-content/uploads/2010/01/Screen-shot-2010-01-28-at-4.31.45-PM.png

提前致谢。

0 投票
1 回答
4397 浏览

iphone - 如何在 iPhone 上绘制这种精确的渐变?

有问题的梯度是Quartz 2D Programming Guide 中的图 8-5,“在点和圆之间变化的径向梯度”。

我正在尝试构建一个 CGGradient 对象(不是 CGShading 对象,这可能是问题所在),如下所示:

当然,这并不完全正确——中心点和半径是正确的,但实际的渐变看起来并不相同。我只希望 Apple 提供每个示例的源代码!>:(

0 投票
1 回答
3151 浏览

c# - 如何在 WPF 中实现圆锥/圆锥/圆形渐变

我想在 WPF 中重新创建锥形/圆形渐变。我研究过继承 System.Windows.Media.GradientBrush - 可以继承自 - 但使用大量内部管道来完成工作(继承自 System.Windows.Media.Brush)

任何关于如何实现这一点的想法都将不胜感激(最好不求助于位图)

干杯。

这个问题在 7 月的某个时候被问到(圆形渐变和 WPF),但我不想复活一个老问题。

0 投票
1 回答
414 浏览

css - 使用 css 定位图层和文本渐变

我是一个 CSS 新手,试图进行一些文本渐变。我在这里尝试了这段代码,但它对我不起作用,很可能是因为 h1 对象嵌套在#header div 中。我想这与我不知道的层有关。要么我得到一个在所有东西前面的梯度块,要么根本没有出现。

在这个特定的例子中,这段代码使一个大的渐变条出现在所有东西的前面:

这是HTML(我在rails上使用ruby,因此表示法)

我尝试使用 z-index,但我想不出任何好的结果。有任何想法吗?

0 投票
2 回答
1514 浏览

php - 如何在 PHP 中绘制略微斜向渐变的填充?

我发现以下函数可以在 PHP 中绘制垂直渐变。然而,许多网页设计师喜欢他们的渐变具有左上角的光源,以使渐变看起来更逼真。那么,如何在垂直渐变上稍微改变角度,使其变成轻微渐变呢?我不想完全过度,只是在垂直梯度向下移动时向右轻微移动。

0 投票
2 回答
1606 浏览

flash - 以编程方式倒带影片剪辑移除渐变蒙版 (FlashCS4/AS3)

我正在尝试使用 AS3 在 Flash CS4 中使用渐变蒙版创建自动倒带电影。我遇到的唯一问题是当影片剪辑到达时间线的末尾时,maskingLayerMC 会失去它的渐变。所以当电影倒带时,maskingLayer 没有渐变。当播放头到达第一帧并再次开始播放时,它恢复了渐变。

我也尝试在最后一帧上添加 .cacheAsBitmap 布尔属性,但它没有任何效果,并且 maskingLayerMC 仍然失去它的渐变。

[更新工作代码]

虽然我不确定为什么会这样,或者它是否是最好的解决方案。

似乎问题出在 prevFrame() 函数上,因为在 playDirection 函数中简单地添加属性是不够的。因此,令人沮丧的是,以下代码不起作用。

0 投票
8 回答
35649 浏览

c# - 如何在 C# 中获得彩虹色渐变?

我想要一个基于彩虹颜色的颜色枚举(红色......黄色......绿色......蓝色......)。

我基本上看到了两种方法:

  1. 创建一个包含一些重要参考颜色的查找表并在它们之间进行插值。我一点也不喜欢这个主意。

  2. 应用一些或多或少花哨的数学。可能更少,但我不太明白它是如何工作的。有任何想法吗?

(哦,虽然我做了一些 SO 研究,但我没有发现好的结果。如果这个问题已经发布,请指向我的位置,我会删除它。)

编辑:我宁愿让这个独立于使用的技术来显示渐变。例如,像 GetRainbowColor (float f) 这样 f 范围从 0(红色)到 1(紫色)的东西会很好用。

0 投票
7 回答
409278 浏览

css - CSS3 透明度 + 渐变

RGBA 非常有趣,-webkit-gradient, -moz-gradient, 和 uh... progid:DXImageTransform.Microsoft.gradient... 是的。:)

有没有办法将两者结合起来,RGBA 和渐变,以便使用当前/最新的 CSS 规范来实现 alpha 透明度的渐变。