[css-d] Expanding tabs effect

[Gabriele Romanato]

Hi!
Sometimes CSS is better than jQuery:

http://onwebdev.blogspot.com/2010/12/css-expanding-tabs-effect.html

HTH :-)

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 [cs...@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] Expanding tabs effect

[David Laakso]

On 12/23/10 12:14 PM, Gabriele Romanato wrote:


Sometimes CSS is better than jQuery:

http://onwebdev.blogspot.com/2010/12/css-expanding-tabs-effect.html



Santa,

Am I missing something or what-- demo link?

Scrooge
London


http://chelseacreekstudio.com/

__
css-discuss [cs...@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] Expanding tabs effect

[Lists]

Sometimes CSS is better than jQuery:

http://onwebdev.blogspot.com/2010/12/css-expanding-tabs-effect.html



El 23/12/2010, a las 18:28, David Laakso escribió

Santa,

Am I missing something or what-- demo link?

Scrooge
London



link is at the end of the text - green word 'here'.

Gabriele, that's useful, thanks. In Mozilla Mac, though, if you hover  
on the bottom edge you can cause the tab to flicker. Doesn't happen in  
Safari.


Hope this is useful, Peter H.
__
css-discuss [cs...@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] Expanding tabs effect

[Al Sparber]

On 12/23/2010 12:14 PM, Gabriele Romanato wrote:

Hi!
Sometimes CSS is better than jQuery:

http://onwebdev.blogspot.com/2010/12/css-expanding-tabs-effect.html

HTH :-)



Very nice and I'm sure a lot of folks will find it very useful. As for 
jQuery - it's the most misused, misunderstood, and abused script in the 
history of the internet :-)



--
Al Sparber - PVII
http://www.projectseven.com
Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/hgm
The Ultimate Web 2.0 Carousel
__
css-discuss [cs...@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] Expanding tabs effect

[David Laakso]

On 12/23/10 12:44 PM, Lists wrote:




Sometimes CSS is better than jQuery:

http://onwebdev.blogspot.com/2010/12/css-expanding-tabs-effect.html






link is at the end of the text - green word 'here'.




It must be nice to be young:-) .

macbook pro os x 10.4

Nice!
Safari/4.1.3
WebKit current nightly
Gecko/2.0.11

Flicker on hover [default browser].
Camino/2.0.6

FF/3.6.13 minimum font-size 16 [my default font-size for FF].
Red block approx 1px below red rule.

FF/3.6.13 minimum font-size 24.
Red block approx 2px below red rule.

Opera/11.0 minimum font-size 32.
Red block approx 4px below red rule.

Scrooge
London


--
http://chelseacreekstudio.com/

__
css-discuss [cs...@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] Expanding tabs effect

[Al Sparber]

On 12/23/2010 1:15 PM, Al Sparber wrote:

On 12/23/2010 12:14 PM, Gabriele Romanato wrote:

Hi!
Sometimes CSS is better than jQuery:

http://onwebdev.blogspot.com/2010/12/css-expanding-tabs-effect.html

HTH :-)



Very nice and I'm sure a lot of folks will find it very useful. As for
jQuery - it's the most misused, misunderstood, and abused script in the
history of the internet :-)



Something like this might work better - at least it does in Firefox, 
Opera 11, Chrome, and IE8



body {
margin: 0;
padding: 0;
font: 100% Arial, Helvetica, sans-serif;
background: #fff;
color: #333;
}
#nav-wrapper {
border-bottom: 1px solid orangered;
overflow: hidden;
}

#navigation {
font-size: inherit;
margin: 1em 0;
padding: 0 0 0 1em;
list-style: none;
}

#navigation li {
float: left;
height: 100%;
margin-right: 0.5em;
}

#navigation a {
height: 1.5em;
line-height: 1.5;
display: block;
padding: .5em 1em;
text-decoration: none;
background: #d40;
color: #fff;
font-weight: bold;
-moz-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
margin-top: 0.5em;
}

#navigation a:hover {
background: orange;
height: 2em;
line-height: 2;
margin-top: 0;  
}


Markup:


  
Tab 1
  

Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
  



--
Al Sparber - PVII
http://www.projectseven.com
Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/hgm
The Ultimate Web 2.0 Carousel
__
css-discuss [cs...@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] Expanding tabs effect

