Can you give a CSS block soft edges?

jamiewkb · Member · Apr 15, 2015 at 5:43 pm
Copy link

Add topic to favorites
Working with Hemingway Rewritten theme and loving it.

I’m wondering if it’s possible to brew up some CSS magic that would allow the title block to have a soft edge? You know perhaps the outer 10 pixels or so is more transparent as to soften the transition between that block and the background.

In Photoshop we would call something like that feathering.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Apr 16, 2015 at 4:15 pm
Copy link
About the best I can think of would be a box shadow with 0 horizontal and vertical offset and the play with the blur and spread radius. The first two numbers are the horizontal and vertical offsets, the third is the blur radius, the fourth is the spread and the last of course is a black color. I’ve also bumped the opacity of down from 0.9 to 0.8 since it seems to look better with the box shadow.
```
.site-branding {
    opacity: 0.8;
    box-shadow: 0 0 10px 5px #000;
}
```
jamiewkb · Member · Apr 16, 2015 at 5:21 pm
Copy link
Thank you. I’ll mess with the settings a bit and find a number that looks good for everyone.
thesacredpath · Member · Apr 17, 2015 at 5:04 pm
Copy link
You are welcome.

No items found.