[Pro] Possible to make in Freeway?

Hello,
On the website of Apple, you see at the bottom of the main page four retangles with a shadow at the center so they look if they are bent. Can i make something like that in Freeway?

Thanks,
Steven


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

Interesting. Compare with the US page – those shadows aren’t there, and the boxes are seamless from left to right. These shadows are being made with the CSS3 box-shadow attribute, using multiple shadow values to create the illusion of a curve. You could copy those properties into an extended style or page html markup to do this in Freeway. Here’s a cut-down example showing how the shadow layers together. Curved Shadow

There’s a bottom layer, which is the faint shadow all the way around the box. I styled that with class: foo. Then there’s another layer nested inside that bottom layer, which forms the curved shadow. That has a separate box-shadow, but a curved bottom radius and a transparent background color. Finally, the P inside that has been sized to cover everything and given an opaque background, giving the illusion of a drop shadow. Remove that background color, and you’ll see the trick revealed.

Walter

On Jun 30, 2013, at 1:41 PM, Steven wrote:

Hello,
On the website of Apple, you see at the bottom of the main page four retangles with a shadow at the center so they look if they are bent. Can i make something like that in Freeway?

Thanks,
Steven

http://www.apple.com/nl/


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

It’s a box in a box.

The parent has a curved drop shadow, with vertically a negative value.

The child has the same dimensions, but with it’s own background, border, etc. and so covering the parent allover, exept for the parent’s drop shadow.

Look at my demo here : boxshadow

Richard


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

Hi Richard. Can you post a downloadlink to this Freeway file?


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

Sure Bart … it’s just in the css … give me a minute please :slight_smile:


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

Here it is : http://fwdemo.rvanheukelum.com/apple-like-boxshadow/apple-like-boxshadow.freeway.zip

I’ve removed the webkit and moz css variations and css is no longer external to keep thinks simple.


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

Thanks for your help.

Steven


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

If you have a search on FWT you will find a post by The Big Erns where he shares quite a few examples of these in differing forms along with downloadable files.

I will have a look for it and post it if I can find it.

CSS3 shadows are what you are looking for?

Here are some of mine http://www.deltadesign.co/fw_examples/CSSstuff/drop-shadow-page.html

David


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

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


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

Thanks David

Steven


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