[css-d] CSS3 Transformations ?
Hi, I want the word gallery to rotate vertically then reveal Art/Art2. Currently I only have in place vendor prefixes for Chrome, if you view the link in any browser other then Chrome all you will see is blue h3 tag Art / Art2 overlapping the word gallery, and you may say to me, uhh your overlapping text :) [link http://www.thecreativesheep.ca/webdesignprojects/largeprojects/cs_site2.html] __ 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-d] CSS3 Transforming
I want the word 'gallery' to rotate when hovered and the words Art/Art2, which are suppose to be individual anchor links, but I haven't added them. The CSS3 rotation transition is not working out, as I thought it would. The word 'gallery' flickers ? (I only have vendor prefixes for Chrome, I recommend viewing in Chrome only) [Link http://www.thecreativesheep.ca/webdesignprojects/largeprojects/cs_site2.html] __ 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-d] CSS3 control over shapes?
if you picture a store tag..a rectangle with a hole at one end for the string, and that end’s corners each snipped off at appx 45 degrees.. can CSS handle something like that, or would I be better of turning to HTML5 canvas? 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] CSS3 control over shapes?
Sure, check out http://codepen.io/search?q=taglimit=allorder=popularitydepth=everythingshow_forks=falsefor some ideas On Sun, Feb 9, 2014 at 4:02 PM, John Johnson j...@coffeeonmars.com wrote: if you picture a store tag..a rectangle with a hole at one end for the string, and that end's corners each snipped off at appx 45 degrees.. can CSS handle something like that, or would I be better of turning to HTML5 canvas? 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/ -- Chris Rockwell __ 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] CSS3 Animation Top Position Percent problem
Unfortunately It's either CSS or CSS for me, so will do some fixed height trick. -- Kuzeko On 28 August 2013 04:58, Karl DeSaulniers k...@designdrumm.com wrote: You don't. You use JavaScript or even better. jQuery. IMO. jQuery would handle what your wanting very nicely. I for one avoid animations with CSS. But that is just me I assume. Best, Karl Sent from losPhone On Aug 27, 2013, at 4:38 PM, Kuzeko Web Design - Matteo Lissandrini w...@kuzeko.com wrote: Ok, thank you. But then, the question becomes: how do I accomplish that effect with only CSS? I.e., text of different length scrolling vertically from end to end without hardcoding px or a predefined height?? Thanks -- Kuzeko On 27 August 2013 22:30, Eric e...@minerbits.com wrote: ** It's more of a misbehavior than a bug. The Moz engineering team probably just decided not to go back and change it after the spec was finalized. It's sort of like how they're the only UA that doesn't support display: run-in. Back int he '90s a bug was opened on it and loads of note by senior engineers stating why they should support (one saying that it's embarrassing for FF to be the only UA not to support) it's still sitting there unassigned over 15yrs later. That's just how engineering teams work. I would suggest that you don't use percentage as a unit of measure in CSS animations. Eric On August 27, 2013 at 8:09 AM Kuzeko Web Design - Matteo Lissandrini w...@kuzeko.com wrote: Thank you all for the answers, but now I am really confused. So is this supposed to do so or is a bug? Can you fork my example and show me how to have this work properly if this is possible? -- Kuzeko On 27 August 2013 08:28, Philippe Wittenbergh e...@l-c-n.com wrote: Le 27 août 2013 à 14:52, L. David Baron dba...@dbaron.org a écrit : Many of the other references in the CSS spec to things that are based on the height of the containing block explicitly say that if the containing block's computed height is 'auto', then the percentage is as well. See, for example: http://www.w3.org/TR/CSS2/visudet.html#the-height-property http://www.w3.org/TR/CSS2/visudet.html#min-max-heights http://www.w3.org/TR/CSS21/visuren.html#position-props , however, does not say that, and you shouldn't infer it from the same thing being stated elsewhere. The working group explicitly decided *not* to change this in 2009; see: http://wiki.csswg.org/spec/css2.1#issue-134 http://lists.w3.org/Archives/Public/www-style/2009Jun/0056.html http://lists.w3.org/Archives/Public/www-style/2009Aug/0092.html Oh :-(. I had forgotten about that resolution (which I find inconsistent with the way height and min-max-height work). Thing is, no browser released as of today, including Presto-Opera, implement this, even for a very basic test case [*] (I can't test IE 11beta, though). But Presto based Opera and Gecko manage to animated it. Bizarre. [*] http://dev.l-c-n.com/_temp/top-perc.html Gecko bug report is here: https://bugzilla.mozilla.org/show_bug.cgi?id=260348 Philippe -- Philippe Wittenbergh http://l-c-n.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/ __ 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 --
Re: [css-d] CSS3 Animation Top Position Percent problem
Hi Matteo, Transitioning and animating abstract measurements (as opposed to specified pixel values) has been a gripe for some time. A classic bugbear is the time-honoured collapse / expand downward, which relies on transitioning from a height of 0 to 100%. Lea Verou found this neat trick of using max-height to achieve this — because the max-height itself is an abstract measurement, you can use hard pixel values: http://dropshado.ws/post/32280391206/animating-max-height-to-overcome-height-auto-limitation I know this doesn't solve your specific situation, but it's worth bearing in mind that some kind of hack (involving a hidden duplicate with relative positioning above the real content div, then animating its max-height, maybe?) involving max-height might come in handy? Regards, Barney Carroll barney.carr...@gmail.com +44 7429 177278 barneycarroll.com On 28 August 2013 08:33, Kuzeko Web Design - Matteo Lissandrini w...@kuzeko.com wrote: Unfortunately It's either CSS or CSS for me, so will do some fixed height trick. -- Kuzeko On 28 August 2013 04:58, Karl DeSaulniers k...@designdrumm.com wrote: You don't. You use JavaScript or even better. jQuery. IMO. jQuery would handle what your wanting very nicely. I for one avoid animations with CSS. But that is just me I assume. Best, Karl Sent from losPhone On Aug 27, 2013, at 4:38 PM, Kuzeko Web Design - Matteo Lissandrini w...@kuzeko.com wrote: Ok, thank you. But then, the question becomes: how do I accomplish that effect with only CSS? I.e., text of different length scrolling vertically from end to end without hardcoding px or a predefined height?? Thanks -- Kuzeko On 27 August 2013 22:30, Eric e...@minerbits.com wrote: ** It's more of a misbehavior than a bug. The Moz engineering team probably just decided not to go back and change it after the spec was finalized. It's sort of like how they're the only UA that doesn't support display: run-in. Back int he '90s a bug was opened on it and loads of note by senior engineers stating why they should support (one saying that it's embarrassing for FF to be the only UA not to support) it's still sitting there unassigned over 15yrs later. That's just how engineering teams work. I would suggest that you don't use percentage as a unit of measure in CSS animations. Eric On August 27, 2013 at 8:09 AM Kuzeko Web Design - Matteo Lissandrini w...@kuzeko.com wrote: Thank you all for the answers, but now I am really confused. So is this supposed to do so or is a bug? Can you fork my example and show me how to have this work properly if this is possible? -- Kuzeko On 27 August 2013 08:28, Philippe Wittenbergh e...@l-c-n.com wrote: Le 27 août 2013 à 14:52, L. David Baron dba...@dbaron.org a écrit : Many of the other references in the CSS spec to things that are based on the height of the containing block explicitly say that if the containing block's computed height is 'auto', then the percentage is as well. See, for example: http://www.w3.org/TR/CSS2/visudet.html#the-height-property http://www.w3.org/TR/CSS2/visudet.html#min-max-heights http://www.w3.org/TR/CSS21/visuren.html#position-props , however, does not say that, and you shouldn't infer it from the same thing being stated elsewhere. The working group explicitly decided *not* to change this in 2009; see: http://wiki.csswg.org/spec/css2.1#issue-134 http://lists.w3.org/Archives/Public/www-style/2009Jun/0056.html http://lists.w3.org/Archives/Public/www-style/2009Aug/0092.html Oh :-(. I had forgotten about that resolution (which I find inconsistent with the way height and min-max-height work). Thing is, no browser released as of today, including Presto-Opera, implement this, even for a very basic test case [*] (I can't test IE 11beta, though). But Presto based Opera and Gecko manage to animated it. Bizarre. [*] http://dev.l-c-n.com/_temp/top-perc.html Gecko bug report is here: https://bugzilla.mozilla.org/show_bug.cgi?id=260348 Philippe -- Philippe Wittenbergh http://l-c-n.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 --
Re: [css-d] CSS3 Animation Top Position Percent problem
Hey Kuzeko, For the css part, you could try putting your text into a UL.. ul id=scroller liLorem ipsum dolor sit amet, consectetur adipisicing elit. Earum dolor doloremque consectetur nam fugit nostrum facilis delectus corrupti adipisci sit perferendis suscipit deleniti beatae nobis officia impedit eius soluta eum?/li liLorem ipsum dolor sit amet, consectetur adipisicing elit. Earum dolor doloremque consectetur nam fugit nostrum facilis delectus corrupti adipisci sit perferendis suscipit deleniti beatae nobis officia impedit eius soluta eum?/li liLorem ipsum dolor sit amet, consectetur adipisicing elit. Earum dolor doloremque consectetur nam fugit nostrum facilis delectus corrupti adipisci sit perferendis suscipit deleniti beatae nobis officia impedit eius soluta eum?/li liLorem ipsum dolor sit amet, consectetur adipisicing elit. Earum dolor doloremque consectetur nam fugit nostrum facilis delectus corrupti adipisci sit perferendis suscipit deleniti beatae nobis officia impedit eius soluta eum?/li liLorem ipsum dolor sit amet, consectetur adipisicing elit. Earum dolor doloremque consectetur nam fugit nostrum facilis delectus corrupti adipisci sit perferendis suscipit deleniti beatae nobis officia impedit eius soluta eum?/li liLorem ipsum dolor sit amet, consectetur adipisicing elit. Earum dolor doloremque consectetur nam fugit nostrum facilis delectus corrupti adipisci sit perferendis suscipit deleniti beatae nobis officia impedit eius soluta eum?/li /ul Then just animate the UL. Here is a nice jQuery substitute though. Original code here: http://logicbox.net/jquery/simplyscroll/#dl I put together a test example using what you provided here: http://designdrumm.com/jquery-simplyscroll-example.zip It's called simplyScroll_vert.html inside the zip file. There is a slue of other examples in the test folder. Have fun.. :) HTH, Best, Karl PS: To all, sorry if I am leading away from css topic with the javascript, just saw a void to fill and so I did. On Aug 27, 2013, at 9:58 PM, Karl DeSaulniers wrote: You don't. You use JavaScript or even better. jQuery. IMO. jQuery would handle what your wanting very nicely. I for one avoid animations with CSS. But that is just me I assume. Best, Karl Sent from losPhone On Aug 27, 2013, at 4:38 PM, Kuzeko Web Design - Matteo Lissandrini w...@kuzeko.com wrote: Ok, thank you. But then, the question becomes: how do I accomplish that effect with only CSS? I.e., text of different length scrolling vertically from end to end without hardcoding px or a predefined height?? Thanks -- Kuzeko On 27 August 2013 22:30, Eric e...@minerbits.com wrote: ** It's more of a misbehavior than a bug. The Moz engineering team probably just decided not to go back and change it after the spec was finalized. It's sort of like how they're the only UA that doesn't support display: run-in. Back int he '90s a bug was opened on it and loads of note by senior engineers stating why they should support (one saying that it's embarrassing for FF to be the only UA not to support) it's still sitting there unassigned over 15yrs later. That's just how engineering teams work. I would suggest that you don't use percentage as a unit of measure in CSS animations. Eric On August 27, 2013 at 8:09 AM Kuzeko Web Design - Matteo Lissandrini w...@kuzeko.com wrote: Thank you all for the answers, but now I am really confused. So is this supposed to do so or is a bug? Can you fork my example and show me how to have this work properly if this is possible? -- Kuzeko On 27 August 2013 08:28, Philippe Wittenbergh e...@l-c-n.com wrote: Le 27 août 2013 à 14:52, L. David Baron dba...@dbaron.org a écrit : Many of the other references in the CSS spec to things that are based on the height of the containing block explicitly say that if the containing block's computed height is 'auto', then the percentage is as well. See, for example: http://www.w3.org/TR/CSS2/visudet.html#the-height-property http://www.w3.org/TR/CSS2/visudet.html#min-max-heights http://www.w3.org/TR/CSS21/visuren.html#position-props , however, does not say that, and you shouldn't infer it from the same thing being stated elsewhere. The working group explicitly decided *not* to change this in 2009; see: http://wiki.csswg.org/spec/css2.1#issue-134 http://lists.w3.org/Archives/Public/www-style/2009Jun/0056.html http://lists.w3.org/Archives/Public/www-style/2009Aug/0092.html Oh :-(. I had forgotten about that resolution (which I find inconsistent with the way height and min-max-height work). Thing is, no browser released as of today, including Presto-Opera, implement this, even for a very basic test case [*] (I can't test IE 11beta, though). But Presto based Opera and Gecko manage to animated it. Bizarre. [*] http://dev.l-c-n.com/_temp/top-perc.html Gecko bug
Re: [css-d] CSS3 Animation Top Position Percent problem
Le 27 août 2013 à 14:52, L. David Baron dba...@dbaron.org a écrit : Many of the other references in the CSS spec to things that are based on the height of the containing block explicitly say that if the containing block's computed height is 'auto', then the percentage is as well. See, for example: http://www.w3.org/TR/CSS2/visudet.html#the-height-property http://www.w3.org/TR/CSS2/visudet.html#min-max-heights http://www.w3.org/TR/CSS21/visuren.html#position-props , however, does not say that, and you shouldn't infer it from the same thing being stated elsewhere. The working group explicitly decided *not* to change this in 2009; see: http://wiki.csswg.org/spec/css2.1#issue-134 http://lists.w3.org/Archives/Public/www-style/2009Jun/0056.html http://lists.w3.org/Archives/Public/www-style/2009Aug/0092.html Oh :-(. I had forgotten about that resolution (which I find inconsistent with the way height and min-max-height work). Thing is, no browser released as of today, including Presto-Opera, implement this, even for a very basic test case [*] (I can't test IE 11beta, though). But Presto based Opera and Gecko manage to animated it. Bizarre. [*] http://dev.l-c-n.com/_temp/top-perc.html Gecko bug report is here: https://bugzilla.mozilla.org/show_bug.cgi?id=260348 Philippe -- Philippe Wittenbergh http://l-c-n.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] CSS3 Animation Top Position Percent problem
Thank you all for the answers, but now I am really confused. So is this supposed to do so or is a bug? Can you fork my example and show me how to have this work properly if this is possible? -- Kuzeko On 27 August 2013 08:28, Philippe Wittenbergh e...@l-c-n.com wrote: Le 27 août 2013 à 14:52, L. David Baron dba...@dbaron.org a écrit : Many of the other references in the CSS spec to things that are based on the height of the containing block explicitly say that if the containing block's computed height is 'auto', then the percentage is as well. See, for example: http://www.w3.org/TR/CSS2/visudet.html#the-height-property http://www.w3.org/TR/CSS2/visudet.html#min-max-heights http://www.w3.org/TR/CSS21/visuren.html#position-props , however, does not say that, and you shouldn't infer it from the same thing being stated elsewhere. The working group explicitly decided *not* to change this in 2009; see: http://wiki.csswg.org/spec/css2.1#issue-134 http://lists.w3.org/Archives/Public/www-style/2009Jun/0056.html http://lists.w3.org/Archives/Public/www-style/2009Aug/0092.html Oh :-(. I had forgotten about that resolution (which I find inconsistent with the way height and min-max-height work). Thing is, no browser released as of today, including Presto-Opera, implement this, even for a very basic test case [*] (I can't test IE 11beta, though). But Presto based Opera and Gecko manage to animated it. Bizarre. [*] http://dev.l-c-n.com/_temp/top-perc.html Gecko bug report is here: https://bugzilla.mozilla.org/show_bug.cgi?id=260348 Philippe -- Philippe Wittenbergh http://l-c-n.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] CSS3 Animation Top Position Percent problem
It's more of a misbehavior than a bug. The Moz engineering team probably just decided not to go back and change it after the spec was finalized. It's sort of like how they're the only UA that doesn't support display: run-in. Back int he '90s a bug was opened on it and loads of note by senior engineers stating why they should support (one saying that it's embarrassing for FF to be the only UA not to support) it's still sitting there unassigned over 15yrs later. That's just how engineering teams work. I would suggest that you don't use percentage as a unit of measure in CSS animations. Eric On August 27, 2013 at 8:09 AM Kuzeko Web Design - Matteo Lissandrini w...@kuzeko.com wrote: Thank you all for the answers, but now I am really confused. So is this supposed to do so or is a bug? Can you fork my example and show me how to have this work properly if this is possible? -- Kuzeko On 27 August 2013 08:28, Philippe Wittenbergh e...@l-c-n.com wrote: Le 27 août 2013 à 14:52, L. David Baron dba...@dbaron.org a écrit : Many of the other references in the CSS spec to things that are based on the height of the containing block explicitly say that if the containing block's computed height is 'auto', then the percentage is as well. See, for example: http://www.w3.org/TR/CSS2/visudet.html#the-height-property http://www.w3.org/TR/CSS2/visudet.html#min-max-heights http://www.w3.org/TR/CSS21/visuren.html#position-props , however, does not say that, and you shouldn't infer it from the same thing being stated elsewhere. The working group explicitly decided *not* to change this in 2009; see: http://wiki.csswg.org/spec/css2.1#issue-134 http://lists.w3.org/Archives/Public/www-style/2009Jun/0056.html http://lists.w3.org/Archives/Public/www-style/2009Aug/0092.html Oh :-(. I had forgotten about that resolution (which I find inconsistent with the way height and min-max-height work). Thing is, no browser released as of today, including Presto-Opera, implement this, even for a very basic test case [*] (I can't test IE 11beta, though). But Presto based Opera and Gecko manage to animated it. Bizarre. [*] http://dev.l-c-n.com/_temp/top-perc.html Gecko bug report is here: https://bugzilla.mozilla.org/show_bug.cgi?id=260348 Philippe -- Philippe Wittenbergh http://l-c-n.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/ __ 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] CSS3 Animation Top Position Percent problem
Ok, thank you. But then, the question becomes: how do I accomplish that effect with only CSS? I.e., text of different length scrolling vertically from end to end without hardcoding px or a predefined height?? Thanks -- Kuzeko On 27 August 2013 22:30, Eric e...@minerbits.com wrote: ** It's more of a misbehavior than a bug. The Moz engineering team probably just decided not to go back and change it after the spec was finalized. It's sort of like how they're the only UA that doesn't support display: run-in. Back int he '90s a bug was opened on it and loads of note by senior engineers stating why they should support (one saying that it's embarrassing for FF to be the only UA not to support) it's still sitting there unassigned over 15yrs later. That's just how engineering teams work. I would suggest that you don't use percentage as a unit of measure in CSS animations. Eric On August 27, 2013 at 8:09 AM Kuzeko Web Design - Matteo Lissandrini w...@kuzeko.com wrote: Thank you all for the answers, but now I am really confused. So is this supposed to do so or is a bug? Can you fork my example and show me how to have this work properly if this is possible? -- Kuzeko On 27 August 2013 08:28, Philippe Wittenbergh e...@l-c-n.com wrote: Le 27 août 2013 à 14:52, L. David Baron dba...@dbaron.org a écrit : Many of the other references in the CSS spec to things that are based on the height of the containing block explicitly say that if the containing block's computed height is 'auto', then the percentage is as well. See, for example: http://www.w3.org/TR/CSS2/visudet.html#the-height-property http://www.w3.org/TR/CSS2/visudet.html#min-max-heights http://www.w3.org/TR/CSS21/visuren.html#position-props , however, does not say that, and you shouldn't infer it from the same thing being stated elsewhere. The working group explicitly decided *not* to change this in 2009; see: http://wiki.csswg.org/spec/css2.1#issue-134 http://lists.w3.org/Archives/Public/www-style/2009Jun/0056.html http://lists.w3.org/Archives/Public/www-style/2009Aug/0092.html Oh :-(. I had forgotten about that resolution (which I find inconsistent with the way height and min-max-height work). Thing is, no browser released as of today, including Presto-Opera, implement this, even for a very basic test case [*] (I can't test IE 11beta, though). But Presto based Opera and Gecko manage to animated it. Bizarre. [*] http://dev.l-c-n.com/_temp/top-perc.html Gecko bug report is here: https://bugzilla.mozilla.org/show_bug.cgi?id=260348 Philippe -- Philippe Wittenbergh http://l-c-n.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/ __ 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] CSS3 Animation Top Position Percent problem
You don't. You use JavaScript or even better. jQuery. IMO. jQuery would handle what your wanting very nicely. I for one avoid animations with CSS. But that is just me I assume. Best, Karl Sent from losPhone On Aug 27, 2013, at 4:38 PM, Kuzeko Web Design - Matteo Lissandrini w...@kuzeko.com wrote: Ok, thank you. But then, the question becomes: how do I accomplish that effect with only CSS? I.e., text of different length scrolling vertically from end to end without hardcoding px or a predefined height?? Thanks -- Kuzeko On 27 August 2013 22:30, Eric e...@minerbits.com wrote: ** It's more of a misbehavior than a bug. The Moz engineering team probably just decided not to go back and change it after the spec was finalized. It's sort of like how they're the only UA that doesn't support display: run-in. Back int he '90s a bug was opened on it and loads of note by senior engineers stating why they should support (one saying that it's embarrassing for FF to be the only UA not to support) it's still sitting there unassigned over 15yrs later. That's just how engineering teams work. I would suggest that you don't use percentage as a unit of measure in CSS animations. Eric On August 27, 2013 at 8:09 AM Kuzeko Web Design - Matteo Lissandrini w...@kuzeko.com wrote: Thank you all for the answers, but now I am really confused. So is this supposed to do so or is a bug? Can you fork my example and show me how to have this work properly if this is possible? -- Kuzeko On 27 August 2013 08:28, Philippe Wittenbergh e...@l-c-n.com wrote: Le 27 août 2013 à 14:52, L. David Baron dba...@dbaron.org a écrit : Many of the other references in the CSS spec to things that are based on the height of the containing block explicitly say that if the containing block's computed height is 'auto', then the percentage is as well. See, for example: http://www.w3.org/TR/CSS2/visudet.html#the-height-property http://www.w3.org/TR/CSS2/visudet.html#min-max-heights http://www.w3.org/TR/CSS21/visuren.html#position-props , however, does not say that, and you shouldn't infer it from the same thing being stated elsewhere. The working group explicitly decided *not* to change this in 2009; see: http://wiki.csswg.org/spec/css2.1#issue-134 http://lists.w3.org/Archives/Public/www-style/2009Jun/0056.html http://lists.w3.org/Archives/Public/www-style/2009Aug/0092.html Oh :-(. I had forgotten about that resolution (which I find inconsistent with the way height and min-max-height work). Thing is, no browser released as of today, including Presto-Opera, implement this, even for a very basic test case [*] (I can't test IE 11beta, though). But Presto based Opera and Gecko manage to animated it. Bizarre. [*] http://dev.l-c-n.com/_temp/top-perc.html Gecko bug report is here: https://bugzilla.mozilla.org/show_bug.cgi?id=260348 Philippe -- Philippe Wittenbergh http://l-c-n.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/ __ 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-d] CSS3 Animation Top Position Percent problem
Hi all, I am trying a simple animation: long text inside a box scrolling up. Since I have multiple boxes they have different length, so I am trying to use keyframe animation with top positioning with percent value. Please find an example here: http://jsfiddle.net/sKEnv/1/ As you can see the first example is using em units and it works, the second it uses percent values and it doesn't. Am I doing something wrong or is simply not possible to do this with percent values? Thanks! -- Kuzeko On 2 October 2012 18:38, Gabriele Romanato gabriele.roman...@gmail.comwrote: I generally tend to use CSS3 animations in mobile web apps whenever it's possible, but sometimes I get stuck when the app's requirements are too complex. So I usually mix up basic CSS3 animations with JS routines in order to not end up with messy markup as in many Codrops examples (you know, form elements used to create slideshow effects and so on). What I don't really know is if there's a common best practice to follow when creating complex web apps which feature a lot of advanced effects. CSS3 animations are faster than JS animations, but when your boss or your client has a Flash-like idea about how your effects should be made, well it's difficult to me to stick to pure CSS animations. What's your approach when you design complex web apps? I'd really like to get some hints about the role of CSS animations in that context. Thanks in advance. Gabriele __ 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] CSS3 Animation Top Position Percent problem
This is a webkit thing, check it in Firefox and it should work. I'll need to do more research to find out why. On Mon, Aug 26, 2013 at 12:31 PM, Kuzeko Web Design - Matteo Lissandrini w...@kuzeko.com wrote: Hi all, I am trying a simple animation: long text inside a box scrolling up. Since I have multiple boxes they have different length, so I am trying to use keyframe animation with top positioning with percent value. Please find an example here: http://jsfiddle.net/sKEnv/1/ As you can see the first example is using em units and it works, the second it uses percent values and it doesn't. Am I doing something wrong or is simply not possible to do this with percent values? Thanks! -- Kuzeko On 2 October 2012 18:38, Gabriele Romanato gabriele.roman...@gmail.com wrote: I generally tend to use CSS3 animations in mobile web apps whenever it's possible, but sometimes I get stuck when the app's requirements are too complex. So I usually mix up basic CSS3 animations with JS routines in order to not end up with messy markup as in many Codrops examples (you know, form elements used to create slideshow effects and so on). What I don't really know is if there's a common best practice to follow when creating complex web apps which feature a lot of advanced effects. CSS3 animations are faster than JS animations, but when your boss or your client has a Flash-like idea about how your effects should be made, well it's difficult to me to stick to pure CSS animations. What's your approach when you design complex web apps? I'd really like to get some hints about the role of CSS animations in that context. Thanks in advance. Gabriele __ 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/ -- Chris Rockwell __ 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] CSS3 Animation Top Position Percent problem
I read something about this a couple of months ago on the W3C CSS mail list. As I recall the discussion was about percentage positioning units not working per spec in Mozilla and one of the Moz engineers agreed. I can't seem to find it right now but it's worth a search. In both webkit and IE11 the bottom box doesn't scroll unless you change the unit from a percentage. In FF 23.0.1 both boxes are animating smoothly. In tonight's Moz8illa build the animation is all messed up, it appears the the animation-timing-function is being ignored making it very jerky and irregular. They must have been playing around in that module today. Eric On August 26, 2013 at 12:52 PM Chris Rockwell ch...@chrisrockwell.com wrote: This is a webkit thing, check it in Firefox and it should work. I'll need to do more research to find out why. On Mon, Aug 26, 2013 at 12:31 PM, Kuzeko Web Design - Matteo Lissandrini w...@kuzeko.com wrote: Hi all, I am trying a simple animation: long text inside a box scrolling up. Since I have multiple boxes they have different length, so I am trying to use keyframe animation with top positioning with percent value. Please find an example here: http://jsfiddle.net/sKEnv/1/ As you can see the first example is using em units and it works, the second it uses percent values and it doesn't. Am I doing something wrong or is simply not possible to do this with percent values? Thanks! -- Kuzeko On 2 October 2012 18:38, Gabriele Romanato gabriele.roman...@gmail.com wrote: I generally tend to use CSS3 animations in mobile web apps whenever it's possible, but sometimes I get stuck when the app's requirements are too complex. So I usually mix up basic CSS3 animations with JS routines in order to not end up with messy markup as in many Codrops examples (you know, form elements used to create slideshow effects and so on). What I don't really know is if there's a common best practice to follow when creating complex web apps which feature a lot of advanced effects. CSS3 animations are faster than JS animations, but when your boss or your client has a Flash-like idea about how your effects should be made, well it's difficult to me to stick to pure CSS animations. What's your approach when you design complex web apps? I'd really like to get some hints about the role of CSS animations in that context. Thanks in advance. Gabriele __ 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/ -- Chris Rockwell __ 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] CSS3 Animation Top Position Percent problem
I forgot to mention thisthe -moz- prefixes for animation are no longer necessary, haven't been for a couple of versions. __ 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] CSS3 Animation Top Position Percent problem
Le 27 août 2013 à 01:52, Chris Rockwell ch...@chrisrockwell.com a écrit : This is a webkit thing, check it in Firefox and it should work. I'll need to do more research to find out why. I'm absolutely not clear why the percentage based animation actually works in Firefox (and incidentally, Presto based Opera 12.x). And Eric notes it doesn't seem to work in IE 11 (and IE 10?). That seems correct per spec to me. That is pure CSS 2.1: http://www.w3.org/TR/CSS21/visuren.html#position-props specifically: Percentages: refer to height of containing block In the test case, the height of the containing block (.wrapper2) has a value of 'auto', which means that 'top' can't be computed. The demo would work in WebKit if the containing block has a specified height (e.g. 10em) or the animated box (.content) is position: absolute. Philippe -- Philippe Wittenbergh http://l-c-n.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] CSS3 Animation Top Position Percent problem
On Tuesday 2013-08-27 14:05 +0900, Philippe Wittenbergh wrote: I'm absolutely not clear why the percentage based animation actually works in Firefox (and incidentally, Presto based Opera 12.x). And Eric notes it doesn't seem to work in IE 11 (and IE 10?). That seems correct per spec to me. That is pure CSS 2.1: http://www.w3.org/TR/CSS21/visuren.html#position-props specifically: Percentages:refer to height of containing block In the test case, the height of the containing block (.wrapper2) has a value of 'auto', which means that 'top' can't be computed. Many of the other references in the CSS spec to things that are based on the height of the containing block explicitly say that if the containing block's computed height is 'auto', then the percentage is as well. See, for example: http://www.w3.org/TR/CSS2/visudet.html#the-height-property http://www.w3.org/TR/CSS2/visudet.html#min-max-heights http://www.w3.org/TR/CSS21/visuren.html#position-props , however, does not say that, and you shouldn't infer it from the same thing being stated elsewhere. The working group explicitly decided *not* to change this in 2009; see: http://wiki.csswg.org/spec/css2.1#issue-134 http://lists.w3.org/Archives/Public/www-style/2009Jun/0056.html http://lists.w3.org/Archives/Public/www-style/2009Aug/0092.html -David -- 턞 L. David Baron http://dbaron.org/ 턂 턢 Mozilla https://www.mozilla.org/ 턂 Before I built a wall I'd ask to know What I was walling in or walling out, And to whom I was like to give offense. - Robert Frost, Mending Wall (1914) __ 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] CSS3 Animation Top Position Percent problem
I think this may be because the 0% and 100% are key words for the selectors and the css animation is confused? Its probably trying to find the selector -120%. But I am guessing here. Does look like others have run across this and determined it was a bug. Karl DeSaulniers Design Drumm http://designdrumm.com On Aug 26, 2013, at 11:31 AM, Kuzeko Web Design - Matteo Lissandrini wrote: Hi all, I am trying a simple animation: long text inside a box scrolling up. Since I have multiple boxes they have different length, so I am trying to use keyframe animation with top positioning with percent value. Please find an example here: http://jsfiddle.net/sKEnv/1/ As you can see the first example is using em units and it works, the second it uses percent values and it doesn't. Am I doing something wrong or is simply not possible to do this with percent values? Thanks! -- Kuzeko On 2 October 2012 18:38, Gabriele Romanato gabriele.roman...@gmail.comwrote: I generally tend to use CSS3 animations in mobile web apps whenever it's possible, but sometimes I get stuck when the app's requirements are too complex. So I usually mix up basic CSS3 animations with JS routines in order to not end up with messy markup as in many Codrops examples (you know, form elements used to create slideshow effects and so on). What I don't really know is if there's a common best practice to follow when creating complex web apps which feature a lot of advanced effects. CSS3 animations are faster than JS animations, but when your boss or your client has a Flash-like idea about how your effects should be made, well it's difficult to me to stick to pure CSS animations. What's your approach when you design complex web apps? I'd really like to get some hints about the role of CSS animations in that context. Thanks in advance. Gabriele __ 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/
[css-d] CSS3 Selectors
List,
I use selectivizr frequently. Do you use this or something like it?
What's your method for dealing with, for example, a lack of support
for:
p:nth-of-type(3n){
color: red;
}
TIA!
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] CSS3 Selectors
Are you using it for anything mission critical? Personally, I let something like that gracefully degrade. Or, looking at: http://caniuse.com/#search=nth- Seems like contemporary browsers have a handle on that. Sometimes I'll just make sure there's an alternative option (or, it degrades gracefully) for older IEs. I'm not a huge fan of adding polyfills for everything, unless I'm already using them for a good reason. That's my .2 cents. :D __ 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] CSS3 Selectors
So far I've only had to really use the :nth-type selectors for tables, and for
creating some demos on layouts.
When it comes to tables, I'd created an html table-maker that optionally
generates helper classes.
Outside of tables, I really haven't had projects that required :nth-child
support in older browsers on any other html elements.
/email
signature id=paceaux name=Frank M. Taylor twitter=@paceaux /
On Jun 12, 2013, at 2:11 PM, Tom Livingston wrote:
List,
I use selectivizr frequently. Do you use this or something like it?
What's your method for dealing with, for example, a lack of support
for:
p:nth-of-type(3n){
color: red;
}
TIA!
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] CSS3 Selectors
On Wed, Jun 12, 2013 at 4:31 PM, Frank Taylor pace...@madebypaceaux.com wrote:
So far I've only had to really use the :nth-type selectors for tables, and
for creating some demos on layouts.
When it comes to tables, I'd created an html table-maker that optionally
generates helper classes.
Outside of tables, I really haven't had projects that required :nth-child
support in older browsers on any other html elements.
/email
signature id=paceaux name=Frank M. Taylor twitter=@paceaux /
On Jun 12, 2013, at 2:11 PM, Tom Livingston wrote:
List,
I use selectivizr frequently. Do you use this or something like it?
What's your method for dealing with, for example, a lack of support
for:
p:nth-of-type(3n){
color: red;
}
TIA!
--
I should add that I wrap selectivizr in a conditional for IE less than
8, so not everyone has to load it.
Here's a typical use case:
style
.wrap div{width: 32%;margin-right:2%;float:left}
.wrap div:last-of-type{margin-right:0;}
/style
div class=wrap
div/div
div/div
div/div
/div
I prefer this over adding additional classes. Yes, here it's only one
additional class, but you get the idea. In IE 8 the 3rd inner div
would wrap below.
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] CSS3 Selectors
In your exact use case,I've solved the problem by using the adjacent sibling
selector. More than three items and I consider things a little too messy; I'll
revert to JS or helper classes for more than three items:
style
.wrap div{width: 32%;margin-right:2%;float:left}
.wrap div + div + div {margin-right:0;}
/style
div class=wrap
div/div
div/div
div/div
/div
/email
signature id=paceaux name=Frank M. Taylor twitter=@paceaux /
On Jun 12, 2013, at 2:46 PM, Tom Livingston wrote:
On Wed, Jun 12, 2013 at 4:31 PM, Frank Taylor pace...@madebypaceaux.com
wrote:
So far I've only had to really use the :nth-type selectors for tables, and
for creating some demos on layouts.
When it comes to tables, I'd created an html table-maker that optionally
generates helper classes.
Outside of tables, I really haven't had projects that required :nth-child
support in older browsers on any other html elements.
/email
signature id=paceaux name=Frank M. Taylor twitter=@paceaux /
On Jun 12, 2013, at 2:11 PM, Tom Livingston wrote:
List,
I use selectivizr frequently. Do you use this or something like it?
What's your method for dealing with, for example, a lack of support
for:
p:nth-of-type(3n){
color: red;
}
TIA!
--
I should add that I wrap selectivizr in a conditional for IE less than
8, so not everyone has to load it.
Here's a typical use case:
style
.wrap div{width: 32%;margin-right:2%;float:left}
.wrap div:last-of-type{margin-right:0;}
/style
div class=wrap
div/div
div/div
div/div
/div
I prefer this over adding additional classes. Yes, here it's only one
additional class, but you get the idea. In IE 8 the 3rd inner div
would wrap below.
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] CSS3 Selectors
On Wed, Jun 12, 2013 at 4:50 PM, Frank Taylor pace...@madebypaceaux.com wrote:
In your exact use case,I've solved the problem by using the adjacent sibling
selector. More than three items and I consider things a little too messy;
I'll revert to JS or helper classes for more than three items:
style
.wrap div{width: 32%;margin-right:2%;float:left}
.wrap div + div + div {margin-right:0;}
/style
div class=wrap
div/div
div/div
div/div
/div
I like it. That idea never occurred to me, sadly.
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] CSS3 Selectors
Your one and only caveat is IE7: if there are HTML comments between the divs,
then the adjacent sibling selector doesn't work.
In the one case where our CMS was kicking out comments, I reverted to the
non-adjacent selector:
.wrap div ~ div ~ div {margin-right:0;}
Mind you, if you're dealing with a CMS where you have a variable amount of divs
(between 2 and 4)a no-CSS3, no-JS approach becomes massively more difficult
and requires exponentially more whisky (for me, at least).
/email
signature id=paceaux name=Frank M. Taylor twitter=@paceaux /
On Jun 12, 2013, at 3:13 PM, Tom Livingston wrote:
I like it. That idea never occurred to me, sadly.
__
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] CSS3 Transitions
Define expanding left. On Tue, Apr 23, 2013 at 1:13 PM, Anton Steiner oe2...@yahoo.de wrote: Hello CSS3 transitions are very amazing and i would try it for a search-bar. But the bar shoud expand to left. Is this possible with transitions? If found no solution to do so. Mny tx Anton __ 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] CSS3 Transitions
Maybe you could use the 'left' property. Generally trial and error is
incredibly easy with transitions: set the element to transition every
property:
element {
transition: .3s;
}
Then try changing its properties on class or :hover / :focus state change,
or modify its properties directly with Firebug or Webkit's DOM Inspector.
Apple's website features an effect that sounds analogous to what you
describe, and it's achieved with transitions: when you click on the search
input field, a class is applied to the header wrapper (#globalheader),
which triggers new rules to be applied:
http://www.apple.com/uk/
Regards,
Barney Carroll
barney.carr...@gmail.com
+44 7429 177278
barneycarroll.com
On 23 April 2013 11:13, Anton Steiner oe2...@yahoo.de wrote:
Hello
CSS3 transitions are very amazing and i would try it for a
search-bar. But the bar shoud expand to left. Is this possible with
transitions? If found no solution to do so.
Mny tx
Anton
__
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-d] CSS3 Transitions
Hello CSS3 transitions are very amazing and i would try it for a search-bar. But the bar shoud expand to left. Is this possible with transitions? If found no solution to do so. Mny tx Anton __ 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-d] CSS3 Validator updated to accept rgba, hsla,etc
Hello, At the risk of tooting my own horn. The bug report I filed a while back about the CSS3 validator not accepting rgba, hsla, and being thrown on box-shadow has been fixed: https://www.w3.org/Bugs/Public/show_bug.cgi?id=11880#c2 The only remaining items on the stylesheet I was testing that produce incorrect errors are transitions and gradient syntax, which are both still in more flux that the color values. Thanks, Chad Lundgren __ 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] CSS3 slider box/image triggered by onload?
On Sat, Jul 28, 2012 at 8:33 PM, Keith Purtell keithpurt...@keithpurtell.com wrote: My client has her heart set on each page of her site featuring a different image that slides in when the page loads. -Keith Purtell Call the image using a random image script? 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] CSS3 slider box/image triggered by onload?
On Jul 28, 2012, at 8:33 PM, Keith Purtell keithpurt...@keithpurtell.com wrote: My client has her heart set on each page of her site featuring a different image that slides in when the page loads. I found plenty of info about CSS3 and JQuery slider boxes. I'll probably design for the former and fall back on the latter. Having onload trigger the JQuery slide is a no-brainer. But in the case of the CSS3, would it not just be a matter of supplying the code which would launch the moment it finished loading into the browser (unless I add a delay attribute)? The only triggering events I've found so far for CSS3 were based on methods like a:hover -Keith Purtell -Keith: I have a similar control on my main website -- it loads an image based upon what time of year it is (i.e., equinox). This is easy enough to do via php and you don't have to worry IF the user has Javascript turned on or not. A HTML img tag is sufficient trigger to launch a php script to change an image -- it's pretty simple coding. Cheers, tedd _ t...@sperling.com http://sperling.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-d] CSS3 slider box/image triggered by onload?
My client has her heart set on each page of her site featuring a different image that slides in when the page loads. I found plenty of info about CSS3 and JQuery slider boxes. I'll probably design for the former and fall back on the latter. Having onload trigger the JQuery slide is a no-brainer. But in the case of the CSS3, would it not just be a matter of supplying the code which would launch the moment it finished loading into the browser (unless I add a delay attribute)? The only triggering events I've found so far for CSS3 were based on methods like a:hover -Keith Purtell __ 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-d] CSS3 multi-column layout: columns of unequal width?
Hi all, I'm looking into using the new CSS3 multi-column module for a layout on a site I'm working on, and I was wondering, is there a way to set unequal widths on columns generated with column-count? I have a ul that I'd like to display in two columns, but the items in the second half of the ul are all longer than the items in the first half, so if I could set the second column to be wider than the first, that would be cool. :) Thanks, Kyle -- Kyle G Sessions Berkeley Electronic Press ksessi...@bepress.com 510-665-1200 + 128 www.bepress.com bepress: the frontier of scholarly publishing since 1999 Check out IR success stories on the DC Telegraph at http://blog.digitalcommons.bepress.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-d] css3 animation - do hover and focus work on touch screen devices?
hey all,
I continue to noodle away on my css3 animation sampler which I've moved to
http://sandyfeldman.com/resources/css3animation/
all the animations are set to trigger on hover and focus. Now - when you
go to this page using a touch screen device what happens? Is there a way
to trigger the animations?
http://iphonetester.com/
http://ipadpeek.com/
make it look like everything is just fine, but is it really?
If it's not, then is there something I can add like
A#transform:hover, A#transform:focus, A#transform:touch {
-webkit-animation: transform 2s infinite alternate;
-moz-animation: transform 2s infinite alternate;
-ms-animation: transform 2s infinite alternate;
-o-animation: transform 2s infinite alternate;
}
or do I need to use javascript? or something?
thanks,
Sandy
__
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] css3 animation - do hover and focus work on touch screen devices?
On Thu, Jun 28, 2012 at 1:58 PM, Sandy sfeld...@sympatico.ca wrote: I continue to noodle away on my css3 animation sampler which I've moved to http://sandyfeldman.com/resources/css3animation/ Sandy, Some of the animations work, but not all of them, in Android/2.3.6 [a low-end mobile touch screen device]. That's a lot of stuff to ask most any mobile device to handle. Perhaps feeding mobile just a few of those animations might be more appropriate? aside I only looked at your page in portrait-view. The mobile media queries are not kicking-in; consequently, it is simply a reduced width version of desktop-- the top horizontal links and the sidebar links verge on being unreadable and unusable/aside 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] css3 animation - do hover and focus work on touch screen devices?
http://sandyfeldman.com/resources/css3animation/ Some of the animations work, but not all of them, in Android/2.3.6 [a low-end mobile touch screen device]. thanks for checking. I did get to see this on an older iPad and iPhone today, and it looks like the ones with a background pattern, border effects or z-index animations don't work. A friend using iOS 5.1.1 on iPhone 5 says he sees all of them. interestingly, I installed Opera 12 beta and that group causes problems for that browser, too. I sent Opera a note about this. Perhaps feeding mobile just a few of those animations might be more appropriate? yeah - the sampler is pretty extreme. It's hard to imagine a real site with that many doodads. aside I only looked at your page in portrait-view. The mobile media queries are not kicking-in; consequently, it is simply a reduced width version of desktop-- the top horizontal links and the sidebar links verge on being unreadable and unusable/aside oh dear. thanks for letting me know. They were working on the iPhone Pad I looked at today. Is there something different I should be doing for Android? meta name=viewport? something else? best regards, Sandy __ 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] css3 animation - do hover and focus work on touch screen devices?
On Thu, Jun 28, 2012 at 7:01 PM, Sandy sfeld...@sympatico.ca wrote: http://sandyfeldman.com/resources/css3animation/ aside I only looked at your page in portrait-view. The mobile media queries are not kicking-in; consequently, it is simply a reduced width version of desktop-- the top horizontal links and the sidebar links verge on being unreadable and unusable/aside oh dear. thanks for letting me know. They were working on the iPhone Pad I looked at today. Is there something different I should be doing for Android? meta name=viewport? something else? Sandy Sandy, My guess is that the method you use is only supported by our good friends and users who have Apple products? Hitting cross-OS, cross-browser, cross-device mobile can be as simple or as complicated as you wish to make it. Fwiw, a rather simple and crude example [note the device width meta tag, one media query, and use of min-width, max-width, width on the outer most wrapper]: http://ccstudi.com/rz.html This is of course is only one of many ways you might achieve the goal.., 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] css3 animations - page check please
You do know that WebKit browsers, Opera and IE10 also support animations with the appropriate prefixes, I hope… http://sandyfeldman.com/css3animation/8test.shtml getting this to work in different browsers was surprisingly tricky (ignore the heap of rubble that's 1test to 7test please). I've got something now that works in a selection of Mac browsers. It works in FireFox 13.0.1 and more or less works in Chrome 19.0.1084.56 and Safari 5.17. It limps along in Opera 11.52, not showing animations but just mouseovers when it can. 3 seems to only work in FF - I haven't figured out where I've scrambled the syntax yet for Safari Chrome. 2 questions: - does this work in pc browsers? - what's up with 3? thanks for looking at this, Sandy __ 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] css3 animations - page check please
On 6/26/12 9:48 AM, Sandy wrote: You do know that WebKit browsers, Opera and IE10 also support animations with the appropriate prefixes, I hope… http://sandyfeldman.com/css3animation/8test.shtml [...] 3 seems to only work in FF - I haven't figured out where I've scrambled the syntax yet for Safari Chrome. 2 questions: - does this work in pc browsers? - what's up with 3? A.1. If this refers to #3, you'll have the same problem A.2. You don't have a gradient defined for Webkit. Instead, you have this in line 92 of your page: background-image: -moz-webkit-gradient(-45deg, white 25%, transparent 25%); There are some other gradient definitions in that rule, but the declarations are values only; the property name background-image is missing from them. -- Cordially, David __ 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] css3 animations - page check please
On Tue, Jun 26, 2012 at 12:48 PM, Sandy sfeld...@sympatico.ca wrote: http://sandyfeldman.com/css3animation/8test.shtml does this work in pc browsers? This end: HP Pavilion g4 Notebook PC Chrome/19.0.1084.56 1/ Changes block background-color-- no pattern. Intentional? 2/, 4/, 5/, 6/, 7, 8/ and 9/ :: pass 3/ :: fails Opera/12.00 1/ Changes block background-color-- no pattern. Intentional? 2/ :: Fails [pattern shows on hover but it is static] 3/, 4/ :: Fails 5/, 6/ :: Pass 7, 8/, 9/ :: Fail Firefox/13.0.1 1/ Changes block background-color-- no pattern. Intentional? 2/ through 9/ :: Pass Safari/5.1.7 is the same as Chrome/19.0.1084.56 Gecko/2.10.1 is the same as Firefox/13.0.1 IE/9 is the same as Opera/12.00. 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] css3 animations - page check please
Sorry I have only a second to jump in - [] First do you know about caniuse.com? Great resource for seeing what is supported and by whom. Next, Opera doesn't support the animation property yet try something like -o-transition: background-color .25s ease-out; just add :hover to the rule with the animation/transition property to make sure it activates on hover instead Not sure about the infinite run yet __ 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] css3 animations - page check please
3 seems to only work in FF - I haven't figured out where I've scrambled the syntax yet for Safari Chrome. 2 questions: - does this work in pc browsers? - what's up with 3? A.1. If this refers to #3, you'll have the same problem A.2. You don't have a gradient defined for Webkit. Instead, you have this in line 92 of your page: background-image: -moz-webkit-gradient(-45deg, white 25%, transparent 25%); hey thanks David! way to spot the garble. I think it's fixed now http://sandyfeldman.com/css3animation/8test.shtml best regards, Sandy __ 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] css3 animations - page check please
http://sandyfeldman.com/css3animation/8test.shtml does this work in pc browsers? This end: HP Pavilion g4 Notebook PC Chrome/19.0.1084.56 1/ Changes block background-color-- no pattern. Intentional? 2/, 4/, 5/, 6/, 7, 8/ and 9/ :: pass 3/ :: fails Opera/12.00 1/ Changes block background-color-- no pattern. Intentional? 2/ :: Fails [pattern shows on hover but it is static] 3/, 4/ :: Fails 5/, 6/ :: Pass 7, 8/, 9/ :: Fail Firefox/13.0.1 1/ Changes block background-color-- no pattern. Intentional? 2/ through 9/ :: Pass Safari/5.1.7 is the same as Chrome/19.0.1084.56 Gecko/2.10.1 is the same as Firefox/13.0.1 IE/9 is the same as Opera/12.00. David, thanks so much for taking the time to go through these - this is really helpful. - 1 *is* just a colour change (as in starting small). maybe I should beef that up ... - I think I've fixed 3 - what do you think? - Opera and IE seem to just be showing the hover effects that don't animate. I just added a bunch of @-o-keyframes but I don't think it's helped. http://caniuse.com/#feat=css-animation (thanks HallMarc) seems to say that IE and Opera don't support these, but if anyone can think of a way to get the animations working in these browsers that would be much appreciated Thanks again to David, David and HallMarc for looking at this. best regards, Sandy __ 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] css3 animations - page check please
On Tue, Jun 26, 2012 at 6:31 PM, Sandy sfeld...@sympatico.ca wrote: http://sandyfeldman.com/css3animation/8test.shtml does this work in pc browsers? David, thanks so much for taking the time to go through these - this is really helpful. - 1 *is* just a colour change (as in starting small). maybe I should beef that up ... No problem with 1/ given that I know now that that is your intention. Whether you want to beef that up, I leave to you, and yours... - I think I've fixed 3 - what do you think? Dunno. No change-- still fails this end PC Opera/12.0 and IE/9 -- assuming you mean same uri as above. Suggest you file bug report to Opera,,, they provide no feedback but are good at correcting issues. No IE/10 hereabout, so no idea if this has been fixed in that version? 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] css3 animations
http://sandyfeldman.com/tests/animation/css3animation.html http://jigsaw.w3.org/css-validator/validator turns up 80 errors on the css, all connected to @-moz-keyframes and -moz-animation Under 'options', you can turn vendor prefixed stuff to 'warning'. thanks. You do know that WebKit browsers, Opera and IE10 also support animations with the appropriate prefixes, I hope… Philippe, thank you much for taking the time to look at this. I am going to look for the appropriate prefixes and try again. best regards and thanks again, Sandy __ 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-d] css3 animations
hey all, I have been working on figuring out css3 animations and have come up with a couple of test pages. http://sandyfeldman.com/tests/animation/css3animation.html http://jigsaw.w3.org/css-validator/validator turns up 80 errors on the css, all connected to @-moz-keyframes and -moz-animation is there a way to get the animations and have the css validate? Should I be rewriting this? Other things that don't work the way I would like: I added -moz-box-sizing: border-box; to 7 and 9 to keep the animated effects on the box borders from bulging out the boxes. When I mouseover it *almost* works, but there is a shift in the width just towards the end of the animation - just a brief bulge. I can't figure out where that's coming from or how to get rid of it. Another especially weird thing - locally all the boxes are one size, when I upload the page to the server, without changing anything, they are a bit narrower. Any idea of what's going on? On 18 there is a little extra white border on the top of the box - looks like one more pixel. I have no idea where that's coming from. Any thoughts? Also, in 23 - the image expands on mouseover, which is hunky dory, but it also degrades. What I would like is to have the 300px image shrink down to 150px and then show its full-sized self on mouseover. This would take a different approach but I can't think what it might be. http://sandyfeldman.com/tests/animation/tires.html a possible candidate for Inappropriate uses of CSS3 here's the question - is there a way of timing the effects - so animation 2 starts a 2 second delay after animation 1? thanks! Sandy __ 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] css3 animations
Le 23 juin 2012 à 04:45, Sandy a écrit : http://sandyfeldman.com/tests/animation/css3animation.html http://jigsaw.w3.org/css-validator/validator turns up 80 errors on the css, all connected to @-moz-keyframes and -moz-animation is there a way to get the animations and have the css validate? Should I be rewriting this? Under 'options', you can turn vendor prefixed stuff to 'warning'. Dunno about the rest of your post as you've coded your page to be Gecko only, and I don't have Firefox on this machine. You do know that WebKit browsers, Opera and IE10 also support animations with the appropriate prefixes, I hope… Philippe -- Philippe Wittenbergh http://l-c-n.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] CSS3 101
Hi Ted, first of all, you use the tags that make sense for your content, not because it is css-ish. If your data should be presented in a list, because for instance, it constitutes a list of items, thats ok. If it is tabular data, it should go on a table. As for the alignment, you are having issues with css positioning. You can tell the items n a list to display in rows several ways: Using diplay: inline-box will make the lis behave like inline boxes. Using float: left will float the items to the left. Using display: table will present them as a table (but then it would make more sense to use an actual table.) The advantage of the list is that you already have a container for the list, the ul itself, so you do not need the div. CSS positioning may be kind of hard to grasp in the begining, but once you get the fundamentals, everything makes sense, so I would advice you to go further then w3school, google will give you a lot on CSS Positioning. As for the files, my trick to test a bit of code without the external files, is to change the css name on the call to anything else but its name. It doesn't return any error, just skips the loading. Or you can comment out parts of the code you do not wish to parse at any moment. Hope it helps, isabel On Fri, May 11, 2012 at 11:28 PM, Ted Rolle Jr. ster...@gmail.com wrote: I've lurked on this list, but the level of expertise required to understand posts is beyond my level. I've been to CSS3 design sites (w3school and others). I have 5 (may increase) boxes for data entry. Right now they'er vertically aligned. I'm using ul rather than table because that seems more CSS-ish. How can I (if possible) have the boxes align in left-to-right columns and as many rows as needed? The variable alignment is for different platforms. Do I have one big div that contains one div for each data-entry box? There is some CSS code in CSS files. Can I start fresh and use only CSS on the page without having the CSS in the files interfering? Ted -- GPG/PGP public key: 0xB07F9AAE __ 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] CSS3 101
On 05/12/2012 08:08 PM, Isabel Santos wrote: Hi Ted, first of all, you use the tags that make sense for your content, not because it is css-ish. If your data should be presented in a list, because for instance, it constitutes a list of items, thats ok. If it is tabular data, it should go on a table. Thanks so much for the reply...even at this level I have to read it a couple of times. The pointer to a web search will be helpful. Ted __ 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] CSS3 101
Thanks so much for the reply...even at this level I have to read it a couple of times. The pointer to a web search will be helpful. Ted Putting your page on a public server and providing a clickable link to it in your post to the list may get you some replies of a more immediate and practical nature 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] CSS3 101
On 05/12/2012 10:27 PM, David Laakso wrote: Thanks so much for the reply...even at this level I have to read it a couple of times. The pointer to a web search will be helpful. Ted Putting your page on a public server and providing a clickable link to it in your post to the list may get you some replies of a more immediate and practical nature Best, David Laakso Good idea! I'll clean it up a bit (I was trying different borders...) and put it on my server. Um, ..., after I upgrade the operating system... so it won't be immediately. Ted __ 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-d] CSS3 101
I've lurked on this list, but the level of expertise required to understand posts is beyond my level. I've been to CSS3 design sites (w3school and others). I have 5 (may increase) boxes for data entry. Right now they'er vertically aligned. I'm using ul rather than table because that seems more CSS-ish. How can I (if possible) have the boxes align in left-to-right columns and as many rows as needed? The variable alignment is for different platforms. Do I have one big div that contains one div for each data-entry box? There is some CSS code in CSS files. Can I start fresh and use only CSS on the page without having the CSS in the files interfering? Ted -- GPG/PGP public key: 0xB07F9AAE __ 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-d] CSS3+HTML5 || Javascript?
Hello there, I have a feasibility question to those on the list familiar with HTML5 and CSS3 (which I began familiarizing myself with this Sunday). Lately I had the unpleasant occasion of using Bayex for expert system creation. As you may know, expert systems rely on knowledge base, which is filled with domain facts. The module that is responsible for base creation in Bayex sucks unspeakably and caused me enough frustration to want to replace it. Since I would imagine more than one expert would be entering facts into knowledge base, and since it's convenient to enable them to do so no matter where they are located, as long as they have internet connection, I thought of a web page. *Now, the question that popped to my mind is: will I require JS or will CSS and HTML5 do just fine? * Naturally, *with* JS I will be able to do it (jQuery, perhaps with UI). However since HTML5 and CSS3 look truly slick, this would be also a prudent occasion to learn them somewhat. What do you reckon? *More details: * Among the facts that are entered into knowledge base, one type is most tedious to input. The module should help you creating a set of questions, that user answers to get an expertise. Due to probability rules and Bayesian laws, there are some constraints main one being only five answers to each question: YES, RATHER YES, DON'T KNOW, RATHER NO, NO. Trivial example how it looks now: Expert system helping me choose what laptop to buy, wishes to know if I'm particular about laptops brands: 1) do you want to buy laptops of ASUS brand? 2) do you want to buy laptops of Lenovo brand? etc. for each brand. Instead, I want the user to simply select what brands (and whatnot) to include, with clicking. Based on selection, this would later be converted into answers per brand, so that probability rules engine wouldn't have to be reworked. There are more cases, but usually it's about question editor functionalities. I considered using one of the already existing JS survey kits, but wanted to know if this is feasible WITHOUT JS - since if it is, it would be a good hands-on experience to learn both HTML5 and CSS3. Let me know your thoughts, even if they will end with wrong place to ask, go somewhere else. pozdrawiam, Tomasz Borek __ 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-d] CSS3 Background-Size
Hello CSS Discuss, I thought one could use background-size in CSS3 for boxed element such as an H tag, in place of having to specify a width and height property to the declaration. But it seems you have to specify it any ways, in order for the element to accommodate the actual size of the image in the background, unless you wanted to create a thumbnail out of the background image. Seems like one is better off not using the background-size property if the image is going to be used as a replacement for text. That and the lack of support in older browsers. Elli Vizcaino Helping artists, entrepreneurs and small businesses look like rock stars and knock the socks off the competition! http://www.e7flux.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] CSS3 Opacity Inheritance
Yes. The better approach is to use rgba colors for elements containing text.
That way only the box is affected and the text (or any other child elements)
remain unaffected.
RGBA stands for red, green, blue, and alpha. So this declaration renders a
box
80% opaque, while stuff inside the box is fully opaque:
#elli-box {
background-color: black;
background: rgba(255,255,255,.8);
}
The background-color property is a fallback for older browsers lacking
support
for RGBA.
255,255,255 is white
0,0,0 is black
Most code editors now have the ability to let you easily set colors like this.
Here is a quick example:
http://www.projectseven.com/csslab/css3/rgba/quick-test.htm
The styles used on the example are:
#elli-box {
background-color: #3CF;
background: rgba(51,204,255,.8);
/*Light Blue*/
}
And some design extras:
.elli-styles {
padding: 40px;
width: 400px;
font-size: 14px;
line-height: 1.5;
border-radius: 11px;
box-shadow: inset 0px 0px 40px #0080AA;
border: 2px solid #FFF;
}
-- Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
Since 1998
Thanks you guys! Al, Phillipe, Tom, L. David Baron Alan you're all
awesome
I now have a much clearer understanding on the apparent translucent
effect of the opacity property on child elements and how to solve it.
Elli Vizcaino
Creating meaningful connections and compelling
experiences through the art beauty of design.
http://www.e7flux.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] CSS3 Opacity Inheritance
On Oct 20, 2011, at 12:36 AM, Elli Vizcaino wrote: If I recall correctly, child elements inherit the opacity property of parent elements. Meaning, any text within a div with an opacity declaration would then also take on the same values. Has this changed with CSS3? As David notes, the descendants of a box with opacity applied don't inherit that opacity. The property is applied to the (block) box and all its descendants. If what you want is a box with a semi-transparent background and / or borders, then rgba() or hsla() colours are your friend. Philippe -- Philippe Wittenbergh http://l-c-n.com/ That seems like a contradictory statement and leaves me still somewhat confused. What I'm getting at is, if a box element gets an opacity property with a value of 0.5 for a semi transparent effect, do child elements such as text then display in the browser at that same semi-transparent value? Elli Vizcaino Creating meaningful connections and compelling experiences through the art beauty of design. http://www.e7flux.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] CSS3 Opacity Inheritance
I think what it means is the elements get opacity applied - parent and child - simultaneously as if they were separate elements. Out of curiosity, if it was inherited, would the opacity amount get compounded the more levels deep the elements went?? Sent from iOS 5 On Oct 20, 2011, at 12:28 PM, Elli Vizcaino elli...@yahoo.com wrote: On Oct 20, 2011, at 12:36 AM, Elli Vizcaino wrote: If I recall correctly, child elements inherit the opacity property of parent elements. Meaning, any text within a div with an opacity declaration would then also take on the same values. Has this changed with CSS3? As David notes, the descendants of a box with opacity applied don't inherit that opacity. The property is applied to the (block) box and all its descendants. If what you want is a box with a semi-transparent background and / or borders, then rgba() or hsla() colours are your friend. Philippe -- Philippe Wittenbergh http://l-c-n.com/ That seems like a contradictory statement and leaves me still somewhat confused. What I'm getting at is, if a box element gets an opacity property with a value of 0.5 for a semi transparent effect, do child elements such as text then display in the browser at that same semi-transparent value? Elli Vizcaino Creating meaningful connections and compelling experiences through the art beauty of design. http://www.e7flux.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] CSS3 Opacity Inheritance
On 10/20/11 12:28 PM, Elli Vizcaino wrote: What I'm getting at is, if a box element gets an opacity property with a value of 0.5 for a semi transparent effect, do child elements such as text then display in the browser at that same semi-transparent value? Elli Vizcaino Try it and see. -- Desktop. Laptop. Tablet. Mobile! http://chelseacreekstudio.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] CSS3 Opacity Inheritance
On Oct 21, 2011, at 1:28 AM, Elli Vizcaino wrote: As David notes, the descendants of a box with opacity applied don't inherit that opacity. The property is applied to the (block) box and all its descendants. If what you want is a box with a semi-transparent background and / or borders, then rgba() or hsla() colours are your friend. That seems like a contradictory statement and leaves me still somewhat confused. What I'm getting at is, if a box element gets an opacity property with a value of 0.5 for a semi transparent effect, do child elements such as text then display in the browser at that same semi-transparent value? There is absolutely no contradiction. Opacity is applied to the box and everything that box contains. The box as a whole becomes translucent. Opacity is _not_ something to make just a transparent background. You can compare it to reducing the opacity of a layer group in Photoshop. View this testcase and compare the 2 boxes: http://dev.l-c-n.com/_temp/translucent-transparent.html Philippe -- Philippe Wittenbergh http://l-c-n.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] CSS3 Opacity Inheritance
On 10/20/11 12:28 PM, Elli Vizcaino wrote: What I'm getting at is, if a box element gets an opacity property with a value of 0.5 for a semi transparent effect, do child elements such as text then display in the browser at that same semi-transparent value? Elli Vizcaino Try it and see. -- Desktop. Laptop. Tablet. Mobile! http://chelseacreekstudio.com/ Good idea! Elli Vizcaino Creating meaningful connections and compelling experiences through the art beauty of design. http://www.e7flux.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] CSS3 Opacity Inheritance
On Oct 21, 2011, at 1:28 AM, Elli Vizcaino wrote: As David notes, the descendants of a box with opacity applied don't inherit that opacity. The property is applied to the (block) box and all its descendants. If what you want is a box with a semi-transparent background and / or borders, then rgba() or hsla() colours are your friend. That seems like a contradictory statement and leaves me still somewhat confused. What I'm getting at is, if a box element gets an opacity property with a value of 0.5 for a semi transparent effect, do child elements such as text then display in the browser at that same semi-transparent value? There is absolutely no contradiction. Opacity is applied to the box and everything that box contains. The box as a whole becomes translucent. Opacity is _not_ something to make just a transparent background. You can compare it to reducing the opacity of a layer group in Photoshop. View this testcase and compare the 2 boxes: http://dev.l-c-n.com/_temp/translucent-transparent.html Philippe -- Philippe Wittenbergh http://l-c-n.com/ The photoshop analogy helps me get it but then I guess I must be misunderstanding the meaning of inheritance, can you tell me what exactly does the definition of inherit mean? Elli Vizcaino Creating meaningful connections and compelling experiences through the art beauty of design. http://www.e7flux.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] CSS3 Opacity Inheritance
I think what it means is the elements get opacity applied - parent and child - simultaneously as if they were separate elements. Out of curiosity, if it was inherited, would the opacity amount get compounded the more levels deep the elements went?? Sent from iOS 5 It seems like you get what inherit does/mean and and how it differs from what happens to child elements of a parent with opacity applied. Would you know how to explain the difference? Elli Vizcaino Creating meaningful connections and compelling experiences through the art beauty of design. http://www.e7flux.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] CSS3 Opacity Inheritance
That seems like a contradictory statement and leaves me still somewhat confused. What I'm getting at is, if a box element gets an opacity property with a value of 0.5 for a semi transparent effect, do child elements such as text then display in the browser at that same semi-transparent value? There is absolutely no contradiction. Opacity is applied to the box and everything that box contains. The box as a whole becomes translucent. Opacity is _not_ something to make just a transparent background. You can compare it to reducing the opacity of a layer group in Photoshop. View this testcase and compare the 2 boxes: http://dev.l-c-n.com/_temp/translucent-transparent.html Philippe -- Philippe Wittenbergh http://l-c-n.com/ Just took a loot at the opacity sample. And of course I used, Firebug to inspect code and firebug says that the opacity of 0.5 on the img has been inherited from div.a - this is why I'm confused and unsure then of what inherit means if the opacity is getting applied to it's descendants and yet I am being told it is a property that is not inherited. Elli Vizcaino Creating meaningful connections and compelling experiences through the art beauty of design. http://www.e7flux.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] CSS3 Opacity Inheritance
On 10/20/2011 11:04 PM, Elli Vizcaino wrote:
On 10/20/11 12:28 PM, Elli Vizcaino wrote:
What I'm getting at is, if a box element gets an opacity property with
a value of 0.5 for a semi transparent effect, do child elements such as text
then display in the browser at that same semi-transparent value?
Yes. The better approach is to use rgba colors for elements containing
text. That way only the box is affected and the text (or any other child
elements) remain unaffected.
RGBA stands for red, green, blue, and alpha. So this declaration renders
a box 80% opaque, while stuff inside the box is fully opaque:
#elli-box {
background-color: black;
background: rgba(255,255,255,.8);
}
The background-color property is a fallback for older browsers lacking
support for RGBA.
255,255,255 is white
0,0,0 is black
Most code editors now have the ability to let you easily set colors like
this.
Here is a quick example:
http://www.projectseven.com/csslab/css3/rgba/quick-test.htm
The styles used on the example are:
#elli-box {
background-color: #3CF;
background: rgba(51,204,255,.8);
/*Light Blue*/
}
And some design extras:
.elli-styles {
padding: 40px;
width: 400px;
font-size: 14px;
line-height: 1.5;
border-radius: 11px;
box-shadow: inset 0px 0px 40px #0080AA;
border: 2px solid #FFF;
}
--
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
Since 1998
__
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] CSS3 Opacity Inheritance
On 10/20/2011 11:26 PM, Elli Vizcaino wrote: Philippe Wittenbergh http://l-c-n.com/ Just took a loot at the opacity sample. And of course I used, Firebug to inspect code and firebug says that the opacity of 0.5 on the img has been inherited from div.a - this is why I'm confused and unsure then of what inherit means if the opacity is getting applied to it's descendants and yet I am being told it is a property that is not inherited. Philippe used RGBA for the box on the right b. So the image and the text in that second box is not transparent at all. Make sure you are using an up-to-date version of Firefox. __ 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] CSS3 Opacity Inheritance
On Oct 21, 2011, at 12:09 PM, Elli Vizcaino wrote: The photoshop analogy helps me get it but then I guess I must be misunderstanding the meaning of inheritance, can you tell me what exactly does the definition of inherit mean? Here is the CSS 2.1 definition of 'inherit': http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit Note that only _some_ properties are inherited. For example, the margin property does not inherit, but the color property does (look them up in the specs). You can set the color property on body and all descendants of body will have that color applied (unless you override it on a specific element). On the hand, you can specify a large top and bottom margin on a div, but the descendants p of that div won't have that large margin, unless you explicitly specify that they do so. The opacity property does _not_ inherit, as already noted. http://www.w3.org/TR/css3-color/#transparency The descendants of a box with the opacity set appear translucent _because_ the parent box as a whole unit is made translucent. Philippe -- Philippe Wittenbergh http://l-c-n.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] CSS3 Opacity Inheritance
On Thursday 2011-10-20 20:09 -0700, Elli Vizcaino wrote: The photoshop analogy helps me get it but then I guess I must be misunderstanding the meaning of inheritance, can you tell me what exactly does the definition of inherit mean? It means that the value of the property gets copied from the parent element to its children, unless those children have another value specified. Classic examples of inherited properties are 'color' and the 'font-*' properties; a classic examples of non-inherited properties are the 'border-*' properties (since if you give an element a border, all of its descendants don't also get a border). You can tell that opacity is not inherited because if you do: div style=opacity: 0.5div style=opacity: 0.5hello/div/div you'll get a different effect from: div style=opacity: 0.5divhello/div/div (In a similar way, background properties are not inherited, but the background does end up going behind descendants. However, if you have a background-image with some transparency, or a background image where you can see where the tiles start and end, you'll see that specifying the background on a child actually adds an additional background.) -David -- 턞 L. David Baron http://dbaron.org/ 턂 턢 Mozilla http://www.mozilla.org/ 턂 __ 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] CSS3 Opacity Inheritance
On Oct 21, 2011, at 12:26 PM, Elli Vizcaino wrote: View this testcase and compare the 2 boxes: http://dev.l-c-n.com/_temp/translucent-transparent.html Just took a loot at the opacity sample. And of course I used, Firebug to inspect code and firebug says that the opacity of 0.5 on the img has been inherited from div.a - this is why I'm confused and unsure then of what inherit means if the opacity is getting applied to it's descendants and yet I am being told it is a property that is not inherited. Firebug lies. Yes, I had to check, and indeed Firebug says that the img in that text case inherits the opacity from the div. ::shocked:: Check in WebKit's Web Inspector, or Opera's dragonfly and they tell you a different story. Philippe -- Philippe Wittenbergh http://l-c-n.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] CSS3 Opacity Inheritance
On 10/20/2011 11:33 PM, Al Sparber wrote: On 10/20/2011 11:04 PM, Elli Vizcaino wrote: On 10/20/11 12:28 PM, Elli Vizcaino wrote: What I'm getting at is, if a box element gets an opacity property with a value of 0.5 for a semi transparent effect, do child elements such as text then display in the browser at that same semi-transparent value? Yes. Just to clarify, this is not an inheritance issue (as Phillippe explained). It can better be described as an occupancy issue :-) The reason why RGBA works is because it is applying an alpha transparency to the color - not the box. __ 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] CSS3 Opacity Inheritance
On 21/10/2011 2:15 PM, Elli Vizcaino wrote:
It seems like you get what inherit does/mean and and how it differs
from what happens to child elements of a parent with opacity applied.
Would you know how to explain the difference?
Try this code Elli.
!DOCTYPE html
style type=text/css
#parent {
color: white;
background: green;
}
#child {
color: red;
background: white;
border: 10px solid silver;
padding: 1em;
}
#child:hover {
color: white;
background: inherit;
}
/style
div id=parent
Parent
div id=childChild Element ~ hover me/div
Element
/div
--
Alan Gresley
http://css-3d.org/
http://css-class.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-d] CSS3 Opacity Inheritance
Hello CSS Discuss, If I recall correctly, child elements inherit the opacity property of parent elements. Meaning, any text within a div with an opacity declaration would then also take on the same values. Has this changed with CSS3? Elli Vizcaino Creating meaningful connections and compelling experiences through the art beauty of design. http://www.e7flux.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] CSS3 Opacity Inheritance
On Wednesday 2011-10-19 08:36 -0700, Elli Vizcaino wrote: If I recall correctly, child elements inherit the opacity property of parent elements. Meaning, any text within a div with an opacity declaration would then also take on the same values. Has this changed with CSS3? What happens with opacity isn't inheritance, but it does affect all the descendants of an element. When an element has opacity less than 1, the element and all of its descendants get drawn into a buffer, and then, in a single step, that buffer is drawn with opacity onto what's underneath the element. This means that things within the element can fully hide each other, even though, when everything is drawn, the end result is partially transparent. I wrote some visual examples of this at: http://dbaron.org/talks/2009-03-15-css3-sxsw/slide-4.xhtml (and compared with rgba() colors, which affect just a single drawing operation rather than an entire subtree). -David -- 턞 L. David Baron http://dbaron.org/ 턂 턢 Mozilla http://www.mozilla.org/ 턂 __ 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] CSS3 Opacity Inheritance
I believe this to still be the case. On Wed, Oct 19, 2011 at 11:36 AM, Elli Vizcaino elli...@yahoo.com wrote: Hello CSS Discuss, If I recall correctly, child elements inherit the opacity property of parent elements. Meaning, any text within a div with an opacity declaration would then also take on the same values. Has this changed with CSS3? Elli Vizcaino Creating meaningful connections and compelling experiences through the art beauty of design. http://www.e7flux.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/ -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] CSS3 Opacity Inheritance
What happens with opacity isn't inheritance, but it does affect all the descendants of an element. When an element has opacity less than 1, the element and all of its descendants get drawn into a buffer, and then, in a single step, that buffer is drawn with opacity onto what's underneath the element. This means that things within the element can fully hide each other, even though, when everything is drawn, the end result is partially transparent. I wrote some visual examples of this at: http://dbaron.org/talks/2009-03-15-css3-sxsw/slide-4.xhtml (and compared with rgba() colors, which affect just a single drawing operation rather than an entire subtree). -David I found this response a little confusing. So what happens when one uses hex colors? And how does one explain this to someone else in layman's terms? Elli Vizcaino Creating meaningful connections and compelling experiences through the art beauty of design. http://www.e7flux.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] CSS3 Opacity Inheritance
On Oct 20, 2011, at 12:36 AM, Elli Vizcaino wrote: If I recall correctly, child elements inherit the opacity property of parent elements. Meaning, any text within a div with an opacity declaration would then also take on the same values. Has this changed with CSS3? As David notes, the descendants of a box with opacity applied don't inherit that opacity. The property is applied to the (block) box and all its descendants. If what you want is a box with a semi-transparent background and / or borders, then rgba() or hsla() colours are your friend. Philippe -- Philippe Wittenbergh http://l-c-n.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-d] CSS3: creating social network icons? yes, we can!
Hi folks, after several weeks of hard work on WP themes and Zend Framework PayPal classes, I moved back to my first love, CSS. and here's the result: http://onwebdev.blogspot.com/2011/09/css-create-social-network-icons.html dimensions are in ems, so they should fit your layout. I have to fix some accessibility issues related to the markup used in the demo. if you have any WAI-compliant solutions, let me know. :-) Gabriele ps. look ma, no images! ;-) http://www.css-zibaldone.com http://gabrieleromanato.com http://www.css-zibaldone.com/test/ (English) http://www.css-zibaldone.com/articles/ (English) http://onwebdev.blogspot.com/ (English) __ 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] CSS3: creating social network icons? yes, we can!
On 9/6/11 12:36 PM, Gabriele Romanato wrote: http://onwebdev.blogspot.com/2011/09/css-create-social-network-icons.html dimensions are in ems, so they should fit your layout. I have to fix some accessibility issues related to the markup used in the demo. if you have any WAI-compliant solutions, let me know. :-) Gabriele Nice job! aside Nuke social networking:-) . Best, ~d __ 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-d] CSS3 Parse Error on Filter:
I am getting a Parse Error from the W3C Validator for CSS3 for the
following:
#header h1 {
font-family: Century Gothic, Geneva, Arial, Helvetica, sans-serif;
font-size: 5.5em;
font-weight: normal;
text-transform:lowercase;
color: #FF70B8;
line-height: 90px;
text-shadow: #33 -0.02em 0.02em 0.05em;
filter: Glow(color=#99, strength=2);
}
The Parse Error is on the line:
filter: Glow(color=#99, strength=2);
The page is at:
http://studiokaufman.com/site/anoulipolooza/index.html
and the CSS file at:
http://studiokaufman.com/site/anoulipolooza/css/AO_screen.css
I have Googled and Googled for some clue for what I have done to offend Mr.
Validator, but thus far every word on the subject I've found appears to
indicate that my code syntax is fine.
Can anyone point me the proper CSS3 documentation re filter: ?
Thanks so much,
Dan
d...@studiokaufman.com
www.StudioKaufman.com http://www.studiokaufman.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] CSS3 Parse Error on Filter:
I thought filter was proprietary to IE? Maybe you could move the filter to an IE-specific stylesheet? __ 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] CSS3 Parse Error on Filter:
On Jul 23, 2011, at 9:12 AM, Dan Kaufman wrote: I am getting a Parse Error from the W3C Validator for CSS3 for the following: I have Googled and Googled for some clue for what I have done to offend Mr. Validator, but thus far every word on the subject I've found appears to indicate that my code syntax is fine. Can anyone point me the proper CSS3 documentation re filter: ? There is none. Filter() is either (1) a Microsoft-only property or (2) a SVG effect (which you can use in Gecko 1.9.2+). http://www.w3.org/TR/SVG/filters.html Philippe -- Philippe Wittenbergh http://l-c-n.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] CSS3 Parse Error on Filter:
The Parse Error is on the line: filter: Glow(color=#99, strength=2); I thought filter was proprietary to IE? Maybe you could move the filter to an IE-specific stylesheet? Good point. Sometimes the obvious is the most unobvious. Thank you, Dan __ 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] [CSS3] [HELP] Nav menu bug
On 06/07/11 05:53, Mark Ayers wrote: http://www.ineedwebpage.com/ When you hover over the lower ones, the menu compresses (specifically the firstcodeli/code in the list), which makes it very difficult to click the link to the homepage. FWIW, as a user with neurological/co-ordination problems, I find the menu impossible to use with a mouse. It jumps around all over the place and I haven't a hope of clicking the link I'm after. It's particularly bad in Firefox 5, but Chromium isn't much better. Epiphany (Web-kit based) is the best, but even that is pretty much unusable. (All on Linux.) I like the idea - just can't use it. Lesley __ 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] [CSS3] [HELP] Nav menu bug
On 7/6/11 12:53 AM, Mark Ayers wrote: http://www.ineedwebpage.com/ Okay, first things first. This only happens on screens wider than 1200px, as I have media queries set up since it overlaps content. It doesn't anymore since I made it hide itself, but I'll change that AFTER I fix the major site breaking bugs. I have no idea what that's supposed to do or why it is supposed to do it. A simple menu less the obligatory jazz... http://chelseacreekstudio.com/nav.html Good luck. ~d -- http://chelseacreekstudio.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] [CSS3] [HELP] Nav menu bug
http://www.ineedwebpage.com/ I have no idea what that's supposed to do or why it is supposed to do it. A simple menu less the obligatory jazz... http://chelseacreekstudio.com/nav.html Good luck. ~d -- http://chelseacreekstudio.com/ Hiding the site navigation is rarely a good idea. And the contrast between the nav tab and the bg isn't much, which could be an issue for some people to find it. As far as your issues go, the first LI has an initial height of 86px, then as you hover the LIs, it changes. You might try using padding on the hrefs or LIs instead of fixed heights. HTH -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] [CSS3] [HELP] Nav menu bug
This is the bug I'm trying to fix. Firefox is far worse because I develop for Webkit then add support for everything else, so I don't have the text written vertically in Firefox. On Wed, Jul 6, 2011 at 2:15 AM, Lesley Lutomski c...@islaywebdesign.co.ukwrote: On 06/07/11 05:53, Mark Ayers wrote: http://www.ineedwebpage.com/ When you hover over the lower ones, the menu compresses (specifically the firstcodeli/code in the list), which makes it very difficult to click the link to the homepage. FWIW, as a user with neurological/co-ordination problems, I find the menu impossible to use with a mouse. It jumps around all over the place and I haven't a hope of clicking the link I'm after. It's particularly bad in Firefox 5, but Chromium isn't much better. Epiphany (Web-kit based) is the best, but even that is pretty much unusable. (All on Linux.) I like the idea - just can't use it. Lesley __**__**__ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/**mailman/listinfo/css-dhttp://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.**com/http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/**policies.htmlhttp://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_**support_evolt/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] [CSS3] [HELP] Nav menu bug
There is no CSS rule making the first li 86px tall though. That's why I'm having trouble tracking this down. The fixed heights were an attempt to fix the bug. On Wed, Jul 6, 2011 at 7:56 AM, Tom Livingston tom...@gmail.com wrote: http://www.ineedwebpage.com/ I have no idea what that's supposed to do or why it is supposed to do it. A simple menu less the obligatory jazz... http://chelseacreekstudio.com/nav.html Good luck. ~d -- http://chelseacreekstudio.com/ Hiding the site navigation is rarely a good idea. And the contrast between the nav tab and the bg isn't much, which could be an issue for some people to find it. As far as your issues go, the first LI has an initial height of 86px, then as you hover the LIs, it changes. You might try using padding on the hrefs or LIs instead of fixed heights. HTH -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] [CSS3] [HELP] Nav menu bug
On 06/07/11 16:41, Mark Ayers wrote: This is the bug I'm trying to fix. Firefox is far worse because I develop for Webkit then add support for everything else, so I don't have the text written vertically in Firefox. On Wed, Jul 6, 2011 at 2:15 AM, Lesley Lutomski c...@islaywebdesign.co.uk mailto:c...@islaywebdesign.co.uk wrote: On 06/07/11 05:53, Mark Ayers wrote: http://www.ineedwebpage.com/ When you hover over the lower ones, the menu compresses (specifically the firstcodeli/code in the list), which makes it very difficult to click the link to the homepage. FWIW, as a user with neurological/co-ordination problems, I find the menu impossible to use with a mouse. It jumps around all over the place and I haven't a hope of clicking the link I'm after. It's particularly bad in Firefox 5, but Chromium isn't much better. Epiphany (Web-kit based) is the best, but even that is pretty much unusable. (All on Linux.) Sorry - I don't think I explained the problem very well. On Chromium and Epiphany, the position of the menu changes, which makes it very hard to use. On Firefox, the links judder about, vibrating, for want of a better word, overlapping and impossible to select. Lesley __ 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] [CSS3] [HELP] Nav menu bug
It should work now. Theres still too much space at the top, but it doesn't jump around. On Wed, Jul 6, 2011 at 9:11 AM, Lesley Lutomski c...@islaywebdesign.co.ukwrote: On 06/07/11 16:41, Mark Ayers wrote: This is the bug I'm trying to fix. Firefox is far worse because I develop for Webkit then add support for everything else, so I don't have the text written vertically in Firefox. On Wed, Jul 6, 2011 at 2:15 AM, Lesley Lutomski c...@islaywebdesign.co.uk mailto:c...@islaywebdesign.co.**ukc...@islaywebdesign.co.uk wrote: On 06/07/11 05:53, Mark Ayers wrote: http://www.ineedwebpage.com/ When you hover over the lower ones, the menu compresses (specifically the firstcodeli/code in the list), which makes it very difficult to click the link to the homepage. FWIW, as a user with neurological/co-ordination problems, I find the menu impossible to use with a mouse. It jumps around all over the place and I haven't a hope of clicking the link I'm after. It's particularly bad in Firefox 5, but Chromium isn't much better. Epiphany (Web-kit based) is the best, but even that is pretty much unusable. (All on Linux.) Sorry - I don't think I explained the problem very well. On Chromium and Epiphany, the position of the menu changes, which makes it very hard to use. On Firefox, the links judder about, vibrating, for want of a better word, overlapping and impossible to select. Lesley __ 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] [CSS3] [HELP] Nav menu bug
On Wed, Jul 6, 2011 at 12:29 PM, Mark Ayers markthe...@gmail.com wrote: It should work now. Theres still too much space at the top, but it doesn't jump around. The space appears to be coming from pNav/p. -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] [CSS3] [HELP] Nav menu bug
On 06/07/11 17:29, Mark Ayers wrote: It should work now. Theres still too much space at the top, but it doesn't jump around. It works fine on all three browsers, but the text saying Nav has vanished, making it very hard to find, especially on Firefox and Chromium, which don't display the white border. I'd also like to see some indication on hover that the whole area is clickable, not just the text, but that's just a personal opinion. Lesley __ 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-d] [CSS3] [HELP] Nav menu bug
http://www.ineedwebpage.com/ Okay, first things first. This only happens on screens wider than 1200px, as I have media queries set up since it overlaps content. It doesn't anymore since I made it hide itself, but I'll change that AFTER I fix the major site breaking bugs. Here's the problem. The nav menu is supposed to slide out, then have all the options displayed. It also has a vertical text label. The menu items slide over further when you hover. When you hover over the lower ones, the menu compresses (specifically the first codeli/code in the list), which makes it very difficult to click the link to the homepage. Any help is much appreciated. I would prefer it not have the extra spacing, but if it KEEPS the spacing, that's fine for now. Then I can try to make it smaller tomorrow. __ 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] [CSS3] [HELP] Nav menu bug
On Jul 6, 2011, at 1:53 PM, Mark Ayers wrote: http://www.ineedwebpage.com/ Okay, first things first. This only happens on screens wider than 1200px, as I have media queries set up since it overlaps content. It doesn't anymore since I made it hide itself, but I'll change that AFTER I fix the major site breaking bugs. Here's the problem. The nav menu is supposed to slide out, then have all the options displayed. It also has a vertical text label. The menu items slide over further when you hover. When you hover over the lower ones, the menu compresses (specifically the first codeli/code in the list), which makes it very difficult to click the link to the homepage. Any help is much appreciated. Have you consider using a transform for #navContain p (instead of -webkit-writing-mode) ? Then I suppose you'd have to set a width on that whole block, to stop it from dancing around when the use mouses over the various items. You'd be better off using some scripting, me thinks. PS - cross posting to various lists is _not_ a good idea. Philippe -- Philippe Wittenbergh http://l-c-n.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-d] CSS3 transitions only after load
I want to specify a transition for an element, but I only want it to
be used if a change is made to a property AFTER the page has loaded.
For example,
#foo {
font-size: 24pt;
transition: all 1s linear;
-moz-transition all 1s linear;
-webkit-transition all 1s linear;
}
I don't want the change to font-size from the default to 24pt to be animated.
I can get what I want by adding the transition from JavaScript after the load.
Is there a way to do this without using JavaScript?
--
R. Mark Volkmann
Object Computing, Inc.
__
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] CSS3 transitions only after load
On 6/29/11 11:38 AM, Mark Volkmann wrote:
I want to specify a transition for an element, but I only want it to
be used if a change is made to a property AFTER the page has loaded.
For example,
#foo {
font-size: 24pt;
transition: all 1s linear;
-moz-transition all 1s linear;
-webkit-transition all 1s linear;
}
One possibility is to trigger the transition on activating a link to
#foo using the :target selector:
http://reference.sitepoint.com/css/pseudoclass-target
Not sure if that's what you are after, though...
--
Cordially,
David
__
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] CSS3 transitions only after load
On Wednesday 2011-06-29 13:38 -0500, Mark Volkmann wrote:
I want to specify a transition for an element, but I only want it to
be used if a change is made to a property AFTER the page has loaded.
For example,
#foo {
font-size: 24pt;
transition: all 1s linear;
-moz-transition all 1s linear;
-webkit-transition all 1s linear;
}
I don't want the change to font-size from the default to 24pt to be animated.
This should be the way transitions work normally. Are you doing
something that causes the style not to be applied until just after
load?
-David
--
L. David Baron http://dbaron.org/
Mozilla Corporation http://www.mozilla.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] CSS3 transitions only after load
It turns out my issue was due to height and width animation, not
font-size animation. I had height and width values set to 100% which
are then calculated values. Those were being animated. I fixed it by
being more specfic about what should be animated ... only
-webkit-transform in my case. Thanks to Ghodmode for that suggestions!
On Wed, Jun 29, 2011 at 4:29 PM, L. David Baron dba...@dbaron.org wrote:
On Wednesday 2011-06-29 13:38 -0500, Mark Volkmann wrote:
I want to specify a transition for an element, but I only want it to
be used if a change is made to a property AFTER the page has loaded.
For example,
#foo {
font-size: 24pt;
transition: all 1s linear;
-moz-transition all 1s linear;
-webkit-transition all 1s linear;
}
I don't want the change to font-size from the default to 24pt to be animated.
This should be the way transitions work normally. Are you doing
something that causes the style not to be applied until just after
load?
--
R. Mark Volkmann
Object Computing, Inc.
__
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-d] CSS3 Resources Please
Hello CSS Discuss, Looking for some good CSS3 resources/sites. TIA Elli __ 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] CSS3 Resources Please
On 6/29/11 6:57 PM, Elli Vizcaino wrote: Hello CSS Discuss, Looking for some good CSS3 resources/sites. TIA Elli http://www.css3.info/ view-source:http://www.css3.info/ http://css3please.com/ view-source:http://css3please.com/ http://www.w3.org/TR/css3-roadmap/ view-source:http://www.w3.org/TR/css3-roadmap/ http://www.slideshare.net/maxdesign/css3-media-queries/ view-source:http://www.slideshare.net/maxdesign/css3-media-queries/ http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries view-source:http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries http://protofluid.com/?c=mediaQueries view-source:http://protofluid.com/?c=mediaQueries http://www.standardista.com/css3/css3-selector-browser-support view-source:http://www.standardista.com/css3/css3-selector-browser-support Google is your friend. ~d -- http://chelseacreekstudio.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] CSS3 Resources Please
Hello CSS Discuss, Looking for some good CSS3 resources/sites. TIA Elli http://www.css3.info/ view-source:http://www.css3.info/ http://css3please.com/ view-source:http://css3please.com/ http://www.w3.org/TR/css3-roadmap/ view-source:http://www.w3.org/TR/css3-roadmap/ http://www.slideshare.net/maxdesign/css3-media-queries/ view-source:http://www.slideshare.net/maxdesign/css3-media-queries/ http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries view-source:http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries http://protofluid.com/?c=mediaQueries view-source:http://protofluid.com/?c=mediaQueries http://www.standardista.com/css3/css3-selector-browser-support view-source:http://www.standardista.com/css3/css3-selector-browser-support Google is your friend. ~d Thanks! I tried google but wasn't crazy about the search results that were coming up. I'll take a look at these... :)) __ 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/
