2

嗨，有没有人可以给我一些关于如何将你看到的图像复制成纯 css 字体+样式的建议？

在此处输入图像描述

我试过这个：JSFIDDLE css

 *{
        font-family: 'Asap', sans-serif;
        font-size:130px;
        color:#444;
        font-weight:bold;
        letter-spacing:-3px;
    }
    body{
        background:url('http://img.ly/system/uploads/007/221/887/large_antani.png') no-repeat left 190px ;
    }
    img{
        width:auto;
        height:auto;
    }
    a{

        text-shadow:
           3px 3px 0 #fff,
         -1px -1px 0 #fff,  
          1px -1px 0 #fff,
          -1px 1px 0 #fff,
           1px 1px 0 #fff,
            0px 2px 2px #ccc, 0px 4px 4px #ccc,0px 6px 6px #ccc;
    }

html

<a>asd</a>

任何建议appriciated。

如果您还认为无法复制，请告诉我，因为如果不可能，我会在上面浪费时间，我将使用 image 而不是 pure css。注意：对于文本渐变颜色，我知道 css 是不可能的，所以我打算使用这样的东西：https ://github.com/mrnix/pxgradient

但对我来说最大的问题是使文本阴影出现在图像中谢谢！

4

4 回答 4

3

我将您的文本阴影更改为：

text-shadow: 0 0 0 20px white, 4px 4px 4px 20px #ccc;

它只适用于支持文本阴影传播的浏览器（据我所知，它只是 IE10），但它更接近图像中的效果。

不幸的是，文本颜色不可能从浅蓝色渐变到略深的蓝色，因此您必须选择最适合您的纯色。

当然，对于跨浏览器兼容的解决方案，图像是您最好的选择。

于 2013-04-22T21:26:17.957 回答
2

我个人认为在这种情况下你应该选择一张图片。对于这样一个简单的 png 来说，绝对不值得 imo 努力，而且您将拥有最好的跨浏览器支持。而且我也相信，当涉及到标志时，你需要完全的跨浏览器兼容性。它定义了您的品牌以及人们识别您的方式，因此不应允许任何变化。

如果您坚持“编码”您的徽标，我认为您应该选择 svg 以获得最接近的匹配。我可能会在 Illustrator 中复制徽标（如果您还没有它）并从那里将其保存为 svg。将它集成到网页中应该很容易......

于 2013-04-22T21:42:31.680 回答
1

这是该图像最接近的复制品。

-webkit-background-clip: transparent;在对文本进行渐变效果的同时，也需要复制锚点来剪除阴影。是的，这不是跨浏览器兼容的。

HTML：

<div class="replica">
    <a class="link">asd</a>
    <a class="shadow">asd</a>
</div>

CSS：

.replica {
    position: relative;
}
a {
    font-style:italic;
    background: -webkit-gradient(linear, left top, left bottom, from(#99FFFF), to(#0DC4F3));
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
a.link {
    position: absolute;
    left:0;
    top:-2px;
    background: -webkit-gradient(linear, left top, left bottom, from(#99FFFF), to(#0DC4F3));
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
a.shadow {
    text-shadow: 3px 3px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0px 2px 2px #ccc, 0px 4px 4px #ccc, 0px 6px 6px #ccc;
}
于 2013-04-22T22:00:59.717 回答
1

如果你想变得疯狂并且可能减慢一切，你可以使用 jquery 为每个角度制作文本阴影。

按照这个小提琴试试

我只是做了一些 jquery 来为每个特定角度制作阴影......它很慢，我敢肯定更多元素会更糟......但它就在那里。

function stroke(thisEle) {
    var spread = 10; // how far you want the stroke to be
    var shadows = []; //Start an array for every textshadow
    for(var i = 0; i <= 361; i++){ //For every angle
        var angle = i;
        var pointX = spread*(Math.sin(angle)); //find the direction 
        var pointY = spread*(Math.cos(angle)); //of the text shadow
        if(i == 361){ //Give one last text shadow that is black underneath
            var shadow = '20px 20px 20px black'; 
        } else {
            var shadow = pointX + 'px ' + pointY + 'px 0 white';
        }
        shadows.push(shadow); //Add this shadow to the array
    }

    thisEle.css({
        textShadow: shadows //show all shadows (SLOW)
    });
}

$('a').each(function(){ //for each - do everything above
    var thisEle = $(this);
    stroke(thisEle);  
});

然后，要进行渐变，只需按照本教程操作：http ://css-tricks.com/snippets/css/gradient-text/（仅限 CSS3 和 WEBKIT）

否则，尝试这样的事情：http ://webdesignerwall.com/tutorials/css-gradient-text-effect

于 2013-04-22T22:52:34.757 回答