# \-webkit-filter in RW

**URL:** <https://forums.realmacsoftware.com/t/webkit-filter-in-rw/38695>\
**Category:** RapidWeaver Classic\
**Created:** [April 12, 2021, 10:20am UTC](https://forums.realmacsoftware.com/t/webkit-filter-in-rw/38695 "2021-04-12T10:20:30Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![fbartolom](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/fbartolom/32/6227_2.png) [@fbartolom](https://forums.realmacsoftware.com/u/fbartolom)\
**Post date:** [April 12, 2021, 10:20am UTC](https://forums.realmacsoftware.com/t/webkit-filter-in-rw/38695/1 "2021-04-12T10:20:30Z")

</div>

I tried to insert CSS code:  
a:link {  
color: #CB0013;  
background-color: transparent;  
text-decoration: none;  
}  
a:visited {  
color: #BA0002;  
background-color: transparent;  
text-decoration: none;  
}  
a:hover {  
color: #CB0013;  
background-color: #BBBBFF;  
text-decoration: underline;  
}  
img {  
-webkit-filter: drop-shadow(20px 20px 20px #222222);  
filter: drop-shadow(10px 10px 10px #222222);  
}  
yet, while the a parts function well the -webkit-filter one, intended to drop a shadow on the images does not. What is wrong?

---

<div class="post-metadata">

**Author:** ![willwood](https://avatars.discourse-cdn.com/v4/letter/w/bc8723/32.png) [@willwood](https://forums.realmacsoftware.com/u/willwood)\
**Post date:** [April 12, 2021, 11:18am UTC](https://forums.realmacsoftware.com/t/webkit-filter-in-rw/38695/2 "2021-04-12T11:18:11Z")

</div>

Hi @fbartolom ,

I think it may have been you who posted a similar question on my Discord live chatroom late last night, about applying shadow effects on images in the [Minalicious](https://themeflood.com/minalicious/) theme? I’ll reply here, so everyone can see the answer.

The CSS code you are using to apply a drop shadow effect doesn’t look quite “normal” in my eyes.  
Possibly you picked this up from an old website or blog article, from days before CSS3 and this was suggested as an experimental feature?

The preferred way of applying drop shadow effects on images would be using the dedicated `box-shadow` property:

```
img {
	box-shadow: 0px 20px 20px 20px #222222;
}

```

This is [well supported](https://caniuse.com/css-boxshadow) in different web browsers and in [all of my themes](https://themeflood.com/). However, if you wanted to restrict the shadow effects to only being applied in the main content area of the page (to avoid the shadow being applied on images in places like your banner, sidebar, social bar or footer) then it may be advisable to scope the selector name tighter:

```
#content img {
	box-shadow: 0px 20px 20px 20px #222222;
}

```

You can read more about the CSS box-shadow property here:

> **[box-shadow | CSS-Tricks](https://css-tricks.com/almanac/properties/b/box-shadow/)**
>
> The box-shadow property in CSS is for putting shadows on elements (sometimes referred to as "drop shadows", ala Photoshop/Figma).

And W3Schools have some info here and an example to experiment with:  
[https://www.w3schools.com/CSSref/css3\_pr\_box-shadow.asp](https://www.w3schools.com/CSSref/css3_pr_box-shadow.asp)

-Will.

---

<div class="post-metadata">

**Author:** ![fbartolom](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/fbartolom/32/6227_2.png) [@fbartolom](https://forums.realmacsoftware.com/u/fbartolom)\
**Post date:** [April 12, 2021, 11:24am UTC](https://forums.realmacsoftware.com/t/webkit-filter-in-rw/38695/3 "2021-04-12T11:24:05Z")

</div>

> [@willwood](#):
>
> ```auto
> img {
> box-shadow(0px 20px 20px 20px #222222);
> }
> 
> ```

I put your style and it does not work either as you may see at:  
[http://pizzomarinellafs.inarrivo.net](http://pizzomarinellafs.inarrivo.net) by checking the code.  
As a matter of fact I wrote a simple page with BBEdit and the shadow showed fine, even with the old syntax; this the code of the test page, please use an image whatsoever to check it:

> ```
> <head>
> <style>
> img {
> -webkit-filter: drop-shadow(20px 20px 20px #222222);
> filter: drop-shadow(10px 10px 10px #222222);
> }
> </style>
> </head>
> <img src="jeskyne-italie.jpg">
> 
> ```

---

<div class="post-metadata">

**Author:** ![fbartolom](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/fbartolom/32/6227_2.png) [@fbartolom](https://forums.realmacsoftware.com/u/fbartolom)\
**Post date:** [April 12, 2021, 11:27am UTC](https://forums.realmacsoftware.com/t/webkit-filter-in-rw/38695/4 "2021-04-12T11:27:24Z")

</div>

> [@willwood](#):
>
> ```auto
> img {
> box-shadow(0px 20px 20px 20px #222222);
> }
> 
> ```

To the contrary, using your box syntax, not even the test page shows the shadow, both on Safari and Chrome.

---

<div class="post-metadata">

**Author:** ![willwood](https://avatars.discourse-cdn.com/v4/letter/w/bc8723/32.png) [@willwood](https://forums.realmacsoftware.com/u/willwood)\
**Post date:** [April 12, 2021, 11:27am UTC](https://forums.realmacsoftware.com/t/webkit-filter-in-rw/38695/5 "2021-04-12T11:27:40Z")

</div>

You have not copied or written my code correctly. You are missing the colon between the property name and its value.

Should be:

```auto
img {
	box-shadow: 0px 20px 20px 20px #222222;
}

```

and not

```auto
img {
	box-shadow 0px 20px 20px 20px #222222;
}

```

Try it again with the colon.

---

<div class="post-metadata">

**Author:** ![willwood](https://avatars.discourse-cdn.com/v4/letter/w/bc8723/32.png) [@willwood](https://forums.realmacsoftware.com/u/willwood)\
**Post date:** [April 12, 2021, 11:33am UTC](https://forums.realmacsoftware.com/t/webkit-filter-in-rw/38695/6 "2021-04-12T11:33:22Z")

</div>

Remove the brackets too and make sure you are clearing your browser cache when trying to view CSS changes. Use a private browsing window, if you find it easier.

---

<div class="post-metadata">

**Author:** ![fbartolom](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/fbartolom/32/6227_2.png) [@fbartolom](https://forums.realmacsoftware.com/u/fbartolom)\
**Post date:** [April 12, 2021, 11:34am UTC](https://forums.realmacsoftware.com/t/webkit-filter-in-rw/38695/7 "2021-04-12T11:34:43Z")

</div>

> [@willwood](#):
>
> ```auto
> img {
> box-shadow: (0px 20px 20px 20px #222222);
> }
> 
> ```

Please check now, I fixed the colon: same result. Same on the test page:

> ```
> <head>
> <style>
> img {
> box-shadow: 0px 20px 20px 20px #222222;
> }
> </style>
> </head>
> <img src="jeskyne-italie.jpg">
> 
> ```

At any rate I saw the effect given by box-shadow on a sample web page where it works and it appears ugly respect to the one produced by the webkit-filter:  
[https://www.w3schools.com/cssref/css3\_pr\_box-shadow.asp](https://www.w3schools.com/cssref/css3_pr_box-shadow.asp)

---

<div class="post-metadata">

**Author:** ![fbartolom](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/fbartolom/32/6227_2.png) [@fbartolom](https://forums.realmacsoftware.com/u/fbartolom)\
**Post date:** [April 12, 2021, 11:38am UTC](https://forums.realmacsoftware.com/t/webkit-filter-in-rw/38695/8 "2021-04-12T11:38:32Z")

</div>

As a matter of fact, the logo img does show a shadow, but not the images in the stacks or in the site image.

---

<div class="post-metadata">

**Author:** ![fbartolom](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/fbartolom/32/6227_2.png) [@fbartolom](https://forums.realmacsoftware.com/u/fbartolom)\
**Post date:** [April 12, 2021, 11:43am UTC](https://forums.realmacsoftware.com/t/webkit-filter-in-rw/38695/9 "2021-04-12T11:43:03Z")

</div>

Again: in page ` [http://pizzomarinellafs.inarrivo.net/nazionaleFS.html](http://pizzomarinellafs.inarrivo.net/nazionaleFS.html) where the image is outside a stack, the shadows shows fine, as it does, for that matter, the one that may activated directly by RW.

`

---

<div class="post-metadata">

**Author:** ![fbartolom](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/fbartolom/32/6227_2.png) [@fbartolom](https://forums.realmacsoftware.com/u/fbartolom)\
**Post date:** [April 12, 2021, 11:45am UTC](https://forums.realmacsoftware.com/t/webkit-filter-in-rw/38695/10 "2021-04-12T11:45:27Z")

</div>

And it that page it also works the webkit syntax with an even better effect. The problem seems to sit with images set in stacks.

---

<div class="post-metadata">

**Author:** ![willwood](https://avatars.discourse-cdn.com/v4/letter/w/bc8723/32.png) [@willwood](https://forums.realmacsoftware.com/u/willwood)\
**Post date:** [April 12, 2021, 12:20pm UTC](https://forums.realmacsoftware.com/t/webkit-filter-in-rw/38695/11 "2021-04-12T12:20:26Z")

</div>

For any “effect” to show outside of an element (like a shadow effect), you must provide space the effect to show in.

That could be why it is not showing for you. Because the Stacks plugin applies “overflow:hidden” on everything. So your shadow effect may be there, but it could be hidden.

You could apply padding or margins on images, to try and force space for the shadow to show. But that may involve changing images to become block-level elements or additional CSS to change their sizing.

Weigh-up that the amount of code and adjustments required to images may prove to be a lot of extra work and testing, for a subtle effect few people would appreciate.

Speaking as a web developer expert, I’d say that given the choice between a CSS ‘filter’ and a more specific property like ‘box-shadow’, I’d always choose the latter. Simply for better browser support, performance efficiencies and ease of use.

If your objective is to simply apply shadow effects on images, then take a look at my Shady stack:

> **[Shady stack for RapidWeaver](https://stacks4stacks.com/shady/)**
>
> A super-simple RapidWeaver stack element for effortlessly creating attractive box and inset shadow effects on blocks of webpage content

So far as comparing filters to box-shadows and claiming the latter to be more ugly, consider that the websites I have linked you to purposefully only show very basic examples. It’s straightforward to customise the direction, depth, blurriness, and stretch of shadow effects. And using RGBa colour values instead of hex colour values will give you transparency too.

I really don’t have any other input to share in this discussion. The code you are trying to use is tricky to understand and you’ve said yourself it’s not working. Box-shadow seems like a better approach, considering your setup.

---

<div class="post-metadata">

**Author:** ![fbartolom](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/fbartolom/32/6227_2.png) [@fbartolom](https://forums.realmacsoftware.com/u/fbartolom)\
**Post date:** [April 12, 2021, 1:09pm UTC](https://forums.realmacsoftware.com/t/webkit-filter-in-rw/38695/12 "2021-04-12T13:09:37Z")

</div>

Right, as you may see in the project, I fixed each image it by adding 4 to margin and 20 to padding with the more pleasant webkit filter and it works fine. I just had to recreate a page in which for some strange reason the shadow appeared pitch black. Now everything seems fine. Thanks for you help.

---

<div class="post-metadata">

**Author:** ![fbartolom](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/fbartolom/32/6227_2.png) [@fbartolom](https://forums.realmacsoftware.com/u/fbartolom)\
**Post date:** [April 12, 2021, 1:11pm UTC](https://forums.realmacsoftware.com/t/webkit-filter-in-rw/38695/13 "2021-04-12T13:11:41Z")

</div>

But in the home page, to say the truth, what I am trying to fix now.

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/system/32/25301_2.png) [@system](https://forums.realmacsoftware.com/u/system)\
**Post date:** [May 12, 2021, 11:11pm UTC](https://forums.realmacsoftware.com/t/webkit-filter-in-rw/38695/14 "2021-05-12T23:11:52Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.