Re: [css-d] background image AND background color?
On Wed, Jun 19, 2013 at 10:58 AM, COM j...@coffeeonmars.com wrote: On Jun 18, 2013, at 6:38 PM, David Laakso laakso.davi...@gmail.com wrote: Anything is possible. Scalable Vector Graphics [svg images], CSS rgba transparency, and CSS linear-gradients --among other contemporary methods ... open a lot of new doors and windows that do not require PhotoShop. Thank you..this is good to hear. Let me make sure I expressed my request clearly when I say on top..picture a header 960x100px which has a background image. imagine that same header with a color applied to the entire 960x100px dimension as opposed to: a header with a background image and a background color above it in the sense of closer to the top edge of the view port. I fiddled yesterday and got nothing other than I can vary the opacity of my color but not so that the background image's color is affected by that of the color above it (above it in z-space) Thank you! JOhn John, For those among us who dwell in the visual world, one picture is worth a thousand words... a click able link to your coded page would help. Transparency is determined by the code but it is dependent on the hue, saturation, value of the elements proper-- their z-index, the type of monitor used to view the page, ambient light when viewed... and god only knows what else. For what its worth this is a site in progress that uses various combinations of svg images, linear-gradients, and rgba-transparency in the header, navigation, sidebar, and footer: http://ccstudi.com/ Best, David Laakso -- Chelsea Creek Studio http://ccstudi.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image AND background color?
On Jun 19, 2013, at 8:37 AM, David Laakso laakso.davi...@gmail.com wrote: For those among us who dwell in the visual world, one picture is worth a thousand words... a click able link to your coded page would help. A link to the page in question is here: http://coffeeonmars.com/test/flextest/flextest.html the part I'm talking about is at top, where it says heading one and heading two; behind them in the header is a jpg of what looks like some light texture. in the css is also a background color for that element: a red at 0.4 alpha. my goal is to have the texture image's color influenced by that background color, IOW, by varying the opacity of the color, the image would have more or less of a reddish cast to it. Thank you! John __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image AND background color?
On Wed, Jun 19, 2013 at 11:51 AM, COM j...@coffeeonmars.com wrote:
On Jun 19, 2013, at 8:37 AM, David Laakso laakso.davi...@gmail.com wrote:
For those among us who dwell in the visual world, one picture is worth
a thousand words... a click able link to your coded page would help.
A link to the page in question is here:
http://coffeeonmars.com/test/flextest/flextest.html
the part I'm talking about is at top, where it says heading one and
heading two; behind them in the header is a jpg of what looks like some
light texture. in the css is also a background color for that element: a red
at 0.4 alpha.
my goal is to have the texture image's color influenced by that background
color, IOW, by varying the opacity of the color, the image would have more
or less of a reddish cast to it.
Thank you!
John
John,
rgba coding error...
Change this:
header{
background-color:rgba(240,0,0 0.4);
}
to this:
header{
background-color:rgba(240,0,0,.04);
}
or this:
header{
background-color:rgba(240,0,0,.4);
}
Note the last comma.
Not tested.
Best,
David Laakso
--
Chelsea Creek Studio
http://ccstudi.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image AND background color?
Tested on safari 6.0.5...
background-color: rgba(240,0,0,0.4);
althought it looks like rgba(240,0,0,0.2) might be better suited. :)
Best,
Karl DeSaulniers
Design Drumm
http://designdrumm.com
On Jun 19, 2013, at 12:17 PM, David Laakso wrote:
On Wed, Jun 19, 2013 at 11:51 AM, COM j...@coffeeonmars.com wrote:
On Jun 19, 2013, at 8:37 AM, David Laakso laakso.davi...@gmail.com wrote:
For those among us who dwell in the visual world, one picture is worth
a thousand words... a click able link to your coded page would help.
A link to the page in question is here:
http://coffeeonmars.com/test/flextest/flextest.html
the part I'm talking about is at top, where it says heading one and
heading two; behind them in the header is a jpg of what looks like some
light texture. in the css is also a background color for that element: a red
at 0.4 alpha.
my goal is to have the texture image's color influenced by that background
color, IOW, by varying the opacity of the color, the image would have more
or less of a reddish cast to it.
Thank you!
John
John,
rgba coding error...
Change this:
header{
background-color:rgba(240,0,0 0.4);
}
to this:
header{
background-color:rgba(240,0,0,.04);
}
or this:
header{
background-color:rgba(240,0,0,.4);
}
Note the last comma.
Not tested.
Best,
David Laakso
--
Chelsea Creek Studio
http://ccstudi.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image AND background color?
On Jun 19, 2013, at 10:31 AM, Karl DeSaulniers k...@designdrumm.com wrote: Tested on safari 6.0.5... background-color: rgba(240,0,0,0.4); althought it looks like rgba(240,0,0,0.2) might be better suited. :) weird…no change for me at all, tho when I refresh, I do see the reduced-opacity red flash for just a second, right before the .jpg loads….. John __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image AND background color?
You won't get PhotoShop multiply layer effects exactly, but using a 24bit png for your image with areas of alpha transparency to allow the bg color to come through is as close as u can get I believe. HTH — Sent from Mailbox for iPhone On Wed, Jun 19, 2013 at 11:54 AM, COM j...@coffeeonmars.com wrote: On Jun 19, 2013, at 8:37 AM, David Laakso laakso.davi...@gmail.com wrote: For those among us who dwell in the visual world, one picture is worth a thousand words... a click able link to your coded page would help. A link to the page in question is here: http://coffeeonmars.com/test/flextest/flextest.html the part I'm talking about is at top, where it says heading one and heading two; behind them in the header is a jpg of what looks like some light texture. in the css is also a background color for that element: a red at 0.4 alpha. my goal is to have the texture image's color influenced by that background color, IOW, by varying the opacity of the color, the image would have more or less of a reddish cast to it. Thank you! John __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] why does shadow disappear?
Can you check this? http://jsfiddle.net/6Wg8g/1/ On Sun, Jun 9, 2013 at 12:46 AM, COM j...@coffeeonmars.com wrote: I hope this is considered a CSS problem… at this link: http://jsfiddle.net/6Wg8g/ I have a menu icon whose addition makes other things disappear: not a wanted outcome. is the fault in my #menu declarations? I just don't get why that addition makes other things vanish. Any clues would be appreciated. John __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Boray Eris www.pidizayn.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image AND background color?
On Jun 19, 2013, at 10:35 AM, Tom Livingston tom...@gmail.com wrote: You won't get PhotoShop multiply layer effects exactly, but using a 24bit png for your image with areas of alpha transparency to allow the bg color to come through is as close as u can get I believe. confirmed…here's what worked for me, aside from David and Karl's correction of my code: To make my png partially opaque in my image editor (Pixelmator)…I set it to 50% just for grins and NOW the influence of that red is taking effect on the PNG texture occupying the same element. link:http://coffeeonmars.com/test/flextest/flextest.html weird…my connection shows the red load first and then s-l-o-w-l-y replace by the texture.. Thank you for the code corrections and ideas about png/opacity Spoze the CSS consortium is considering giving us some photoshop-like layers? Compared to the many other effects CSS is now handling, it doesn't seem far-fetched.. John __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image AND background color?
Sorry Tom L. Sent this to you instead of the list. Anyway, you need an overlay div if you're trying to simulate layers. Makes for css that is easier to read, in my opinion. Greg -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Tom Livingston Sent: Wednesday, June 19, 2013 10:36 AM To: COM Cc: CSS-Discuss Subject: Re: [css-d] background image AND background color? You won't get PhotoShop multiply layer effects exactly, but using a 24bit png for your image with areas of alpha transparency to allow the bg color to come through is as close as u can get I believe. HTH — Sent from Mailbox for iPhone On Wed, Jun 19, 2013 at 11:54 AM, COM j...@coffeeonmars.com wrote: On Jun 19, 2013, at 8:37 AM, David Laakso laakso.davi...@gmail.com wrote: For those among us who dwell in the visual world, one picture is worth a thousand words... a click able link to your coded page would help. A link to the page in question is here: http://coffeeonmars.com/test/flextest/flextest.html the part I'm talking about is at top, where it says heading one and heading two; behind them in the header is a jpg of what looks like some light texture. in the css is also a background color for that element: a red at 0.4 alpha. my goal is to have the texture image's color influenced by that background color, IOW, by varying the opacity of the color, the image would have more or less of a reddish cast to it. Thank you! John __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image AND background color?
On Wed, Jun 19, 2013 at 1:46 PM, COM j...@coffeeonmars.com wrote: confirmed…here's what worked for me./.. To make my png partially opaque in my image editor (Pixelmator)…I set it to 50% just for grins and NOW the influence of that red is taking effect on the PNG texture occupying the same element. link:http://coffeeonmars.com/test/flextest/flextest.html John The red-like color is opaque: no texture whatsoever seen in Windows 7 any browser. Best, David Laakso -- Chelsea Creek Studio http://ccstudi.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image AND background color?
On Jun 19, 2013, at 11:43 AM, David Laakso laakso.davi...@gmail.com wrote: The red-like color is opaque: no texture whatsoever seen in Windows 7 any browser. well that blows a hole right through that technique..thank you for telling me that, David. John __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image AND background color?
You have to set up a special alpha CSS for IE. Also you may need PNG fix for it to work in IE older browsers, but it can be done. just search for transparency in IE and PNG fix for IE HTH, Best, Karl DeSaulniers Design Drumm http://designdrumm.com On Jun 19, 2013, at 12:46 PM, COM wrote: On Jun 19, 2013, at 10:35 AM, Tom Livingston tom...@gmail.com wrote: You won't get PhotoShop multiply layer effects exactly, but using a 24bit png for your image with areas of alpha transparency to allow the bg color to come through is as close as u can get I believe. confirmed…here's what worked for me, aside from David and Karl's correction of my code: To make my png partially opaque in my image editor (Pixelmator)…I set it to 50% just for grins and NOW the influence of that red is taking effect on the PNG texture occupying the same element. link:http://coffeeonmars.com/test/flextest/flextest.html weird…my connection shows the red load first and then s-l-o-w-l-y replace by the texture.. Thank you for the code corrections and ideas about png/opacity Spoze the CSS consortium is considering giving us some photoshop-like layers? Compared to the many other effects CSS is now handling, it doesn't seem far-fetched.. John __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
