标签: gradient

如何组合CSS text-shadow和"background-image:-webkit-gradient"

我正在尝试使用CSS文本阴影以及text-shadow和background-image的组合在Chrome/Safari中实现渐变+文本阴影效果:-webkit-gradient,请参阅示例blw.我只能使其中一个效果适用(如果我添加阴影,渐变消失.我做错了什么?

h1 {
font-size: 100px;
background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 1px 1px #fff;
}
Run Code Online (Sandbox Code Playgroud)

html css text gradient css3

17
推荐指数
3
解决办法
2万
查看次数

使用css在img标签上的渐变

我想在<img>标签上放置一个渐变.src标签的属性是angular-item.例如: <img src={{value.angitem.image}}>

我试过制作css类:

.pickgradient {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65)));
}
Run Code Online (Sandbox Code Playgroud)

<img src={{value.angitem.image}} class="pickgradient ">
Run Code Online (Sandbox Code Playgroud)

但它不起作用.我该怎么办?

html css gradient css3 angularjs

17
推荐指数
2
解决办法
4万
查看次数

CSS3渐变,用于从Illustrator重现边界半径的"内部发光"效果

我正在努力绕过CSS3 Gradients(特别是径向的),并且这样做我想我已经为自己设置了一个相对艰难的挑战.

在Adobe Illustrator中,我创建了以下"按钮"样式.

按钮样式截图

为了创建这个图像,我创建了一个背景颜色为rgb(63,64,63)或的矩形#3F403F,然后"风格化"它的边界半径为15px.

然后我使用了25%不透明度,8px模糊,从中心白色的"内部发光".最后,我在它上面应用了3pt白色笔画.(如果您想要复制它,我告诉您所有这些,如果上面的图像不够用.)

所以,我的问题是:

是否可以使用CSS重新创建这个"按钮"而无需图像?

我知道Internet Explorer的"局限性"(为了这个实验,我不能给猴子们).我也知道webkit中的小'bug',它错误地渲染了一个背景颜色,边框半径和边框(背景颜色与颜色不同)的元素 - 它让背景颜色在弯曲处渗透角落.

到目前为止,我最好的尝试是相当可悲的,但这里的参考是代码:

section#featured footer p a
{
    color: rgb(255,255,255);
    text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border: 3px solid rgb(255,255,255);
    background: rgb(98,99,100);

    background: -moz-radial-gradient(
        50% 50%, 
        farthest-side, 
        #626364, 
        #545454
    );
    background: -webkit-gradient(
        radial, 
        50% 50%,
        1px,
        50% 50%,
        5px,
        from(rgb(98,99,100)),
        to(rgb(84,84,84))
    );
}
Run Code Online (Sandbox Code Playgroud)

基本上,太可怕了.感激地接受任何提示或提示,并提前感谢他们!

css gradient radial-gradients css3

16
推荐指数
1
解决办法
4万
查看次数

线光栅化:覆盖所有像素,无论线条渐变?

基本上,我想使用行算法来确定哪些单元格要检查我的raycaster的碰撞.

Bresenham并不是很好,因为它使用统一厚度的方法,这意味着它忽略了至少半覆盖线的细胞.根本不是很好,因为这意味着我的线路的某些部分没有被检查与单元格的交叉点,导致错误.

我似乎无法找到任何"粗线"算法,任何人都可以帮我找到一个?

红色:不好. 格林:好!
格林:我想要什么.
红色:我目前拥有和不想要的东西.

c# algorithm gradient pixel line

16
推荐指数
2
解决办法
3610
查看次数

UIButton带渐变,圆角,边框和阴影

网站上有一些类似的问题,但我正在寻找具体而略有不同的东西.

我按照这里给出的指示:http://www.cimgf.com/2010/01/28/fun-with-uibuttons-and-core-animation-layers/ 来创建UIButton的子类,以便创建一个我可以使用的泛型类指定渐变颜色,而不是尝试使用静态图像.

我遇到了一个问题,其中按钮层上的setMasksToBounds将允许A)显示阴影,但也允许渐变层显示超出圆角或B)渐变层剪切到圆角,但不是允许投影显示

我对这个问题的解决方案看起来很笨重(尽管它有效)我想知道是否有人知道更好和/或更清洁的方法来完成同样的事情.这是我的代码:

CSGradientButton.h

#import <UIKit/UIKit.h>
@interface CSGradientButton : UIButton {
    UIColor *_highColor;
    UIColor *_lowColor;
    CAGradientLayer *gradientLayer;
    CALayer *wrapperLayer;
    CGColorRef _borderColor;
}

@property (nonatomic, retain) UIColor *_highColor;
@property (nonatomic, retain) UIColor *_lowColor;
@property (nonatomic) CGColorRef _borderColor;
@property (nonatomic, retain) CALayer *wrapperLayer;
@property (nonatomic, retain) CAGradientLayer *gradientLayer;

- (void)setHighColor:(UIColor*)color;
- (void)setLowColor:(UIColor*)color;
- (void)setBorderColor:(CGColorRef)color;
- (void)setCornerRadius:(float)radius;

@end
Run Code Online (Sandbox Code Playgroud)

CSGradient.m(有趣的部分,无论如何)

#import "CSGradientButton.h" 

@implementation CSGradientButton

...