[Alan Gresley]

On 24/12/2010 4:14 AM, Gabriele Romanato wrote:

Hi!


Hello.


Sometimes CSS is better than jQuery:


You're just realizing that!


http://onwebdev.blogspot.com/2010/12/css-expanding-tabs-effect.html

HTH :-)


I would recommend that you use padding on the s instead of using 
line-height. Give the s as much work to size themselves and their 
ancestors. You don't have to use as much height also.


I thought I play around with some CSS3. Only seems to work in Safari 5. 
Possibly relating to syntax that may be changed.




It has both a hover-in transition combined with a hover-out transition.


--
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@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] Expanding tabs effect

[David Laakso]

On 12/23/10 8:13 PM, Alan Gresley wrote:

On 24/12/2010 4:14 AM, Gabriele Romanato wrote:

Hi!


Hello.


Sometimes CSS is better than jQuery:


You're just realizing that!


http://onwebdev.blogspot.com/2010/12/css-expanding-tabs-effect.html

HTH :-)


I would recommend that you use padding on the s instead of using 
line-height. Give the s as much work to size themselves and their 
ancestors. You don't have to use as much height also.


I thought I play around with some CSS3. Only seems to work in Safari 
5. Possibly relating to syntax that may be changed.




It has both a hover-in transition combined with a hover-out transition.





Alan,

mac os x 10.4

O.K.
FF/10.4.11 at both 16 and 24 minimum font-size
Opera/11.0 at both default [9] and 32 minimum font-size
Camino/2.0.6 [default]
Safari/4.1.3 [default] and current nightly WebKit [default] noticeable 
slower vertical expansion but o.k. nevertheless.

--
Scrooge
London

--
http://chelseacreekstudio.com/




__
css-discuss [cs...@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] Expanding tabs effect

[Philippe Wittenbergh]

On Dec 24, 2010, at 10:13 AM, Alan Gresley wrote:

> I would recommend that you use padding on the s instead of using 
> line-height. Give the s as much work to size themselves and their 
> ancestors. You don't have to use as much height also.
> 
> I thought I play around with some CSS3. Only seems to work in Safari 5. 
> Possibly relating to syntax that may be changed.

what browsers have you actually tested in ? The syntax hasn't changed for a 
while, and afaik is implemented uniformly across rendering engines (and your 
file misses hover-in transitions for all but WebKit).

> 
> 
> It has both a hover-in transition combined with a hover-out transition.

http://dev.l-c-n.com/_temp/tab_effect.html

