标签: linear-gradients

我的项目的创意设计师和我有一些友好的分歧,至于是否更好地使用他的comp的片段或依靠浏览器的渲染引擎来创建用户体验的某些方面.

一个具体的例子是水平"条形",它运行小部件的整个宽度.他创造了一个非常时髦的渐变,涉及不同颜色和不透明度的几个停顿,他觉得图像的小尺寸是优选的,或者至少可以与本地生成渐变所需的CSS代码的增加行相比.

我们已经在使用CSS精灵技术来减少从服务器返回的次数,这对我们来说不是问题.现在,它只是使用切片图像与使用CSS和HTML渲染的专业人士和概念.

是否存在关于图像需要多大才能成为两者"更糟糕"选项的明确规则？

更新:由于一些人已经提到梯度的复杂性作为一个因素,我将在这里介绍它:

-webkit-gradient(linear, left top, left bottom, color-stop(50%, rgb(0,0,0)), to(rgba(0,0,0,0.9)));

很复杂!;-)

我想做以下设计:

我尝试过:after,:before但它不起作用.这是我目前的代码:

.design {
  background: #ea053a;
  display: inline-block;
  height: 155px;
  margin-left: 33px;
  margin-right: 40px;
  position: relative;
  width: 228px;
}

.design:before {
  border-top: 43px solid #ea053a;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  margin-right: 40px;
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  top: 55px;
  margin-top: 100px;
  width: 128px;
}

<div class="design"></div>

(小提琴)

我怎么能保持原始设计和以下两个属性？:

box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
background-image: linear-gradient(to bottom, #ea053a, #d0021b);

我不知道如何在按钮上设置背景渐变(不将背景渐变设置为图像).这与Android有很大的不同.

这是我必须定义一个可返回梯度方案的类:

import UIKit

extension CAGradientLayer {

    func backgroundGradientColor() -> CAGradientLayer {
        let topColor = UIColor(red: (0/255.0), green: (153/255.0), blue:(51/255.0), alpha: 1)
        let bottomColor = UIColor(red: (0/255.0), green: (153/255.0), blue:(255/255.0), alpha: 1)

        let gradientColors: [CGColor] = [topColor.CGColor, bottomColor.CGColor]
        let gradientLocations: [Float] = [0.0, 1.0]

        let gradientLayer: CAGradientLayer = CAGradientLayer()
        gradientLayer.colors = gradientColors
        gradientLayer.locations = gradientLocations

        return gradientLayer

    }
}

我可以使用它来设置我的整个视图的背景,如下所示:

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let background = CAGradientLayer().backgroundGradientColor()
        background.frame = self.view.bounds
        self.view.layer.insertSublayer(background, atIndex: 0)
    } …

有没有办法使用 Tailwind CSS 调整 HTML 组件背景图像样式的线性渐变角度？

我唯一能做的就是在方向选项之间进行选择：t(top)、tr(top-right)等，但我想将具有 Tailwind 类的 hr 元素的渐变角度设置为 24 度.bg-gradient-[160deg]（以及颜色：.from-lime .to-red）

我有一个固定的宽度div,使用css应用渐变.我想基于此渐变构建基于滑块的颜色选择器.

当我拖动滑块我计算百分比位置,我想得到基于此值的十六进制或rgb颜色代码.

我的想法是创建一个定义了开始/停止位置和颜色的数组,然后根据滑块位置从这个数组中找到两个值,然后以某种方式找到它之间的颜色:这是我无法前进的地方.

演示:http://jsfiddle.net/pdu8rpfv/

var gradient = [
    [
        0,
        'ff0000'
    ],
    [
        28,
        '008000'
    ],
    [
        72,
        '0000ff'
    ],
    [
        100,
        'ff0000'
    ]
];
$( "#slider" ).slider({
    min: 1,
    slide: function( event, ui ) {

        var colorRange = []
        $.each(gradient, function( index, value ) {
            if(ui.value<=value[0]) {
                colorRange = [index-1,index]
                return false;
            }
        });

        $('#result').css("background-color", 'red');

    }
});

这是我试图用CSS实现的设计图像.

如何为容器div实现此类边框,以便我可以在间隙之间放置透明徽标和文本.此设计将在视频背景上进行.黑色背景仅用于说明目的.

到目前为止,我试图通过测试来实现这样的目标:

body {
  background: black;
}
p {
  color: #ffffff;
  font-size: 16px;
  text-align: center;
  padding: 30px;
}
.steps-frame-1 {
  margin-top: 60px;
  width: 50%;
  height: 200px;
  margin-left: auto;
  margin-right: auto;
}
.steps-frame-1 {
  border: 0;
  position: relative;
}
.steps-frame-1::after,
.steps-frame-1::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 45%;
  border: 2px solid #fff;
}
.steps-frame-1::before {
  bottom: 0;
  border-top: 0;
}
.steps-frame-1::after {
  border-bottom: 0;
  top: 0;
}

<div class="steps-frame-1">
  <div class="inner">
    <p>content Lorem Ipsum is simply dummy text …

鉴于我有一个线性模型如下,我想得到关于W和b的梯度向量.

# tf Graph Input
X = tf.placeholder("float")
Y = tf.placeholder("float")

# Set model weights
W = tf.Variable(rng.randn(), name="weight")
b = tf.Variable(rng.randn(), name="bias")

# Construct a linear model
pred = tf.add(tf.mul(X, W), b)

# Mean squared error
cost = tf.reduce_sum(tf.pow(pred-Y, 2))/(2*n_samples)

但是,如果我尝试这样的事情,其中​​成本是一个函数,cost(x,y,w,b)我只想要相对于渐变w and b:

grads = tf.gradients(cost, tf.all_variable())

我的占位符也将包括在内(X和Y).即使我确实得到了一个渐变,[x,y,w,b]我怎么知道渐变中哪个元素属于每个参数,因为它只是一个没有名称的列表,哪个参数与衍生物有关？

在这个问题中,我正在使用此代码的一部分,并在此问题的基础上构建.

我在Safari和Chrome中显示线性渐变时遇到问题.在Firefox中,它显示得很好.

我在尝试:

background: -webkit-linear-gradient(center top , #9E9E9E, #454545) repeat scroll 0 0 transparent;   
background:    -moz-linear-gradient(center top , #9E9E9E, #454545) repeat scroll 0 0 transparent;
background:     -ms-linear-gradient(center top , #9E9E9E, #454545) repeat scroll 0 0 transparent;
background:      -o-linear-gradient(center top , #9E9E9E, #454545) repeat scroll 0 0 transparent;

谢谢你的帮助.

我创造了CAGradientLayer三种颜色,我需要给每种颜色不同的位置.例:

Red = 0 to 50 %
Yellow = 51 to 80 %
Green = 81 to 100 %

我曾尝试用给startPoint和endPoint,但没有奏效.

我的问题是关于渐变的渐变:渐变 - 从上到下,以及渐变 - 从左到右.

例:

代码是:

background-image: 
  linear-gradient(0deg, rgba(198,83,165,.95) 0%, rgba(198,86,51,.95) 100%),
  linear-gradient(90deg, transparent 50%, rgba(0,0,0,.95) 100%);
opacity: 0.949;

我的结果如下.

如你所见,它不会淡化渐变,它看起来像这个渐变后面的单独图层.有没有其他方法来实现这个？