Unusual Shadow - Post ID 291570

User 2906089 Photo


Registered User
189 posts

See the attached image for reference. The shadow makes the card look like it's coming off the page. It was done in a graphics program. My question is if the shadow effect can be done in FD or SD.

Thanks in advance.

Attachments:
User 2699991 Photo


Registered User
3,186 posts
Online Now

Bosco wrote:
See the attached image for reference. The shadow makes the card look like it's coming off the page. It was done in a graphics program. My question is if the shadow effect can be done in FD or SD.

Thanks in advance.


not without some CSS tricks, or a lot of little things to do

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 2699991 Photo


Registered User
3,186 posts
Online Now

Wayan Jaya wrote:
Bosco wrote:
See the attached image for reference. The shadow makes the card look like it's coming off the page. It was done in a graphics program. My question is if the shadow effect can be done in FD or SD.

Thanks in advance.


not without some CSS tricks, or a lot of little things to do

or you could perhaps adapt Franks way of achieving the pointer thinhgu in a different thread
Attachments:

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 2906089 Photo


Registered User
189 posts

That is spectacular, care to share?
User 2699991 Photo


Registered User
3,186 posts
Online Now

Bosco wrote:
That is spectacular, care to share?


put the file with the css code (attached) into your resources and link to it

then simply give the container (or whatever) the class "shadows"



Attachments:

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 187934 Photo


Senior Advisor
19,262 posts

Wayan Jaya wrote:
Bosco wrote:
That is spectacular, care to share?


put the file with the css code (attached) into your resources and link to it

then simply give the container (or whatever) the class "shadows"

Unfortunately we don't have access to the head of the page in FD. I use the css in an html element at the top and then remove it after export.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2699991 Photo


Registered User
3,186 posts
Online Now

Bosco asked if possible in FD or SD
So that's for SD
Simply add that shadow class to the container element holding the HTML form within SD. There it is a form with an unusual shadow as Bosco put it

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 187934 Photo


Senior Advisor
19,262 posts

I got this one looking close to what you asked for.
Attachments:
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2906089 Photo


Registered User
189 posts

Hi Eric,

It's really close. I have not had a chance yet to play with Wayan's yet, but these examples are much appreciated.

The next logistical question would be is it "old news" type of affect or cool looking like I think.
User 2699991 Photo


Registered User
3,186 posts
Online Now

Bosco wrote:


The next logistical question would be is it "old news" type of affect or cool looking like I think.

Well Mr Bosco
It's the same as every other thing on a site, be it fancy transitions,effects etc, these things can enhance and engage the visitors, user experience to a point, and should be used sparingly.
too much can be overwhelming and soon become tedious, therefore having a negative effect.
in the case of that fancy shadow thingy if placed correctly around something that you want to draw attention to (and only the once, per page or even the site) then it can work, regardless of whether anyone thinks it may be "old hat"

so for instance a container with that shadowy thingy, which maybe has a call to action, that gives the visitor something that is of benefit to them (eg: a call to action to download a free e-book, or a discount voucher or anything similar) draws their focus to that element, and could result in increased click through rate (as actually has been proved not only on sites that I have done it but on many other websites out there that report similar results)

So don't worry about if it is "old hat" use it sparingly and it does work, just don't overdo it.

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.