Re: [css-d] Reflection effect

2011-04-16 Thread Gabriele Romanato 
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

2011-04-16 Thread Philippe Wittenbergh 

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] Reflection effect

2011-04-16 Thread Ingo Chao 
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

2011-04-16 Thread Philip Taylor (Webmaster, Ret'd) 



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

2011-04-16 Thread Alan Gresley 

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

2011-04-16 Thread Barney Carroll 
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

2011-04-16 Thread Barney Carroll 
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

2011-04-16 Thread tedd 

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/

Re: [css-d] Reflection effect

2011-04-15 Thread David Laakso 

On 4/15/11 12:44 PM, Gabriele Romanato wrote:

Again, what's the purpose of CSS3?

http://onwebdev.blogspot.com/2011/04/pure-css-reflection-effect.html





Fwiw, some captures...
http://www.browsercam.com/public.aspx?proj_id=549084
~d


--
http://chelseacreekstudio.com/
http://chelseacreekstudio.com/fa/

__
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

2011-04-15 Thread Gabriele Romanato 
thanks guys!
for IE9: -ms-transform: rotate(-180deg);
btw, I'm waiting for IE4Mac... :-)

On Fri, Apr 15, 2011 at 7:16 PM, David Laakso
da...@chelseacreekstudio.comwrote:

 On 4/15/11 12:44 PM, Gabriele Romanato wrote:

 Again, what's the purpose of CSS3?

 http://onwebdev.blogspot.com/2011/04/pure-css-reflection-effect.html




 Fwiw, some captures...
 http://www.browsercam.com/public.aspx?proj_id=549084
 ~d


 --
 http://chelseacreekstudio.com/
 http://chelseacreekstudio.com/fa/


 __
 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] Reflection effect

2011-04-15 Thread Charles Miller 

On Apr 15, 2011, at 12:16 PM, David Laakso wrote:

 Fwiw, some captures...
 http://www.browsercam.com/public.aspx?proj_id=549084
 ~d


Am I right that none of them look like a true reflection would look? That the 
bottom image is in no cases a vertical flip of the top image?

It challenges my mind to think of how these might be used. (Though if you 
reply that these are research results and not applied anything, I will shut up 
promptly.)

Offered not in criticism but in curiosity. 

Chuck M


__
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

2011-04-15 Thread Tim Climis 
Yeah... I was about to point out the same thing.  A 180 degree
rotation is not the same as a vertical reflection.  The e should be
below the e, not the s.

Really, to get the desired effect, you'd want transform: scaley(-1);
It works in webkit.  Haven't tried anything else.

---Tim

 -Original Message-
 From: css-d-boun...@lists.css-discuss.org [mailto:css-d-
 boun...@lists.css-discuss.org] On Behalf Of Charles Miller
 Sent: Friday, April 15, 2011 1:58 PM
 To: css-discuss discuss
 Subject: Re: [css-d] Reflection effect
 
 
 On Apr 15, 2011, at 12:16 PM, David Laakso wrote:
 
  Fwiw, some captures...
  http://www.browsercam.com/public.aspx?proj_id=549084
  ~d
 
 
 Am I right that none of them look like a true reflection would look?
 That the bottom image is in no cases a vertical flip of the top
image?
 
 It challenges my mind to think of how these might be used. (Though
 if you reply that these are research results and not applied
anything, I
 will shut up promptly.)
 
 Offered not in criticism but in curiosity.
 
 Chuck M
 
 
 __
 
 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] Reflection effect

2011-04-15 Thread Alan Gresley 

On 16/04/2011 4:16 AM, Tim Climis wrote:

Yeah... I was about to point out the same thing.  A 180 degree
rotation is not the same as a vertical reflection.  The e should be
below the e, not the s.

Really, to get the desired effect, you'd want transform: scaley(-1);
It works in webkit.  Haven't tried anything else.

---Tim



This is to simple. Sorry Gabriele. Try the below and the text is truely 
mirrored. Also you don't need another element.



!DOCTYPE html

style type=text/css

h1 {
text-align: center;
font-size: 200%;
font: normal 6em Impact, sans-serif;
position:relative;
line-height: 0.9;
color: #333;
}

h1::after {
-webkit-transform: rotateX(180deg);
left:0;
right:0;
top: 100%;
position:absolute;
content: 'Test';
color: #999;
opacity: 0.3;
}

/style

h1Test/h1



--
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

2011-04-15 Thread Kevin A. Cameron 
This raises an interesting question: the reflected text in HTML or CSS?

Arguments could be made both ways: In CSS is good as it is a visual flourish
(not content). In HTML is good as then it keeps the CSS generic/reusable.

Perhaps this is a good use of an inline style (for the
content:blahportion). Oh wait, you can't do an inline style for a
pseudo element, can
you...?

Kevin


On Fri, Apr 15, 2011 at 11:42 AM, Alan Gresley a...@css-class.com wrote:

 On 16/04/2011 4:16 AM, Tim Climis wrote:

 Yeah... I was about to point out the same thing.  A 180 degree
 rotation is not the same as a vertical reflection.  The e should be
 below the e, not the s.

 Really, to get the desired effect, you'd want transform: scaley(-1);
 It works in webkit.  Haven't tried anything else.

 ---Tim



 This is to simple. Sorry Gabriele. Try the below and the text is truely
 mirrored. Also you don't need another element.


 !DOCTYPE html

 style type=text/css

 h1 {
text-align: center;
font-size: 200%;
font: normal 6em Impact, sans-serif;
position:relative;
line-height: 0.9;
color: #333;
 }

 h1::after {
-webkit-transform: rotateX(180deg);
left:0;
right:0;
top: 100%;
position:absolute;
content: 'Test';
color: #999;
opacity: 0.3;
 }

 /style

 h1Test/h1



 --
 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-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/