[Pro] Create same shadows as in softpress blog

Freeway
1

How are the shadows under the white boxes in softpress’ses blog created? Can this, or is this achieved with the css shadows extra action?

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

2

the shadow(s) beyond the article boxes (if you meant this), is an image (.png)

Cheers

Thomas

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

3

Thank you Thomas, I did mean the article boxes.

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

4

I think Heather Kavanagh has a tutorial on cool FWP shadows somewhere…

–
Ernie Simpson

On Tue, Oct 16, 2012 at 10:02 AM, Wimdg email@hidden wrote:

Thank you Thomas, I did mean the article boxes.

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

5

On 16 Oct 2012, at 16:19, Ernie Simpson wrote:

I think Heather Kavanagh has a tutorial on cool FWP shadows somewhere…

I did once, but Apple saw fit to take my free space away.

The techniques are still valid, so if anyone really wants to know more, I’ll look at making some space somewhere.

=o)

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

6

… as you said Ernie, I remember that I did an example of this (image based) in the past but can’t remember the according list anymore.

The example is (even with FW file):

http://www.kimmich-dm.de/testings/expandingbox.html

I by the way tried this with css, too (and David as well as far as I remember) but haven’t had that luck, especially if it comes to divs with undefined height (such as the articles in the blog). I should probably have a second look in this:

Cheers

Thomas

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

7

Brilliant, Thomas. Another method I’ve tried is tying the ping shadow to
div:before or :after… this will work in undefined heights as the position
is set from the bottom of the div.

–
Ernie Simpson

On Tue, Oct 16, 2012 at 11:30 AM, Thomas Kimmich email@hidden wrote:

… as you said Ernie, I remember that I did an example of this (image
based) in the past but can’t remember the according list anymore.

The example is (even with FW file):

http://www.kimmich-dm.de/testings/expandingbox.html

I by the way tried this with css, too (and David as well as far as I
remember) but haven’t had that luck, especially if it comes to divs with
undefined height (such as the articles in the blog). I should probably have
a second look in this:

Demo: CSS drop-shadows without images – Nicolas Gallagher

Cheers

Thomas

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

8

Heather, I knew it was you! Any reason not to YouTube it?

–
Ernie Simpson

On Tue, Oct 16, 2012 at 11:28 AM, Heather Kavanagh email@hiddenwrote:

I did once, but Apple saw fit to take my free space away.

The techniques are still valid, so if anyone really wants to know more,
I’ll look at making some space somewhere.

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

9

On 16 Oct 2012, at 16:37, Ernie Simpson wrote:

Heather, I knew it was you! Any reason not to YouTube it?

Because it wasn’t video?

=oD

It was a static series of pages showing basic enhancements you could do to make nice shadows, alter hyperlink appearance and make graphic rollovers.

I have a little time on my hands, while a client works out whether they are serious about their web site redesign going ahead, so I may revisit things. There’s a few new wrinkles that might be interesting to try out.

Cheers

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

10

Lol! Don’t mind me, then!

–
Ernie Simpson

On Tue, Oct 16, 2012 at 11:39 AM, Heather Kavanagh email@hiddenwrote:

Because it wasn’t video?

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

11

Pseudo elements for mine http://www.deltadesign.co/fw_examples/CSSstuff/curl2.html

No Pngs

David

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

12

Yes David, but on boxes with undefined height, there occurs a lil’ problem that I can’t explain:

http://www.test.q-ring.de/follower/start3.php

The first box I made longer (the other ones are showing the problem too) is pushing the pseudo elements somewhere aside and I can’t explain why and how to solve this.

Just for protocol.

Cheers

Thomas

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

13

Hang on, I’ve done this kind before and already worked out the kinks. Now
I’m going to share. Will post it in a few minutes :slight_smile:

–
Ernie Simpson

On Tue, Oct 16, 2012 at 5:01 PM, Thomas Kimmich email@hidden wrote:

Yes David, but on boxes with undefined height, there occurs a lil’ problem
that I can’t explain:

http://www.test.q-ring.de/follower/start3.php

The first box I made longer (the other ones are showing the problem too)
is pushing the pseudo elements somewhere aside and I can’t explain why and
how to solve this.

Just for protocol.

Cheers

Thomas

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

14

Here are some more

http://www.deltadesign.co/fw_examples/CSSstuff/drop-shadow-page.html

Created by far better than me.

D

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

15

Very nice - I’d like to know how they’re done. Currently I use Illustrator or Photoshop and import.

Elizabeth

On 17/10/2012, at 8:17 AM, DeltaDave wrote:

Here are some more

http://www.deltadesign.co/fw_examples/CSSstuff/drop-shadow-page.html

Created by far better than me.

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

16

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

17

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

http://cssway.thebigerns.com/products/css_curly_paper_shadows/

It’s simple to use - just import the styles to your document and drag the
three shadowcurl styles into your stylesheet. Apply the plain shadowcurl
style to an html text box and it will work. Even in inline layouts, even in
shrinky height boxes.

Caveats though - wont work if overflow is set to hidden, looks bad on boxes
smaller than 65px total height. Shadow skews slightly different on
different heights and widths, but mostly looks good. My first work on this
way of page shadows here: http://cssway.thebigerns.com/products/fancyshadows

Enjoy!

–
Ernie Simpson

On Tue, Oct 16, 2012 at 7:07 PM, DeltaDave email@hidden 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

18

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

19

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@hiddenwrote:

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

20

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@hiddenwrote:

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