0

I'm designing a website that has a background image of text with an image that has a background glow in the center. I've been playing with the following two solutions:

  1. Just create one background image. Downside: I need to make various resolution background images to respond to different viewports.

  2. Create one background image with the text then place the image with glow on top of it in the body. Downside: I can't make it glow in CSS3 and I can't make an image file with glow that is transparent around the glow in a way that looks good.

My main question: Is there a way, using CSS3, to place a glow on an image where the glow isn't just a box? I believe the answer is no but I just wanted to make sure I'm not missing anything.

Any other advice would be appreciated!

flasshy
  • 111
  • 1
  • 11
  • The Html5 Canvas element can apply glow effects on an image that has been drawn to the canvas. Here's one of many links on the glow effect: http://stackoverflow.com/questions/13359189/glow-effect-on-html-canvas-potentially-using-convolute-kernel-matrix – markE Oct 28 '14 at 22:58
  • If you show an image it'll be much easier to help, but I don't see why you can't use box-shadow for the glow? Or maybe text-shadow or text-stroke? Again, would be easier to help if you show exactly what you're after. – powerbuoy Oct 28 '14 at 23:00
  • I don't have an image I can share since the site isn't live yet. I apologize. – flasshy Oct 28 '14 at 23:13
  • It seems like box-shadow only puts a shadow on a...well...box. I applied it to my image and it put a glow around a box around my image. The image has a transparent background but it doesn't have box edges. – flasshy Oct 28 '14 at 23:14
  • I'll post a sample image of what I'm trying to recreate in a minute. – flasshy Oct 28 '14 at 23:16
  • Apparently I can't post an image here because I lack reputation points. – flasshy Oct 28 '14 at 23:28
  • I feel like this is achievable. I'll make you up a jsfiddle. – lindsay Oct 29 '14 at 00:23

2 Answers2

0

I wasn't 100% sure if this was the effect you were after, but I feel I'm close. Here is a jsfiddle of what I've made. Most of the code is written with the assumption you're supporting modern browsers (but it wouldn't be difficult to retrofit it). All you would need to do is create the correct CSS3 radial gradient in the aside.

Here's the code from my example.

HTML

<section>
    <h4>hello world</h4>
    <h5>this is a test</h5>
</section>
<aside></aside>

CSS

html,
    body {
    height: 100%;
}

h4, h5 {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    position: relative;
}
section {
    top: 50%;
    left: 0;
    right: 0;
    z-index: 1;
    position: absolute;
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    color: white;
    font: normal 16px/normal arial, helvetica, sans-serif;
    text-align: center;
}
section h4 {
    font-size: 56px;
    font-weight: bold;
}
section h5 {
    font-size: 34px;
}
aside {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    background: url('http://d111vui60acwyt.cloudfront.net/product_photos/469185/P037_20Swiss_20Alps_20Church_original.jpg') left top no-repeat;
    background-size: cover;
}
aside:before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    display: block;
    position: absolute;
    background: rgba(255, 0, 0, .3);
}
lindsay
  • 972
  • 2
  • 11
  • 21
  • Thank you so much for your answer and code snippet! I looked at the jsfiddle. Should the "hello world" and "this is a test" text have a glow? In Firefox, I don't see any filter effects. If you intended to put a glow behind that text then yes, that's what I'm trying to do except with an image that doesn't have straight edges. – flasshy Oct 29 '14 at 12:59
  • Thanks for your reply. I was wondering if you had a picture of the effect you're after? I think I understand, but I feel like if a picture is provided I'll be able to make more accurately. – lindsay Oct 29 '14 at 22:31
  • Sadly, I can't post an image here because my reputation is too poor. Hahaha Any suggestions how else to post a sample image? – flasshy Oct 31 '14 at 14:41
0

The more I worked through it, I realized that using a transparent PNG on top of the background image will achieve my desired result.

Thank you all who commented on my question and provided very helpful answers! I appreciate it very much!

flasshy
  • 111
  • 1
  • 11