Tag Archives: css

Web

Sticky header with CSS and JavaScript

Before scroll:
sticky_header1

After scroll:
sticky_header2

To obtain of sticky header effect you can use next code snippet.

1. Add CSS styles:

.persist_header_container {
}

.persist_header {
    padding: 10px;
    background: yellow;
    z-index: 1;
}

.floating_header {
    position: fixed;
    top: 0;
    visibility: hidden;
    -webkit-box-shadow: 0px 2px 12px 0px rgba(50, 50, 50, 1);
    -moz-box-shadow: 0px 2px 12px 0px rgba(50, 50, 50, 1);
    box-shadow: 0px 2px 12px 0px rgba(50, 50, 50, 1);
}

2. Add JS code:

$(function() {
    $(".persist_header_container").each(function () {
        var header = $(".persist_header", this);
        header.before(header.clone())
              .css("width", header.width())
              .addClass("floating_header");
    });

    window.updateHeader = function () {
        $(".persist_header_container").each(function () {
            $(".floating_header", this)
                .css({"visibility": ($(window).scrollTop() > $(this).offset().top ? "visible" : "hidden")});
        });
    };

    $(window).scroll(function () {
        updateHeader();
    });
    updateHeader();
});

Download source code: sticky_header

Also,
http://www.cssreset.com/creating-fixed-headers-with-css/
http://css-tricks.com/persistent-headers/

Web

Set width and height to empty link A tag in HTML

link_empty
You are probably deal with link (A-tag) in HTML. But how we can set size if it is empty, i.e. with no content?
Here is example solution:

<!DOCTYPE html>
<html>
    <head>
        <style>
        a.link1, a.link2, a.link3 {display:block; 
            width: 100px; height: 100px;
            margin: 5px; float: left;}
        a.link1 {background-color: red;}
        a.link2 {background-color: green;}
        a.link3 {background-color: blue;}
        </style>
    </head>
    <body>
        <a href="#1"></a>
        <a href="#2"></a>
        <a href="#3"></a>
    </body>
</html>

As you can see, the key feature is adding display:block; to A-tag style.
Enjoy!

Web

Cross-platform css shadow

css-box-shadow
To use cross platform css shadow:

.shadow {
    -moz-box-shadow: 3px 3px 10px #000;
    -webkit-box-shadow: 3px 3px 10px #000;
    box-shadow: 3px 3px 10px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=135, Color='#000000');
}
Web

CSS column layout

equal-height-columns-problem
Cannot pass out away from this article. Just great info saved my time!
Thanx to author, http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Web

Horizontal and vertical align in CSS

To effectively align elements use:

TYPE here!!!

Thanx to http://stackoverflow.com/questions/5421334/vertical-and-horizontal-align-middle-and-center-with-css
Also, http://www.gtalbot.org/NvuSection/NvuWebDesignTips/HorizontalAlignment.html