Re: [css-d] Reflection effect
Thanks guys! I have to make some further tests, actually. The potential of these new CSS3 features is so vast that you never stop finding new solutions. :-) http://www.css-zibaldone.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] Reflection effect
On Apr 16, 2011, at 4:13 AM, Kevin A. Cameron wrote: This raises an interesting question: the reflected text in HTML or CSS? I'd argue that the reflection is decoration and only decoration, and thus part of the stylesheet. On Apr 16, 2011, at 3:16 AM, Tim Climis wrote: Really, to get the desired effect, you'd want transform: scaley(-1); It works in webkit. Haven't tried anything else. You can use transform: scale(-1) with Gecko (1.9.2+) and Opera (tested: 11.10) as well. http://dev.l-c-n.com/_temp2/reflect.html WebKit has a specific property that enables reflections, without generated content or additional html markup: -webkit-box-reflect. ( I think Gecko has something similar using svg filters, but I'd need to search for it) Quick test: http://dev.l-c-n.com/_temp2/reflect3.html see more : http://www.webkit.org/blog/182/css-reflections/ 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] problem with overflow: visible under IE8 resizing the containing node
On Saturday 16 April 2011 16:19, David Hucklesby wrote: [snip] Without a DOCTYPE, browsers are in quirks mode. Real browsers still obey CSS rules except for a couple of things like box sizing. All versions of IE will behave like IE 5.5 though. If you want to keep browsers in quirks mode, including IE 6 and 7, but want IE 8 and 9 to be as standard as they can be, add the X-UA-Compatible META element to the HEAD of your document, or configure your server. The XML prolog (XHTML), or an SGML comment (HTML) forces quirks mode as well if you wish to force IE6 only. -- Michael __ 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] Reflection effect
Am Samstag, 16. April 2011 schrieb Philippe Wittenbergh e...@l-c-n.com: On Apr 16, 2011, at 4:13 AM, Kevin A. Cameron wrote: This raises an interesting question: the reflected text in HTML or CSS? I'd argue that the reflection is decoration and only decoration, and thus part of the stylesheet. Some hate the effect [1], therefore, it is decoration. Ingo [1] Would someone please mop the floor? http://csscreator.com/node/21265 __ 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] Reflection effect
Ingo Chao wrote: Some hate the effect [1], therefore, it is decoration. Some hate coz, gonna and 'fess up, but they are still (sadly) only too often a part of the content :-( Philip Taylor __ 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] Reflection effect
On 16/04/2011 10:08 PM, Ingo Chao wrote: Am Samstag, 16. April 2011 schrieb Philippe Wittenberghe...@l-c-n.com: On Apr 16, 2011, at 4:13 AM, Kevin A. Cameron wrote: This raises an interesting question: the reflected text in HTML or CSS? I'd argue that the reflection is decoration and only decoration, and thus part of the stylesheet. Some hate the effect [1], therefore, it is decoration. Ingo [1] Would someone please mop the floor? http://csscreator.com/node/21265 I believe Kevin asked a good question. I agree with you and him that since the affect is styling or decoartion, then styling should be where it belongs. There are two ways to achieve the affect. Philippe demoed a method with more browser support. Another question is what else is possible with CSS? I presume some would believe that CSS animation with a little JS is outright abuse of CSS. Here is one demo of mine where I hack in a box-shadow and then position it under another element (later in the source) that has a transparent background. I achieved what is forbidden by the CSS spec (a box-shadow seen through a semi transparent background of the element creating the shadow). http://css-class.com/test/css/shadows/box-shadow-borders.htm Seriously, I think CSS and CSS3 is wonderful. -- Alan http://css-class.com/ Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo __ 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] Reflection effect
On 16 April 2011 08:38, Gabriele Romanato gabriele.roman...@gmail.com wrote:
The potential of these new CSS3 features is so vast that you never stop
finding new solutions. :-)
…new solutions to your OSX desktop in DHTML perhaps?
Chucking this in for the dock items could be a laugh:
li {
-webkit-box-reflect: below 0;
-webkit-transform-origin: 50% 100%;
-webkit-transition: all .2s ease-in-out;
}
li:hover {
-webkit-transform: scale(1.5);
}
Speaking as the resident humbug, I can't help but say… These are
solutions for which the problems have yet to rear their heads ;)
Regards,
Barney
__
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] Reflection effect
Alan, a few points to make in response to your post, with inherently dynamic CSS in mind: On 16 April 2011 13:55, Alan Gresley a...@css-class.com wrote: Another question is what else is possible with CSS? I presume some would believe that CSS animation with a little JS is outright abuse of CSS. I sympathise with the notion behind this (for the love of God, let's keep our behaviour and presentation separate!), but the way that came out spanks a bit of zealotry. Are we to take it you are in the market of exclusively targeting that choice demographic of sensible users who download Webkit nightlies and keep scripting turned off? ;) In all seriousness: the transitions, transform and translation effects of CSS achieve new heights with minimal scripting. The problem is that 'minimal' is a yet-to-be-reached ideal scenario: to achieve consistent and safely presentably degradable effects, an intelligent architecture of fallbacks involving verbose and involved script and style dependencies becomes necessary. The truth is, CSS is not ideally suited to describing dynamic scenarios by itself: apart from the pseudo-classes, CSS cannot in of itself describe the situations it promises with many of these new properties. Example: http://www.hrp.org.uk/TowerOfLondon/ The large widget in the middle of the page uses minimal Javascript in the ideal situation, but it is nonetheless crucial. Ignoring for a second the DHTML scrollbar (slightly redundant in that situation — and please don't remind me of what the validator has to say about this ;), the mechanism of tabs which fill the widget's main panel with their related content relies on script exclusively for changing the class of 1 element on click in modern browsers (the wrapper 'heroModule' element gains an 'activeItemX' class, where X is the index of the displayed item). Javascript feature-detects transitions and, ironically, falls back to more involved Javascript-led animations if impossible. The notion of inheritance and classes to produce these things is incredibly simple: the amount of DOM work necessary in Javascript to establish the right presentation is much more difficult. Nevertheless, a small amount of script was necessary to bring out the most of these CSS effects — and I personally believe that while it is excellent that CSS should handle so much of the presentation layer, the inherent triggers are necessarily behavioural, and as such within the scope of scripting. CSS animations involve a script API, whereby callbacks and animation frames are features of the CSS that are only accessible via script. For these features to reach their full potential, scripting (much more elegant scripting than what we're used to in the world of DHTML animation, I might add) is a boon. Here is one demo of mine where I hack in a box-shadow and then position it under another element (later in the source) that has a transparent background. I achieved what is forbidden by the CSS spec (a box-shadow seen through a semi transparent background of the element creating the shadow). This is pretty impressive. As with a lot of the more recently applicable CSS effects, we're reaching an awkward stage where the dedicated designer is relegated to not having a full understanding of what is possible, and not having the level of detailed graphic control over how these things present themselves to the user. In many situations I've willingly used graphics and extra markup along with plain old tried and tested CSS2 to create exacting replications of drop-shadows, gradients and rounded corners that could not reliably look as good in programmed, browser-interpreted methods. Essentially I'm saying that for a developer to be able to produce this kind of stuff using nothing but HTML and styles is an impressive step forward, but there's no way an exacting designer would let this case study sway them from traditional methods. Nevertheless, the future is bright, and it's up to us to forge ahead. Seriously, I think CSS and CSS3 is wonderful. Amen to that. Regards, Barney __ 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] Reflection effect
At 6:44 PM +0200 4/15/11, Gabriele Romanato wrote: Again, what's the purpose of CSS3? Having fun with CSS: http://onwebdev.blogspot.com/2011/04/pure-css-reflection-effect.html The purpose of having fun with CSS is testing, the purpose of CSS testing is make something of your spare time during a dull day when you've finished to work on your projects and there are just too many hours of bore between you and the relax of the night. After 21.00 PM, everything is different but now is such a bore ;-) HTH :-) http://www.webbytedd.com/aa/reflection/ Cheers, tedd -- --- 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] Dynamic CSS with animation was(Re: Reflection effect)
On 16/04/2011 11:39 PM, Barney Carroll wrote: Alan, a few points to make in response to your post, with inherently dynamic CSS in mind: On 16 April 2011 13:55, Alan Gresleya...@css-class.com wrote: Another question is what else is possible with CSS? I presume some would believe that CSS animation with a little JS is outright abuse of CSS. I sympathise with the notion behind this (for the love of God, let's keep our behaviour and presentation separate!), but the way that came out spanks a bit of zealotry. Are we to take it you are in the market of exclusively targeting that choice demographic of sensible users who download Webkit nightlies and keep scripting turned off? ;) No. You can have a dynamic CSS animation with no JS. With JS, you can make these dynamic CSS animation interactive. I am going to write another email tonight to this mailing list to show by new domain and new demos. Stay tuned. Then you will understand what I'm talking about. It had nothing to do with zealotry. The truth is, CSS is not ideally suited to describing dynamic scenarios by itself: apart from the pseudo-classes, CSS cannot in of itself describe the situations it promises with many of these new properties. Here is a demo done with canvas. This is the demo using canvas. https://mozillademos.org/demos/flight-of-the-navigator/demo.html This is a video if your Graphic Cards does not support the above demo. https://demos.mozilla.org/en-US/screencast/flight-of-the-navigator At 5 minute an 37 seconds to 5 minute an 47 seconds (10 seconds period) you see the a spaceship move leftwards. This is possible with just CSS animation. No JS is required. Some of the other affects in this demo can be done with CSS animation with a few @keyframes. [snip] Here is one demo of mine where I hack in a box-shadow and then position it under another element (later in the source) that has a transparent background. I achieved what is forbidden by the CSS spec (a box-shadow seen through a semi transparent background of the element creating the shadow). [snip] Essentially I'm saying that for a developer to be able to produce this kind of stuff using nothing but HTML and styles is an impressive step forward, but there's no way an exacting designer would let this case study sway them from traditional methods. True. Nevertheless, the future is bright, and it's up to us to forge ahead. Seriously, I think CSS and CSS3 is wonderful. Amen to that. Regards, Barney Time to rock and roll. :-) -- Alan http://css-class.com/ Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo __ 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 - enter the matrix
Hello all, I have for years been smashing down barriers concerning CSS. This may have been on this mailing list or on www-style (CSS WG). I came into this realm of human endeavor just when CSS3 was starting to be implemented by Safari 2 or 3 (back in 2008). My early CSS was an attempt at creating depth of field with basic CSS2.1 or CSS3 (box-shadow was in CSS2). I started playing with CSS animations early this year. I did some basic demos that had things moving but I kept on seeing visions of virtual 3D space. This I find exciting since it breaks the notion that things can only be perceived as happening only on a 2D plane (x and y axis) with just depth of field to create an illusion of space by z-index or normal painting order. With CSS3 3D transforms and CSS3 animation one can create virtual 3D space my moving, scaling, skewing, rotating or translating things on the x, y and z axises (not indexes). There is also this marvelous aspect of CSS3 animation call perspective. Below is a link to my new demo. It works in Safari, iPad or iPhone. It uses CSS3, HTML, SVGs and one PNG. If you want it to be interactive, you must enable JS. Using the controls (the only part with JS), selecting random sideways movement buttons (left, center and right) and the jump buttons quickly can result in some amazing spinning. I could use pure CSS3 animations using @keyframes to do similar but I believe the fun is being able to interact with such a demo. Moving on, the demo. http://css-3d.org/enter-the-matrix.htm I will in future put demos of this nature on this domain. http://css-3d.org/ Enjoy and be inspired. I can only show you the door. You're the one that has to walk through it. :-) -- Alan http://css-class.com/ Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo __ 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 - enter the matrix
This is awesome! :-) On Sat, Apr 16, 2011 at 5:25 PM, Alan Gresley a...@css-class.com wrote: Hello all, I have for years been smashing down barriers concerning CSS. This may have been on this mailing list or on www-style (CSS WG). I came into this realm of human endeavor just when CSS3 was starting to be implemented by Safari 2 or 3 (back in 2008). My early CSS was an attempt at creating depth of field with basic CSS2.1 or CSS3 (box-shadow was in CSS2). I started playing with CSS animations early this year. I did some basic demos that had things moving but I kept on seeing visions of virtual 3D space. This I find exciting since it breaks the notion that things can only be perceived as happening only on a 2D plane (x and y axis) with just depth of field to create an illusion of space by z-index or normal painting order. With CSS3 3D transforms and CSS3 animation one can create virtual 3D space my moving, scaling, skewing, rotating or translating things on the x, y and z axises (not indexes). There is also this marvelous aspect of CSS3 animation call perspective. Below is a link to my new demo. It works in Safari, iPad or iPhone. It uses CSS3, HTML, SVGs and one PNG. If you want it to be interactive, you must enable JS. Using the controls (the only part with JS), selecting random sideways movement buttons (left, center and right) and the jump buttons quickly can result in some amazing spinning. I could use pure CSS3 animations using @keyframes to do similar but I believe the fun is being able to interact with such a demo. Moving on, the demo. http://css-3d.org/enter-the-matrix.htm I will in future put demos of this nature on this domain. http://css-3d.org/ Enjoy and be inspired. I can only show you the door. You're the one that has to walk through it. :-) -- Alan http://css-class.com/ Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo __ 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/ -- http://www.css-zibaldone.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] problem with overflow: visible under IE8 resizing the containing node
On 4/16/11 4:55 AM, Michael Adams wrote: On Saturday 16 April 2011 16:19, David Hucklesby wrote: [snip] Without a DOCTYPE, browsers are in quirks mode. Real browsers still obey CSS rules except for a couple of things like box sizing. All versions of IE will behave like IE 5.5 though. If you want to keep browsers in quirks mode, including IE 6 and 7, but want IE 8 and 9 to be as standard as they can be, add the X-UA-Compatible META element to the HEAD of your document, or configure your server. The XML prolog (XHTML), or an SGML comment (HTML) forces quirks mode as well if you wish to force IE6 only. True. But note that if you use the HTML5 DOCTYPE, a preceding comment puts IE 7 and 8 into quirks mode as well as 6. (Have not tried IE 9.) -- 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 - enter the matrix
On 4/16/11 8:58 AM, Gabriele Romanato wrote: This is awesome! :-) On Sat, Apr 16, 2011 at 5:25 PM, Alan Gresleya...@css-class.com wrote: http://css-3d.org/enter-the-matrix.htm I will in future put demos of this nature on this domain. http://css-3d.org/ I agree with Gabriele. It reminds me of time spent in the mid-1970s calculating matrix transforms to make 3d graphics on an HP plotting display -- quite an effort to recall high school math 25 years on! This is so-o-o-o much easier -- and runs so very much faster. :) asideYou can still practice your matrix algebra to make transforms in old Internet Explorer.../aside -- 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 - enter the matrix
At 1:25 AM +1000 4/17/11, Alan Gresley wrote: Moving on, the demo. http://css-3d.org/enter-the-matrix.htm Mondo kewl. Cheers, tedd -- --- 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/
