Back To Top
Login
Register
Visit Us At TwitterVisit Us At YouTubeVisit Us At Facebook
KandiChat is in Beta Release. Try It Out
HomeHome  
  • UpdatesUpdates  
  • SearchSearch  
  • RegisterRegister  
  • Log inLog in  
  • July 2017
    MonTueWedThuFriSatSun
         12
    3456789
    10111213141516
    17181920212223
    24252627282930
    31      

    Calendar Calendar

    Search
     
     

    Display results as :
     


    Rechercher Advanced Search

    Shopmotion


    Who is online?
    In total there is 1 user online :: 0 Registered, 0 Hidden and 1 Guest

    None

    Most users ever online was 22 on June 26th 2013, 6:10 am
    RSS feeds


    Poll
    Top posting users this week


    View previous topic View next topic Go down  Message [Page 1 of 1]

    avatar

    Tutorial: Tab Menu

    DesignersSociety
    06/03/2013
    I thought I'd share my code for creating a tab menu that has a colored tab effect on hover. I'll also step you through easily customizing it. It includes gradients, transparency, and rounded borders. 
    You can either create your own cool style text/image to upload or just the plain text.

    Code:
    .mainmenu img{
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, rgba(200,200,200,0.5)), color-stop(1, rgba(0,0,0,0.5)));
            background:-moz-linear-gradient(top, rgba(200,200,200,0.5) 5%, rgba(0,0,0,0.5) 100%);
            background:-webkit-linear-gradient(top, rgba(200,200,200,0.5) 5%, rgba(0,0,0,0.5) 100%);
            background:-o-linear-gradient(top, rgba(200,200,200,0.5) 5%, rgba(0,0,0,0.5) 100%);
            background:-ms-linear-gradient(top, rgba(200,200,200,0.5) 5%, rgba(0,0,0,0.5) 100%);
            background:linear-gradient(to bottom, rgba(200,200,200,0.5) 5%, rgba(0,0,0,0.5) 100%); 
     
     -moz-border-radius-topright: 5px 5px;
    border-top-right-radius: 5px 5px;
      -moz-border-radius-topleft: 5px 5px;
    border-top-left-radius: 5px 5px;
      border: 1.5px rgba(0,0,0,0.15) solid;
      
    }

    .mainmenu img:hover {
     background-color:rgba(229,145,173,0.3);  
     
    }

    This is for the image version if you just use text then just remove "img" so that it says .mainmenu { and .mainmenu:hover {

    On the hover you can change the colored tabs using rgba. If you don't know this is red, green, blue, alpha(transparency) Here is a helpful place to get the rgb http://www.colorspire.com/rgb-color-wheel/

    Next you can remove transparency if you'd like by setting alpha to 1 on both parts of the mainmenu and hover. Here is the code for the mainmenu part
    Code:
     background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, rgba(200,200,200,1)), color-stop(1, rgba(0,0,0,1)));
            background:-moz-linear-gradient(top, rgba(200,200,200,1) 5%, rgba(0,0,0,1) 100%);
            background:-webkit-linear-gradient(top, rgba(200,200,200,1) 5%, rgba(0,0,0,1) 100%);
            background:-o-linear-gradient(top, rgba(200,200,200,1) 5%, rgba(0,0,0,1) 100%);
            background:-ms-linear-gradient(top, rgba(200,200,200,1) 5%, rgba(0,0,0,1) 100%);
            background:linear-gradient(to bottom, rgba(200,200,200,1) 5%, rgba(0,0,0,1) 100%); 

    Now to change gradient under .mainmenu { it works the same way with rgba. It is setup to work in multiple browsers so you'll have to change each line of the code. The first part is the top and the second is the bottom as such: (top, !top!rgba(200,200,200,0.1) 5%, !bottom!rgba(0,0,0,0.1) 100%);

    One last thing to cover is the tabs style. There is a border effect so that the tops are rounded and the bottom has corners. If you want completely rounded corners use this to replace the current code. 
    Code:
    -moz-border-radius: 5px 5px;
    border-radius: 5px 5px;
    You can change the #px, the higher the number the more rounded the corners will be. There is also a small border which you can change right below the border radius effect. You can change it to 0px if you'd like to remove it or change the color as rgba as well.

    Hope this helps everyone, here is an example: [You must be registered and logged in to see this link.]
    Share this post on: Excite BookmarksDiggRedditDel.icio.usGoogleLiveSlashdotNetscapeTechnoratiStumbleUponNewsvineFurlYahooSmarking

    avatar
    Also Mr.EasyBB could you move this to the right topic I wasn't sure where you would want this since it's a tutorial but not really by a mod or admin. Thanks Smile

    Post on June 3rd 2013, 7:28 pm by DesignersSociety

    avatar
    This forum only has Admin's both Easy and myself there are no Mods, we as Admin's do the moderating, but I'll let Easy move this where he thinks is the appropriate place as he handles the tuts more than I do.

    Thanks for the contribution.. Smile

    Post on June 4th 2013, 6:03 am by runawayhorses

    avatar
    Has been moved to the ForuMotion Tutorials. Thank you, we appreciate your contribution! I'll be adding some points to your account for taking the initiative to participate in this website and its tutorials! Added (100pts)

    Post on June 4th 2013, 5:11 pm by Mr.EasyBB

    avatar
    Oh it's no problem I pretty much enjoy writing them just for fun Ill do more when I get chances Smile

    Post on June 5th 2013, 12:01 am by DesignersSociety

    avatar
    Ok we've made a specific spot for them. Either you can go to the right and click the Submit A Tut, or go to the menu and go to Tutorials, and click Member Submitted. Wink Then once accepted they will be placed in the correct locations

    Post on June 5th 2013, 12:08 am by Mr.EasyBB

    avatar
    Ooo I love that feature makes me wanna make even more!

    Post on June 5th 2013, 12:35 am by DesignersSociety

    Post  by Sponsored content

    View previous topic View next topic Back to top  Message [Page 1 of 1]