Member Avatar for 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?):
welbornprod-logo

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.

  • 2 Contributors
  • 7 Replies
  • 295 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by <M/>

Dani AI

Generated

A reliable, cross-browser way to get the three effects shown in the image (gradient fill, a soft/blurred drop shadow, and a believable inner bevel) is to treat the text as a vector shape and use SVG filters, or to stack two DOM layers so the shadow/highlight are painted behind a gradient-clipped top layer. That complements ’s WebKit experimentation and the pointers from : WebKit-only tricks can look good, but SVG gives precise, image-quality control without rasterizing the text.

Inline SVG example (single element: gradient fill + combined filters for soft shadow and a specular-style bevel):

<svg viewBox="0 0 900 180" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0" stop-color="#DAE8EC"/>
      <stop offset="1" stop-color="#009AF1"/>
    </linearGradient>

    <filter id="fx" x="-50%" y="-50%" width="200%" height="200%">
      <!-- soft drop shadow -->
      <feGaussianBlur in="SourceAlpha" stdDeviation="6" result="blur"/>
      <feOffset in="blur" dx="6" dy="6" result="off"/>
      <!-- a mild specular lighting pass to suggest bevel -->
      <feGaussianBlur in="SourceAlpha" stdDeviation="1.8" result="a"/>
      <feSpecularLighting in="a" surfaceScale="2" specularConstant="0.6" specularExponent="25" lighting-color="#ffffff" result="spec">
        <fePointLight x="-10000" y="-10000" z="9000"/>
      </feSpecularLighting>
      <!-- merge shadow, lighting and original -->
      <feMerge>
        <feMergeNode in="off"/>
        <feMergeNode in="spec"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>

  <text x="20" y="120" font-family="Didact Gothic, Arial, sans-serif" font-size="72" fill="url(#grad)" filter="url(#fx)">
    welborn prod.
  </text>
</svg>

Simpler CSS-only pattern (wide support depends on background-clip/text support): render a blurred/offset shadow in a behind element (pseudo-element or separate span) and layer the gradient-clipped text on top. The shadow layer uses filter: blur() so the top gradient is unaffected.

Final notes: SVG is the most predictable path for high-fidelity bevels and soft lighting while keeping selectable/searchable text. The layered-CSS approach works well as a progressive enhancement where native support exists; keep a simple solid-color fallback and preserve actual text content in the DOM for accessibility and SEO.

Recommended Answers

All 7 Replies

Member Avatar for 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.

Member Avatar for <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.

Member Avatar for 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)?

Member Avatar for <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

Member Avatar for 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.

Member Avatar for <M/>

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.