[Pro] Create same shadows as in softpress blog

Freeway
21

Elizabeth, the download is a .zip archive file… TBE-CurlyBottomShadow.zip
You have to expand or “unarchive” it. Do this by double-clicking on it. It
will then create a folder called TBE-CurlyBottomShadow. Inside that will be
a Media Folder, a Site Folder, and the Freeway Pro file Pure CSS Curly
Bottom Shadow.freeway , that’s step #1.

Best,

Ernie Simpson

On Tue, Oct 16, 2012 at 8:36 PM, Elizabeth email@hiddenwrote:

Thanks Ernie

But “unarchive” ?

I did point 4 but didn’t see “Pure CSS Curly Bottom Shadow”

Elizabeth

On 17/10/2012, at 10:09 AM, Ernie Simpson wrote:

I suppose that I need to add that you must be working with CSS layers, that
the box(es) you want to style need to be CSS layered html items. And your
browser has to support CSS3 box-shadows and the transform attribute, so no
IE8.

  1. Download the Freeway Pro file and unarchive it.

  2. Open your Freeway Pro document that you want to use the shadows.

  3. Open the Edit Styles palette

  4. At the bottom of the Edit Styles window, toggle the gear and choose
    “Import”. Select the “Pure CSS Curly Bottom Shadow” Freeway Pro file.

  5. In the Edit Styles window you can see both your stylesheet and the
    imported one. Drag the three styles (.shadowcurl - .shadowcurl:after,
    shadowcurl:before - and .shadowcurl:before) from the imported stylesheet
    into your stylesheet

  6. toggle the imported stylesheet closed, then delete it. Close the Edit
    Styles window.

  7. In your document, click on a layered textbox and apply the .shadowcurl
    style by clicking it in the Style palette. Then preview.

It’s that easy.

–
Ernie Simpson

On Tue, Oct 16, 2012 at 7:20 PM, Elizabeth <email@hidden

wrote:

How?

On 17/10/2012, at 9:37 AM, DeltaDave wrote:

All styled with CSS - no images were harmed during the making of this
page.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

22

On 17 Oct 2012, at 00:17, Ernie Simpson wrote:

As promised, my solution for the same method Dave was using. Freeway Pro
file and all.

That’s exactly the solution I was thinking about, but as ever you’ve done it with far more elan than I would have managed in a month of Sundays.

Genius!

Thanks Ernie!

Heather

Imagic Design * Good Design - No Compromise
email@hidden
http://www.imagic-design.co.uk
Twitter @Imagic-Design
T: 01634 864017

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

23

Well, I never thought, my question delivered this much! In my opinion Ernie really did a great job, I will give it a try!
Wim

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

24

Hey Ernie,

so excellent work. Corrected mine that was really different to yours. As far as I remember I got mine from css-tricks but possibly understood only the half. But there had been a huge discussion there with exact my problem - and you solved it, cool.

The “overflow hidden” shouldn’t be a real issue:

If s.bd need overflow:hidden for that annoying text scrollbar in a fixed height box, it should work with an extra div in the curlshadow box.

But if you think about the need of clearfixing floating boxes in a parent box (BoxModel, inflow) you could try instead of overflow:hidden the following one:

http://www.freewaytalk.net/thread/view/114205

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

25

I stumbled across this thread today, download the Freeway file, imported the styles into my document, and found it works nicely on my HTML boxes (with imported pass-thru graphics)! Thank you. Unfortunately, I cannot get my style changes to display in Preview

The only change I was successfully able to make was the deletion of “border” from .shadowcurl . But I also want to make the shadow more shallow (vertically shorter). I’ve fiddled with all manner of settings in all 3 styles, but one of two things happens when I do that: (1) the effect is totally gone when I Preview or (2) my changes have no affect at all.

So how do I tweak the settings so the shadow height is shorter?

Thanks,

James Wages

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

26

Post an example of what you have (online) and describe how you want it to look and we can offer some tweaks.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

27

Hi David,

After much hair pulling, I’ve found the biggest problem in getting tweaks to display is Freeway’s problematic internal cache. I have to clear the style > Publish Everything > apply the style > Publish Everything, or I won’t see my tweaks in Preview. That combined with multiple crashes of Freeway (cause by my repeatedly doing that step, I guess) has tired my brain.

Here’s what I have accomplished and what I seek to do:

I was able to tweak the vertical height, but I don’t know how to tweak the curvature of that arc to match what I created in Photoshop.

Thanks,

James W.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

28

I have to clear the style > Publish Everything > apply the style > Publish Everything, or I won’t see my tweaks in Preview.

Instead Preview in a different Browser locally - you can have any number of Browsers set up for this.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

29

I really need to see a live html page of your example so that I can see your code. Which of Ernies examples are you using?

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

30

Is this more like it

http://www.deltadesign.co/kiramek/index.html

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

31

Indeed it does, David. Thank you. Unfortunately, the link to the FW document on that web page you kindly created for me is dead.

–James W.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

32

David, if you cannot quickly fix the dead link to your FW document, could you at least please tell me what you changed to generate that effect so I can manually type it in myself?

Thanks,

James W.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

33

James, why don’t you look in the head portion of David’s page html and
divine it yourself?

.curlKIRAMEK { z-index:auto !important; -moz-border-radius:0 0 100px 100px
/ 0 0 1px 1px; border-radius:0 0 100px 100px / 0 0 1px 1px;
-webkit-box-shadow:0 1px 4px 1px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0,
0.1) inset; -moz-box-shadow:0 1px 4px 1px rgba(0, 0, 0, 0.3), 0 0 40px
rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px 1px rgba(0, 0, 0, 0.3), 0 0
40px rgba(0, 0, 0, 0.1) inset; }

.curlKIRAMEK:before, .curlKIRAMEK:after { content:“”; position:absolute;
bottom:19px; left:19px; width:70%; height:70%; max-width:320px;
max-height:150px; z-index:-1; background: rgba(0, 0, 0, 0.6);
-webkit-box-shadow:-5px 15px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow:-5px
15px 10px rgba(0, 0, 0, 0.5); box-shadow:-5px 15px 10px rgba(0, 0, 0, 0.5);
-webkit-transform: skew(-5deg, -4deg); -moz-transform: skew(-5deg, -4deg);
-ms-transform: skew(-5deg, -4deg); -o-transform: skew(-5deg, -4deg);
transform: skew(-5deg, -4deg); } .curlKIRAMEK:after { left:auto;
right:19px; -webkit-box-shadow:5px 15px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow:5px 15px 10px rgba(0, 0, 0, 0.5); box-shadow:5px 15px 10px
rgba(0, 0, 0, 0.5); -webkit-transform: skew(5deg, 4deg); -moz-transform:
skew(5deg, 4deg); -ms-transform: skew(5deg, 4deg); -o-transform: skew(5deg,
4deg); transform: skew(5deg, 4deg); }

–
Ernie Simpson

On Wed, Dec 19, 2012 at 9:17 PM, JDW email@hidden wrote:

David, if you cannot quickly fix the dead link to your FW document, could
you at least please tell me what you changed to generate that effect so I
can manually type it in myself?

Thanks,

James W.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

34

David, if you cannot quickly fix the dead link to your FW document, could you at least please tell me what you changed to generate that effect so I can manually type it in myself?

Apologies - link fixed.

Thats what you get for not using FW to upload!

You can import that new style in from that doc in the same way you did Ernies - it has a different name so wont clash.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

35

Thank you, and Merry Christmas!

James W.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options