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:"blah"portion). 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>
>
> <h1>Test</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/
