[Express] Folded Shape Effect

What’s the easiest way to create the folded shape/bar effect that is commonly found on many a website today–looks like a ribbon folding under a box. I know I can make the shape in photoshop and have seen some tutorials that seem to allow it to be done with CSS, but was wondering if there is an easy way to do this in Freeway.

thanks

Jeff


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

Can you show us an example of what you are trying to achieve?

Easier to do with Pro but doable with Express if you don’t mind getting your coding feet wet.

David


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

I do have Pro (must have accidentally clicked the Express button on my post).

One example is this site: http://www.greenleaforganicbakery.com

or this one (boxes on right if you scroll down a bit):http://www.theclothesmakethegirl.com

I know Dan Jasker once had a tutorial for this, but alas he’s no longer in business.


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

OK - I have something similar at http://www.deltadesign.co/fw_examples/CSSstuff/featurebanner.html

Which uses the following styles

<style type="text/css">
.featureBanner {
  position:relative;
  margin:20px
}
.featureBanner:before {
  content: "Featured";
  position:absolute;
  top:5px;
  left:-8px;
  padding-right: 10px;
  color:#000;
  font-weight:bold;
  height:0px;
  border: 15px solid #ffa200;
  border-right-color: transparent;
  line-height:0px;
  box-shadow:-0px 5px 5px -5px #000;
  z-index:1;
}
.featureBanner:after {
  content: "";
  position:absolute;
  top:35px;
  left:-8px;
  border: 4px solid #89540c;
  border-left-color: transparent;
  border-bottom-color: transparent;
}
</style>
<style type="text/css">

You should be able to jig this about to suit yours.

After adding the style code in your Page>html Markup in the before section all you need to do is add the class ‘featureBanner’ to the div/image you want to apply it to.

Shout out once you have something working and we can help you tweak it look like you want.

D


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

Hi Jeff,

did this in another coherence but should be as well what you’re after.

Am not sure if it’s part of the screencast, but the link 1 shoots you to a downloadable example:

http://kimmich-dm.de/wordpress/?p=147

Cheers

Thomas

BTW:

I love David’s CSS approach much more however it should be noted, that those extra classes aren’t visible within freeway’s construction view.


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

CSS Double Fold Ribbon http://tinyurl.com/atf2tmx

Todd
http://xiiro.com


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