SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,159
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Post Can CSS do this design?

    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. #2
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Sure you can make tabs...well things that look like tabs in CSS.
    https://duckduckgo.com/?q=css+tab+navigation
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  3. #3
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,159
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi, Thank you for the reply,Okay i will try this...I will write again if i have doubt.

  4. #4

  5. #5
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,159
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi ralph, thank you for this examples..okay i will try to make one of this.Thank you again.

  6. #6
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,159
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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..

    Code:
    .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. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,321
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    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. #8
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,159
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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/ )
    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. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,321
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jemz View Post
    i did not see some javascript the link that you give,...
    Read the page again.

    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. #10
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,159
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Read the page again.



    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.
    Thank you so much ralph,okay i will try javascript or put some sprite image...

    Okay i will try to read the page again.

  11. #11
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,159
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I really don't see some javasscript in the pie.

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,321
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jemz View Post
    I really don't see some javasscript in the pie.
    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. #13
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,159
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.

    Oh, I see ...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •