Dynamic CSS3 Tabs

[.InyaProduction 1083]

Im gonna show you how to make a opening/closing news tab like on this page:

http://nybu.inyaproduction.de

 

Lets say we got a css class named newstab.

.newstab{
        height: 50px;
        width: 200px;
        transition: 0.8s;
        overflow: hidden;
}

.newstab:hover{
        height: 300px;
        transition: 0.8s;
}

In this case your div with the class newstab would jump from 50px -> 300px height. The "transition: 0.8s" takes care that it wont like teleport but shifts to its real height.

The overflow: hidden; is therefore, that the text wont go over the borders of your div. It would be good to add a box-shadow to the top of each newstab so it will look way more realistic.

 

I think this solution is way better than using js cause its much more lightweight. The only negative thing:

IE users with deprecated browsers wont see the shift but it will still open but like i said at top like a teleport

 

Greets Inya

[Rumor 2548]

If they're using IE they don't deserve to see it

[Benjo 0]

 

If they're using IE they don't deserve to see it

 

Yes but nobody use IE or ? 

[.InyaProduction 1083]

Yes but nobody use IE or ? 

About 5% of the internet users still use an IE with version 8 or below...

[morfo2 31]

Thank you very much .InyaProduction!