CSS / Javascript-使用css3或javascript复制图像样式（贴纸样式）

Question

hi is there anyone can give me some advice on how to replicate the image you see into pure css font+style?

i tryed this: 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>

any suggestion appriciated.

If also you think it's not possible to replicate this please, tell me, cause if not possible i'm wasting time on it, and i will use image instead of pure css . NB: for the text gradient color i know css is not possible, so i'm planning to use somenthing like this : https://github.com/mrnix/pxgradient

but the huge problem to me it's making the text-shadow appearing as in the image Thanks!

Answer 1

I changed your text-shadow to:

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

It will only work on browsers that support text-shadow spread (which to my knowledge is just IE10), but it is a closer match to the effect in the image.

It's not possible to get the gradient from light-blue to slightly-darker-blue in the text colour, unfortunately, so you'll have to pick a solid colour that works best for you.

Of course, for a cross-browser compatible solution, images are your best bet.

Answer 2

Personally i think you should go for an image in this case. Definitely for such a simple png, it is not worth the effort imo, and you will have the best cross browser support. And I also believe that when it comes to logo's, you need full cross browser compatibility. It is what defines your brand, and the way people will recognize you, so no variations should be allowed.

If you insist on 'coding' your logo, I think you should go for an svg for the closest possible match. I would probably replicate the logo in Illustrator (if you do not have it there already) and save it as an svg from there. Integrating it in a webpage should be easy then...

Answer 3

Here's the closest replica for that image.

Duplicate anchor is needed as -webkit-background-clip: transparent; clips out the shadow as well while making gradient effect on text. Yes, this isn't cross-borwser compatible.

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;
}

Answer 4

If you wanted to get crazy and possibly slow down everything, you can use jquery to make a text shadow for every angle.

follow this fiddle to try it

I just did some jquery to make a shadow for every specific angle... IT IS SLOW, I'm sure even worse with more elements... but there it is.

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);  
});

Then, to do the gradient, just follow this tutorial: http://css-tricks.com/snippets/css/gradient-text/ (NOTE CSS3 AND WEBKIT ONLY)

Otherwise, try something like this: http://webdesignerwall.com/tutorials/css-gradient-text-effect