Can CSS do this design?

HTML & CSS
1

Hi,can i ask does the CSS can do Tabs? or i mean can we make Tabs menu using css only?can you give me some idea on this please i want to make Tabs if this is possible in css.Thank you in advance.

2

Sure you can make tabs…well things that look like tabs in CSS.

3

Hi, Thank you for the reply,Okay i will try this…I will write again if i have doubt.

4

Here are a few I’ve bookmarked in the past:

http://blixt.org/articles/tabbed-navigation-using-css#section=step-3
http://blixt.org/media/a/1/tabs-hover/page1.html

http://unraveled.com/publications/css_tabs/
http://unraveled.com/publications/assets/css_tabs/index.html

http://clagnut.com/sandbox/csstabs/

5

Hi ralph, thank you for this examples…okay i will try to make one of this.Thank you again.

6

Hi ralph, i got problem on I.E8 my border-radius doesn’t work…but in chrome and firefox works properly.

here is the piece of my css…


.tab li a:link,
.tab li a:visited{
	text-decoration: none;
	display: block;
	color: #000;
	padding: 0.5em;
	background-color: #b8b8b8;
	-moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 3px;
	-webkit-border-radius: 3px 3px 0 0;
	-ms-border-radius: 3px 3px 0 0;
	 border-radius: 3px 3px 0 0;
	-moz-box-shadow: 0px -3px 2px 0px #888;
	-webkit-box-shadow: 0px 10px 2px 0px #888;
	 box-shadow: 0px -3px 2px 0px #888;
	
}
7

Border radius is new (CSS3) and doesn’t work in older browsers like IE8 and older. Just let those people get square corners. (Or, if you feel generous, use JavaScript for them: http://css3pie.com/ )

8

Hi ralph thank you for the reply…i am confuse i did not see some javascript the link that you give,…
i have question is this a css

background: linear-gradient(#EEFF99, #66EE33);

9

Read the page again. :stuck_out_tongue:

is this a css

Yes … But it’s CSS3, which is not supported by some browsers, so again, either use some JavaScript to fill the holes or use a background image.

10

Thank you so much ralph,okay i will try javascript or put some sprite image…:slight_smile:

Okay i will try to read the page again.:wink:

11

I really don’t see some javasscript in the pie.

12

Ha ha, o well. click the Download button on the right. On the right there are other links, like “documentation” where the scripts are explained.

13

Oh, I see …:lol: