css corner images with transparency

[Johannes Schaefer]

Hi!

How can we have transparent corner images for the forrest tabs?

The description on how to generate the corner images may be found
here:
  http://forrest.apache.org/docs_0_70/howto/howto-corner-images.html

But I don't know how to get "1{$backgroundColor}" to be transparent.
Any ideas?

Thanks
Johannes



--
User Interface Design GmbH * Teinacher Str. 38 * D-71634 Ludwigsburg
Fon [phone] * Fax  [phone]
Geschäftsstelle: User Interface Design GmbH * Lehrer-Götz-Weg 11 * D-81825 München
www.uidesign.de

Buch "User Interface Tuning" von Joachim Machate & Michael Burmester
www.user-interface-tuning.de

[Thorsten Scherler-2]

El jue, 02-03-2006 a las 16:24 +0100, Johannes Schaefer escribió:

> Hi!
>
> How can we have transparent corner images for the forrest tabs?
>
> The description on how to generate the corner images may be found
> here:
>   http://forrest.apache.org/docs_0_70/howto/howto-corner-images.html
>
> But I don't know how to get "1{$backgroundColor}" to be transparent.
> Any ideas?

well did you try "1{$backgroundColor}" = "1transparent"

If that is not working you need to find the color code of
transparent. ;-)

salu2
--
Thorsten Scherler
COO Spain
Wyona Inc.  -  Open Source Content Management  -  Apache Lenya
http://www.wyona.com                   http://lenya.apache.org
thorsten.scherler@...                thorsten@...

[Cyriaque Dupoirieux]

Thorsten Scherler a écrit :

> El jue, 02-03-2006 a las 16:24 +0100, Johannes Schaefer escribió:
>  
>> Hi!
>>
>> How can we have transparent corner images for the forrest tabs?
>>
>> The description on how to generate the corner images may be found
>> here:
>>   http://forrest.apache.org/docs_0_70/howto/howto-corner-images.html
>>
>> But I don't know how to get "1{$backgroundColor}" to be transparent.
>> Any ideas?
>>    
>
> well did you try "1{$backgroundColor}" = "1transparent"
>
> If that is not working you need to find the color code of
> transparent. ;-)
>  

In fact, the transparency is define (between 0 and 1) with the opacity
attribute of a SVG shape.
For instance - if I remember - opacity="1" means it is completly
transparent,
opacity=".3" means the shape is 30% transparent...

In our case, there is no argument to specify this in the call...

We have to work on this because this feature is very interesting indeed
:-)  !

Salutations,
Cyriaque,
> salu2
>  

[Johannes Schaefer]

Cyriaque Dupoirieux wrote:

> Thorsten Scherler a écrit :
>> El jue, 02-03-2006 a las 16:24 +0100, Johannes Schaefer escribió:
>>  
>>> Hi!
>>>
>>> How can we have transparent corner images for the forrest tabs?
>>>
>>> The description on how to generate the corner images may be found
>>> here:
>>>   http://forrest.apache.org/docs_0_70/howto/howto-corner-images.html
>>>
>>> But I don't know how to get "1{$backgroundColor}" to be transparent.
>>> Any ideas?
>>>    
>>
>> well did you try "1{$backgroundColor}" = "1transparent"
>>
>> If that is not working you need to find the color code of
>> transparent. ;-)
>>  
> In fact, the transparency is define (between 0 and 1) with the opacity
> attribute of a SVG shape.
> For instance - if I remember - opacity="1" means it is completly
> transparent,
> opacity=".3" means the shape is 30% transparent...
>
> In our case, there is no argument to specify this in the call...

I tried the following in corner-imports.svg.xslt for the bg-rect:
    <rect x="-1" y="-1" width="{$biggersize}"
     height="{$biggersize}" fill="black" opacity="0.5"/>

Opacity=0.0 (completely transparent) doesn't work, the problem is that
the box behind the tabs (or menu, ...) need to be covered by the
rounded corner. With some value for opacity this box shines through.

So, there's no chance to get transparent rounded corners in the
current implementation (my personal verdict) :-(

Johannes

>
> We have to work on this because this feature is very interesting indeed
> :-)  !
>
> Salutations,
> Cyriaque,
>> salu2
>>  
>


--
User Interface Design GmbH * Teinacher Str. 38 * D-71634 Ludwigsburg
Fon [phone] * Fax  [phone]
Geschäftsstelle: User Interface Design GmbH * Lehrer-Götz-Weg 11 * D-81825 München
www.uidesign.de