- (void)awakeFromNib
{
    // Initialize the gradient wrapper layer
    wrapperLayer = [[CALayer alloc] init]; …
Run Code Online (Sandbox Code Playgroud)

gradient border shadow uibutton ios

16
推荐指数
2
解决办法
3万
查看次数

TextView添加渐变和阴影

我有个问题.我想要一个带有渐变颜色的textview.它背后有一个黑色的影子.问题是阴影使用渐变的颜色而不是使用被调用的颜色(Color.BLACK)

我的代码是: numberTextView = (TextView)findViewById(R.id.something);

    Shader textShaderTop = new LinearGradient(0, 30, 0, 60,
                new int[]{Color.parseColor("#A6A6A6"), Color.parseColor("#E8E8E8"), Color.parseColor("#A6A6A6")},
                new float[]{0, 0.5f, 1}, TileMode.CLAMP);
    numberTextView.getPaint().setShader(textShaderTop);

    numberTextView.setShadowLayer(
              0.1f,   //float radius
              20f,  //float dx
              20f,  //float dy 
              Color.BLACK //this is not black on the screen, but it uses the gradient color!?
              );
Run Code Online (Sandbox Code Playgroud)

有谁知道该怎么做

android gradient colors shadow textview

16
推荐指数
1
解决办法
6024
查看次数

Android中糟糕的背景图像质量

我正在尝试在我的活动中放置背景,但图像质量不是预期的.

图像在蓝色条纹上方有一个简单的渐变,目前看起来像这样:

LinearLayout背景

我的活动布局:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:background="@drawable/background_register"
    android:drawingCacheQuality="high" >
</LinearLayout>
Run Code Online (Sandbox Code Playgroud)

后台描述符(drawable/background_register):

<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:antialias="true"
    android:dither="true"
    android:filter="true"
    android:tileMode="repeat"
    android:gravity="center"
    android:src="@drawable/background_blue_565" />
Run Code Online (Sandbox Code Playgroud)

目前我有一个描述BitmapDrawable的XML文件,它是actitivy的LinearLayout背景.但我已经尝试了迄今为止我发现的一切.启用抖动,抗锯齿,平铺,RGBA_8888模式...您可以命名.有没有人有我可以尝试的不同解决方案或想法?我会非常感激的.

顺便说一句,我目前正在用Galaxy S II开发应用程序.

android gradient background image

16
推荐指数
2
解决办法
1万
查看次数

径向梯度适用于不同的dpi

我正在创建一个径向渐变,如:

 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
 <gradient
      android:startColor="#7faacaFF"
      android:endColor="#cfe1edFF"
      android:gradientRadius="326"
      android:type="radial"/>
 </shape>
Run Code Online (Sandbox Code Playgroud)

但是在gradientRadius字段中使用sp和dip等值会返回错误.有没有办法为mdpi指定半径和比例,并在其余的屏幕密度中自动缩放,或者是否需要创建多个可绘制文件?

java android gradient

16
推荐指数
2
解决办法
4722
查看次数

字段集内的HTML5 Legend的CSS3

你能否建议使用CSS来获得如下所示的效果(使用CSS3渐变和边框)?

在此输入图像描述

当前版本的HTML如下所述:

<section style="margin: 10px;">
<fieldset style="border-radius: 5px; padding: 5px; min-height:150px;">
<legend><b> My Statistics </b> </legend>
<label> <br/> </label>
<label> <br/> </label>
</fieldset>
Run Code Online (Sandbox Code Playgroud)

html5 gradient fieldset css3

16
推荐指数
2
解决办法
6万
查看次数

沿着弯曲的UIBezierPath绘制渐变

在应用程序中,我绘制了一个弯曲的UIBezierPath和一个MKOverlayPathView类来显示航线.这是我正在使用的代码:

- (UIBezierPath *)pathForOverlayForMapRect:(MKMapRect)mapRect {

    ... bla bla bla ...

    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:s];
    [path addQuadCurveToPoint:e controlPoint:cp1];
    [path addLineToPoint:e2];
    [path addQuadCurveToPoint:s2 controlPoint:cp2];
    [path closePath];

    return path;   
  }
Run Code Online (Sandbox Code Playgroud)
- (void)drawMapRect:(MKMapRect)mapRect zoomScale:(MKZoomScale)zoomScale inContext:(CGContextRef)context{

    self.mapRect = mapRect;

    CGContextSetRGBFillColor(context, 1.0, 1.0, 1.0, 1.0);
    CGContextSetRGBStrokeColor(context, 0.0, 0.0, 0.0, 1.0);
    CGContextSetLineWidth(context, mapRect.size.height/700);
    CGContextSetLineJoin(context, kCGLineJoinRound);
    CGContextSetLineCap(context, kCGLineCapRound);

    CGContextAddPath(context, [self pathForOverlayForMapRect:mapRect].CGPath);

    [self updateTouchablePathForMapRect:mapRect];

    CGContextDrawPath(context, kCGPathFillStroke);

}
Run Code Online (Sandbox Code Playgroud)

这工作得很好,但我想在该路径上绘制一个渐变,而不仅仅是填充颜色.这就是它开始变得非常棘手的地方.

我已经尝试过CGContextDrawLinearGradient(),但它还没有让我有用.

gradient objective-c ios uibezierpath

16
推荐指数
1
解决办法
7540
查看次数