If you look at this site (and don’t get hungry now!)
…left hand side Tempting deals, you can see the caption text “A breakfast roll and freshly ground coffee for only £1.99!” in a transparent box (rgba colour)
This floating caption technique is getting quite popular, but how it is done? If you grow the text the box it expand upwards so they appear to have fastened the bottom of the caption box to the bottom of the picture? Are we talking javascript or CSS here?
any one else puzzled how - I’m certainly missing a trick here and would like to know how?
If you grow the text the box it expand upwards so they appear to
have fastened the bottom of the caption box to the bottom of the
picture? Are we talking javascript or CSS here?
I took a very quick look so I may be wrong but it appears to be CSS
only. That div is positioned absolutely with a “bottom” value of “0”.
If this is being done with js I’m not seeing it.
This is a technique I’ve never used in Freeway, it will be very useful. I’m sure others might want to know how its done ~ there’s a file to download.
David
On 22 Feb 2010, at 20:03, Todd wrote:
On Feb 22, 2010, at 12:16 PM, David Owen wrote:
If you grow the text the box it expand upwards so they appear to have fastened the bottom of the caption box to the bottom of the picture? Are we talking javascript or CSS here?
I took a very quick look so I may be wrong but it appears to be CSS only. That div is positioned absolutely with a “bottom” value of “0”. If this is being done with js I’m not seeing it.
Thanks, I’ve been trying to do that, but now I’ve got another question: now that I’ve downloaded your demo, how have you managed to get the translucent fill, 'cos I can’t see how you’ve done it?!
I mean, why is not possible to do something like that with the colours palette and opacity without having to learn to ‘code’ or understand tags etc. I’m not averse to having to learn it, I just wondered why it’s done that way.
Freeway’s interface design is optimized for the types of tags and
properties that are understood by a wide swath of browsers. IE (for
the longest time) has held everyone else in the world hostage.
Thankfully IE8 supports a wider range of properties, and is rapidly
eating market share from IE6 and 7. That and Gecko- and WebKit-based
browsers are rapidly gaining global share (which is a big win for
standards-based design).
I would imagine that Softpress are watching the statistics, as IE6 has
fallen below 10% share for the first time in nearly forever, and will
enable more goodies in the native interface as time goes on.
But the real answer why you should want to learn to code is that like
any good craftsman, you will eventually want to know more about your
materials and what they are capable of. Just as you would not thread a
machine screw into a piece of soft pine and expect it to carry a load,
or use a staple to put two iron girders together, there are aspects of
Web construction that you need to understand if you’re ever going to
do more than point and click.
Walter
On Feb 23, 2010, at 11:33 AM, neil.west1 wrote:
Is there a simple explanation as to why?
I mean, why is not possible to do something like that with the
colours palette and opacity without having to learn to ‘code’ or
understand tags etc. I’m not averse to having to learn it, I just
wondered why it’s done that way.
This is a technique I’ve never used in Freeway, it will be very
useful. I’m sure others might want to know how its done ~ there’s a
file to download.
Glad to help David. Don’t forget to cover your bases with regard to
rgba browser support; not a lot of it yet. Specify a solid fallback
color or use an IE filter hack (far from ideal but it works). A lot of
online explanations/examples around.
Hi Neil,
What I love about this community is the breadth of ways to achieve the
same sort of result.
Rather than define the caption background fill as an RGBA (Red, Green,
Blue, Alpha) color I would have scurried off to Photoshop and made a
semi-transparent white pixel image and saved this as a 24-bit PNG.
This can then be applied to the caption background in Freeway (like
any other HTML object).
The desired effect can be seen in Freeway’s design view without
needing to preview the page
No need to use RGBA colors
Cons:
You’ll need to make a background graphic every time you want to
change the color or opacity
Older versions of Internet Explorer won’t see the transparency in
the image
Regards,
Tim.
On 23 Feb 2010, at 16:33, neil.west1 wrote:
Is there a simple explanation as to why?
I mean, why is not possible to do something like that with the
colours palette and opacity without having to learn to ‘code’ or
understand tags etc. I’m not averse to having to learn it, I just
wondered why it’s done that way.
Where by ‘Older’, Tim means ‘Any Currently Shipping’. I don’t think
IE8 properly handles semi-transparent PNG when it’s used as a
background image, although I’d love to be wrong about that.
Walter
On Feb 23, 2010, at 12:45 PM, Tim Plumb wrote:
Older versions of Internet Explorer won’t see the transparency in
the image
Yep, that the way I would normally have done for Freeway using a transparent png, but in this case followed what was done in the example Greggs site. If were following latest design trends I suppose we need to reduce images and create clean markup.
Just a note to others; its good to store examples like these to look back upon. That future project could just depend on you playing around with different methods of site building so you have a broader depth of skills to solve a particular problem.
Anyone please chip in with stuff you might think others would benefit from.
David
On 23 Feb 2010, at 17:45, Tim Plumb wrote:
Rather than define the caption background fill as an RGBA (Red, Green, Blue, Alpha) color I would have scurried off to Photoshop and made a semi-transparent white pixel image and saved this as a 24-bit PNG.
IE 6 and below are still, very much broken without hacks, however.
Regards,
Tim.
On 23 Feb 2010, at 18:10, Walter Lee Davis wrote:
Where by ‘Older’, Tim means ‘Any Currently Shipping’. I don’t think
IE8 properly handles semi-transparent PNG when it’s used as a
background image, although I’d love to be wrong about that.
Walter
On Feb 23, 2010, at 12:45 PM, Tim Plumb wrote:
Older versions of Internet Explorer won’t see the transparency in
the image
Ooh! Fun. Switch it to IE 5.5 and tell me what that error message says
(if you speak German).
Thanks for clearing that up for me, Tim, I was laboring under old
information.
Walter
On Feb 23, 2010, at 1:25 PM, Tim Plumb wrote:
Microsoft finally got this fixed in IE 7 as you can see here from
that sample file I put together; Moved
IE 6 and below are still, very much broken without hacks, however.
Regards,
Tim.
On 23 Feb 2010, at 18:10, Walter Lee Davis wrote:
Where by ‘Older’, Tim means ‘Any Currently Shipping’. I don’t think
IE8 properly handles semi-transparent PNG when it’s used as a
background image, although I’d love to be wrong about that.
Walter
On Feb 23, 2010, at 12:45 PM, Tim Plumb wrote:
Older versions of Internet Explorer won’t see the transparency
in the image
There’s also the graphic effects option in Freeway. Just select the HTML item, go to the Effects section of the Inspector and click the Background icon. You can then choose the color you want to use, and change the opacity too!
Joe
On 23 Feb 2010, at 18:25, Tim Plumb wrote:
Microsoft finally got this fixed in IE 7 as you can see here from that sample file I put together; Moved
IE 6 and below are still, very much broken without hacks, however.
Regards,
Tim.
On 23 Feb 2010, at 18:10, Walter Lee Davis wrote:
Where by ‘Older’, Tim means ‘Any Currently Shipping’. I don’t think IE8 properly handles semi-transparent PNG when it’s used as a background image, although I’d love to be wrong about that.
Walter
On Feb 23, 2010, at 12:45 PM, Tim Plumb wrote:
Older versions of Internet Explorer won’t see the transparency in the image
This is a technique I’ve never used in Freeway, it will be very useful. I’m sure others might want to know how its done ~ there’s a file to download.
Glad to help David. Don’t forget to cover your bases with regard to rgba browser support; not a lot of it yet. Specify a solid fallback color or use an IE filter hack (far from ideal but it works). A lot of online explanations/examples around.
I friend of mine got me into that Chicago event. I was surprised at
how very cool it was. Some truly amazing minds. It was nice to put a
face to some of the people whose work I’m familiar with and to
discover new ones.
@neil - You were wondering why you should learn to code some things?
If you get the chance I encourage you to attend an event like the one
above and you’ll quickly understand how much you’re missing out on.