We use cookies to help make our site work properly and to analyze how our site is used. Some are optional, but none contain your personal information, and we don't use any for ads. You can view our cookies policy, manage your cookie preferences, or consent and dismiss this banner by clicking agree:

Agree
ExpressionEngine CMS
Open, Free, Amazing

Thread

This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.

The active forums are here.

Question about design for www.codeigniter.com

November 13, 2007 10:16pm

Subscribe [2]

  • #1 / Nov 13, 2007 10:16pm

    stevefink

    136 posts

    Hey guys,

    I’m always loved the approach taken for designing code igniter’s web page. Expression Engine does an excellent job as well. Kudos to whoever put that together.

    I’m curious if anyone would be kind enough to share how to get the effect of the tabs on the front of the page. When you mouseover, it appears as if the tabs are almost translucent / transparent…  I’m not sure if that’s simple imagery, or just cleverly crafted CSS?

    I’m more of a back-end developer who’s recently venturing into the world of front-end styling/design, so I’m very curious to how it’s done for my own sake of mind.

    Thanks a lot.. 😊  oh btw.. the same effect is used on facebook as well..

    - sf

  • #2 / Nov 13, 2007 10:27pm

    Armchair Samurai

    244 posts

     
    #siteNav li a:link, #siteNav li a:visited {
    background:transparent url(../images/design/site_nav_borders.gif) no-repeat scroll right bottom;
    color:#FFFFFF;
}
#siteNav li a:hover {
    background:#EE724A url(../images/design/site_nav_hover_bg.gif) repeat-x scroll left bottom;
    color:#FFFFFF;
}

  • #3 / Nov 13, 2007 10:27pm

    Michael Wales

    2070 posts

    A combination of CSS / imagery - let’s see if I can find some links for you:

    Google:// CSS Sliding Doors Technique
    Google:// CSS Unordered List Horizontal Menu
    CSS Showcase: Navigation Techniques
    CSS Drive: Horizontal Menu Designs

    Based on the drop shadow at the bottom of the tabs, I believe (without looking at the code) CI is using the sliding doors technique (or just swapping images). Basically, you define a background image for the a tag and a different background image for a:hover.

  • #4 / Nov 13, 2007 10:35pm

    stevefink

    136 posts

    Very cool Michael!

    BTW I left a comment on your blog the other day re: your authorization module. I’m going to give it a twirl when I put together a website for my fiance and myself.  Getting the wedding stuff going… 😊

    - sf

  • #5 / Nov 13, 2007 10:40pm

    thurting

    213 posts

    http://www.digital-web.com/articles/redesigning_the_expressionengine_site/

  • #6 / Nov 13, 2007 10:46pm

    stevefink

    136 posts

    Wow nice thurting. I’ll have to read that article after Nip/Tuck tonight. 😊

  • #7 / Nov 15, 2007 8:06am

    Derek Allard

    3168 posts

    Yeah, Jesse (the designer) did great work.

.(JavaScript must be enabled to view this email address)

ExpressionEngine News!

#eecms, #events, #releases

© Packet Tide, All Rights Reserved. Legal Notices

Username

Password

Forgot password?
or Register