Buch "User Interface Tuning" von Joachim Machate & Michael Burmester
www.user-interface-tuning.de

[Johannes Schaefer]

Johannes Schaefer wrote:

> Cyriaque Dupoirieux wrote:
>> Thorsten Scherler a écrit :
>>> El jue, 02-03-2006 a las 16:24 +0100, Johannes Schaefer escribió:
>>>  
>>>> Hi!
>>>>
>>>> How can we have transparent corner images for the forrest tabs?
>>>>
>>>> The description on how to generate the corner images may be found
>>>> here:
>>>>   http://forrest.apache.org/docs_0_70/howto/howto-corner-images.html
>>>>
>>>> But I don't know how to get "1{$backgroundColor}" to be transparent.
>>>> Any ideas?
>>>>    
>>> well did you try "1{$backgroundColor}" = "1transparent"
>>>
>>> If that is not working you need to find the color code of
>>> transparent. ;-)
>>>  
>> In fact, the transparency is define (between 0 and 1) with the opacity
>> attribute of a SVG shape.
>> For instance - if I remember - opacity="1" means it is completly
>> transparent,
>> opacity=".3" means the shape is 30% transparent...
>>
>> In our case, there is no argument to specify this in the call...
>
> I tried the following in corner-imports.svg.xslt for the bg-rect:
>     <rect x="-1" y="-1" width="{$biggersize}"
>      height="{$biggersize}" fill="black" opacity="0.5"/>
>
> Opacity=0.0 (completely transparent) doesn't work, the problem is that
> the box behind the tabs (or menu, ...) need to be covered by the
> rounded corner. With some value for opacity this box shines through.
>
> So, there's no chance to get transparent rounded corners in the
> current implementation (my personal verdict) :-(

alternative implementations may consider
  http://pro.html.it/esempio/nifty/
  http://www.sovavsiti.cz/css/corners.html

js

>
> Johannes
>
>> We have to work on this because this feature is very interesting indeed
>> :-)  !
>>
>> Salutations,
>> Cyriaque,
>>> salu2
>>>  
>
>

--
User Interface Design GmbH * Teinacher Str. 38 * D-71634 Ludwigsburg
Fon [phone] * Fax  [phone]
Geschäftsstelle: User Interface Design GmbH * Lehrer-Götz-Weg 11 * D-81825 München
www.uidesign.de

Buch "User Interface Tuning" von Joachim Machate & Michael Burmester
www.user-interface-tuning.de

[Thorsten Scherler]

El jue, 02-03-2006 a las 17:04 +0100, Cyriaque Dupoirieux escribió:

> Thorsten Scherler a écrit :
> > El jue, 02-03-2006 a las 16:24 +0100, Johannes Schaefer escribió:
> >  
> >> Hi!
> >>
> >> How can we have transparent corner images for the forrest tabs?
> >>
> >> The description on how to generate the corner images may be found
> >> here:
> >>   http://forrest.apache.org/docs_0_70/howto/howto-corner-images.html
> >>
> >> But I don't know how to get "1{$backgroundColor}" to be transparent.
> >> Any ideas?
> >>    
> >
> > well did you try "1{$backgroundColor}" = "1transparent"
> >
> > If that is not working you need to find the color code of
> > transparent. ;-)
> >  
> In fact, the transparency is define (between 0 and 1) with the opacity
> attribute of a SVG shape.
> For instance - if I remember - opacity="1" means it is completly
> transparent,
> opacity=".3" means the shape is 30% transparent...
>
> In our case, there is no argument to specify this in the call...
>
> We have to work on this because this feature is very interesting indeed
> :-)  !

:)

Yeah, I will try to refactor the roundcorners svg stuff to a contract in
the dispatcher and then we can go nuts on it. ;-)

Imagine you just do your stuff in Inkscape and then add it as a
contract. :)

salu2
--
thorsten

"Together we stand, divided we fall!"
Hey you (Pink Floyd)

[Thorsten Scherler]

El jue, 02-03-2006 a las 17:40 +0100, Johannes Schaefer escribió:

> Cyriaque Dupoirieux wrote:
> > Thorsten Scherler a écrit :
> >> El jue, 02-03-2006 a las 16:24 +0100, Johannes Schaefer escribió:
> >>  
> >>> Hi!
> >>>
> >>> How can we have transparent corner images for the forrest tabs?
> >>>
> >>> The description on how to generate the corner images may be found
> >>> here:
> >>>   http://forrest.apache.org/docs_0_70/howto/howto-corner-images.html
> >>>
> >>> But I don't know how to get "1{$backgroundColor}" to be transparent.
> >>> Any ideas?
> >>>    
> >>
> >> well did you try "1{$backgroundColor}" = "1transparent"
> >>
> >> If that is not working you need to find the color code of
> >> transparent. ;-)
> >>  
> > In fact, the transparency is define (between 0 and 1) with the opacity
> > attribute of a SVG shape.
> > For instance - if I remember - opacity="1" means it is completly
> > transparent,
> > opacity=".3" means the shape is 30% transparent...
> >
> > In our case, there is no argument to specify this in the call...
>
> I tried the following in corner-imports.svg.xslt for the bg-rect:
>     <rect x="-1" y="-1" width="{$biggersize}"
>      height="{$biggersize}" fill="black" opacity="0.5"/>
>
> Opacity=0.0 (completely transparent) doesn't work, the problem is that
> the box behind the tabs (or menu, ...) need to be covered by the
> rounded corner. With some value for opacity this box shines through.
>
> So, there's no chance to get transparent rounded corners in the
> current implementation (my personal verdict) :-(

Like I wrote in the currently actual thread, it may not be possible
out-of-the-box but have you tried
<rect x="-1" y="-1" width="{$biggersize}"
     height="{$biggersize}" opacity="0.5"/>

*without* @fill!

salu2
--
thorsten

"Together we stand, divided we fall!"
Hey you (Pink Floyd)

[Johannes Schaefer]

Thorsten Scherler wrote:

> El jue, 02-03-2006 a las 17:40 +0100, Johannes Schaefer escribió:
>> Cyriaque Dupoirieux wrote:
>>> Thorsten Scherler a écrit :
>>>> El jue, 02-03-2006 a las 16:24 +0100, Johannes Schaefer escribió:
>>>>  
>>>>> Hi!
>>>>>
>>>>> How can we have transparent corner images for the forrest tabs?
>>>>>
>>>>> The description on how to generate the corner images may be found
>>>>> here:
>>>>>   http://forrest.apache.org/docs_0_70/howto/howto-corner-images.html
>>>>>
>>>>> But I don't know how to get "1{$backgroundColor}" to be transparent.
>>>>> Any ideas?
>>>>>    
>>>> well did you try "1{$backgroundColor}" = "1transparent"
>>>>
>>>> If that is not working you need to find the color code of
>>>> transparent. ;-)
>>>>  
>>> In fact, the transparency is define (between 0 and 1) with the opacity
>>> attribute of a SVG shape.
>>> For instance - if I remember - opacity="1" means it is completly
>>> transparent,
>>> opacity=".3" means the shape is 30% transparent...
>>>
>>> In our case, there is no argument to specify this in the call...
>> I tried the following in corner-imports.svg.xslt for the bg-rect:
>>     <rect x="-1" y="-1" width="{$biggersize}"
>>      height="{$biggersize}" fill="black" opacity="0.5"/>
>>
>> Opacity=0.0 (completely transparent) doesn't work, the problem is that
>> the box behind the tabs (or menu, ...) need to be covered by the
>> rounded corner. With some value for opacity this box shines through.
>>
>> So, there's no chance to get transparent rounded corners in the
>> current implementation (my personal verdict) :-(
>
> Like I wrote in the currently actual thread, it may not be possible
> out-of-the-box but have you tried
> <rect x="-1" y="-1" width="{$biggersize}"
>      height="{$biggersize}" opacity="0.5"/>
>
> *without* @fill!

I *got* them transparent but:
the box around the tab will shine through anyway.

>> Opacity=0.0 (completely transparent) doesn't work, the problem is that
>> the box behind the tabs (or menu, ...) need to be covered by the
>> rounded corner. With some value for opacity this box shines through.

To illustrate this:

  +------------+  +---------+
  | tab-label  |  |  tab2   |
--+            +---------------...

The "+" is where the rounded corners will cover the box
with an image in the background color. If you make them
transparent not the background will shine through but
the box. :-(

Johannes



>
> salu2


--
User Interface Design GmbH * Teinacher Str. 38 * D-71634 Ludwigsburg
Fon [phone] * Fax  [phone]
Geschäftsstelle: User Interface Design GmbH * Lehrer-Götz-Weg 11 * D-81825
München
www.uidesign.de

Buch "User Interface Tuning" von Joachim Machate & Michael Burmester
www.user-interface-tuning.de