Works in Opera 11, Safari 4 + & Chrome 6+, Firefox 4b (and maybe IE 9, but I 
can't test that). Older UA - anything older than those mentioned -  fall back 
on an abrupt  hover effect. As a bonus, I've made it working for keyboard users.

(I do think that a 0.6seconds transition is a little slow)

Philippe
---
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [cs...@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] Expanding tabs effect

[Alan Gresley]

On 24/12/2010 7:55 PM, Philippe Wittenbergh wrote:


On Dec 24, 2010, at 10:13 AM, Alan Gresley wrote:



I thought I play around with some CSS3. Only seems to work in
Safari 5. Possibly relating to syntax that may be changed.


what browsers have you actually tested in ? The syntax hasn't changed
for a while, and afaik is implemented uniformly across rendering
engines (and your file misses hover-in transitions for all but
WebKit).


I noted that the CSS has changed via the CSS WG list. I wasn't actually 
sure if I was actually using the correct syntax. The hover-in 
transitions was an after thought. The older syntax that FF 3.5 
implemented was one that failed my grasp to follow (partly used in my 
first successful transition affect [1]). The lasted effort is my second 
go at transitions. Yes, I may be in the position to learn.


 >> 


It has both a hover-in transition combined with a hover-out
transition.


http://dev.l-c-n.com/_temp/tab_effect.html

Works in Opera 11, Safari 4 +&  Chrome 6+, Firefox 4b (and maybe IE
9, but I can't test that). Older UA - anything older than those
mentioned -  fall back on an abrupt  hover effect. As a bonus, I've
made it working for keyboard users.

(I do think that a 0.6seconds transition is a little slow)

Philippe --- Philippe Wittenbergh http://l-c-n.com/


I agree that the 0.6seconds transition is a little slow but this is so 
authors can appreciate what is actually happening. It also helps me 
understand what is happening. I didn't think to check in Opera 11. Very 
nice seeing the affect for keyboards users.


The transition does not work in your demo in IE9. I do not dare download 
FF4b since my attempts in the pass has created conflicts between release 
and beta version of FF.


I have to revisit the transition spec and Implementer developers guide 
to clue up.




1. 

--
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@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] Expanding tabs effect

[Philippe Wittenbergh]

On Dec 24, 2010, at 11:32 PM, Alan Gresley wrote:

> On 24/12/2010 7:55 PM, Philippe Wittenbergh wrote:
>> 
>> what browsers have you actually tested in ? The syntax hasn't changed
>> for a while, and afaik is implemented uniformly across rendering
>> engines (and your file misses hover-in transitions for all but
>> WebKit).
> 
> I noted that the CSS has changed via the CSS WG list. I wasn't actually sure 
> if I was actually using the correct syntax. The hover-in transitions was an 
> after thought. The older syntax that FF 3.5 implemented was one that failed 
> my grasp to follow (partly used in my first successful transition affect 
> [1]). The lasted effort is my second go at transitions. Yes, I may be in the 
> position to learn.

Uh. Firefox 3.5 never supported css 2d transitions; that is something new in Fx 
4b - you may confuse it with css transforms.

https://developer.mozilla.org/en/CSS/CSS_transitions

> ...
> The transition does not work in your demo in IE9. I do not dare download FF4b 
> since my attempts in the pass has created conflicts between release and beta 
> version of FF.

I'm nor surprised, after the reviewing that release cod for IE 9. They don't 
support CSS transitions, only css 2d transforms.

http://msdn.microsoft.com/en-us/ie/ff468705.aspx

CSS 2d transforms would be my preferred way of doing the change in size 
nowadays, fwiw.



On Dec 24, 2010, at 6:55 PM, Barney Carroll wrote:

> I think I might be missing something (Chrome 8, FF 3.6.9, IE8)…
> 
> The effect people might use jQuery for, and you've achieved with CSS — is it
> the discovery of the :hover pseudo-class instead of Javascript mouse events,
> or the rounded corners (or something else)?

There is nothing particularly new in that demo, I've been using those tricks 
for a few years. The only thing Alan added in reply to Gabriele is the use of 
css transitions to give an impression of sliding in/out - something that so far 
required js to accomplish. And then I showed how to make it work on more than 
Webkit based browsers, and make it work for keyboard users.

Users of touch enabled devices won't see any effects though.

Philippe
---
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [cs...@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] Expanding tabs effect

[Alan Gresley]

On 25/12/2010 1:02 PM, Philippe Wittenbergh wrote:


On Dec 24, 2010, at 11:32 PM, Alan Gresley wrote:

[snip]

Uh. Firefox 3.5 never supported css 2d transitions; that is something
new in Fx 4b - you may confuse it with css transforms.

https://developer.mozilla.org/en/CSS/CSS_transitions


Ah, there is my answer, thank you Philippe.



... The transition does not work in your demo in IE9. I do not dare
download FF4b since my attempts in the pass has created conflicts
between release and beta version of FF.


I'm nor surprised, after the reviewing that release cod for IE 9.
They don't support CSS transitions, only css 2d transforms.

http://msdn.microsoft.com/en-us/ie/ff468705.aspx


Its seems that I have transforms and transitions slightly mixed up.



CSS 2d transforms would be my preferred way of doing the change in
size nowadays, fwiw.


Don't write of transitions yet. Please view in Safari 5 and Opera 11 (A 
check in FF 4b would be appreciated).






On Dec 24, 2010, at 6:55 PM, Barney Carroll wrote:


The effect people might use jQuery for, and you've achieved with
CSS — is it the discovery of the :hover pseudo-class instead of
Javascript mouse events, or the rounded corners (or something
else)?


There is nothing particularly new in that demo, I've been using those
tricks for a few years. The only thing Alan added in reply to
Gabriele is the use of css transitions to give an impression of
sliding in/out - something that so far required js to accomplish.


Precisely. CSS can in ways replace current uses of JavaScript. I just 
waited.



--
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@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/