Unusual Shadow - Post ID 291574

User 2906089 Photo


Registered User
222 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:
Learn something, Share something.
User 2699991 Photo


Registered User
4,782 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
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2699991 Photo


Registered User
4,782 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:
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2906089 Photo


Registered User
222 posts

That is spectacular, care to share?
Learn something, Share something.
User 2699991 Photo


Registered User
4,782 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:
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 187934 Photo


Senior Advisor
20,181 posts
Online Now

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
4,782 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
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 187934 Photo


Senior Advisor
20,181 posts
Online Now

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
222 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.
Learn something, Share something.
User 2699991 Photo


Registered User
4,782 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.
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/

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.