Grow your CSS skills. Land your dream job.

New footer (CSS-Tricks)

  • # November 12, 2010 at 2:56 am

    I like the new roll overs! Great Job! i like how they come in on an angle.

    is that jQuery? or javascript?

    how would i go about learning that kind of stuff. please dont say W3schools.com. omg. im starting to hate that anwser. i can’t go abot learning it from there, i want to learn from real examples, and i like to take them apart and experiment like that, thats how i learn. like i think its more benificial for me this way instead of just seeing a




    anyone have anything bigger?

    # November 12, 2010 at 4:25 am

    Wow, lucky for you Chris just did a screencast explaining how that was done.

    There are plenty of places to learn from. Css-tricks is full of awesome content. Most of what I know comes from here.

    Rob
    # November 12, 2010 at 4:31 am

    Disclaimer: This is not a sponsored post.

    ;)

    # November 12, 2010 at 12:49 pm

    he had it just a rollover in the beginning !
    and now it slides up really nicely.

    i remember trying to duplicate it, but just couldn’t, so now i came back to it to try to look at it again and it was changed. but its really nice :)

    # November 12, 2010 at 1:26 pm

    are you sure you didn’t view it in different browsers? FF shows only a rollover…

    # November 20, 2010 at 2:58 am

    okay maybe haha. thanks

    # April 29, 2011 at 8:07 am

    hi …
    i saw this one many days ago and i like it.i was looking for a tutorial for it but i found the HTML 5 version here.so i decided to simulate this nice roll over effect for older browsers (even ie 6) with jquery and css. it is interesting.but i done it in almost 1 hours.
    if you knew a bit about css and JQuery , you can easily got this simple source code in your HTML page. here is the work…

    CSS :



    .container
    {
    background-color:#d9d3cf;
    width:90%;
    height:auto;
    padding:20px;
    margin:0px auto;
    display:table;
    }

    .container .box
    {
    width:300px;
    height:120px;
    padding:10px;
    background-color:#e6e2df;
    background-repeat:no-repeat;
    float:left;
    clear:none;
    margin:5px;
    cursor:pointer;
    color:#b2aaa4;
    }

    .container .box h1
    {
    font-size:20px;
    color:inherit;
    float:left;
    width:100%;
    clear:both;
    margin:0px;
    }

    .container .box .desc
    {
    width:70%;
    height:auto;
    color:inherit;
    font-size:12px;
    line-height:1.5em;
    }

    the css code is pretty straight-forward. we have a box that contains a heading (H1) and a text as description(div.desc).
    all of boxes contained in the main div called container.

    The markup :




    this is the main div we use to hold our boxes.and has a attribute called ImageSource that refers to loaction of our sprite file.



    WUFOO



    I wrote fot WUFOO Te Online From Building Service.
    WOFUU Takes te all the hard.crappy work out of
    building power full forms.


    each box contains a “altbg” and “altcolor” attributes that holds the alternative background color and foreground color respectively.
    and an image number that refers to order of image inside Image sprite(we got all of our images inside a single png file and we use this number to address the appropriate image using background position CSS role).

    the criteria for accessing our arbitrary image is setting background-position vertical value as follow(horizontal value always equals 0).

    imagenum * 160

    that “160” is height of a single image inside our sprite.

    and another things that are inside our box is a heading and a div containing description.

    for adding more boxes repeat this divs inside the container division.

    and finally the JQuery :



    $(function () {
    $(".container .box").each(function () {

    //load background image for each box;
    var path = $(this).parent().attr("ImageSource");
    var imgNum = parseInt($(this).attr("imagenum"));
    var maxX = parseInt($(this).css("width")) + parseInt($(this).css("padding-left")) + parseInt($(this).css("padding-right"));
    $(this).css("background-image", "url('" + path + "')");
    $(this).css("background-position", maxX + "px " + (imgNum - 1) * -160 + "px");

    $(this).hover(function () {
    ToggleBox($(this));
    ToggleImage($(this), "in");
    }
    ,
    function () {
    ToggleBox($(this));
    ToggleImage($(this), "out");
    }
    );
    });
    });

    function ToggleImage(box, option) {
    if (option == "in") {
    var imgNum = parseInt(box.attr("imagenum"));
    var maxX = parseInt(box.css("width")) + parseInt(box.css("padding-left")) + parseInt(box.css("padding-right"));
    box.stop().animate({"backgroundPosition": maxX - 150 * 80 / 100 + "px " + (imgNum - 1) * -160 + "px" });
    }
    else {
    var imgNum = parseInt(box.attr("imagenum"));
    var maxX = parseInt(box.css("width")) + parseInt(box.css("padding-left")) + parseInt(box.css("padding-right"));
    box.stop().animate({ "backgroundPosition": maxX + "px " + (imgNum - 1) * -160 + "px" });
    }
    }

    first of all i set the image source for each box by background-image
    role then i have set the appropriate vertical position value for each box depending the imagenum attribute.



    $(this).css("background-position", maxX + "px " + (imgNum - 1) * -160 + "px");

    note that i have set the horizontal position equals to width of the box + left padding + right padding(maxX) for hiding the background initially. and then in event i set the horizontal position to a value lower than box width , that makes the background appear.



    $(this).hover(function () {
    ToggleBox($(this));
    ToggleImage($(this), "in");
    }
    ,
    function () {
    ToggleBox($(this));
    ToggleImage($(this), "out");
    }
    );

    and here is the ToggleImage function:



    function ToggleImage(box, option) {
    if (option == "in") {
    var imgNum = parseInt(box.attr("imagenum"));
    var maxX = parseInt(box.css("width")) + parseInt(box.css("padding-left")) + parseInt(box.css("padding-right"));
    box.stop().animate({"backgroundPosition": maxX - 150 * 80 / 100 + "px " + (imgNum - 1) * -160 + "px" });
    }
    else {
    var imgNum = parseInt(box.attr("imagenum"));
    var maxX = parseInt(box.css("width")) + parseInt(box.css("padding-left")) + parseInt(box.css("padding-right"));
    box.stop().animate({ "backgroundPosition": maxX + "px " + (imgNum - 1) * -160 + "px" });
    }
    }

    we pass the box as the argument to this function and depending on option(“in” – “out”) its bring it into view or makes it disappear.
    we used the animate jquery function to give a smooth animation to background image.



    box.stop().animate({"backgroundPosition": maxX - 150 * 80 / 100 + "px " + (imgNum - 1) * -160 + "px" });

    when bringing into view the background.we bring it partially(80%).
    it means we decrease the left position by 80 percent of our box width(150).you can replace the “150” by a variable and giving it your arbitrary value.

    all is that….

    and you can grab the source from here:

    Code

    i hop this was useful.

    have a nice day.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".