Is it possible to re-create this image.png in pure CSS/CSS3?

[chriswelborn]

I would like to create my title image out of pure CSS3, but there is one feature that I'm not quite sure I can even do. Plus, the features that I know are possible don't seem to mix well. I don't know CSS very well, at least anything past the basics. I was hoping for some help.

Gradient Text - i did this, and it works by itself.
Drop Shadow - when combined, overrides gradient and i get a solid black shadow.
Inner Bevel - ?????

Is it possible to do all three things with CSS3 alone? I've googled and racked my brain but I can't seem to get it.

this is my starting point:

h1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
    font-family: sans-serif;
    font-size: 72px;
    background: -webkit-linear-gradient(#FFF, #2358A6); 
                -webkit-background-clip: text; 
                -webkit-text-fill-color: transparent;
}

This is what i'm trying to achieve (not too crazy right?):

The font isn't important to me right now, just the effects. sans-serif is the default linux font, that's why its there. If it's not possible, i understand, just tell me it's not possible and i'll continue to use my png.

[<M/>]

Here are 2 tutorials that may help, if they don't help, just google!

http://www.howtoplaza.com/create-beveled-text-effect-with-css

http://www.htmlcssdeveloper.com/tutorial/advanced-html-css/css-text-bevel-effect.html

[chriswelborn]

I've already looked at the first one, it doesn't really look that beveled to me. I was hoping to have the highlight and shadow blurred or gradient like. I was wondering if that specific effect was possible while mixing drop shadow and gradient text. I haven't found anything on google like that, which led me to believe that mixture isn't possible. Thanks for your reply, I'll continue to investigate this. Being able to spit a CSS style out of my program and site would be benificial to me in more ways than one, hince the need.

[<M/>]

Hmmm, since I have never done a bevel effect before with css, I may need to google it also. I will do my best and see if I can find something.

[chriswelborn]

this is what i've figured out. it only works in webkit browsers. I really wish I could make this cross-browser compatible.

@import url(http://fonts.googleapis.com/css?family=Didact+Gothic|Carrois+Gothic|Source+Code+Pro);
body { background-color: #ddd; }

h1 {
    font-family: "Didact Gothic";
    font-size: 5em;
    font-weight: 200;
}

h1 div{
    background: -webkit-linear-gradient(#DAE8EC 30%, #009AF1 95%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;    
    position: absolute;
    width: 100%;
}

h1:after {
    text-shadow: -2px -2px 3px rgba(255, 255, 255, 0.51), 4px 4px 4px rgba(0, 0, 0, 0.36);
    color: transparent;
}
#effects:after {
    content: "welborn prod."
}
<!-- body's html: -->
<h1 id='effects'><div>welborn prod.</div></h1>

...this is as close as I could get. The webfont is closer than any other font I could find. On a white background you don't even see the highlights. Anyone else have an idea about getting this on firefox (and maybe IE)?

[<M/>]

you have to use the web kits.

It may take a good day or two to get a good hang of learning how to make things browser(s) compatible but it would be worth it.

I found this and it may be helpful for you.
http://www.w3schools.com/cssref/css3_browsersupport.asp

[chriswelborn]

thanks for the link, it'll be nice to have a sort-of cross-browser reference. I saw one solution in my search but it involved jquery, but since this isn't just for my website I don't really want to use it.

[<M/>]

Okay, if you have any other question about browser support feel free to ask more!