Web designer tips 2014: February 2012

onclick change value of input type text field

Input type text field box shadow css

Div box shadow css

Social Horizontal Counter Script For Google+ Facebook Twitter

Use this Vertical Counter Script to your web site:
------------------------------------------------
<div id="social-nets">
<table width="100%" border="0" align="center">
<tr>
<td><div id="social-net-divs">

<div class="g-plusone" data-size="medium" data-href="http://nehemcp.blogspot.in/"></div>


<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script></div>
</td>

<td><div id="social-net-divs" style="width:76px;">

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://nehemcp.blogspot.com" data-send="false" data-layout="button_count" data-width="52" data-show-faces="false"></div>

</div>
</td>

<td><div id="social-net-divs">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://nehemcp.blogspot.in" data-via="nehemc">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</td>
</tr></table></div>

Social Vertical Counter Script For Google+ Facebook Twitter

Use this Vertical Counter Script to your web site:
-----------------------------------------

<style type="text/css">
#social-net { width:192px; height:67px; margin:0 auto; padding:4px 3px 0px 28px; border:1px #666 solid; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
#social-net-div { float:left; width:55px; height:63px; margin:0px; padding:0px; }
</style>

<div id="social-net">

<div id="social-net-div">

<g:plusone size="tall" href="http://nehemcp.blogspot.com/"></g:plusone>

<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>

<div id="social-net-div">

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://nehemcp.blogspot.com" data-send="false" data-layout="box_count" data-width="52" data-show-faces="false"></div>

</div>

<div id="social-net-div">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://nehemcp.blogspot.in" data-via="nehemc" data-lang="en" data-related="anywhereTheJavascriptAPI" data-count="vertical">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>

</div>

HTML Border Radius in css

Use This Sample Code:
------------------------

<style type="text/css">
#divbox1 {float:left; width:100px; height:100px; margin:0px 5px 0px 0px; border:1px solid #1E91D4; border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5px 5px; behavior: url(border-radius.htc); clear:right; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwQ82pEojd2YNZqIj7YH-9CwTo5cigszOCwp1Fex7W7wo9b7JNnkyq2c5wtvxXNsNj1OqgNefH6rJtq10Oen8ArV4NwELH-gyMOFIuAW-2tXblNBP86vYWlBdvmbCkLdeDlpSvouHs67cP/s320/menu-a.jpg) repeat;
}
#divbox2 {float:left; width:100px; height:100px; margin:0px 5px 5px 0px; border:1px solid #1E91D4; border-radius: 0px 0px 5px 10px; -moz-border-radius: 0px 0px 5px 10px; -webkit-border-radius: 0px 0px 5px 10px; behavior: url(border-radius.htc); clear:right; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwQ82pEojd2YNZqIj7YH-9CwTo5cigszOCwp1Fex7W7wo9b7JNnkyq2c5wtvxXNsNj1OqgNefH6rJtq10Oen8ArV4NwELH-gyMOFIuAW-2tXblNBP86vYWlBdvmbCkLdeDlpSvouHs67cP/s320/menu-a.jpg) repeat;
}
#divbox3 {float:left; width:100px; height:100px; margin:0px 5px 5px 0px; border:1px solid #1E91D4; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; behavior: url(border-radius.htc); clear:right; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwQ82pEojd2YNZqIj7YH-9CwTo5cigszOCwp1Fex7W7wo9b7JNnkyq2c5wtvxXNsNj1OqgNefH6rJtq10Oen8ArV4NwELH-gyMOFIuAW-2tXblNBP86vYWlBdvmbCkLdeDlpSvouHs67cP/s320/menu-a.jpg) repeat;
}
#divbox4 {float:left; width:100px; height:100px; margin:0px 5px 5px 0px; border:1px solid #1E91D4; border-radius:50px; -moz-border-radius:50px; -webkit-border-radius:50px; behavior: url(border-radius.htc); clear:right; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwQ82pEojd2YNZqIj7YH-9CwTo5cigszOCwp1Fex7W7wo9b7JNnkyq2c5wtvxXNsNj1OqgNefH6rJtq10Oen8ArV4NwELH-gyMOFIuAW-2tXblNBP86vYWlBdvmbCkLdeDlpSvouHs67cP/s320/menu-a.jpg) repeat;
}
</style>
<br />
<div id="divbox1">
</div>
<div id="divbox2">
</div>
<div id="divbox3">
</div>
<div id="divbox4">
</div>

On Mouse Over Change Image

Popular Posts