-webkit-filter in RW

Classic
1

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?

2

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 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 in different web browsers and in all of my themes. 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:

And W3Schools have some info here and an example to experiment with:
https://www.w3schools.com/CSSref/css3_pr_box-shadow.asp

-Will.

1 Like
3

I put your style and it does not work either as you may see at:
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">
4

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

5

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

Should be:

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

and not

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

Try it again with the colon.

6

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.

7

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

8

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

9

Again: in page ` 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.

`

10

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.

11

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:

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.

1 Like
12

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.

13

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

1 Like
14

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