Tab hover effect

Jayakumar 8/09/2011 , , ,

           
    

  • Account
    •

       
        

  • Auctions
    •

        
       

  • Information
    •

         

           


    #tabs {

    list-style: none outside none;
    margin:1px 0 0 10px;
       height: 37px;

    }

    #tabs li {

        background:url(../images/menubg.png) no-repeat scroll 0 -52px transparent;
        display: block;
        float: left;
          height: 37px;
        margin-right: 18px;
        position: relative;
       /* z-index: 1;*/
    }
    #tabs .current {
       background: url(../images/menubg.png) no-repeat scroll 0 -2px transparent;
    display: block;
    float: left;
       height: 37px;
    position: relative;
    }

    #tabs .current {
    z-index: 99;
    }
    #tabs li a {
    background: url(../images/menubg.png) no-repeat scroll right -257px transparent;
     
        color: #fff;
        display: block;
        font:bold 15px arial;
        text-shadow:1px 2px 4px #000000;
       height: 37px;
        line-height: 37px;
        margin-right: -39px;
       padding: 0px 46px 0 29px;
        text-align: center;
        text-decoration: none;
    }
    #tabs .current a {
      background: url("../images/menubg.png") no-repeat scroll right -206px transparent;
    color: #fff;
    display: block;
    font:bold 15px arial;
    text-shadow:1px 2px 4px #000000;
       height: 37px;
    line-height: 37px;
    margin-right: -39px;
    padding: 0px 46px 0 29px;
    text-align: center;
    text-decoration: none;
    }


    #tabs li:hover {
       background: url("../images/menubg.png") no-repeat scroll 0 -2px transparent;
    display: block;
    float: left;
       height: 37px;
    position: relative;
    }

    #tabs li a:hover {
      background: url("../images/menubg.png") no-repeat scroll right -206px transparent;
    color: #fff;
    display: block;
    font:bold 15px arial;
    text-shadow:1px 2px 4px #000000;
        height: 37px;
    line-height: 37px;
    margin-right: -39px;
    padding:0px 46px 0 29px;
    text-align: center;
    text-decoration: none;
    }

    Cross-Browser Canvas Demo

    Jayakumar 7/29/2011


    Demo showing the Canvas tag running in Firefox 3, Safari 3, and Internet Explorer 7. On IE the ExCanvas JavaScript shim is used.

    3D Slides Built With HTML5, CSS3, and SVG

    Jayakumar 7/29/2011


    Nonlinear slide deck I built that can zoom into and out of topics depending on audience built with HTML5, CSS3, and SVG

    Introduction to HTML 5

    Jayakumar 7/29/2011


    Are you interested in HTML 5 and what's coming down the pipeline but haven't had time to read any articles yet? I've put together an educational "Introduction to HTML 5" video that goes over many of the major aspects of this new standard, including:

    * Web vector graphics with the Canvas tag and Scalable Vector Graphics (SVG)
    * The Geolocation API
    * HTML 5 Video
    * The HTML 5 Database and Application Cache
    * Web workers

    The video is chock full of demos and sample source code.

    (Note to moderators: HTML 5 is a public open web standard. I'm helping to educate web developers and raise awareness of this open web standard).

    Best SEO Secret Tips

    Jayakumar 7/06/2011
    1 - Valid XHTML Code - Use Valid xhtml. Search engines prefer tidy houses. Use a markup validation service to ensure that your web pages comply with the latest W3C standards. Ideally, you should also consider using CSS style sheets to set up your web site design to cut down on the code vs. content ratio.

    2 - Meta Tags - Two parts of the meta tag deserve particular attention - the description meta tag and the title. The description meta tag is the information that users will see in the search engine results.
    Continue reading...
    Your main keyword should be the very first thing you put inside the title tag. Secondary keywords should follow. You should avoid using all capital letters. Insert title content here

    3 - Keywords Throughout Page Content - After you have carefully selected your keywords and keyword phrases you should be using them throughout the text on your pages. It is important for your main keywords to have the correct keyword density to rank well in Search Engines. The recommended keyword density is from 3% - 7%, anything above 10% looks allot like keyword stuffing. You should check keyword density after each text change.

    4 - Keywords in Image Alt Tags - It is important to include your keywords in these tags, however not just a spam type listing of all of all your keywords. Be as creative as possible here.

    5 - Use Heading Tags and Bold Text - Instead of just making a-bit of text bold and bigger use the

    and

    tags which get special attention from the search engines. Keyword specific bold text and bulleted list items are also favored by the search engines.

    6 - Use Internal Anchor Text Links - Search engine spiders still love links. Linking throughout your site with descriptive text allows search engines spiders to find and ultimately index your site easily.

    7 - Use an XML Site Map - Search engines love site maps! Create an xml site map to help search engines crawl your web site. Make sure you don't have any broken links.

    8 - Write Content for Humans, Not Just Search Engines - You will find that you do better with search engines if your text reads naturally and is written for human eyes.

    CSS: border-radius for FF ,Ghrome, IE9 , Opera , Safari

    Jayakumar 5/05/2011

    1. Definition and syntax for border-radius


    As with many CSS properties relating to margins, padding and borders, there are four individual properties - one for each corner of a box element - and one shorthand property. Each of the corner attributes will accept either one or two values. The border-radius property will accept up to two values in WebKit browsers and up to eight now in Firefox 3.5.

    CSS3 (Opera browser) Mozilla equivalent WebKit equivalent
    border-top-right-radius -moz-border-radius-topright -webkit-border-top-right-radius
    border-bottom-right-radius -moz-border-radius-bottomright -webkit-border-bottom-right-radius
    border-bottom-left-radius -moz-border-radius-bottomleft -webkit-border-bottom-left-radius
    border-top-left-radius -moz-border-radius-topleft -webkit-border-top-left-radius
    border-radius -moz-border-radius -webkit-border-radius

    At this time the CSS3 properties above do not work in Internet
    Explorer    . The 'Mozilla' versions however work perfectly well in
    Firefox and other Mozilla-based browsers and the 'WebKit' ones in Safari
    and Chrome.


    Each of the individual corner CSS3 properties take either one or two
    length values (generally 'px' or 'em' values). If a single value
    is supplied then that becomes the radius of a rounded corner. If two
    values are supplied then they become the horizontal and vertical radii
    for an elliptical corner.


    The Mozilla syntax before Firefox 3.5 only supported round (as
    opposed to elliptical) corners and adding a second value would result in
    a standard square corner.


    The border-radius property in WebKit accepts one or two
    values and uses them to style all four corners making a nice symmetric
    shape. The new Firefox syntax allows you to
    define four different round or elliptical corners. A slash has been
    introduced to separate the horizontal and vertical length
    settings.


    2. Examples using -moz-border-radius


    The following examples will only work if you're using Firefox or
    another Mozilla browser that supports -moz-border-radius
    properties.


    Example 1
    -moz-border-radius: 1em;

    Example 2
    -moz-border-radius-topright: 2em;
    -moz-border-radius-topleft: 2em;

    Example 3
    -moz-border-radius: 2em 0;

    Example 4
    -moz-border-radius: 3em 1em;

    The Mozilla properties used
    here do not conform to the standard (hence the -moz-
    prefix) and until Firefox 3.5 only supported round corners. In newer
    versions of Firefox elliptical corners are also possible.


    As some people have pointed out these properties can be used not just
    for 'boxes' but for many other HTML objects including form elements.


    For those of you still seeing square corners, here's a snapshot from
    Firefox
    showing the rounded corners effect:



    There are a number of tricky JavaScript solutions that allow
    border-radius and other CSS3 properties to be seen in Internet Explorer
    and other browsers - but the overheads don't really justify the
    results.



    3. Support for -webkit-border-radius in Safari (Webkit)


    The latest versions of Safari now support
    -webkit-border-radius. Previously only the 'nightly builds'
    contained this functionality In Opera the syntax for the corners is the
    same as in Safari, but the behaviour of border-radius with two
    values matches that of Firefox, as seen in Example #7 below:


    Example 5
    -webkit-border-radius: 1em;

    Example 6
    -webkit-border-top-right-radius: 24px;
    -webkit-border-top-left-radius: 24px;

    Example 7
    -webkit-border-radius: 24px 0;

    Example 8
    -webkit-border-radius: 36px 12px;

    Example 9
    -webkit-border-top-right-radius: 50px 30px;
    -webkit-border-bottom-right-radius: 50px 30px;

    For those of you still
    seeing square corners, below you can find asnapshot from WebKit showing
    the rounded corners effect. Note particularly the change in syntax and
    the effect of passing two values to -webkit-border-radius as
    compared to the -moz-border-radius example above.



    WebKit also has limited support for other CSS3 border properties such
    as: multiple backgrounds; border background images; and various advanced
    selectors (::select for example) making it a great test
    platform for forward-looking developers. Stay tuned to the Surfin'
    Safari blog linked below for the latest exciting developments.



    4. Support in other browsers


    Opera, and now Safari (Mac), will support border-radius
    properties without any prefix. Internet Explorer, at least up to
    version 8, has no support for the rounded corners css properties.



    5. Other special effects


    WebKit, Firefox and Opera now support a number of other CSS3
    features, including the following simple effects and transforms.
    Thankfully, unlike rounded corners, for the shadows and transforms there
    does seem to be agreement on a common syntax.


    -webkit-box-shadow


    Shadow Example
    -webkit-border-radius: 36px 12px;
    -moz-border-radius: 36px / 12px;
    -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);

    Clearly there are still some
    anti-aliasing problems, but for corners and gentle curves it can look
    pretty cool.


    Then there are various -webkit-tranform option that can be
    used to create all kinds of wierd and wonderful shapes:


    -webkit-transform: rotate()


    Rotate Example
    -webkit-border-radius: 36px 12px;
    -moz-border-radius: 36px / 12px;
    -webkit-transform: rotate(-5deg);

    -webkit-transform: skew()


    Skew Example
    -webkit-border-radius: 36px 12px;
    -moz-border-radius: 36px / 12px;
    -webkit-transform: skew(5deg,5deg);

    For the browser-impaired
    here is a screenshot from Safari showing the effect of these CSS rules.
    The same effects are now possible in Firefox, Opera and related
    browsers. Just replace -webkit with -moz or
    -o, except for border-radius and box-shadow
    where Opera uses no prefix.



    Also in Safari these and other transformations can be implemented as
    animations using just CSS effects
    triggered by hovering over an element - no JavaScript required.



    6. New short-hand properties


    The following syntax is now working in Firefox and Opera allowing you
    to specify not only matching elliptical corners, but also different
    elliptical corners in one shorthand property.


    Here we've recreated two of the WebKit examples above using the new
    syntax. You can see that the individual corner settings work exactly
    the same now in Firefox as in WebKit, but for the short-hand property
    you need to include a slash:


    Example 8
    -moz-border-radius: 36px / 12px;
    border-radius: 36px / 12px;
    Example 9
    -moz-border-radius-topright: 50px 30px;
    -moz-border-radius-bottomright: 50px 30px;

    And now to the scary part.
    Using the short-hand property, all valued before the slash apply to the
    horizontal radii and all values afterwards to the vertical. In this
    example we've created a hybrid of the previous two examples.


    Example 10
    -moz-border-radius: 36px 50px 50px 36px / 12px 30px 30px 12px
    border-radius: 36px 50px 50px 36px / 12px 30px 30px 12px

    Here you can see what these
    boxes look like in Firefox 3.5:



    Personally I'm not a big fan of these changes to the specification.
    It seems to be a bit a backside-covering for the Mozilla group so they
    can have all the new options without affecting anyone using their old
    syntax. If/when this is adopted anyone using the WebKit syntax (Example
    8), which conformed to the original Working Draft, will suddenly end up
    with wonky boxes (Example 4).



    7. Related Articles


    Different syntax for different rendering engines

    Jayakumar 4/20/2011

    Different syntax for different rendering engines

    Mozilla (Firefox, Flock, etc)

    Mozilla's syntax (more detail here) is like this:

    -moz-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>])

    The simplest way to declare a gradient is to just list a comma separated list of colors. That will start at the top and gradient to the bottom with equidistant color stops for each color. In the demo code above, we use a point and an angle (90deg) to it go bottom-to-top instead. For radial gradients: -moz-radial-gradient

    WebKit (Safari, Chrome, etc)

    WebKit's syntax (more detail here) for Chrome 1-9 and Safari 4-5 is like this:

    -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

    They have now dropped the old syntax and moved toward something simpler. As of Chrome 10 and Safari 5.1 it's now like this:

    background-image: -webkit-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]); /* Chrome 10+, Saf5.1+ */

    Opera

    As of Opera 11.10, Opera supports CSS3 gradients in the same format as Mozilla and the latest WebKit.

    background-image: -o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]); /* Opera 11.10+ */

    Trident (IE)

    Trident's syntax (not really CSS3... more detail here) is like this:

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";

    "filter" should work in IE6-IE8 (haven't tested IE9), but it's not "valid" code. "-ms-filter" is valid, but only works in IE8+.

    Unfortunately, we can't invite IE to the party! Using these filter properties does indeed work, and it would allow us to programmatically declare gradients which is cool. But, instead of using the filter first and the image as a fallback, declaring a background-image overrides the filter and it uses that. Since we definitely still need image fallbacks, we might as well not use this at all.

    "Stops"

    The WebKit and Mozilla syntax for gradients both incorporate "stops". A stop is an optional additional declaration that includes a point and a color. This means the gradient wont just start at one color and end at the other, it will fade to the stop color first, and that stop color will fade to the end color. More than one stop can also be used.

    Saving HTTP requests

    Using Firebug and looking in the Net tab to see all the resources used by the page, we can see the advantage.


    The above screenshot is Firefox 3.6. We can see that the gradient fallback images are NOT loaded, which saves an HTTP request.

    However using Firefox 3.5.8, the fallbacks are loaded.


    We don't save any HTTP Requests in olders version of Firefox (This is 3.5.8 on Vista). The gradient fallback images are still being loaded (and used).

    It gets a little more iffy in WebKit browsers.


    WebKit browsers WILL use the CSS3 property to render the gradient, but at the same time, still load the fallback images, so no HTTP requests are saved. The only advantage is the programatic declaration of color.

    UPDATE (August 9th, 2010)
    As of this date, Safari 5.0.1 is still loading the fallback images, but Chrome 6.0.472.25 dev now joins the party of browsers that (awesomely) don't load the fallback image.

    UPDATE (April 1st, 2011)
    Safari is at 5.0.4 and is still loading fallback images. Opera 11.10 does the right thing out of the gate by not loading fallbacks.

    Doing it by the numbers

    The speed gained by losing an HTTP request, to me, is the biggest advantage. The more I learn about web performance it seems to me keeping those down is the #1 way to improve page load time. However there is another advantage to using CSS3 gradients, and that is that these gradients are created programmatically through numbers. Need to adjust some colors? Just adjust some numbers. No need to bring a big image editing program into the picture. This makes maintaining the site easier, as well as opens up doors for adjusting values on-the-fly. I imagine JavaScript libraries will begin to get the ability to animate these values soon enough, which will be pretty darn cool.

    Ooooh Stretchy

    When using an image for a gradient, it is declared as a CSS background-image and then repeated (you can often get away with a 1px slice, which is very efficient, size wise). The result though is that a static portion of the background is gradientized, and any overflow to that is flat color. Sometimes that works perfectly. Sometimes though it would be cool if the gradient stretched the entire height or width of the box. That is another thing CSS3 gradients can possibly be useful for:

    So the big question is... is it really worth doing right now?

    My answer on March 2nd, 2010: I'm thinking it's pretty darn close. If the numeric representation is a big deal to you, then I say yes you should start using them. If the speed is the only reason you would, then just realize that the only browser that it will help in is Firefox 3.6+, so you might wanna wait a bit on that.

    My answer on April 1st, 2011: Pretty much yes, go for it, especially linear gradients. Linear gradients are more solid cross browser and browsers that don't support them are dropping in usage relatively quickly. Of course it depends on the exact use case, but typically a gradient is a visual nicety and thus a fallback of a solid color or image isn't such a big deal.

    Additional Resources


    Subscribe to: Posts ( Atom )

    Followers

    Translate

    JOIN THE TEAM