• Background Video

    Posted on jūlijs 23rd, 2015, 3:01 pm by admin

    <video autoplay loop poster="polina.jpg" id="bgvid">
    <source src="polina.webm" type="video/webm">
    <source src="polina.mp4" type="video/mp4">
    </video>

    video#bgvid {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(polina.jpg) no-repeat;
    background-size: cover;
    }

    @media screen and (max-device-width: 800px) {
    body { background: url(polina.jpg) #000 no-repeat center center fixed; }
    #bgvid { display: none; }
    }

    http://demosthenes.info/blog/777/Create-Fullscreen-HTML5-Page-Background-Video

    No comments css, html5, JS

  • Fixed Menu

    Posted on novembris 14th, 2014, 5:26 pm by admin

    var nav = jQuery('.secondary-navigation');
    jQuery(window).scroll(function () {
    if (jQuery(this).scrollTop() > 136) {
    nav.css("position","fixed");
    nav.css({"width":(jQuery('#header').width()+'px')}); //header compensation
    jQuery('#header').css("height","136px");
    } else {
    nav.css("position","");
    jQuery('#header').css("height","");
    }
    });

    No comments css, jQuery, Wordpress

  • Scrollable background

    Posted on novembris 7th, 2014, 4:40 pm by admin

    CSS
    html, body{
    height:100%;
    min-height:100%;
    margin:0;
    padding:0;
    }
    .bg{
    width:100%;
    height:100%;
    background: #fff url(..) no-repeat fixed 0 0;
    overflow:auto;
    }
    <div class="bg">
    < span >..< /span >
    </div>
    Javascript
    $('.bg').scroll(function() {
    var x = $(this).scrollTop();
    $(this).css('background-position', '0% ' + parseInt(-x / 10) + 'px');
    });

    Check working example at http://jsfiddle.net/Vbtts/
    Click this link for the full screen example: http://jsfiddle.net/Vbtts/embedded/result/

    No comments css, jQuery, Wordpress

  • CSS objekta 360 grādu pargriezšana

    Posted on februāris 20th, 2014, 1:34 pm by admin

    .rotate{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    overflow:hidden;
    }
    .rotate:hover
    {
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    }

    No comments css

  • twitter widget

    Posted on janvāris 22nd, 2014, 1:46 pm by admin

    $("iframe#twitter-widget-0").contents().find('head').append('<style>img.u-photo.avatar{display:none !important;}.header.h-card.p-author{padding-left:0;}</style>');

    i use the “waituntilexists.js” plugin to detect when the content is added to DOM instead of the setTimout(): https://gist.github.com/buu700/4200601

    $("iframe#twitter-widget-0").waitUntilExists(function(){
    $("iframe#twitter-widget-0").contents().find('head').append('<style>img.u-photo.avatar{display:none !important;}.header.h-card.p-author{padding-left:0;}</style>');
    });

    No comments css, jQuery, JS

  • CSS caurspīdīgs fons

    Posted on aprīlis 13th, 2012, 12:26 pm by admin

    .alpha80 {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(255, 255, 255) transparent;
    /* RGBa with 0.6 opacity */
    background: rgba(255, 255, 255, 0.8);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#c9ffffff, endColorstr=#c9ffffff);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#c9ffffff, endColorstr=#c9ffffff)";
    }

    No comments css

  • HTML CSS centrēšanas paņēmiens

    Posted on maijs 30th, 2011, 4:01 pm by admin

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    </head>
    <body style='top:0px;bottom:0px;padding:0px;margin:0px;width:100%;height:100%;position:absolute;'>
    <table width=100% height=100%><tr><td valign=middle align=center>

    your content here

    </td></tr></table>
    </body>
    </html>

    No comments css