Blinking text CSS

Works on Firefox, Chrome, IE latest versions.

Check this link

.blink_me {
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;

    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@-moz-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

CSS Gradient

 .orangeGradientVertical {
      background: #FFE27C; /* Old browsers */
      background: -moz-linear-gradient(top, #FFE27C 0%, #ffd83b 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFE27C), color-stop(100%,#ffd83b)); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top, #FFE27C 0%,#ffd83b 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top, #FFE27C 0%,#ffd83b 100%); /* Opera11.10+ */
      background: -ms-linear-gradient(top, #FFE27C 0%,#ffd83b 100%); /* IE10+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFE27C', endColorstr='#ffd83b',GradientType=0 ); /* IE6-9 */
      background: linear-gradient(top, #FFE27C 0%,#ffd83b 100%); /* W3C */
    }

CSS Online Formatter

Check this out here

JQuery Popup Example

Example:

<style type="text/css">   
    
    div.menudivInactive { margin:0; padding:0;}    
    div.menudivInactive div.tt { width:140px; margin-left:320px; }    
    div.menudivInactive div.tl { background:none; }    
    div.menudivInactive div.tr { background:none; }    
    div.menudivInactive div.tm { background:url(images/img-request-tab-active-topmiddle.png) top left repeat-x; margin-right:7px; height:1px; line-height:1px; }    
    
    div.menudivInactive div.ml { border-left:#a4acb4 solid 1px; }    
    div.menudivInactive div.mr { background:none; }    
    div.menudivInactive div.mm { margin:0px; margin-right:7px; border-right:#a4acb4 solid 1px; border-bottom:none; padding:5px; padding-top:11px; cursor:pointer; background:url(images/img-request-tab-inactive-bg-gradient.png) #efefef top left repeat-x; }    
    
    div.menudiv { margin:0; padding:0; }    
    div.menudiv div.tt { width:140px; margin-left:320px; }    
    div.menudiv div.tl { background:url(images/img-request-tab-active-topleft.png) top left no-repeat; }    
    div.menudiv div.tr { background:url(images/img-request-tab-active-topright.png) top right no-repeat; }    
    div.menudiv div.tm { background:url(images/img-request-tab-active-topmiddle.png) top left repeat-x; height:7px; line-height:7px; margin-right:8px; margin-left:2px; }    
    
    div.menudiv div.ml { border-left:#a4acb4 solid 1px; }    
    div.menudiv div.mr { background: url(images/img-request-tab-active-extensionright.png) top right repeat-y; }    
    div.menudiv div.mm { margin-right:8px; background:none; background-color:#efefef; padding:5px; border:none; cursor:pointer; }    
    
    div.menudivContent { margin:0; padding:0;}    
    div.menudivContent div.tt { width:460px; }    
    div.menudivContent div.tl { background: url(images/img-request-tab-active-extensionright.png) top right repeat-y; }    
    div.menudivContent div.tr { margin-right:8px; background-color:#efefef; }    
    div.menudivContent div.tm { border: solid 1px #a4acb4; border-right:none; border-bottom:none; margin-right:131px; height:1px; line-height:1px; }    
    
    div.menudivContent div.ml { border: solid 1px #a4acb4; border-top:none; border-right:none; border-bottom:none; width:459px; }    
    div.menudivContent div.mr { background: url(images/img-request-tab-active-extensionright.png) top right repeat-y; }    
    div.menudivContent div.mm { background:url(images/img-request-box-active-bg-gradient.png) #FFFFFF top left repeat-x; margin-right:8px; padding:5px; padding-left:10px; padding-right:10px; height:300px; }    
    
    div.menudivContent div.bl { background: url(images/img-request-box-active-bottomleft.png) top left no-repeat; width:460px; }    
    div.menudivContent div.br { background:url(images/img-request-box-active-bottomright.png) top right no-repeat; }    
    div.menudivContent div.bm { background: url(images/img-request-box-active-bottommid.png)top left repeat-x; height:9px; line-height:9px; margin-right:8px; margin-left:7px; }    
    
    .gone { display:none; }    
</style>    
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript">   
    $(document).ready(function(){    
        $(".menudivContent").toggleClass("gone");    
        $(".menudivInactive .mm").click(function() {         
            openPouup();    
        })  
        
        //openPouup();    
    });    
    
    function openPouup(){    
        var menudivContent = $(".menudivContent").is(":hidden");    
        /*Pop In Effect    
        $(".menudivInactive").toggleClass("menudiv");    
        $(".menudivContent").toggleClass("gone");*/    
        
        /*Slide Down Effect*/    
        if(menudivContent) {    
            $(".menudivInactive").toggleClass("menudiv");    
            $(".menudivContent").slideDown("fast",function(){});    
        }    
        else    
            $(".menudivContent").slideUp("fast",function(){$(".menudivInactive").toggleClass("menudiv");});    
    }    
    
    /*function closePouup(){    
        var menudivContent = $(".menudivContent").is(":hidden");    
        if(!menudivContent)    
            $(".menudivContent").slideUp("fast",function(){$(".menudivInactive").toggleClass("menudiv");});    
    }*/    
</script>

<div class="menudivInactive">   
    <div class="tt">    
        <div class="tl">    
            <div class="tr">    
                <div class="tm"> </div>    
            </div>    
        </div>    
        <div class="ml">    
            <div class="mr">    
                <div class="mm" align="center"> Lorem IPSUM </div>    
            </div>    
        </div>    
    </div>    
</div>    
<div class="menudivContent">    
    <div class="tt">    
        <div class="tl">    
            <div class="tr">    
                <div class="tm"></div>    
            </div>    
        </div>    
    </div>    
    <div class="ml">    
        <div class="mr">    
            <div class="mm">    
                <p>Lorem Ipsum dolor ami aset fetrs psum dolor ami aset fetr psum dolor ami aset fetr aset fetrs psum dolor ami aset fetr psum d.</p>    
            </div>    
        </div>    
    </div>    
    <div class="bl">    
        <div class="br">    
            <div class="bm"> </div>    
        </div>    
    </div>    
</div>

How to create blogspot template css

See the following example:

<b:skin>   
<![CDATA[    

/*DATE*/   
div.date-outer h2 {    
    margin:10px;    
    font-size:13px;    
    background-color:#ffffff;    
}
/*MAIN POSTS*/   
div.date-outer div.date-posts div.post-outer {     
    margin-top:10px;    
    padding:0px;    
    border:solid 1px #b9b7a2;    
    border-top:solid 5px #b9b7a2;    
}    
div.date-outer div.date-posts div.post-outer div h3 {    
    background-color:#c4c1b2;    
    padding:10px;     
    padding-top:5px;    
    margin:0px;    
}    
div.date-outer div.date-posts div.post-outer div h3 a {    
    color:#ffffff;    
    text-decoration:none;    
}    
div.date-outer div.date-posts div.post-outer div h3 a:hover {    
    color:#fafafa;    
}    
div.date-outer div.date-posts div.post-outer div {    
    background-color:#fafafa;     
}    
div.date-outer div.date-posts div.post-outer div div.post-body {    
    padding:5px;    
}    
div.date-outer div.date-posts div.post-outer div div.post-header, div.post-outer div div.post-footer {    
    padding:0px;    
    padding-left:10px;    
    padding-right:10px;    
}
div.date-outer div.date-posts div.post-outer-alternate {    
    border:solid 1px #ffa904;    
    border-top:solid 5px #ffa904;    
}    
div.date-outer div.date-posts div.post-outer-alternate div h3 {    
    background-color:#ffd83b;    
}    
div.date-outer div.date-posts div.post-outer-alternate div {    
    background-color:#ffffff;     
}    
/*COMMENTS*/    
div.date-outer div.date-posts div.post-outer div.comments{    
    padding:10px;     
    padding-top:0;    
}
div.date-outer div.date-posts div.post-outer div h4 {   
    background-color:#ffffff;    
    border:solid 1px #b9b7a2;    
    padding:10px;     
    padding-top:10px;    
    padding-left:5px;    
    padding-right:5px;    
    margin:0px;    
    font-size:12px;    
}    
div.date-outer div.date-posts div.post-outer div div#Blog1_comments-block-wrapper {    
    padding:10px;     
}

/*WIDGETS*/    
div.sidebar div.widget {    
    margin-bottom:10px;    
    padding:0px;    
    border:solid 1px #aba281;    
    border-top:solid 5px #aba281;    
}    
div.sidebar div.widget h2 {    
    background-color:#b9b496;    
    padding:10px;     
    padding-top:5px;    
    margin:0px;    
    font-size:12px;    
    color:#ffffff;    
}    
div.sidebar div.widget div.widget-content {    
    padding:10px;    
    background-color:#fafbed;     
}
div.sidebar div.widget-alternate {   
    border:solid 1px #4d453a;    
    border-top:solid 5px #4d453a;    
}    
div.sidebar div.widget-alternate h2 {    
    background-color:#5b5147;    
}    
div.sidebar div.widget-alternate div.widget-content {    
    background-color:#8d8777;     
}    
div.sidebar div.widget-alternate div.widget-content a {    
    color:#ffffff;     
    text-decoration:none;    
}    
div.sidebar div.widget-alternate div.widget-content a:hover {    
    color:#fafafa;     
    text-decoration:underline;    
}    
div.sidebar div.widget-alternate div.widget-content ul {    
    color:#ffffff;     
}
/*PROFILE IMAGE*/   
img.profile-img {    
    border:solid 5px #ffffff;    
    margin:10px;    
}    
/*POST IMGs*/    
.profile-datablock {    
    color:#ffffff;     
    text-transform:capitalize;    
}    
.profile-name-link, .profile-link {    
    font-weight:bold;    
}    
.title a {    
    color:#262626;    
    text-decoration:none;    
}
.text-counter-wrapper {   
    color:#ffffff;     
}
/*FOCUS OUTLINE*/   
* {    
    outline: none;    
    outline-width: 0;    
} 
button::-moz-focus-inner,    
input[type="reset"]::-moz-focus-inner,    
input[type="button"]::-moz-focus-inner,    
input[type="submit"]::-moz-focus-inner,    
input[type="file"] > input[type="button"]::-moz-focus-inner {    
    border: none;    
} 
/*remove outline from clicked links*/   
*|*:-moz-any-link:focus{outline-width:0!important}    
/*remove outline inputs*/    
input:focus::-moz-focus-inner{border-color:transparent!important}    
]]>    
</b:skin>