tag:blogger.com,1999:blog-42767631090879464802024-02-20T06:32:40.174-08:00Think Lalayesongshttp://www.blogger.com/profile/14466160119267287649noreply@blogger.comBlogger30125tag:blogger.com,1999:blog-4276763109087946480.post-76254125332105286282014-07-10T10:19:00.003-07:002014-07-10T10:38:34.976-07:00Online Css3 Box Shadow Generator <div dir="ltr" style="text-align: left;" trbidi="on">Css3 has made a revolution in web designing. Many properties of css3 are very useful to <a href="http://thinklala.blogspot.in/" title ="make website more attractive">make a website more attractive</a>. One is box shadow. Before css3 we need to add images for show shadow. But now it is possible with css3 . Here is <b>online free tool</b> for creating <b>box shadow</b> and generate a clean css. <br />
<br />
<link href="http://code.jquery.com/ui/1.8.0/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"></link><script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script><script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" type="text/javascript"></script><script src="http://bgrins.github.io/spectrum/spectrum.js" type="text/javascript"></script><link href="http://bgrins.github.io/spectrum/spectrum.css" rel="stylesheet" type="text/css"></link><br />
<style type="text/css">
.boxShaddow{
height:100px;
width:100px;
margin:auto;
border:1px solid #000;
}.sli {
margin:10px;
}
.parent {
height:150px;
text-align: center;
position: relative;
text-align: center;
margin-top:-40px;
}.slider-parent-div{
width: 500px;
font-family: arial;
border:1px solid #d3d3d3;
} .slider-parent-div h3,.view-thinkbutton-code{
background-color: #d3d3d3;
font-size: 13px;
padding: 10px;
margin-top: 0;
cursor: pointer;
font-family: arial;
}
.sli-sec-parent{
width: 49%;
display: inline-block;
vertical-align: top;
}
.but-sub-heading{
font-size: 13px;
color:#5E5E5E;
font-weight: bold;
padding-left: 10px;
}
.buttonStylePopup{
font-family: Consolas;
-moz-hyphens: none;
-moz-tab-size: 4;
color: #000000;
direction: ltr;
font-family: Consolas,Monaco,'Andale Mono',monospace;
text-align: left;
text-shadow: 0 1px #FFFFFF;
white-space: pre;
word-spacing: normal;
font-size: 12px;
display: none; }
.view-thinkboxShdaow-code {
background-color: #d3d3d3;
font-size: 13px;
padding: 10px;
margin-top: 0;
cursor: pointer;
font-family: arial;
width:300px;
text-align:center;
margin-left:50px;
}
</style><br />
<div class="parent"><div class="boxShaddow"></div></div><table><tbody>
<tr> <td v-align="top"><br />
<div style="margin-top: -11px;"><span class="but-col-sub-heading">Inset</span><br />
<input onchange="setInset(this.checked)" type="checkbox" /></div></td><td style="padding-left: 20px;" v-align="top"><br />
<span class="but-col-sub-heading">Shadow color</span><br />
<input class="basic" rel="previewColor" style="background: #fff;" type="text" value="ffffff" /><br />
</td> <td v-align="top"><br />
<h3 class="view-thinkboxShdaow-code" onclick="openBoxShdadowPopup();" style="text-align: center;">View Code</h3></td> </tr>
</tbody></table><br />
<div class="slider-parent-div"><h3 class="">Size </h3><div class="sli-sec-parent"><span class="but-sub-heading">Horizonatl size</span><br />
<div class="sli" id="hlengthSlider"></div></div><div class="sli-sec-parent"><span class="but-sub-heading">vertical Size </span><br />
<div class="sli" id="vlength"></div></div></div><br />
<div class="slider-parent-div"><h3 class="">Spread</h3><div class="sli-sec-parent"><span class="but-sub-heading">Blur Radius</span><br />
<div class="sli" id="blRad"></div></div><div class="sli-sec-parent"><span class="but-sub-heading">Spread </span><br />
<div class="sli" id="spread"></div></div><div class="buttonStylePopup" id="think-boxShadow-style-dialog" title="Basic dialog"></div></div><br />
<br />
<script>
var shadowArray=new Array();
shadowArray['hlength']=6;
shadowArray['inset']="";
shadowArray['vlength']=3;
shadowArray['blRad']=5;
shadowArray['spread']=4;
shadowArray['color']='#000';
function generateShadowHtml(){
var str=shadowArray['inset']+ " " +shadowArray['hlength']+"px " + shadowArray['vlength']+"px " + shadowArray['blRad']+"px " + shadowArray['spread']+"px " +shadowArray['color'];
$(".boxShaddow").css("-webkit-box-shadow",str);
$(".boxShaddow").css("-moz-box-shadow",str);
$(".boxShaddow").css("box-shadow",str);
var tempstr="-webkit-box-shadow:"+str+";<br />"
+"-moz-box-shadow:"+str+";<br />"
+"box-shadow:"+str+";<br />";
$("#think-boxShadow-style-dialog").html(tempstr);
}
$("#hlengthSlider").slider({
min: -100,
max: 100,
value:shadowArray['hlength'],
slide: function (event, ui) {
shadowArray['hlength']=ui.value;
generateShadowHtml();
}
});
$("#vlength").slider({
min: -100,
max: 100,
value:shadowArray['vlength'],
slide: function (event, ui) {
shadowArray['vlength']=ui.value;
generateShadowHtml();
}
});
$("#blRad").slider({
min: 0,
max: 100,
value:shadowArray['blRad'],
slide: function (event, ui) {
shadowArray['blRad']=ui.value;
generateShadowHtml();
}
});
$("#spread").slider({
min: 0,
max: 100,
value:shadowArray['spread'],
slide: function (event, ui) {
shadowArray['spread']=ui.value;
generateShadowHtml();
}
});
$(".basic").spectrum({
clickoutFiresChange:true,
change: function (color) {
},
move: function (color) {
color= color.toHexString();
shadowArray['color'] = color;
generateShadowHtml();
},
hide: function (color) {
color= color.toHexString();
shadowArray['color'] = color;
generateShadowHtml();
}
});
function setInset(val){
if(val==true){
shadowArray['inset']="inset";
generateShadowHtml();
}else{
shadowArray['inset']="";
generateShadowHtml();
}
}
function openBoxShdadowPopup(){
$( "#think-boxShadow-style-dialog").dialog( "open" );
}
$( "#think-boxShadow-style-dialog").dialog({
autoOpen: false,
maxWidth:400,
maxHeight: 200,
width: 400,
height: 200,
modal: true,
title: "Box Shadow",
});
generateShadowHtml();
</script><br />
</div>yesongshttp://www.blogger.com/profile/14466160119267287649noreply@blogger.com6tag:blogger.com,1999:blog-4276763109087946480.post-82906524872047067512014-04-19T03:22:00.000-07:002014-07-10T10:17:14.454-07:00Think Css3 Button Maker<div dir="ltr" style="text-align: left;" trbidi="on"><link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.8.0/themes/smoothness/jquery-ui.css"><script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script><script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script><script type="text/javascript" src="http://bgrins.github.io/spectrum/spectrum.js"></script><link rel="stylesheet" type="text/css" href="http://bgrins.github.io/spectrum/spectrum.css"><style type="text/css">
.sli {
margin:10px;
}
.parent {
height:100px;
padding:20px;
text-align: center;
position: relative;
text-align: center;
margin-top:-40px;
}
.button {
background-color:red;
display:inline-block;
cursor: pointer;
top: 20px;
text-decoration:none;
}
.slider-parent-div{
width: 500px;
font-family: arial;
border:1px solid #d3d3d3;
} .slider-parent-div h3,.view-thinkbutton-code{
background-color: #d3d3d3;
font-size: 13px;
padding: 10px;
margin-top: 0;
cursor: pointer;
font-family: arial;
}
.sli-sec-parent{
width: 49%;
display: inline-block;
vertical-align: top;
}
.but-sub-heading{
font-size: 13px;
color:#5E5E5E;
font-weight: bold;
padding-left: 10px;
}
.but-col-sub-heading{
font-size: 13px;
color:#5E5E5E;
font-weight: bold;
font-family: arial;
margin-bottom: 5px;
display: block;
}
.buttonStylePopup{
font-family: Consolas;
-moz-hyphens: none;
-moz-tab-size: 4;
color: #000000;
direction: ltr;
font-family: Consolas,Monaco,'Andale Mono',monospace;
text-align: left;
text-shadow: 0 1px #FFFFFF;
white-space: pre;
word-spacing: normal;
font-size: 12px;
display: none; }
.color-table{line-height:10px;} </style><br />
<style type="text/css" id="buttonStyle"></style><br />
<div class="parent"><div onclick="openStylePopup();" class="button">Button</div></div><h3 class="view-thinkbutton-code" style="text-align: center;" onclick="openStylePopup();">View Code</h3><table width="100%" class="color-table"><tr> <td><br />
<span class="but-col-sub-heading">preview </span><br />
<input type='text' class="basic" rel="previewColor" value="ffffff" style="background: #fff"/><br />
</td> <td><br />
<span class="but-col-sub-heading">Top </span><br />
<input type='text' class="basic" rel="bgTopColor" value="33bdef" style="background: #33bdef"/><br />
</td> <td><br />
<span class="but-col-sub-heading">Bottom </span><br />
<input type='text' class="basic" rel="bgBottomColor" value="019ad2" style="background: #019ad2"/><br />
</td> <td><br />
<span class="but-col-sub-heading">Border </span><br />
<input type='text' class="basic" rel="borderColor" value="057fd0" style="background: #057fd0"/><br />
</td> <td><br />
<span class="but-col-sub-heading">Text </span><br />
<input type='text' class="basic" rel="textColor" value="ffffff" style="background: #fff; " /><br />
</td> <td><br />
<span class="but-col-sub-heading">Text hover </span><br />
<input type='text' class="basic" rel="hoverTextColor" value="ffffff" style="background: #fff; "/> <br />
</td> </tr>
</table><br />
<!-- button size paretn div satart here --><br />
<div class="slider-parent-div"><h3 class="">Size </h3><div class="sli-sec-parent"><span class="but-sub-heading">Vertical </span><br />
<div id="paddingTop" class="sli"></div></div><div class="sli-sec-parent"><span class="but-sub-heading">Horizontal </span><br />
<div id="paddingLeft" class="sli"></div></div><br />
<br />
</div><!-- button size paretn div End here --><br />
<!-- Text paretn div satart here --><br />
<div class="slider-parent-div"><h3 class="">Text </h3><div class="sli-sec-parent"><span class="but-sub-heading" >Font Family </span><br />
<select onchange="setFontFamily(this.value)" style="margin-left: 10px; margin-top: 8px;"><br />
<option value="Arial">Arial</option><br />
<option value="Courier New">Courier New</option><br />
<option value="Georgia">Georgia</option><br />
<option value="Impact">Impact</option><br />
<option value="Times New Roman">Times New Roman</option><br />
<option value="Verdana">Verdana</option><br />
</select> <br />
</div><div class="sli-sec-parent"><span class="but-sub-heading">Text Size </span><br />
<div id="fontSizeSli" class="sli"></div></div><br />
<br />
</div><!-- Text paretn div End here --><br />
<div class="slider-parent-div"><h3 class="">Border </h3><div class="sli-sec-parent"><span class="but-sub-heading">Border Radius </span><br />
<div id="borderSlider" class="sli"></div></div><div class="sli-sec-parent"><span class="but-sub-heading">Border Size </span><br />
<div id="borderSize" class="sli"></div></div><br />
<br />
</div><div id="think-button-style-dialog" title="Basic dialog" class="buttonStylePopup"></div><br />
<script>
var tlButtonArray= new Array();
tlButtonArray['bgTopColor']="#33bdef";
tlButtonArray['bgBottomColor']="#019ad2";
tlButtonArray['textColor']="#fff";
tlButtonArray['borderColor']="#057fd0";
tlButtonArray['borderRadius']="3";
tlButtonArray['padding']="10";
tlButtonArray['paddingLeft']="20";
tlButtonArray['fontSize']="15";
tlButtonArray['borderSize']="1";
tlButtonArray['fontFamily']="Arial";
createCssForButton();
function setFontFamily(val){
tlButtonArray['fontFamily']=val;
createCssForButton();
}
var arrayVal="";
$(function () {
$("#paddingTop").slider({
min: 1,
max: 40,
value:tlButtonArray['padding'],
slide: function (event, ui) {
// $(".button").css("padding", ui.value + "px " + (ui.value * 2) + "px");
tlButtonArray['padding']=ui.value;
createCssForButton();
}
});
$("#paddingLeft").slider({
min: 1,
max: 80,
value:tlButtonArray['paddingLeft'],
slide: function (event, ui) {
tlButtonArray['paddingLeft']=ui.value;
createCssForButton();
}
});
$("#borderSlider").slider({
min: 1,
max: 40,
value:tlButtonArray['borderRadius'],
slide: function (event, ui) {
$(".button").css("border-radius", ui.value + "px ");
tlButtonArray['borderRadius']=ui.value;
createCssForButton();
}
});
$("#fontSizeSli").slider({
min: 10,
max: 30,
value:tlButtonArray['fontSize'],
slide: function (event, ui) {
$(".button").css("font-size", ui.value + "px ");
tlButtonArray['fontSize']=ui.value;
createCssForButton();
}
});
$("#borderSize").slider({
min: 1,
max: 10,
value:tlButtonArray['borderSize'],
slide: function (event, ui) {
tlButtonArray['borderSize']=ui.value;
createCssForButton();
}
});
});
$(".basic").spectrum({
clickoutFiresChange:true,
change: function (color) {
},
move: function (color) {
color= color.toHexString();
arrayVal = $(this).attr("rel");
tlButtonArray[arrayVal] = color;
createCssForButton();
},
hide: function (color) {
color= color.toHexString();
arrayVal = $(this).attr("rel");
tlButtonArray[arrayVal] = color;
createCssForButton();
}
});
function createCssForButton(){
var style=".button{background: "+tlButtonArray['bgTopColor']+";"
+" background: -webkit-gradient(linear, left top, left bottom, from("+tlButtonArray['bgTopColor']+"), to("+tlButtonArray['bgBottomColor']+"));"
+" background: -webkit-linear-gradient(top, "+tlButtonArray['bgTopColor']+", "+tlButtonArray['bgBottomColor']+");"
+" background: -moz-linear-gradient(top, "+tlButtonArray['bgTopColor']+", "+tlButtonArray['bgBottomColor']+");"
+" background: -ms-linear-gradient(top, "+tlButtonArray['bgTopColor']+", "+tlButtonArray['bgBottomColor']+");"
+" background: -o-linear-gradient(top, "+tlButtonArray['bgTopColor']+", "+tlButtonArray['bgBottomColor']+");"
+" color:"+tlButtonArray['textColor']+";"
+" padding:"+ tlButtonArray['padding']+"px "+tlButtonArray['paddingLeft']+"px ;"
+" border-radius:"+ tlButtonArray['borderRadius']+"px;"
+" font-size:"+tlButtonArray['fontSize']+"px;"
+" font-family:"+tlButtonArray['fontFamily']+";"
+" border: "+tlButtonArray['borderSize']+"px solid "+tlButtonArray['borderColor']+";"
+" text-decoration:none;"
+"}";
style=style+".button:hover{"
+" background: "+tlButtonArray['bgTopColor']+";"
+" background: -webkit-gradient(linear, left top, left bottom, from("+tlButtonArray['bgBottomColor']+"), to("+tlButtonArray['bgTopColor']+"));"
+" background: -webkit-linear-gradient(top, "+tlButtonArray['bgBottomColor']+", "+tlButtonArray['bgTopColor']+");"
+" background: -moz-linear-gradient(top, "+tlButtonArray['bgBottomColor']+", "+tlButtonArray['bgTopColor']+");"
+" background: -ms-linear-gradient(top, "+tlButtonArray['bgBottomColor']+", "+tlButtonArray['bgTopColor']+");"
+" background: -o-linear-gradient(top, "+tlButtonArray['bgBottomColor']+", "+tlButtonArray['bgTopColor']+");"
+"color:"+tlButtonArray['hoverTextColor']+";}";
style=style+".button:active{"
+"position:relative;top:1px;}"
$(".parent").css("background",tlButtonArray['previewColor']);
$("#buttonStyle").html(style);
style=style.replace(/;/g,";
");
style=style.replace(/}/g,"}
");
style=style.replace(/{/g,"{
");
$(".buttonStylePopup").html(style);
}
function openStylePopup(){
$( "#think-button-style-dialog").dialog( "open" );
}
$( "#think-button-style-dialog").dialog({
autoOpen: false,
maxWidth:600,
maxHeight: 500,
width: 600,
height: 500,
modal: true,
title: "Button Style",
});
</script><br />
<br />
</div>yesongshttp://www.blogger.com/profile/14466160119267287649noreply@blogger.com1tag:blogger.com,1999:blog-4276763109087946480.post-61292555961385746692013-11-11T10:57:00.000-08:002013-11-11T10:57:26.618-08:00Center Div with css 3 Different Techniques <div dir="ltr" style="text-align: left;" trbidi="on"><div class="custom_p custom_sub_head"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo-L_QBHhWolUIFWN_AAY7JX-1aJ8yZnAKnakW2FR7Co9J4A9ZXiP_2J7TIFz1KUx7HFoeQoRV2ueI8A5ai6tSbVFbXmaa-4OwUlyZpwzZmEv7fX7WTzDnZhF9yU8DZkG4zmo8Qzo0HwKm/s1600/center-image-div-with-css-3.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="center-image-div-with-css-3" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo-L_QBHhWolUIFWN_AAY7JX-1aJ8yZnAKnakW2FR7Co9J4A9ZXiP_2J7TIFz1KUx7HFoeQoRV2ueI8A5ai6tSbVFbXmaa-4OwUlyZpwzZmEv7fX7WTzDnZhF9yU8DZkG4zmo8Qzo0HwKm/s320/center-image-div-with-css-3.jpg" title="center-image-div-with-css-3" /></a></div>A Web designer has to take care of many things while <a href="http://thinklala.blogspot.in/">designing a Website</a>. One is how to center the content exactly horizontally and vertically. There are many techniques and some new properties of css3 available by which you can center the content. Following I have gave some example how to <b>center the content with css</b>. And the best part is these techniques will work in case of dynamic height and width . <br />
<br />
<a name='more'></a><br />
<br />
<h2>1)If you want to center the div horizontally. </h2>In the following I have give left and right margin auto. That will put the content in the horizontally center of its parent<br />
.center-hor{<br />
width:100px;<br />
height:100px;<br />
margin-left:auto;<br />
margin-right:auto;<br />
display:block<br />
}<br />
<br />
<div class="codepen" data-default-tab="result" data-height="195" data-slug-hash="jsofJ" data-theme-id="0" data-user="thinklala">See the Pen <a href="http://codepen.io/thinklala/pen/jsofJ">jsofJ</a> by Atinder pal singh (<a href="http://codepen.io/thinklala">@thinklala</a>) on <a href="http://codepen.io/">CodePen</a></div><script async="" src="//codepen.io/assets/embed/ei.js"></script><br />
<br />
<h2>2)Center the content horizontally and vertically </h2><br />
The following css class will put the content horizontally and vertically centered of its parent .The idea is first I set the top and left of content 50% from its parent that will put the top left corner of content at center of its parent and then I will give margin-top and margin-left half of its height and width. That will put the content exactly center.<br />
.center-hor-ver{<br />
width:100px;<br />
height:100px;<br />
display:block;<br />
position: absolute;<br />
left:50%;<br />
margin-left:-50px;<br />
top:50%;<br />
margin-top:-50px;<br />
}<br />
<div class="codepen" data-default-tab="result" data-height="195" data-slug-hash="kKFuh" data-theme-id="0" data-user="thinklala">See the Pen <a href="http://codepen.io/thinklala/pen/kKFuh">Center div horizontally and vertically </a> by Atinder pal singh (<a href="http://codepen.io/thinklala">@thinklala</a>) on <a href="http://codepen.io/">CodePen</a></div><script async="" src="//codepen.io/assets/embed/ei.js"></script><br />
<br />
<h2>3)Center the child div horizontally and vertically With css3 </h2>Here are some new properties of css 3 that will always put the child div in the center of parent div. in this we don’t need to give absolute position to any div. In the case of dynamic height width this is the best to use for centering the content.<br />
.Center-child-div{<br />
height: 300px;<br />
width: 300px;<br />
border: 1px solid #000000;<br />
-moz-box-align: center;<br />
-moz-box-direction: normal;<br />
-moz-box-orient: vertical;<br />
-moz-box-pack: center;<br />
-webkit-box-align: center;<br />
-webkit-box-direction: normal;<br />
-webkit-box-orient: vertical;<br />
-webkit-box-pack: center;<br />
align-items: center;<br />
display: inline-flex;<br />
justify-content: center;<br />
vertical-align: text-top;<br />
}<br />
<br />
<div class="codepen" data-default-tab="result" data-height="361" data-slug-hash="pbxvj" data-theme-id="0" data-user="thinklala">See the Pen <a href="http://codepen.io/thinklala/pen/pbxvj">centered child div with css</a> by Atinder pal singh (<a href="http://codepen.io/thinklala">@thinklala</a>) on <a href="http://codepen.io/">CodePen</a></div><script async="" src="//codepen.io/assets/embed/ei.js"></script><br />
<br />
</div></div>yesongshttp://www.blogger.com/profile/14466160119267287649noreply@blogger.com1tag:blogger.com,1999:blog-4276763109087946480.post-31055297096394755252013-06-28T02:32:00.002-07:002014-05-06T10:44:40.474-07:0025 Css 3 Online Tools for Website Developers<div dir="ltr" style="text-align: left;" trbidi="on"><div class="custom_p custom_link"><a href="http://www.thinklala.blogspot.in/search/label/css3">CSS3</a> has bring a revolution in <a href="http://www.thinklala.blogspot.in/">website designing</a>. Before if any one want to show some animation in website he/she has to use javascript or flash. And also there are lots of things like border radius, gradient , transform etc. Using javascript is difficult as compare to css. Now css3 made it very easy. We can add animations , Transformations And Gradients with css3 . <br />
<br />
If you don't know how to use these properties. There are several <b>online css3 tools</b> available that generate css. These tools are very easy to use .They provide a user interface. you just need to drag some handles or enter some values and select properties that you want to use. And they will generate css for you. You can generate Gradient,Animations, Buttons, Website menu and many other things by using that tools.Some of these css tools are as follows.<br />
<br />
<a href="http://css3.me/" target="_blank">Visit Site</a><br />
<h2>CSS3 GENERATOR</h2>You can Generate css for Border Radius,Shadow and Gradient. Very clean and interactive user interface provide by css3.me.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaKWM8sywYq54IZ43eLBynm6fntiuizdO82yN9rDkqMnBqAOvmLrDG14pHnqhoBChjFKN-fG49GxNA82YZTVX2k-kJ9OTJxcGhb3sQ963ZraVvUpGZutFNZR36njFmVVhPskWEu6dmN6EY/s1600/1-css-3-generator-online.jpg" imageanchor="1"><img alt="css-3-generator-online" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaKWM8sywYq54IZ43eLBynm6fntiuizdO82yN9rDkqMnBqAOvmLrDG14pHnqhoBChjFKN-fG49GxNA82YZTVX2k-kJ9OTJxcGhb3sQ963ZraVvUpGZutFNZR36njFmVVhPskWEu6dmN6EY/s1600/1-css-3-generator-online.jpg" title="css-3-generator-online" /></a><br />
<br />
<a name='more'></a><br />
<br />
<a href="http://thinklala.blogspot.in/2014/04/think-css3-button-maker.html">Visit Site</a><br />
<h2>Online css3 button maker</h2><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUCzPQpmOWbvjoFAIJkB2t6GWDFI3KTuXPpXG23pdP2YfG9FZqQ5aNSLLt8Qg5BEOm3YqFbxrcvg7s-BTT5GQMjwvqwhyphenhypheniJoz40shZp9IB2SyFXJW0Ier4qNx5pFdZVYtajJPItbKgB5G9/s1600/css3-button-maker.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUCzPQpmOWbvjoFAIJkB2t6GWDFI3KTuXPpXG23pdP2YfG9FZqQ5aNSLLt8Qg5BEOm3YqFbxrcvg7s-BTT5GQMjwvqwhyphenhypheniJoz40shZp9IB2SyFXJW0Ier4qNx5pFdZVYtajJPItbKgB5G9/s1600/css3-button-maker.jpg" alt="online css3 button maker" title="online css3 button maker"/></a><br />
<br />
<a href="http://www.css3maker.com/" target="_blank">Visit Site</a><br />
<h2>Css3maker</h2>Css3maker providing css for all new css3 properties like CSS3 Transform ,CSS Animation etc. This is very easy to use and generate clean css.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitfaJcLVoHYu5TAFUQ897aAQGd-ty2LN-I_cPqlurde0hufaeWgAU3iXlaIHcM43L4PohBx54aEW4wCEJaBz_ERJ8MCIg_Ua1LLoQeZPDxJhgr7lYIZno4XKLWzC6aM5Otrrd19JzR7Qxo/s1600/2-CSS3+Transitions-online.jpg" imageanchor="1"><img alt="CSS3-Transitions-online-genrator" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitfaJcLVoHYu5TAFUQ897aAQGd-ty2LN-I_cPqlurde0hufaeWgAU3iXlaIHcM43L4PohBx54aEW4wCEJaBz_ERJ8MCIg_Ua1LLoQeZPDxJhgr7lYIZno4XKLWzC6aM5Otrrd19JzR7Qxo/s1600/2-CSS3+Transitions-online.jpg" title="CSS3-Transitions-online-genrator" /></a><br />
<br />
<a href="http://css3generator.com/" target="_blank">Visit Site</a><br />
<h2>CSS3 Generator</h2>This tool also generate css for various css 3 properties. You can select css properties from dropdown and enter value to generate css. <br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSmJU1e5cgzhV9GqmaNT9appSpq5TOy41vsz7_Q6yhctY2s6GiMm-4QcfX83CE9Hdw2_t5jJlyfynH5FU4bZNkb3kdkRIv5sRcxRUrfm4Rfoe9qcDQkWWngrToMY6iaNcWXZj7ugC1WJph/s1600/3-css-3-animation-generator.jpg" imageanchor="1"><img alt="css-3-animation-generator" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSmJU1e5cgzhV9GqmaNT9appSpq5TOy41vsz7_Q6yhctY2s6GiMm-4QcfX83CE9Hdw2_t5jJlyfynH5FU4bZNkb3kdkRIv5sRcxRUrfm4Rfoe9qcDQkWWngrToMY6iaNcWXZj7ugC1WJph/s1600/3-css-3-animation-generator.jpg" /></a><br />
<br />
<a href="http://csscorners.com/" target="_blank">Visit Site</a><br />
<h2>CSS Corners</h2>you can use this tool to create a button. This will generate css for css3 gradient and border radius only.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvnXeXXae8SsqNWp2BjlGLkyHoqkpK5lSkjmK27FV0tvgwj378NNqdYUC8q3f2BF6hysPL_F40bE0rAi34o1K8d1KTNvrcLrWQ5p3-Y_XRvnkRzQaxqARNx1a63NsSHhmXbJH8akRRWykx/s1600/4-css-3-button-generator-online.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvnXeXXae8SsqNWp2BjlGLkyHoqkpK5lSkjmK27FV0tvgwj378NNqdYUC8q3f2BF6hysPL_F40bE0rAi34o1K8d1KTNvrcLrWQ5p3-Y_XRvnkRzQaxqARNx1a63NsSHhmXbJH8akRRWykx/s1600/4-css-3-button-generator-online.jpg" /></a><br />
<br />
<a href="http://www.bestcssbuttongenerator.com/" target="_blank">Visit Site</a><br />
<h2>Button X</h2>Really best button generator tool i have ever seen. Available with many button example and ready to use buttons and fully customizable. All types of button like 3d etc you can create with this tool.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5ZI3jtqCTU7e_SaJmaO7Cd3uF5wxOaLtShSjGblZE0wIjYkO789dExB6OYsU_Qrs8zhH4KDkG9arLpEJxJ3ECOz5u5SFFCe1WDfzHbCqR8Bw_rIH1-Jhz-9z0dgADPLiXrOWRs6i4F6el/s1600/5-css-3-online-button-generator-.jpg" imageanchor="1"><img alt="css-3-online-button-generator" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5ZI3jtqCTU7e_SaJmaO7Cd3uF5wxOaLtShSjGblZE0wIjYkO789dExB6OYsU_Qrs8zhH4KDkG9arLpEJxJ3ECOz5u5SFFCe1WDfzHbCqR8Bw_rIH1-Jhz-9z0dgADPLiXrOWRs6i4F6el/s1600/5-css-3-online-button-generator-.jpg" /></a><br />
<br />
<a href="http://www.css3-generator.de/transform.html" target="_blank">Visit Site</a><br />
<h2>CSS3-Generator</h2>This is a Multi css3 properties generator online tool. You can create 2-D transform ,3-D Transform ,Transition ,Shadow etc with this tool. Also tell that the properties are supported by which browser.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjigB0pHtPGWh-6EKaCYLyKwk2aI9j7IaaBYw2ud6r1cmLnWB9i6FALhD2JkRyhxNYM6n_nm0mTPlroK568rML43bxrYOgu9l1sB9OtzJnMJiD4PvlWcfVeGA7VNn9B4qS89Zqu68CEGYbj/s1600/6-CSS3-2D-Transforms-generator-.jpg" imageanchor="1"><img alt="CSS3-2D-Transforms-generator" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjigB0pHtPGWh-6EKaCYLyKwk2aI9j7IaaBYw2ud6r1cmLnWB9i6FALhD2JkRyhxNYM6n_nm0mTPlroK568rML43bxrYOgu9l1sB9OtzJnMJiD4PvlWcfVeGA7VNn9B4qS89Zqu68CEGYbj/s1600/6-CSS3-2D-Transforms-generator-.jpg" /></a><br />
<br />
<a href="http://css3please.com/" target="_blank">Visit Site</a><br />
<h2>Css3 Please</h2>Css 3 Properties defined with example and for every browser with comments.Also keyframes are defined in this tool. <br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf1rCzaa6vl64LA2wmUx6E_BsdDE1myn6QJ9M4oOAOGtabc0PeRPfYyT_wLLmIvYhrJ6rNSxG-H61lFQd6L0BRkbltmL_UXGNDCLU-T0GSaIYNKW0P6AdcO2CXlHDUQE5vw5T3RNq_jUT5/s1600/7-CSS3+Transitions-online-tool.jpg" imageanchor="1"><img alt="online-tool-for-css3-Transitions" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf1rCzaa6vl64LA2wmUx6E_BsdDE1myn6QJ9M4oOAOGtabc0PeRPfYyT_wLLmIvYhrJ6rNSxG-H61lFQd6L0BRkbltmL_UXGNDCLU-T0GSaIYNKW0P6AdcO2CXlHDUQE5vw5T3RNq_jUT5/s1600/7-CSS3+Transitions-online-tool.jpg" /></a><br />
<br />
<a href="http://border-image.com/" target="_blank">Visit Site</a><br />
Now with css 3 you can also use a image as a border of an element. This tool provide css for using image as border. You can define position, height,width of image and can draw an awesome border.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-N_MBQ9XY0g8xUFw3n4rAyS3uTwtVSDbtI7lWuisZC8YYvkQURYuCOdz-TAP0g3xYnu7R3Qx3BbOYIES2nmhgXHyLRLRvH_ocpz4S9MEuRM6Ewms8i2ij90vI6MVhX-Q9XsQ2PDXChf__/s1600/8-css-border-image-generator.jpg" imageanchor="1"><img alt="css3-border-image-generator" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-N_MBQ9XY0g8xUFw3n4rAyS3uTwtVSDbtI7lWuisZC8YYvkQURYuCOdz-TAP0g3xYnu7R3Qx3BbOYIES2nmhgXHyLRLRvH_ocpz4S9MEuRM6Ewms8i2ij90vI6MVhX-Q9XsQ2PDXChf__/s1600/8-css-border-image-generator.jpg" /></a><br />
<br />
<a href="http://css3gen.com/">Visit Site</a><br />
<h2>Css3Gen</h2>Again a multi tool collection having button generator,border radius,text shadow,box shadow,gradient. <br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiohqFxZRRxYsPt_PcMQ3rTstcnvBxyPf5ET9Iw3UZ9L88XkIMhPzD8Wd-TvndzhbQHABF8fi7KLJUUDRejA3b3XEYIEYZ9HKJE97KQX4h3JQTNi_XRFClvKl8mxPdnRo1s9o_5lSJoHsYJ/s1600/9-online-css-3-tool.jpg" imageanchor="1"><img alt="online-css-3-tool" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiohqFxZRRxYsPt_PcMQ3rTstcnvBxyPf5ET9Iw3UZ9L88XkIMhPzD8Wd-TvndzhbQHABF8fi7KLJUUDRejA3b3XEYIEYZ9HKJE97KQX4h3JQTNi_XRFClvKl8mxPdnRo1s9o_5lSJoHsYJ/s1600/9-online-css-3-tool.jpg" /></a><br />
<br />
<a href="http://www.cssmatic.com/" target="_blank">Visit Site</a><br />
<h2>Css Matic</h2>This tool generate css for border radius,gradient, box shadow. One thing is new this is also generate css for texture.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhncVqS7US2GSWJIaEsC1P9XeAW6Pu1kS_14bBknw43KAR7SuqU-85Jc5ukcAR1a8ImyMQuutHYiBu5lhDrh0qTqG8OhZr35Co8cvUac_U9UMKDJ0C6ROn9YgEFiU4iQL29yZ_HpwrQMjjP/s1600/10-online-css-3-generator-tool.jpg" imageanchor="1"><img alt="online-css3-generator" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhncVqS7US2GSWJIaEsC1P9XeAW6Pu1kS_14bBknw43KAR7SuqU-85Jc5ukcAR1a8ImyMQuutHYiBu5lhDrh0qTqG8OhZr35Co8cvUac_U9UMKDJ0C6ROn9YgEFiU4iQL29yZ_HpwrQMjjP/s1600/10-online-css-3-generator-tool.jpg" /></a><br />
<br />
<a href="http://css-tricks.com/examples/ButtonMaker/" target="_blank">Visit Site</a><br />
<h2>Css Tricks</h2>A very clean and easy to use tool that can be used while creating a button. Provide various handle to set different values for different attributes. <br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilsObwtScrUOc9s2iv5q8AHE6nTE9-SASY64z54U5b1yTPYQooRnWcAxNEPX1FOTaENo_a58hWkTKa-GGRQJi9GxZsUYmwwJVrKnH66Fvo2Exr5R9HphuM77n-uI4jHj0EtDteju_KsbxO/s1600/11-css3-button-maker.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilsObwtScrUOc9s2iv5q8AHE6nTE9-SASY64z54U5b1yTPYQooRnWcAxNEPX1FOTaENo_a58hWkTKa-GGRQJi9GxZsUYmwwJVrKnH66Fvo2Exr5R9HphuM77n-uI4jHj0EtDteju_KsbxO/s1600/11-css3-button-maker.jpg" /></a><br />
<br />
<a href="http://www.fontsquirrel.com/tools/webfont-generator" target="_blank">Visit Site</a><br />
<h2>Font Squirrel</h2>Best online font face generator. With css 3 You can use any type of font on your website. But the problem is that different browser support different font file. you have to upload a font file and this tool generate files for all browser and css for font face. <br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-9jYK_3xF8M7oQK_Wu9YKrlpQIil_cQDFtmCf3Y6_VfnEWmyIru0KTOLfAPYrnvORuCp-edRFsMUgBT2qFRGT8l4_1_etucKZxmyJcn7Pr5cqiHoS8AMvQHg7wSlyLGhPhV8v0kg_IDLs/s1600/12-online-font-face-generator.jpg" imageanchor="1"><img alt="font-face-generator" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-9jYK_3xF8M7oQK_Wu9YKrlpQIil_cQDFtmCf3Y6_VfnEWmyIru0KTOLfAPYrnvORuCp-edRFsMUgBT2qFRGT8l4_1_etucKZxmyJcn7Pr5cqiHoS8AMvQHg7wSlyLGhPhV8v0kg_IDLs/s1600/12-online-font-face-generator.jpg" /></a><br />
<br />
<a href="http://www.colorzilla.com/gradient-editor/" target="_blank">Visit Site</a><br />
<h2>Ultimate CSS Gradient Generator</h2>Really ultimate gradient generator having ready to use gradients and generate css that is supported by all browsers. <br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdwE7vT0kJXr3S9mQQi_hi98eLY9V_8M9Ge_20r2jFPcCfi0m4x6gCt_M4U1cIbls_zWDXz3phpY44d72MACyNumq3ELVYaA31vnQJgAaSzNfs3qJOgLAuyqfv4Rbyh0s4Oh2PWpKI0pqI/s1600/13-css3-gradient-generator.jpg" imageanchor="1"><img alt="css3-gradient-generator" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdwE7vT0kJXr3S9mQQi_hi98eLY9V_8M9Ge_20r2jFPcCfi0m4x6gCt_M4U1cIbls_zWDXz3phpY44d72MACyNumq3ELVYaA31vnQJgAaSzNfs3qJOgLAuyqfv4Rbyh0s4Oh2PWpKI0pqI/s1600/13-css3-gradient-generator.jpg" /></a><br />
<br />
<a href="http://www.3dcsstext.com/">Visit Site</a><br />
<h2>3D CSS Text</h2>This toll generate css that makes your text 3-D. you can change colors and directions etc.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA-19fPRQV3sRgDOv5-eIBlpw_t4GjO5bVt5CH9wgvDhyxvGrTUF8PXx-932A3uhyTgYF03Su9Z4MuYZppAEKny3YiPqH0k0EF9Gj2zqoLRHsOhOxhazPTrLjfMhw2jCzPEpxagJVea8uI/s1600/14-online-3d-text-generator.jpg" imageanchor="1"><img alt="online-3d-text-generator" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA-19fPRQV3sRgDOv5-eIBlpw_t4GjO5bVt5CH9wgvDhyxvGrTUF8PXx-932A3uhyTgYF03Su9Z4MuYZppAEKny3YiPqH0k0EF9Gj2zqoLRHsOhOxhazPTrLjfMhw2jCzPEpxagJVea8uI/s1600/14-online-3d-text-generator.jpg" /></a><br />
<br />
<a href="http://www.visualcsstools.com/#graphicPreviewContainer" target="_blank">Visit Site</a><br />
<h2>visual.css.tools</h2>An very clean and impressive gradient generator. This tool generate css for gradient and also it generate svg and cvs.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0UCj_pSA82RgfPnHNC9ufgRrBiP2mClyBsACGE-wXzAqD-ZZDtSR365OR2mCN_68LcbndRF2crIHfFKjGzMaUxS9M3wBk-jopxb4CgmXMtghxAOhXJrPfEpNXlk9UBBUK7Jgli3aomEs9/s1600/15-online-css-generator-tool.jpg" imageanchor="1"><img alt="online-css-generator-tool" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0UCj_pSA82RgfPnHNC9ufgRrBiP2mClyBsACGE-wXzAqD-ZZDtSR365OR2mCN_68LcbndRF2crIHfFKjGzMaUxS9M3wBk-jopxb4CgmXMtghxAOhXJrPfEpNXlk9UBBUK7Jgli3aomEs9/s1600/15-online-css-generator-tool.jpg" /></a><br />
<br />
<a href="http://layerstyles.org/builder.html" target="_blank">Visit Site</a><br />
<h2>Layer Style</h2>Speciality of this tool is that it generate inner box shadow. That gives really awesome effect. This tool will give you feel of working in adobe.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbdm_rDF2_Um0FXym9STInVP700EK7pk3FlgMOdeCdIZgQ7ENr3_bg7BXv3aK5bD1zcr9lu_zsHzL5VLMGU19t9UeNQ-hHDEDQSu6ZbgJtIgO4VHKk-UCxxyNRBXYGIP610LUHRKo0EBx9/s1600/16-css-3-text-shadow-generator.jpg" imageanchor="1"><img alt="css-3-text-shadow" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbdm_rDF2_Um0FXym9STInVP700EK7pk3FlgMOdeCdIZgQ7ENr3_bg7BXv3aK5bD1zcr9lu_zsHzL5VLMGU19t9UeNQ-hHDEDQSu6ZbgJtIgO4VHKk-UCxxyNRBXYGIP610LUHRKo0EBx9/s1600/16-css-3-text-shadow-generator.jpg" /></a><br />
<br />
<a href="http://www.cssportal.com/css3-text-shadow-generator/" target="_blank">Visit Site</a><br />
<h2>css Portal</h2>This site has multiple css tools all are very useful like text shadow generator,css sprite generator,css tooltip generator etc. <br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnRYCvZJfXdNb5UZc8kheIroDJpSdXBK-iAWVjT2n5ag3rAiBydu5bOTCrrn6OKnpENhhwQncJz4mAhF1lKg4u98aG3sRso0kIHHJOtdotbdCjDDJSD3AYhKVHejmf-Wlqnk-dL7bjm39B/s1600/17-online-css-generator-tool.jpg" imageanchor="1"><img alt="free-online-css-generator-tool" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnRYCvZJfXdNb5UZc8kheIroDJpSdXBK-iAWVjT2n5ag3rAiBydu5bOTCrrn6OKnpENhhwQncJz4mAhF1lKg4u98aG3sRso0kIHHJOtdotbdCjDDJSD3AYhKVHejmf-Wlqnk-dL7bjm39B/s1600/17-online-css-generator-tool.jpg" /></a><br />
<br />
<a href="http://csstypeset.com/" target="_blank">Visit Site</a><br />
<h2>css Typeset</h2>This is simple tool that generate css for text formatting like font-size font-family etc.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijOJZNfqfveTGRSIBymQzr3iTGHtAUVXmudYpil5IxuuYdOzlGryUZ4YsXj7qMPE7zZ9VeOzSkDy1UbPrGTllj9iDFaAnytm7Uijz5GpY0BqEMGfZmcHjFVYg02YZhwxpYPjKbZcrOiJCD/s1600/18-online-css-generator.jpg" imageanchor="1"><img alt="online-css3-generator" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijOJZNfqfveTGRSIBymQzr3iTGHtAUVXmudYpil5IxuuYdOzlGryUZ4YsXj7qMPE7zZ9VeOzSkDy1UbPrGTllj9iDFaAnytm7Uijz5GpY0BqEMGfZmcHjFVYg02YZhwxpYPjKbZcrOiJCD/s1600/18-online-css-generator.jpg" /></a><br />
<br />
<a href="http://csstxt.com/" target="_blank">Visit Site</a><br />
<h2>Css Txt</h2>This tool also generate css for text like wordspacing , letter spacing etc.These are useful for the beginner to css.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2i__8Z20mE0kt8ruD0HIrmOlZcimjbon2yof9yZhvkDick159VOB-iXbWxQgi_PPLpoVZw3_VGXpNu9grQddjq17v_ZAaS_UiY71TomhXYEqBhovslPfu-0slgnipehvN-AW8XwZQIFa1/s1600/19-css-text-generator.jpg" imageanchor="1"><img alt="css-text-generator" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2i__8Z20mE0kt8ruD0HIrmOlZcimjbon2yof9yZhvkDick159VOB-iXbWxQgi_PPLpoVZw3_VGXpNu9grQddjq17v_ZAaS_UiY71TomhXYEqBhovslPfu-0slgnipehvN-AW8XwZQIFa1/s1600/19-css-text-generator.jpg" /></a><br />
<br />
<a href="http://apps.eky.hk/css-triangle-generator/" target="_blank">Visit Site</a><br />
<h2>CSS Triangle Generator</h2>There are some css tricks. And only some people aware of these tricks. One is you can create a triangle by using border. This tool use that border property and create arrow. you can select direction , color and other options for arrow.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK3z2GrbLpIDTcRNuhJrcy-1wmrY-NanSFbnyw7d0tKFGNqPcCSVubEkMYwwpk-RJ4dZ3ugM2hN_WjarrLoqe9xK9TDaKrdwZyAQj71YE5nT98bT60gx42LQFhu8yY9S2rc0hXP6hCyL-A/s1600/20-css-arrow-triangle-generator.jpg" imageanchor="1"><img alt="css-arrow-triangle-generator" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK3z2GrbLpIDTcRNuhJrcy-1wmrY-NanSFbnyw7d0tKFGNqPcCSVubEkMYwwpk-RJ4dZ3ugM2hN_WjarrLoqe9xK9TDaKrdwZyAQj71YE5nT98bT60gx42LQFhu8yY9S2rc0hXP6hCyL-A/s1600/20-css-arrow-triangle-generator.jpg" /></a><br />
<br />
<a href="http://www.css3generator.in/" target="_blank">Visit Site</a><br />
<h2>CSS3 Generator</h2>This is again a multi css generator. You can generate css for various properties.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqqPza8ks03aLXKEKap23Ouyqibej6DP4b8coaBqz8BlMwnkheDaLJooLirmm2XdAGucYzQBCwWevZ9kKZ2IoeL3I4rNXvrVX9TBxSF2dI2XpDe5KIIZDFxQEYpZnDYgJztgP6krac7b9y/s1600/21-online-css-3-transform-generator.jpg" imageanchor="1"><img alt="online-css-3-transform-generator" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqqPza8ks03aLXKEKap23Ouyqibej6DP4b8coaBqz8BlMwnkheDaLJooLirmm2XdAGucYzQBCwWevZ9kKZ2IoeL3I4rNXvrVX9TBxSF2dI2XpDe5KIIZDFxQEYpZnDYgJztgP6krac7b9y/s1600/21-online-css-3-transform-generator.jpg" /></a><br />
<br />
<a href="http://buttonoptimizer.com/" target="_blank">Visit Site</a><br />
<h2>Button Optimizer</h2>By using this tool you can create awesome gradient buttons for your website. And if you want to use image of buttons this tool also provide option to download png image of button.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivBTFK-ZsAEyzMn-JU2pD85M_3kb6WUittmYma8hiKXS-iVzqpKsSV12qM6qgcpvTery4jCSQWZQcmjS87-uQSRTS8nByr5_44-jHZOCYJkIVaWvdvJwfJrnP4r2M_qkNslfTJKYT-UFgu/s1600/22-css-3-button-generator.jpg" imageanchor="1"><img alt="css-3-button-generator" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivBTFK-ZsAEyzMn-JU2pD85M_3kb6WUittmYma8hiKXS-iVzqpKsSV12qM6qgcpvTery4jCSQWZQcmjS87-uQSRTS8nByr5_44-jHZOCYJkIVaWvdvJwfJrnP4r2M_qkNslfTJKYT-UFgu/s1600/22-css-3-button-generator.jpg" /></a><br />
<br />
<a href="http:///" target="_blank">Visit Site</a><br />
<h2>CSS Gradient Background Maker</h2>By using this you can create gradient background for your website.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpmNXe4j5-uTQ_Cda-pDObVpRJYc8dTsNQT24AFOgg0vyGKfmhCz2T5_QbFcqx1ItABy-XqUtN6jfnr1CTIVc20C8rg6-XD_hZHe3sR3Lj7hQarBjKOJerQ0SMDkhytILpyAbJSLpjE6_u/s1600/23-css-3-gradient-generator-online.jpg" imageanchor="1"><img alt="css-3-gradient-generator" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpmNXe4j5-uTQ_Cda-pDObVpRJYc8dTsNQT24AFOgg0vyGKfmhCz2T5_QbFcqx1ItABy-XqUtN6jfnr1CTIVc20C8rg6-XD_hZHe3sR3Lj7hQarBjKOJerQ0SMDkhytILpyAbJSLpjE6_u/s1600/23-css-3-gradient-generator-online.jpg" /></a><br />
<br />
<a href="http://matthewlein.com/ceaser/" target="_blank">Visit Site</a><br />
<h2>Matthewlein</h2>This is very useful tool if you want to css 3 animation on your website. Because this provide lots of animations that you can use. To remind these all animation is very difficult task. So i suggest you to just remember this tool.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiINmJgbMK89ug__Oln_npro0fNNcYUZvT4mggrssEvvAUazyLDoFy7cYdoFH4SZNF7iZWoKrgzDITPkhpOP0-dU_gSs6zb3OmzmnM4QL7a4KeaLG4v2pn4bu0EBIA9Z4Ov-BpXdbm1HS6d/s1600/24-css-3-animation-generator.jpg" imageanchor="1"><img alt="css-3-animation-generator" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiINmJgbMK89ug__Oln_npro0fNNcYUZvT4mggrssEvvAUazyLDoFy7cYdoFH4SZNF7iZWoKrgzDITPkhpOP0-dU_gSs6zb3OmzmnM4QL7a4KeaLG4v2pn4bu0EBIA9Z4Ov-BpXdbm1HS6d/s1600/24-css-3-animation-generator.jpg" /></a><br />
<br />
<br />
<a href="http://www.patternify.com/" target="_blank">Visit Site</a><br />
<h2>Patternify</h2>This tool is different from above tools because this tool generate patterns . <br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKXZsHRVtd_REbA6Jm3Zyy-5yXGT7lf1pI_FjArz4IpVbAH6v6m0fs77mm5gmJ4Twap2nm1RzaIOb_WNG3otnC30zQajUKoHB6nOoNG5PRKOAUYoJj-yvvG2o3afn5f_mxFINRRqicn3AC/s1600/25-css-3-pattren-generator.jpg" imageanchor="1"><img alt="css-3-pattren-generator" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKXZsHRVtd_REbA6Jm3Zyy-5yXGT7lf1pI_FjArz4IpVbAH6v6m0fs77mm5gmJ4Twap2nm1RzaIOb_WNG3otnC30zQajUKoHB6nOoNG5PRKOAUYoJj-yvvG2o3afn5f_mxFINRRqicn3AC/s1600/25-css-3-pattren-generator.jpg" /></a><br />
<br />
<br />
<br />
</div></div>yesongshttp://www.blogger.com/profile/14466160119267287649noreply@blogger.com24tag:blogger.com,1999:blog-4276763109087946480.post-36974451401522425442013-06-12T02:09:00.001-07:002013-06-12T02:09:06.747-07:0025 Examples of Inspiring Contact us <div dir="ltr" style="text-align: left;" trbidi="on"><div class="custom_p custom_link">Everyone is <a href="http://thinklala.blogspot.com/">creating website</a>. Because everyone want to be connected with whole world. So every website has a contact us page by which people can send their queries and can communicate. I think this is very important page for a website. Because if a user want to say something about your website, he or she can do easily by using this page. So this page should be impressive and clean. User should not feel irritation to see this page. <br />
In this post we have a collection of 25 <b>inspiring contact us page</b>. These are very clearly designed page. You can get some idea about your contact us page after see these pages.<br />
<br />
In the following list pages have outstanding designs. <br />
<ul style="text-align: left;"><li>Designer takes the advantage of maps and creates colorful maps. And in some pages designer also use map as a background.</li>
<li>Some of the pages is white but some use bright colors to make their page colorful.</li>
<li>And also some used <b>jquery animations</b> in pages as well as they used large text box and large buttons in their pages.</li>
</ul><h2>List of Contact Us Pages</h2><a href="http://www.editoskastingas.lt/en/Contacts" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkQwhXzrI3Sb0Si6e6x4p4g9yIZuIvL7WQGBCxHtsIlmqG8rIkpPFvdZxmZg8opbs1wsuU08QkhsU9axNhGIB-t5Hv_01ilFcBBsFygLlrUjs9ccfIq6hhJpZkhd5h8fuVz4ed53F7nCn-/s1600/contact-us-1.jpg" imageanchor="1"><img alt="contact-us-page-1" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkQwhXzrI3Sb0Si6e6x4p4g9yIZuIvL7WQGBCxHtsIlmqG8rIkpPFvdZxmZg8opbs1wsuU08QkhsU9axNhGIB-t5Hv_01ilFcBBsFygLlrUjs9ccfIq6hhJpZkhd5h8fuVz4ed53F7nCn-/s1600/contact-us-1.jpg" title="example of contact us page" /></a><br />
<br />
<a href="http://www.adhamdannaway.com/contact" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3O1re-sjm1IMQwHmZyWwIkCQaMOSo9J33HoTfIe8smm-cL4p0LwIAyT8O_h_m8yaIAQZ8xvyc_lnHt_u2ox4utIALWBEQHGvCpGWTzWs1yYNr_vC7rj_ahuoDTRvOod-v9CqbLt3u1f-6/s1600/contact-us-2.jpg" imageanchor="1"><img alt="contact-us-page-2" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3O1re-sjm1IMQwHmZyWwIkCQaMOSo9J33HoTfIe8smm-cL4p0LwIAyT8O_h_m8yaIAQZ8xvyc_lnHt_u2ox4utIALWBEQHGvCpGWTzWs1yYNr_vC7rj_ahuoDTRvOod-v9CqbLt3u1f-6/s1600/contact-us-2.jpg" title="design of contact us page" /></a><br />
<br />
<a href="http://www.nyvltova.cz/kontakt" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb9GuGn4dgHCvJbajsTn3txrUT6wV8tMQOT8UnecIyy6xHycW_nGnAtpSft1VHguLYgK8AdO0HRysoWs9Ogl1nbzUU56qTOkv0MAVpGSMW_cvxQY3mtZ0vI3TGNMEKjWBs1usglLrxiZlo/s1600/contact-us-3.jpg" imageanchor="1"><img alt="contact-us-page-3" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb9GuGn4dgHCvJbajsTn3txrUT6wV8tMQOT8UnecIyy6xHycW_nGnAtpSft1VHguLYgK8AdO0HRysoWs9Ogl1nbzUU56qTOkv0MAVpGSMW_cvxQY3mtZ0vI3TGNMEKjWBs1usglLrxiZlo/s1600/contact-us-3.jpg" /></a><br />
<br />
<a href="http://www.valentinagallo.us/site/#/contact/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh751OKHKBcnVoQ9ppuN1CXaDO45NqJIPbBZvRy6WFseOILfb1MfbArwApyrOWJbmaPB9KMU330T1A3fgYDYv2R67LN28fIf2Iq1_yIzTC4OsreHNcXsPnSzc0m9NXO4t2pWjgFk-X8-FEb/s1600/contact-us-4.jpg" imageanchor="1"><img alt="contact-us-page-4" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh751OKHKBcnVoQ9ppuN1CXaDO45NqJIPbBZvRy6WFseOILfb1MfbArwApyrOWJbmaPB9KMU330T1A3fgYDYv2R67LN28fIf2Iq1_yIzTC4OsreHNcXsPnSzc0m9NXO4t2pWjgFk-X8-FEb/s1600/contact-us-4.jpg" title="contact us page example" /></a><br />
<br />
<a href="http://www.gravitatedesign.com/contact" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0cRDTJ94MHKRiL9NpPOpU4DVH5dd-uPs5ukIzTtS2m2wQ7fp7FR6q1Bh92f9FkQS9U_cfabtRI8-blGPxKA1k5ECwETGoMkO20BIjyG47VZ80xVPPKmepDHKlB4LLHxxbdIL6p5pEPyPJ/s1600/contact-us-5.jpg" imageanchor="1"><img alt="contact-us-page-5" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0cRDTJ94MHKRiL9NpPOpU4DVH5dd-uPs5ukIzTtS2m2wQ7fp7FR6q1Bh92f9FkQS9U_cfabtRI8-blGPxKA1k5ECwETGoMkO20BIjyG47VZ80xVPPKmepDHKlB4LLHxxbdIL6p5pEPyPJ/s1600/contact-us-5.jpg" /></a><br />
<br />
<a href="http://spigotdesign.com/contact/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUQsaYT570DMhBHh3Eth_RHgrKzLQiOEB4u0WzigHft1wYwbPfHH93l6jWuzqcp8WZIM8tVAo4Z4XAF2LkW0G639h2Qploryu6N2mkDzCf-lLiyZ4V3LGJVW3LkA2cwjUz-ZfWC3vIfwgl/s1600/contact-us-6.jpg" imageanchor="1"><img alt="contact-us-page-6" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUQsaYT570DMhBHh3Eth_RHgrKzLQiOEB4u0WzigHft1wYwbPfHH93l6jWuzqcp8WZIM8tVAo4Z4XAF2LkW0G639h2Qploryu6N2mkDzCf-lLiyZ4V3LGJVW3LkA2cwjUz-ZfWC3vIfwgl/s1600/contact-us-6.jpg" /></a><br />
<br />
<a href="http://www.langoor.com/get-in-touch/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7-5701DlCm0Dx518QrSW5jdbjq0g0aitOw-88QpWXN2i85oJ4hkOOyWgAXCE-OsMI0I-dRyvGQytyIEXhQNbe12-Rp5WtIuX_mEyGOpSfTD-oa-TJY_249qhpN2XrIXkfFoxqsnpJ0lBA/s1600/contact-us-7.jpg" imageanchor="1"><img alt="contact-us-page-7" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7-5701DlCm0Dx518QrSW5jdbjq0g0aitOw-88QpWXN2i85oJ4hkOOyWgAXCE-OsMI0I-dRyvGQytyIEXhQNbe12-Rp5WtIuX_mEyGOpSfTD-oa-TJY_249qhpN2XrIXkfFoxqsnpJ0lBA/s1600/contact-us-7.jpg" /></a><br />
<br />
<a href="http://en.ony.ru/contacts" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9LUsZHxeOC1pf1Yufij8S8VhR9XF2-ptQdGjk8ZqY_lUdZxbJMcrGwBIYLaLCo8Kwj36kUMyCMzX1tE3oAr8ANUrCYxCTfw47bfZ74G7i5dyknFhhlfAGOarWsQDX8KkkZBFLjBRfa08k/s1600/contact-us-8.jpg" imageanchor="1"><img alt="contact-us-page-8" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9LUsZHxeOC1pf1Yufij8S8VhR9XF2-ptQdGjk8ZqY_lUdZxbJMcrGwBIYLaLCo8Kwj36kUMyCMzX1tE3oAr8ANUrCYxCTfw47bfZ74G7i5dyknFhhlfAGOarWsQDX8KkkZBFLjBRfa08k/s1600/contact-us-8.jpg" /></a><br />
<br />
<a href="http://www.smog-bicyclettes.com/fixie-singlespeed-velo-carte-contact" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO96LmsdC5IJpyowAsgAsj3dHg91pCvlIuqwNNsW8DTFrgT0vGy_4MSnPvwKuja1azsrA1TLAvJdxt-GjJgBPczNNQyo67pjP_Avj8ttQHyl5L0UNWMhaS0inUdteVccwrYO_M-_0MvBjw/s1600/contact-us-9.jpg" imageanchor="1"><img alt="contact-us-page-9" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO96LmsdC5IJpyowAsgAsj3dHg91pCvlIuqwNNsW8DTFrgT0vGy_4MSnPvwKuja1azsrA1TLAvJdxt-GjJgBPczNNQyo67pjP_Avj8ttQHyl5L0UNWMhaS0inUdteVccwrYO_M-_0MvBjw/s1600/contact-us-9.jpg" /></a><br />
<br />
<a href="http://darrenclarkdesign.com/contact.html" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizjfs3sVGuFcYGmHv_fE4wRQ7F5lNUxfL5rFJM6_cDwo1hVTzRpetQGzKTr5MtE_fUqIssP_f0lW5n4ZFRM2vDtvABh7POn8wMQz616siZQcITU8XMhfHt-Dx5AZfqoebR6WiYbk9sNOjS/s1600/contact-us-10.jpg" imageanchor="1"><img alt="contact-us-page-10" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizjfs3sVGuFcYGmHv_fE4wRQ7F5lNUxfL5rFJM6_cDwo1hVTzRpetQGzKTr5MtE_fUqIssP_f0lW5n4ZFRM2vDtvABh7POn8wMQz616siZQcITU8XMhfHt-Dx5AZfqoebR6WiYbk9sNOjS/s1600/contact-us-10.jpg" /></a><br />
<br />
<a href="http://chill-and-seduce.com/en/contact/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguXj_H225qy1jjCpUW6H-oGnRMXB8Pzb-ys8Hyf7EgzzfcTyIfhIPBmGbBZBbtGCmzdnRKKDlqe73hg9CRFEreaeB5PEvf0vu9kkBm5wX4df7mVWShFw6Tb-s0rhmYJjyz6keVvoeanhRS/s1600/contact-us-11.jpg" imageanchor="1"><img alt="contact-us-page-11" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguXj_H225qy1jjCpUW6H-oGnRMXB8Pzb-ys8Hyf7EgzzfcTyIfhIPBmGbBZBbtGCmzdnRKKDlqe73hg9CRFEreaeB5PEvf0vu9kkBm5wX4df7mVWShFw6Tb-s0rhmYJjyz6keVvoeanhRS/s1600/contact-us-11.jpg" /></a><br />
<br />
<a href="http://infinitcolours.com/en/contacts" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1fIQphDaZYo9f-ZbRWqtBNanNB16lqAs356XE3Wh2Vn5ucY5o_KdP2B5TG_uPsSJOsWBzpvYIeHiZqkZ1twcf8xRCalVr4OMWpyO7xxEquMdnac6A9k242a2khthAi2uB5IZCpjcorIQk/s1600/contact-us-12.jpg" imageanchor="1"><img alt="contact-us-page-12" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1fIQphDaZYo9f-ZbRWqtBNanNB16lqAs356XE3Wh2Vn5ucY5o_KdP2B5TG_uPsSJOsWBzpvYIeHiZqkZ1twcf8xRCalVr4OMWpyO7xxEquMdnac6A9k242a2khthAi2uB5IZCpjcorIQk/s1600/contact-us-12.jpg" /></a><br />
<br />
<a href="http://www.rexmonkey.com/RMblog/contact/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCC7gL6ILGpU89kUUFka3DWo2q1Zw1G0gDq0W50WrvHKgXMiSPryG1algXdTYO_jYyXBNjdR9QXFEf0iFHk0T_C2eCjfbzUVVglG9dkdjfftwUzIzsT-jbrVTuRIbdZq0o0PKyP9CIBAfi/s1600/contact-us-13.jpg" imageanchor="1"><img alt="contact-us-page-13" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCC7gL6ILGpU89kUUFka3DWo2q1Zw1G0gDq0W50WrvHKgXMiSPryG1algXdTYO_jYyXBNjdR9QXFEf0iFHk0T_C2eCjfbzUVVglG9dkdjfftwUzIzsT-jbrVTuRIbdZq0o0PKyP9CIBAfi/s1600/contact-us-13.jpg" /></a><br />
<br />
<a href="http://www.touchfordiffusion.com/#!/contact" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYKu5DUJ5BjYTSwUDKnjvVOo-selj3ZGy1hNS_DEc3xsLGyqsBbQTKnpFTiGzKpCxSSMyYkFQUuWAOdXGSLHPblJ7jxfoKbrIqWWTNSkdXcNnNIO9dU7bZp2apz_Ubi83A-oJOGio2t9K6/s1600/contact-us-14.jpg" imageanchor="1"><img alt="contact-us-page-14" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYKu5DUJ5BjYTSwUDKnjvVOo-selj3ZGy1hNS_DEc3xsLGyqsBbQTKnpFTiGzKpCxSSMyYkFQUuWAOdXGSLHPblJ7jxfoKbrIqWWTNSkdXcNnNIO9dU7bZp2apz_Ubi83A-oJOGio2t9K6/s1600/contact-us-14.jpg" /></a><br />
<br />
<a href="http://rno1.com/contact-us/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYECYdBAivZXButDmYES1OsD6B6g0urSuYMAN5bwlgP9a_2gerOVt73xxid3nASZx8wAIc7H_AtSOvh704r-kxq8OKGCdpJ5JzGr4JRBhyphenhyphenOI_E-2oZH9HaD1SPFz7oHh3fMpjKwMTQ2cn3/s1600/contact-us-15.jpg" imageanchor="1"><img alt="contact-us-page-15" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYECYdBAivZXButDmYES1OsD6B6g0urSuYMAN5bwlgP9a_2gerOVt73xxid3nASZx8wAIc7H_AtSOvh704r-kxq8OKGCdpJ5JzGr4JRBhyphenhyphenOI_E-2oZH9HaD1SPFz7oHh3fMpjKwMTQ2cn3/s1600/contact-us-15.jpg" /></a><br />
<br />
<a href="http://tiksolution.com.au/index.php/contact/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUHYUYuZ9a2OukEMA6ppo5NW-1pXn8gL22dI3LO2uIAfM10tO1CcFEf7ZLSXUWaT1nmZhsw1-UChqvECeoQ6AZ5_O50zsnHcSvS1ZSmEiQnBtR-tq3oHiR4UUbB3zUQA-tZTSOQLaYyM4L/s1600/contact-us-16.jpg" imageanchor="1"><img alt="contact-us-page-16" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUHYUYuZ9a2OukEMA6ppo5NW-1pXn8gL22dI3LO2uIAfM10tO1CcFEf7ZLSXUWaT1nmZhsw1-UChqvECeoQ6AZ5_O50zsnHcSvS1ZSmEiQnBtR-tq3oHiR4UUbB3zUQA-tZTSOQLaYyM4L/s1600/contact-us-16.jpg" /></a><br />
<br />
<a href="http://www.tiposlibres.com/contacto.php" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1R6PRvkddyy-HnIletnHVroz2TZVKOnUA5mFigm8YP2-07JWWlYKQAPsPUnk7St4XEYi7pc60Pnj2JfYQc4Nsd8-JTWzKmyGp06sR8tq3xJEhQLqcC8v2kgjyyRIypkl0WU974g1xDiWO/s1600/contact-us-17.jpg" imageanchor="1"><img alt="contact-us-page-17" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1R6PRvkddyy-HnIletnHVroz2TZVKOnUA5mFigm8YP2-07JWWlYKQAPsPUnk7St4XEYi7pc60Pnj2JfYQc4Nsd8-JTWzKmyGp06sR8tq3xJEhQLqcC8v2kgjyyRIypkl0WU974g1xDiWO/s1600/contact-us-17.jpg" /></a><br />
<br />
<a href="http://www.adveris.fr/#contact" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHfe6SVm6UzpLKyi9DsmCUqFu5yEnJn7Dc6rjRlFZtCZV5KogSLH12vYdmg5dWkwZqe3Ppz6h1p4hOsftGTc4caE-0zEUSNDa9pxAHJYRfviujcLhJwx724FxyOl8Jb1RgA67L7FUYBtLU/s1600/contact-us-18.jpg" imageanchor="1"><img alt="contact-us-page-18" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHfe6SVm6UzpLKyi9DsmCUqFu5yEnJn7Dc6rjRlFZtCZV5KogSLH12vYdmg5dWkwZqe3Ppz6h1p4hOsftGTc4caE-0zEUSNDa9pxAHJYRfviujcLhJwx724FxyOl8Jb1RgA67L7FUYBtLU/s1600/contact-us-18.jpg" /></a><br />
<br />
<a href="http://www.inertialab.com/contact" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikG0o4Mz-eAJuM7s1xpKDFb9-QaL5gsrr1qQmC3vlS8slF5puB-n_kxOERW60rbUGddLEVVpb0MeXd_LVHeFNw7xLBBaG7Go5FaKs26kdPtl4S65L2yypGmRA78-I0HxY4yHIneF5Xyb5r/s1600/contact-us-19.jpg" imageanchor="1"><img alt="contact-us-page-19" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikG0o4Mz-eAJuM7s1xpKDFb9-QaL5gsrr1qQmC3vlS8slF5puB-n_kxOERW60rbUGddLEVVpb0MeXd_LVHeFNw7xLBBaG7Go5FaKs26kdPtl4S65L2yypGmRA78-I0HxY4yHIneF5Xyb5r/s1600/contact-us-19.jpg" /></a><br />
<br />
<a href="http://www.wijnenzo.be/contact/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsffXj2dO0zAswm1UKYSHDQhitMldRvOUuswqRSg8V5mVJZBlCwkQNAvPpfRizMwy7gkzb_JOFlI0xYQoRsBmitEPI7MIedRHAJjMT_GOyWiVPXn4n2pW2Oscls8jcNTdFFtL1RIRrPREQ/s1600/contact-us-20.jpg" imageanchor="1"><img alt="contact-us-page-20" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsffXj2dO0zAswm1UKYSHDQhitMldRvOUuswqRSg8V5mVJZBlCwkQNAvPpfRizMwy7gkzb_JOFlI0xYQoRsBmitEPI7MIedRHAJjMT_GOyWiVPXn4n2pW2Oscls8jcNTdFFtL1RIRrPREQ/s1600/contact-us-20.jpg" /></a><br />
<br />
<a href="https://www.understandesign.com/contacts" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjftlVTMpastO3Yw42Kh7rq5JeQeNM26K0WmcISvzn1S0-4AOH5LKedWP1HhyOZPfOsN-8qav96tFLQ3N2wxeSC-8LysR09j3TXCRWW-2qjPF4Yn_XBS5ihK_EoQS9e6IeD7x1QT8_W5rO6/s1600/contact-us-21.jpg" imageanchor="1"><img alt="contact-us-page-25" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjftlVTMpastO3Yw42Kh7rq5JeQeNM26K0WmcISvzn1S0-4AOH5LKedWP1HhyOZPfOsN-8qav96tFLQ3N2wxeSC-8LysR09j3TXCRWW-2qjPF4Yn_XBS5ihK_EoQS9e6IeD7x1QT8_W5rO6/s1600/contact-us-21.jpg" /></a><br />
<br />
<a href="http://www.pixweb.ma/contact.html" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbIxX4gihFsWWGCNBp9dmkb7EWZvW_9g9D0aRky4vTuiDakdRIunYZTNokZdKN78gr_KNXuBOLW078Ga8MhI_JuVsZq0PqhMwoPs51Woyt2Dj2b5hJJSBQm1hA06hKwVf9jHaDaGnUl64N/s1600/contact-us-22.jpg" imageanchor="1"><img alt="contact-us-page-21" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbIxX4gihFsWWGCNBp9dmkb7EWZvW_9g9D0aRky4vTuiDakdRIunYZTNokZdKN78gr_KNXuBOLW078Ga8MhI_JuVsZq0PqhMwoPs51Woyt2Dj2b5hJJSBQm1hA06hKwVf9jHaDaGnUl64N/s1600/contact-us-22.jpg" /></a><br />
<br />
<a href="http://aardvarkmedia.co.uk/contact-us/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR1gtTXI7M0u8yh2cpE0RPXVhhNPt0e9aOq_KvIEzRtO99XIkdUsoPl_mWN9xPNrelLADGCBe50Z07gJfANGcBqXKrrb8IExxYxVzt345cTqW7nfBgXx4aCPGgyjl22MzzaMCl_om5Ntht/s1600/contact-us-23.jpg" imageanchor="1"><img alt="contact-us-page-22" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR1gtTXI7M0u8yh2cpE0RPXVhhNPt0e9aOq_KvIEzRtO99XIkdUsoPl_mWN9xPNrelLADGCBe50Z07gJfANGcBqXKrrb8IExxYxVzt345cTqW7nfBgXx4aCPGgyjl22MzzaMCl_om5Ntht/s1600/contact-us-23.jpg" /></a><br />
<br />
<a href="http://mhou.es/en/contacto/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh56z-VS-5uYPczxq34GeDkyBQ546zie8s3i-Cwoz7zA0JVr_Nww1bE7HE7lw7Dkvvviqdnqigh8aoD86jxbsBxZyuRwoAVPEXKthmGfleahkoDVhjwUEz1K5eMkq6v2UGMI0AZXjTEIs8s/s1600/contact-us-24.jpg" imageanchor="1"><img alt="contact-us-page-23" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh56z-VS-5uYPczxq34GeDkyBQ546zie8s3i-Cwoz7zA0JVr_Nww1bE7HE7lw7Dkvvviqdnqigh8aoD86jxbsBxZyuRwoAVPEXKthmGfleahkoDVhjwUEz1K5eMkq6v2UGMI0AZXjTEIs8s/s1600/contact-us-24.jpg" /></a><br />
<br />
<a href="http://www.denisechandler.com/contact.html" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbNRQF19AYWEi0w_wrvEWDVexRIHw51Kb6ymdaSboOitd9o5UB14FY-kWqW-bN_2ALnU7DVqsN5aeqlU-vVgB5dJ9n36bqxDZBFPhcDOWKE76vGVhBNjkoogHzyP7W9W8Lnmnjy64rBIUm/s1600/contact-us-25.jpg" imageanchor="1"><img alt="contact-us-page-24" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbNRQF19AYWEi0w_wrvEWDVexRIHw51Kb6ymdaSboOitd9o5UB14FY-kWqW-bN_2ALnU7DVqsN5aeqlU-vVgB5dJ9n36bqxDZBFPhcDOWKE76vGVhBNjkoogHzyP7W9W8Lnmnjy64rBIUm/s1600/contact-us-25.jpg" /></a></div></div>yesongshttp://www.blogger.com/profile/14466160119267287649noreply@blogger.com4tag:blogger.com,1999:blog-4276763109087946480.post-64697229028132289432013-05-29T04:53:00.000-07:002013-05-29T04:53:50.687-07:00Add New Icon in jquery Mobile<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div class="custom_p"><a href="http://jquerymobile.com/" target="_blank">Jquery mobile</a> is a branch of jquery that used to develop mobile application. You can <b>develop stunning mobile application</b> with jquery mobile. And this is not so difficult because jquery mobile has provide all inbuilt components like buttons ,textboxes, list view, <a href="http://thinklala.blogspot.in/2013/05/commonly-used-social-media-icons-vector.html">icons</a> etc that you can use and can develop your application. You do not need to write so much code. <br />
<br />
And also you can customize in according to your theme and design. In this post I will discuss about how to add new icon in jquery mobile as we use icons like <code>data-icon="arrow-r"</code>. You can create your own icon by defining a css class. You just need to add <code>.ui-icon-</code> in your class name and then you can use that class as a <code>data icon</code>. If you want to add sound icon. You can define your class as follows. <br />
<code><br />
.ui-icon-sound-ico{<br />
// write css for sound <br />
}<br />
</code><br />
Now you can use this class name as <code>data icon</code> in your html, but do not write <code>.ui-icon-</code> while writing <code>data icon</code>. Only need to write <code> sound-ico </code> . Example is as follows.<br />
<br />
<xmp><a data-icon="sound-ico" data-iconpos="left" data-role="button" href="http://www.blogger.com/blogger.g?blogID=4276763109087946480#page1">Button</a></xmp><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTU__FS4rpQCf_WezmuG2hWmYZvjJHjiVyAAlMY3VMgW5a3AQu5IWrVOXpo3tOdOezmM4S7hV5XIWK3X6505avHwnfFwtzUWKnOBnacJaZQmNhdXga4Bl1UqUEJHz2AO7Er9BMZSg2hi6z/s1600/add-icon-jquery-mobile.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTU__FS4rpQCf_WezmuG2hWmYZvjJHjiVyAAlMY3VMgW5a3AQu5IWrVOXpo3tOdOezmM4S7hV5XIWK3X6505avHwnfFwtzUWKnOBnacJaZQmNhdXga4Bl1UqUEJHz2AO7Er9BMZSg2hi6z/s320/add-icon-jquery-mobile.jpg" alt="Add New Icon in jquery Mobile" title="Add New Icon in jquery Mobile" /></a></div><br />
You can add as many icon by defining classes by adding < code>.ui-icon-</div></div>in your class name.<br />
<br />
<br />
</div>yesongshttp://www.blogger.com/profile/14466160119267287649noreply@blogger.com1tag:blogger.com,1999:blog-4276763109087946480.post-89524961869079075172013-05-23T11:21:00.002-07:002013-05-23T11:41:07.095-07:0030 Set of Photoshop custom Brushes <div dir="ltr" style="text-align: left;" trbidi="on">
<div class="custom_p custom_sub_head custom_link">
Photoshop has made the designer task so easy by providing custom resources like <a href="http://thinklala.blogspot.in/2013/04/35-set-of-photoshop-custom-shapes.html">custom shapes</a>, custom brushes, custom patterns etc. With the help of these resources the designer can <b>create awesome designs</b> and can add so many things in his/her designs. That gives a real look to designs.<br />
<br />
<b>Photoshop custom brushes</b> are mostly used in designs. With the help of brushes a designer can create different graphics and patterns real like paintings. So in this article you will found 30 photoshop custom brushes that are really useful. You can download them and install them in your photoshop and then you can use them. But don’t forget to read the license.<br />
<br />
<br />
<h2>
Flower Brush</h2>
<a href="http://myphotoshopbrushes.com/brushes/id/3121/" target="_blank"></a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0PZrue3H-xA8yrJLrFzRIKp5nR713oJ1pN8Zy_26_MCqG7APQZY3U6a1sWoEpWR5_cYECSFfOBMjfQ0B4X39KacbWBtcFU4KSPQ0S6lSDt06ljH5IIxWg_cdeKYKIx-0UCWxUOtzPWu4b/s1600/1-flower-custom-brush.jpg" imageanchor="1"><img alt="flower-custom-brush" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0PZrue3H-xA8yrJLrFzRIKp5nR713oJ1pN8Zy_26_MCqG7APQZY3U6a1sWoEpWR5_cYECSFfOBMjfQ0B4X39KacbWBtcFU4KSPQ0S6lSDt06ljH5IIxWg_cdeKYKIx-0UCWxUOtzPWu4b/s1600/1-flower-custom-brush.jpg" title="flower-custom-brush" /></a><br />
<br />
<a name='more'></a><br /><br />
<h2>
Custom Psd Brush</h2>
<a href="http://myphotoshopbrushes.com/brushes/id/3131/" target="_blank">Download</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA-G2oXJhfdFz0YH3SCA5V_y7_wg0lLd4H2ogbnIkK88FDPJHBsYE7lZCk0xCdZv3DQdIRCRV4lDUOkrmm8fYA71ZgbsMgTd-xRN7LGCgYaowhrQzaGfYBTtlkO8PmFDm_ANMhTtJysp9A/s1600/2-23-custom-psd-brush.jpg" imageanchor="1"><img alt="custom-psd-brush" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA-G2oXJhfdFz0YH3SCA5V_y7_wg0lLd4H2ogbnIkK88FDPJHBsYE7lZCk0xCdZv3DQdIRCRV4lDUOkrmm8fYA71ZgbsMgTd-xRN7LGCgYaowhrQzaGfYBTtlkO8PmFDm_ANMhTtJysp9A/s1600/2-23-custom-psd-brush.jpg" /></a><br />
<br />
<h2>
Dress Custom Brush</h2>
<a href="http://myphotoshopbrushes.com/brushes/id/3128/" target="_blank">Download</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKuBte_-SaetCoZ2LqoRDOIHuCfjYbBcJ0S9kx-gywIgFi8kvz8hQ8nqg2Et752lcTFTBkVG3oX501yIZbQXTOPAnSlJq2LIeOPb6FJUcafT-JV4JK0vljdcUdmPYHY8_UHFVir8gM3eia/s1600/3-Dress-custom-brush.jpg" imageanchor="1"><img alt="Dress-custom-brush" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKuBte_-SaetCoZ2LqoRDOIHuCfjYbBcJ0S9kx-gywIgFi8kvz8hQ8nqg2Et752lcTFTBkVG3oX501yIZbQXTOPAnSlJq2LIeOPb6FJUcafT-JV4JK0vljdcUdmPYHY8_UHFVir8gM3eia/s1600/3-Dress-custom-brush.jpg" /></a><br />
<br />
<h2>
Photoshop Custom Brush</h2>
<a href="http://myphotoshopbrushes.com/brushes/id/3123/" target="_blank">Download</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoyZXNLhprBsVRV5E591A7NfjGDaSEMuEdnzAqLU1TO52uM2UBkXiTN_yZd6D3aeqU4hU2bZDZ-MPha140gLldFAf81Iv2O_cdcDiAdHcq-UmR3bDoBYS8ZZS6LVN7iex2JSRDWyE0MTjQ/s1600/4-photoshop-custom-brush.jpg" imageanchor="1"><img alt="photoshop-custom-brush" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoyZXNLhprBsVRV5E591A7NfjGDaSEMuEdnzAqLU1TO52uM2UBkXiTN_yZd6D3aeqU4hU2bZDZ-MPha140gLldFAf81Iv2O_cdcDiAdHcq-UmR3bDoBYS8ZZS6LVN7iex2JSRDWyE0MTjQ/s1600/4-photoshop-custom-brush.jpg" /></a><br />
<br />
<h2>
Birds Brush</h2>
<a href="http://www.brusheezy.com/brushes/1787-jewelled-wings" target="_blank">Download</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgml4JKdN8vjHmjHo8TZnr90BSADg3y4dRtPg6uTQ7afsHlzVg18pYExE1r-WW6MtmTinyuTnYUvuKFCqvs3A8_kv_rXXDSjgrk79HlY5CRl4otHcBv88atH358Jp6OXfkjlf1AbIx8kJL8/s1600/5-photoshop-birds-brush.jpg" imageanchor="1"><img alt="photoshop-birds-brush" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgml4JKdN8vjHmjHo8TZnr90BSADg3y4dRtPg6uTQ7afsHlzVg18pYExE1r-WW6MtmTinyuTnYUvuKFCqvs3A8_kv_rXXDSjgrk79HlY5CRl4otHcBv88atH358Jp6OXfkjlf1AbIx8kJL8/s1600/5-photoshop-birds-brush.jpg" /></a><br />
<br />
<h2>
Grunge Brush</h2>
<a href="http://www.brusheezy.com/brushes/38158-grunge-2" target="_blank">Download</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp-A4Wg6iUYPdEU38zOI_Lbb_i4Lcrpd7hZQlQnZYVXupsqvTqOs19T1PUTB0VXioo_cCbph7xTWNw2Sy8BIwcs_Ug3Le8uVLKilhByS5dA1FwHXkbglpoXAyaaWG1VnT7Y2Mmxywj-SDA/s1600/6-photoshop-custom-brush.jpg" imageanchor="1"><img alt="photoshop-custom-brush" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp-A4Wg6iUYPdEU38zOI_Lbb_i4Lcrpd7hZQlQnZYVXupsqvTqOs19T1PUTB0VXioo_cCbph7xTWNw2Sy8BIwcs_Ug3Le8uVLKilhByS5dA1FwHXkbglpoXAyaaWG1VnT7Y2Mmxywj-SDA/s1600/6-photoshop-custom-brush.jpg" /></a><br />
<br />
<h2>
Coffee Stain Brush</h2>
<a href="http://www.brushking.eu/516/33-coffee-stain-brushes.html" target="_blank">Download</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYcwIAEAumMbHRbNArTSDrVtEbc1HxRst7qAomCGYmFk0I3EaU9GnxCMabD-KaIHLPcdEA3oj2LEfl5P3e9-v4HaLAHNTlmrgoRDCny26_fu3MRMRPl-6bxtTcqdZIQSxDlzR4iKmnqS01/s1600/7-coffee-stain-brush.jpg" imageanchor="1"><img alt="coffee-stain-brush" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYcwIAEAumMbHRbNArTSDrVtEbc1HxRst7qAomCGYmFk0I3EaU9GnxCMabD-KaIHLPcdEA3oj2LEfl5P3e9-v4HaLAHNTlmrgoRDCny26_fu3MRMRPl-6bxtTcqdZIQSxDlzR4iKmnqS01/s1600/7-coffee-stain-brush.jpg" /></a><br />
<br />
<h2>
Heart Brush</h2>
<a href="http://www.brushlovers.com/photoshop-brush/my-heart-brushes.html" target="_blank">Download</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_tWpC3V8Hqi81RWiuTtny7o0UEqCpvqAOOQ_wGHbiNxX3AGMLvu7qflDeYXtmJ43lGceD9m9gthB3AL5ww6ivRCI6d_PYO_TyOZgwF2KbnLZ0HKoddnlt82TZXP5aA0dRK9lxw-rRDhWC/s1600/8-heart-brush.jpg" imageanchor="1"><img alt="heart-brush" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_tWpC3V8Hqi81RWiuTtny7o0UEqCpvqAOOQ_wGHbiNxX3AGMLvu7qflDeYXtmJ43lGceD9m9gthB3AL5ww6ivRCI6d_PYO_TyOZgwF2KbnLZ0HKoddnlt82TZXP5aA0dRK9lxw-rRDhWC/s1600/8-heart-brush.jpg" /></a><br />
<br />
<h2>
Smoke Brush</h2>
<a href="http://qbrushes.net/21-smoke-brush-set/" target="_blank">Download</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp4_YN2rK_IgknKH-iybVqQmdKtOyel4hN4G5u7YGSpUk0Bj0hbjuVv4ffz7IF61DUK8U0xmAm-fGlh5ejBLTemi1xFytvYMbPMm4SVeK3Hi-iTm0o2nkoneA3fKt8u_SC34EnUCgGUykD/s1600/9-smoke-brush.jpg" imageanchor="1"><img alt="smoke-brush" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp4_YN2rK_IgknKH-iybVqQmdKtOyel4hN4G5u7YGSpUk0Bj0hbjuVv4ffz7IF61DUK8U0xmAm-fGlh5ejBLTemi1xFytvYMbPMm4SVeK3Hi-iTm0o2nkoneA3fKt8u_SC34EnUCgGUykD/s1600/9-smoke-brush.jpg" /></a><br />
<br />
<h2>
Smoke Brush 2</h2>
<a href="http://qbrushes.net/abstawave-photoshop-brush/" target="_blank">Download</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7A94P9AbIDGIRAp3eaKEJkMJItnM1_V7eKmQYkkzxWqAYVUN6V39m8rDxH2cvfQgkQ4wnyjtF7sL5MFzrGNT8WPIZddMuENsbOPX5fgRBoYoQyzQY37pO4NsJ4bEYabWs74ZTXuj8gwSK/s1600/10-smoke-brush.jpg" imageanchor="1"><img alt="smoke-brush" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7A94P9AbIDGIRAp3eaKEJkMJItnM1_V7eKmQYkkzxWqAYVUN6V39m8rDxH2cvfQgkQ4wnyjtF7sL5MFzrGNT8WPIZddMuENsbOPX5fgRBoYoQyzQY37pO4NsJ4bEYabWs74ZTXuj8gwSK/s1600/10-smoke-brush.jpg" /></a><br />
<br />
<h2>
Heart Attack Brush</h2>
<a href="http://www.brushlovers.com/photoshop-brush/heartattack-brushes.html" target="_blank">Download</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkmSE8af8QC7cB9vBYRRU6aDI7esOy0ACp5OXdQP28NHZSEi305MFPYfnkC42ymZwsUmTvKxFM8aCr35H4OCgu74J_4ZDLsvyq3l-h9Tghgn3NWUEUbUo2GU4Cf4fkH7gSqf8zrov7R2t9/s1600/11-hear-attack-brush.jpg" imageanchor="1"><img alt="hear-attack-brush" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkmSE8af8QC7cB9vBYRRU6aDI7esOy0ACp5OXdQP28NHZSEi305MFPYfnkC42ymZwsUmTvKxFM8aCr35H4OCgu74J_4ZDLsvyq3l-h9Tghgn3NWUEUbUo2GU4Cf4fkH7gSqf8zrov7R2t9/s1600/11-hear-attack-brush.jpg" /></a><br />
<br />
<h2>
Electrifying Lightning Brush</h2>
<a href="http://www.brushking.eu/528/18-electrifying-lightning-brush-strikes.html" target="_blank">Download</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjusVvWbsOb-dx5SmfU0rT14TMcpWVF2zGSclQFiIOhwVHcl4LeRoETxvjV-XBB6a7cEBztYlrsboaLlxijpxz3ic_b20qUdGyB1kHZew3tTi_4hwZPfQjlFz3irZuZR_L4whNgpsG4-Rr2/s1600/12-electrifying-lightning-brush.jpg" imageanchor="1"><img alt="electrifying-lightning-brush" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjusVvWbsOb-dx5SmfU0rT14TMcpWVF2zGSclQFiIOhwVHcl4LeRoETxvjV-XBB6a7cEBztYlrsboaLlxijpxz3ic_b20qUdGyB1kHZew3tTi_4hwZPfQjlFz3irZuZR_L4whNgpsG4-Rr2/s1600/12-electrifying-lightning-brush.jpg" /></a><br />
<br />
<h2>
Brackets Brushes</h2>
<a href="http://www.brushking.eu/503/brackets-brushes.html" target="_blank">Download</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh51DAmLsVvkX6NfWZ7FsGoNK3xfQJ11kRgbjwYQL1ld3mNGQXiXpn9GFDrpK8S8Jff_KBWDKXWCE-GEVhKDVtMSBO5h97q9f2oAAFl__R1PFf9Z5eTZB_LtzTs_4-o4rUu_NCLNI6iQIuT/s1600/13-brackets-brushes.jpg" imageanchor="1"><img alt="brackets-brushes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh51DAmLsVvkX6NfWZ7FsGoNK3xfQJ11kRgbjwYQL1ld3mNGQXiXpn9GFDrpK8S8Jff_KBWDKXWCE-GEVhKDVtMSBO5h97q9f2oAAFl__R1PFf9Z5eTZB_LtzTs_4-o4rUu_NCLNI6iQIuT/s1600/13-brackets-brushes.jpg" /></a><br />
<br />
<h2>
Cross Photoshop Brush</h2>
<a href="http://www.brushking.eu/507/free-cross-hatch-photoshop-brush-set.html" target="_blank">Download</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmn-hwu2KdI1ccJlA243aw6WXQRYfo3JF5bDDvY-9SKOArjvNF6zTcOObySfNyzAd8odbLbrHzqx_VLRtqPKWBFwAERFegbjWSjT9_yFgS878IL2WguniMBwegG0wNopKSXlj4YNzT1N2z/s1600/14-cross-photoshop-brush.jpg" imageanchor="1"><img alt="cross-photoshop-brush" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmn-hwu2KdI1ccJlA243aw6WXQRYfo3JF5bDDvY-9SKOArjvNF6zTcOObySfNyzAd8odbLbrHzqx_VLRtqPKWBFwAERFegbjWSjT9_yFgS878IL2WguniMBwegG0wNopKSXlj4YNzT1N2z/s1600/14-cross-photoshop-brush.jpg" /></a><br />
<br />
<h2>
Paint Splatter Brush</h2>
<a href="http://www.brushking.eu/511/9-paint-splatter-brushes.html" target="_blank">Download</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc_h4xxidcx_7N8195sb-yz-I4OF6IbkIj_v2r1R9CckeINVonICMErkPZ02IIi-8yut0nxef4y4fFX9IQSfqDDpf2QGEj0oWYZpfzAoLsBlIqVCUCacyIalfWdoAhG2DwlCjYNXO2udk3/s1600/15-paint-splatter-photoshop-brush.jpg" imageanchor="1"><img alt="paint-splatter-photoshop-brush" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc_h4xxidcx_7N8195sb-yz-I4OF6IbkIj_v2r1R9CckeINVonICMErkPZ02IIi-8yut0nxef4y4fFX9IQSfqDDpf2QGEj0oWYZpfzAoLsBlIqVCUCacyIalfWdoAhG2DwlCjYNXO2udk3/s1600/15-paint-splatter-photoshop-brush.jpg" /></a><br />
<br />
<h2>
Assassin Brush</h2>
<a href="http://www.brushking.eu/432/assassin-brush-set.html" target="_blank">Download</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggwY_r1SGI6Ea6FzqwX5jx7L96hNmCnCDpMxOpkSYA9Sgz8Lc9x0YFBObQUxD5HH2qLVY1jmx9Efc_yJFVyxRaslJ3GXfM7c1v7rqBN7liLjrRuy2VNdx2vlc0LrY6ory16aT7-9aDfzQ8/s1600/16-assassin-brush.jpg" imageanchor="1"><img alt="assassin-brush" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggwY_r1SGI6Ea6FzqwX5jx7L96hNmCnCDpMxOpkSYA9Sgz8Lc9x0YFBObQUxD5HH2qLVY1jmx9Efc_yJFVyxRaslJ3GXfM7c1v7rqBN7liLjrRuy2VNdx2vlc0LrY6ory16aT7-9aDfzQ8/s1600/16-assassin-brush.jpg" /></a><br />
<br />
<h2>
Rising Smoke Brush</h2>
<a href="http://www.brushking.eu/431/rising-smoke.html" target="_blank">Download</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxgpNKMoEHBciKCJJfoIR5obM6C7FYv36TVGoBLRtE9Z-0DhvLr3sHYEGo7bubDMbKvoxLkfv4E1vJWXgQPQH-hkxopb-s49m3q7isCnH5ldb2MPW-L6R2wgyHO0whV_VW4JZvmbMV4Ks4/s1600/17-rising-smoke-photoshop-brush.jpg" imageanchor="1"><img alt="rising-smoke-photoshop-brush" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxgpNKMoEHBciKCJJfoIR5obM6C7FYv36TVGoBLRtE9Z-0DhvLr3sHYEGo7bubDMbKvoxLkfv4E1vJWXgQPQH-hkxopb-s49m3q7isCnH5ldb2MPW-L6R2wgyHO0whV_VW4JZvmbMV4Ks4/s1600/17-rising-smoke-photoshop-brush.jpg" /></a><br />
<br />
<h2>
Acrylic Brush</h2>
<a href="http://www.premiumpixels.com/freebies/28-high-resolution-acrylic-brushes/" target="_blank">Download</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcoyI3Kjs6ebrjwlSq49KRTlotO5u7kLXgQ4FCNiZWuXbDRwaU8bOvl8x4DQ9_QBkTpewvUBcRGMau3_wq9py7yAYCFpdAt1H-GP0-3UjkjbZBXpL2wXWxVhViiICggilLYvvpq7ZS6UQ-/s1600/18-28-High-Resolution-Acrylic.jpg" imageanchor="1"><img alt="Acrylic-brush" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcoyI3Kjs6ebrjwlSq49KRTlotO5u7kLXgQ4FCNiZWuXbDRwaU8bOvl8x4DQ9_QBkTpewvUBcRGMau3_wq9py7yAYCFpdAt1H-GP0-3UjkjbZBXpL2wXWxVhViiICggilLYvvpq7ZS6UQ-/s1600/18-28-High-Resolution-Acrylic.jpg" /></a><br />
<br />
<h2>
Watercolour Brushes</h2>
<a href="http://www.premiumpixels.com/freebies/28-high-resolution-watercolour-brushes/" target="_blank">Download</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVigFD41heqWxQge47RjRxH0KHhyphenhyphenGqmsi7SsiyDdt-KwTNa85cRX4mpnqEFjI0le96LshhPD5UPUX_Pv1yGkgiCUgZpgiuWFLFC98rZa9biW_vN11xHxf45PHNWHWsZR947JMyyx_tdVCk/s1600/19--Watercolour-Brushes.jpg" imageanchor="1"><img alt="Watercolour-Brushes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVigFD41heqWxQge47RjRxH0KHhyphenhyphenGqmsi7SsiyDdt-KwTNa85cRX4mpnqEFjI0le96LshhPD5UPUX_Pv1yGkgiCUgZpgiuWFLFC98rZa9biW_vN11xHxf45PHNWHWsZR947JMyyx_tdVCk/s1600/19--Watercolour-Brushes.jpg" /></a><br />
<br />
<h2>
Hand Drawn Arrow</h2>
<a href="http://www.premiumpixels.com/freebies/hand-drawn-arrow-photoshop-brushes/" target="_blank">Download</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguwcttTrE3iFmDXat9Azn2a6KSNSMtLImxTKGyT_vtpeZ3bm1H_SYapVuS9T3a_RDO_4gLEfusKn-2ku9DXt1mhjEYYThOGfh_8qTBFQMQQ2wPvJPrEekJYi00vyhXeILnfksGIoCXTXFj/s1600/20-Hand-Drawn-Arrow.jpg" imageanchor="1"><img alt="Hand-Drawn-Arrow" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguwcttTrE3iFmDXat9Azn2a6KSNSMtLImxTKGyT_vtpeZ3bm1H_SYapVuS9T3a_RDO_4gLEfusKn-2ku9DXt1mhjEYYThOGfh_8qTBFQMQQ2wPvJPrEekJYi00vyhXeILnfksGIoCXTXFj/s1600/20-Hand-Drawn-Arrow.jpg" /></a><br />
<br />
<h2>
Cloud Brushes</h2>
<a href="http://www.brusheezy.com/brushes/48404-high-res-cloud-brushes" target="_blank">Download</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl5XRGY59vUqcES4QVV8B6qR0WS_ZMqhXgGjtuBoJkSFmvzaOKVUY2BVE1JCyACf4PHvglB2bYPHL3yMu403P8KZFND1-fRCyjRirgt5e7Jf4OFu6S-Qv5BOuo1cTud_cQGWFFE4g5QKQz/s1600/21-cloud-brushes.jpg" imageanchor="1"><img alt="cloud-brushes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl5XRGY59vUqcES4QVV8B6qR0WS_ZMqhXgGjtuBoJkSFmvzaOKVUY2BVE1JCyACf4PHvglB2bYPHL3yMu403P8KZFND1-fRCyjRirgt5e7Jf4OFu6S-Qv5BOuo1cTud_cQGWFFE4g5QKQz/s1600/21-cloud-brushes.jpg" /></a><br />
<br />
<h2>
Clocks Brushes</h2>
<a href="http://www.brusheezy.com/brushes/48760-clocks-brushes-and-clock-kits" target="_blank">Download</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNcGUG_HSDhZwECeAWfZde0yt5bU9ofR7B-VvQ0tIMX-mtrtVQ4gDuoFmkfWdlOHjCJyychdxaS9im5CVgLG9hMp1gOrnKTqOY-fKcPSJgsOCCSdU7p-5d2EaCj565dihRnNEO5Nv1RCi3/s1600/22-clocks-brushe.jpg" imageanchor="1"><img alt="clocks-brushe" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNcGUG_HSDhZwECeAWfZde0yt5bU9ofR7B-VvQ0tIMX-mtrtVQ4gDuoFmkfWdlOHjCJyychdxaS9im5CVgLG9hMp1gOrnKTqOY-fKcPSJgsOCCSdU7p-5d2EaCj565dihRnNEO5Nv1RCi3/s1600/22-clocks-brushe.jpg" /></a><br />
<br />
<br />
<h2>
Boys Brush</h2>
<a href="http://www.brusheezy.com/brushes/47260-gorjuss-boys-brushes" target="_blank">Download</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_lySd-k-ujxW0FoxwwC2jdrV1nLhH8_GWt0wAyZ4BskdjNxKNtcPKdTIBDZC3Q_TQQ4WQx83YEZGlL52jl2C_CI5VqxW9Y83Hnn0Rn6BtZHJ70LLPv9478y8bcgjLsxfOBGhh3iDErcb4/s1600/23-boys-brushes.jpg" imageanchor="1"><img alt="boys-brushes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_lySd-k-ujxW0FoxwwC2jdrV1nLhH8_GWt0wAyZ4BskdjNxKNtcPKdTIBDZC3Q_TQQ4WQx83YEZGlL52jl2C_CI5VqxW9Y83Hnn0Rn6BtZHJ70LLPv9478y8bcgjLsxfOBGhh3iDErcb4/s1600/23-boys-brushes.jpg" /></a><br />
<br />
<h2>
Tire Tracks Brush</h2>
<a href="http://www.brusheezy.com/brushes/47485-tire-tracks-brushes" target="_blank">Download</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPZYcXilYjuZbNbR39VwdmY3kgxswQpStwudBgL_qXRTTZ2x7YX0DdTIWNy9O1AAzbIJa_pz8yNNw9sXVlQHIS7wqax30_ifT7miF564y4H7vMM1qsVlKcIy1ZsH2kNxECW60ckERYPVK5/s1600/24-boys-brushes.jpg" imageanchor="1"><img alt="tire-tracks-brushes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPZYcXilYjuZbNbR39VwdmY3kgxswQpStwudBgL_qXRTTZ2x7YX0DdTIWNy9O1AAzbIJa_pz8yNNw9sXVlQHIS7wqax30_ifT7miF564y4H7vMM1qsVlKcIy1ZsH2kNxECW60ckERYPVK5/s1600/24-boys-brushes.jpg" /></a><br />
<br />
<h2>
Bokeh Brushes</h2>
<a href="http://www.brusheezy.com/brushes/47210-12-large-bokeh-brushes" target="_blank">Download</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzYSlp88ZKUzWSySSjV3cC7HUWAq4lWFeT3tV4kU7Omoc3mSRzomLLQwTWGWz4aGIyJuQYtof9ff4jJ4AAhjOQn-R40KS1W_Rxu10A5QUdcaeSkiMTgiPonDRvnseEMtw0CrR2rJsqYsDk/s1600/25-bokeh-brushes.jpg" imageanchor="1"><img alt="bokeh-brushes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzYSlp88ZKUzWSySSjV3cC7HUWAq4lWFeT3tV4kU7Omoc3mSRzomLLQwTWGWz4aGIyJuQYtof9ff4jJ4AAhjOQn-R40KS1W_Rxu10A5QUdcaeSkiMTgiPonDRvnseEMtw0CrR2rJsqYsDk/s1600/25-bokeh-brushes.jpg" /></a><br />
<br />
<h2>
Snow Flake Brush</h2>
<a href="http://www.brusheezy.com/brushes/46023-frosted-snow-flake-brushes" target="_blank">Download</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlW-jG2hmyjByXv3grZqVpJZtSrNatXMKV2aqaqVz7SWbwtjgI_W86JKOfwqsCjWeUsNgVlbLMTWvevi99msdTEUIVi1xCuohTBTiKASY06Hv-5gOzb_piTbEP0-zbvCioJ48QAQF_hZDG/s1600/26-snow-flake-brushes.jpg" imageanchor="1"><img alt="snow-flake-brushes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlW-jG2hmyjByXv3grZqVpJZtSrNatXMKV2aqaqVz7SWbwtjgI_W86JKOfwqsCjWeUsNgVlbLMTWvevi99msdTEUIVi1xCuohTBTiKASY06Hv-5gOzb_piTbEP0-zbvCioJ48QAQF_hZDG/s1600/26-snow-flake-brushes.jpg" /></a><br />
<br />
<h2>
Doodle Brush</h2>
<a href="http://www.brusheezy.com/brushes/45952-pixie-doodle-brushes" target="_blank">Download</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1iifZciQ3fjQYUQUjlAVcmf8-e1KIfMiBSj1EEJTAblfCxJi7Pel77MfSbCSApD0CX58vIGpSj23j2jSXPAnvkqKaH8RWpE2oULXBwNRLEnAQnmv0rzm5gditxWnsfABYzyTdlO26aXdL/s1600/27-doodle-brushes.jpg" imageanchor="1"><img alt="doodle-brushes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1iifZciQ3fjQYUQUjlAVcmf8-e1KIfMiBSj1EEJTAblfCxJi7Pel77MfSbCSApD0CX58vIGpSj23j2jSXPAnvkqKaH8RWpE2oULXBwNRLEnAQnmv0rzm5gditxWnsfABYzyTdlO26aXdL/s1600/27-doodle-brushes.jpg" /></a><br />
<br />
<h2>
Memes Faces Brush</h2>
<a href="http://www.brusheezy.com/brushes/44708-memes-range-faces-brushes-set" target="_blank">Download</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHW4Nqv_zxBU75Xhr4u60kAFYhqPM0lApew0Y6Rl_CaPK201KbgPxWWDMSCTZiX2In6wOHfq8o97QdoUtp9NjDInv77ikARYUITbjkgoSPVm85lmj5DQQZjaO9UKRkdw-cJ4BwSx8RXhl3/s1600/28-memes-faces-brushes.jpg" imageanchor="1"><img alt="memes-faces-brushes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHW4Nqv_zxBU75Xhr4u60kAFYhqPM0lApew0Y6Rl_CaPK201KbgPxWWDMSCTZiX2In6wOHfq8o97QdoUtp9NjDInv77ikARYUITbjkgoSPVm85lmj5DQQZjaO9UKRkdw-cJ4BwSx8RXhl3/s1600/28-memes-faces-brushes.jpg" /></a><br />
<br />
<h2>
Icon Ribbon Brush</h2>
<a href="http://www.brusheezy.com/brushes/44636-ribbon-brush-badges-with-icons" target="_blank">Download</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhBXlci5qWUrPGFGbbMBMtSALqu_ncA5hnndIp3ZoP9UROL6OoBWIzGS_GGkDWiWXoJ-tVvEU4Fp2DRElMze0L0ek4qEN6lbMv-qF8OZ1mVykFZClED_N0-2EiUYx3O1hyphenhyphena0EjRwMOvDxW/s1600/29-icon-ribbon-brush.jpg" imageanchor="1"><img alt="icon-ribbon-brush" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhBXlci5qWUrPGFGbbMBMtSALqu_ncA5hnndIp3ZoP9UROL6OoBWIzGS_GGkDWiWXoJ-tVvEU4Fp2DRElMze0L0ek4qEN6lbMv-qF8OZ1mVykFZClED_N0-2EiUYx3O1hyphenhyphena0EjRwMOvDxW/s1600/29-icon-ribbon-brush.jpg" /></a><br />
<br />
<h2>
Trees Brushes</h2>
<a href="http://www.brusheezy.com/brushes/43774-trees-brushes" target="_blank">Download</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWBwG8jEDfu6AhkaFbpcE-uuFB1fdtRAugnxjQ3AvM6zR-8KrP-UDYPvOp_3MHz2rEiIaVQDRfFax7vzBEpk1wn019Tn2HyfIIe3DqrvYo0bIxCv5bjpLKPFDK42GvdqotY8f5e1XliOnT/s1600/30-tree-brushes.jpg" imageanchor="1"><img alt="tree-brushes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWBwG8jEDfu6AhkaFbpcE-uuFB1fdtRAugnxjQ3AvM6zR-8KrP-UDYPvOp_3MHz2rEiIaVQDRfFax7vzBEpk1wn019Tn2HyfIIe3DqrvYo0bIxCv5bjpLKPFDK42GvdqotY8f5e1XliOnT/s1600/30-tree-brushes.jpg" /></a></div>
</div>
yesongshttp://www.blogger.com/profile/14466160119267287649noreply@blogger.com2tag:blogger.com,1999:blog-4276763109087946480.post-84475521839024730972013-05-15T05:02:00.000-07:002013-05-23T11:41:26.275-07:0025 jQuery Slider <div dir="ltr" style="text-align: left;" trbidi="on">
<div class="custom_p custom_link">
A slider can <b>give an awesome look to your website</b>. No doubt other components like <a href="http://www.thinklala.blogspot.in/2013/04/how-to-create-css-dropdown-menu.html">menu</a> etc are also very helpful to create a good design but slider is also an important part of a website. There are many options available for image and content slider. You can write your own slider. But if you are not professional in it, or you can save your time there are <b>ready to use jquery slider plugins</b> for image and content available. You can use any of them. <br />
Here is the list of 25 jquery image and content slider having different animations.<br />
<br />
<h1>
List Of jQuery Slider Plugin</h1>
<br />
<h2>
Simple Multi Item Slider</h2>
<a href="http://tympanus.net/codrops/2012/12/31/how-to-create-a-simple-multi-item-slider/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEb2uyfN_Ez1SwyuMcUL0OdE8t4f39AYsfa96Ytq3RR9gMkz-58H3TCQnZq9CWgLyZ6794XoJKT1yMxyyAHxCTFIs5OKK0GCdreErengGvFZja7ZR_GF1ohr1Ot_nMRzJaw8SFcU9ixHsT/s1600/jquery-images-slider-1.jpg" imageanchor="1"><img alt="Simple Multi Item Slider" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEb2uyfN_Ez1SwyuMcUL0OdE8t4f39AYsfa96Ytq3RR9gMkz-58H3TCQnZq9CWgLyZ6794XoJKT1yMxyyAHxCTFIs5OKK0GCdreErengGvFZja7ZR_GF1ohr1Ot_nMRzJaw8SFcU9ixHsT/s1600/jquery-images-slider-1.jpg" title="Simple Multi Item Slider jquery plugin" /></a><br />
<br />
<a name='more'></a><br /><br />
<h2>
Rotating Image Slider</h2>
<a href="http://tympanus.net/codrops/2011/04/28/rotating-image-slider/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjhpb-1WSsVFNmMhnxNlUGmlzMiKeH6cF4zY18-UXjNbWLdEUALgClzqtSDfnVKqkCzNbkDboELjttI9WqLa8N1d0aopl7d-giK1cQAkgVqCuxMRIHKMd-ZPVbNi1kLr9E6OVGzuN1QjcB/s1600/jquery-images-slider-2.jpg" imageanchor="1"><img alt="Rotating Image Slider" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjhpb-1WSsVFNmMhnxNlUGmlzMiKeH6cF4zY18-UXjNbWLdEUALgClzqtSDfnVKqkCzNbkDboELjttI9WqLa8N1d0aopl7d-giK1cQAkgVqCuxMRIHKMd-ZPVbNi1kLr9E6OVGzuN1QjcB/s1600/jquery-images-slider-2.jpg" title="Rotating Image Slider jquery plugin" /></a><br />
<br />
<h2>
Unslider</h2>
<a href="http://unslider.com/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs4nE_AC5F4Uq1ggCN5x9Na43evWDxlkGl5f1LmlRo4TiYU3y5cWVTAkfMDJkqMW_0NiCevr4ZXvDCknL3w9KcVDnCLbO-B9bp58pcMaPzcHsuRsABJSLTTWSZUNxbp0fciQlLUxVsAx54/s1600/jquery-images-slider-3.jpg" imageanchor="1"><img alt="jquery-image-slider" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs4nE_AC5F4Uq1ggCN5x9Na43evWDxlkGl5f1LmlRo4TiYU3y5cWVTAkfMDJkqMW_0NiCevr4ZXvDCknL3w9KcVDnCLbO-B9bp58pcMaPzcHsuRsABJSLTTWSZUNxbp0fciQlLUxVsAx54/s1600/jquery-images-slider-3.jpg" /></a><br />
<br />
<h2>
Camera slider</h2>
<a href="http://www.pixedelic.com/plugins/camera/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJeyUlXFee73ZKT_UPsUGqjAZReQ3Vpc2wpPaqXTZE21xQ_pjW3q_-qnSv801S_Sl_CDEeSDNuKmEpk-K8Tx1T9L5kjNFMyGhmtkB8X49qhfaxCJaxYtm4JUcm78_Z_F0N0mow8DVsS0nn/s1600/jquery-images-slider-4.jpg" imageanchor="1"><img alt="Camera slider" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJeyUlXFee73ZKT_UPsUGqjAZReQ3Vpc2wpPaqXTZE21xQ_pjW3q_-qnSv801S_Sl_CDEeSDNuKmEpk-K8Tx1T9L5kjNFMyGhmtkB8X49qhfaxCJaxYtm4JUcm78_Z_F0N0mow8DVsS0nn/s1600/jquery-images-slider-4.jpg" /></a><br />
<br />
<h2>
3d Gallery with css3 and jquery</h2>
<a href="http://tympanus.net/codrops/2012/02/06/3d-gallery-with-css3-and-jquery/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjieQVE3NlBdt96Jmu-wA5xFhoooajngp5Uk09JH4lfMghgNhSoNNXKgPGADCnG_RY6WNaa7PLIAoMho40uLOrALBcW1Gr35kVxGsoRA8CFjbEpsW_dKB0szkq8GMog229pyTC5Q0gRwJp0/s1600/jquery-image-3d-slider-6.jpg" imageanchor="1"><img alt="jquery-image-3d-slider" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjieQVE3NlBdt96Jmu-wA5xFhoooajngp5Uk09JH4lfMghgNhSoNNXKgPGADCnG_RY6WNaa7PLIAoMho40uLOrALBcW1Gr35kVxGsoRA8CFjbEpsW_dKB0szkq8GMog229pyTC5Q0gRwJp0/s1600/jquery-image-3d-slider-6.jpg" tilte="jquery-image-3d-slider" /></a><br />
<br />
<h2>
Nivo Slider</h2>
<a href="http://dev7studios.com/nivo-slider/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZgAORalY4e5NN1GzB6De1iiygEspQ5rVQ_XaW0OJWRZY-9oHDqsgoSFpLPF5Wi04u2cOaj7l6pAPII6BdZo1UGLQc_tljw3vvbKQ5xm5aWIUWC5NHuGZC1AVMA_J-yV5uDfUXgbVlCRIm/s1600/jquery-images-slider-7.jpg" imageanchor="1"><img alt="nivo slider" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZgAORalY4e5NN1GzB6De1iiygEspQ5rVQ_XaW0OJWRZY-9oHDqsgoSFpLPF5Wi04u2cOaj7l6pAPII6BdZo1UGLQc_tljw3vvbKQ5xm5aWIUWC5NHuGZC1AVMA_J-yV5uDfUXgbVlCRIm/s1600/jquery-images-slider-7.jpg" /></a><br />
<br />
<h2>
Content Slider Using jQuery</h2>
<a href="http://demo.webdeveloperplus.com/featured-content-slider/index-new.html" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc_CTT2allUn-Jxl3AvEb7Rna1oTtWsQJP24fnLGe-hvIqOmVoQSHFZe1Ae_nEb66WFMbGNS_yKTJh55jblkLKQAvHVZ02yyIiEt2qL_k1b6xcd3XHJOkNLn6OokCYUCenAMvhvPVqxR4B/s1600/jquery-images-slider-8.jpg" imageanchor="1"><img alt="Content Slider Using jQuery" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc_CTT2allUn-Jxl3AvEb7Rna1oTtWsQJP24fnLGe-hvIqOmVoQSHFZe1Ae_nEb66WFMbGNS_yKTJh55jblkLKQAvHVZ02yyIiEt2qL_k1b6xcd3XHJOkNLn6OokCYUCenAMvhvPVqxR4B/s1600/jquery-images-slider-8.jpg" /></a><br />
<br />
<h2>
FlexSlider</h2>
<a href="http://flexslider.woothemes.com/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRQ8vr_YwB9KIPdfLI-YFNe2dPKWnT3YPYiXqznolDuLvRXX0dG6GB3AmCAGLMqJRdsJq63PcSa80K-ekZfO5z1xPR9qMnclaQlQeq-qr3IQnMg58jBvInwkdnDym7KXO_-OyyBr0d5OGY/s1600/jquery-images-slider-9.jpg" imageanchor="1"><img alt="FlexSlider" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRQ8vr_YwB9KIPdfLI-YFNe2dPKWnT3YPYiXqznolDuLvRXX0dG6GB3AmCAGLMqJRdsJq63PcSa80K-ekZfO5z1xPR9qMnclaQlQeq-qr3IQnMg58jBvInwkdnDym7KXO_-OyyBr0d5OGY/s1600/jquery-images-slider-9.jpg" /></a><br />
<br />
<h2>
Auto playing content slider</h2>
<a href="http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8dh7x4GVuUw966jNRnWcy0YvNFdbN9setfbJRGaCo2wu5aeUFn87BwZOEGRgHHUmsBBWPmNFO8yZgYIQJTyuZjq-8ddOe090yFaC0zweNF4f5n6-Kirq6Wg5Gi0nXCQJkQy9aeuhpwzSJ/s1600/jquery-images-slider-10.jpg" imageanchor="1"><img alt="Auto playing content slider" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8dh7x4GVuUw966jNRnWcy0YvNFdbN9setfbJRGaCo2wu5aeUFn87BwZOEGRgHHUmsBBWPmNFO8yZgYIQJTyuZjq-8ddOe090yFaC0zweNF4f5n6-Kirq6Wg5Gi0nXCQJkQy9aeuhpwzSJ/s1600/jquery-images-slider-10.jpg" /></a><br />
<br />
<h2>
jQuery Slider</h2>
<a href="http://www.sliderwall.com/jquery-slider-example.html#1" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsu7iD4VO80iLiwymAT2JyA4mmalAEW0R20AWDjBT1yynWjhnkoo2z4UB35AecEDe_r8dYORubEiX7ux8lcy4CXj2PxAHthunbtm4-fZGkfRpZ8OhIbxr7jnPZIrI38B4zjXv_kSAEz9o6/s1600/jquery-images-slider-11.jpg" imageanchor="1"><img alt="jQuery Slider" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsu7iD4VO80iLiwymAT2JyA4mmalAEW0R20AWDjBT1yynWjhnkoo2z4UB35AecEDe_r8dYORubEiX7ux8lcy4CXj2PxAHthunbtm4-fZGkfRpZ8OhIbxr7jnPZIrI38B4zjXv_kSAEz9o6/s1600/jquery-images-slider-11.jpg" /></a><br />
<br />
<h2>
PhotoCradle</h2>
<a href="http://yevhentiurin.github.io/jsphotocradle/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWq6tso0JXfDCFKOQHln1cS1-qGbOvE0t_21ITX2rp1bH4djTRjogo1oD0iEQ1KcWbkxM9IQVV1lKIpi8zD8VaOe8D5FmBerkP-PBz8q7jYZIPesnwM67WJELwUG-RkMegsP0bhyczZVsk/s1600/jquery-images-slider-12.jpg" imageanchor="1"><img alt="PhotoCradle slider" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWq6tso0JXfDCFKOQHln1cS1-qGbOvE0t_21ITX2rp1bH4djTRjogo1oD0iEQ1KcWbkxM9IQVV1lKIpi8zD8VaOe8D5FmBerkP-PBz8q7jYZIPesnwM67WJELwUG-RkMegsP0bhyczZVsk/s1600/jquery-images-slider-12.jpg" /></a><br />
<br />
<h2>
jQuery Image Slider</h2>
<a href="http://jacksbox.de/fractiondemos/example_slides.html" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj02Vu59A5OwB3QL5YU8BKY-n8Apml2iBJ9giHAQlbUIrRn0VwCrJx5mRqGMn2-cJQTsGGdMB-rhBPdXRQ6H6YiaNh6p-NBeAc8hbLYP1dQrP-uDoRgBKS5ronphCHzRB4le3cAyuvLGMOL/s1600/jquery-images-slider-13.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj02Vu59A5OwB3QL5YU8BKY-n8Apml2iBJ9giHAQlbUIrRn0VwCrJx5mRqGMn2-cJQTsGGdMB-rhBPdXRQ6H6YiaNh6p-NBeAc8hbLYP1dQrP-uDoRgBKS5ronphCHzRB4le3cAyuvLGMOL/s1600/jquery-images-slider-13.jpg" /></a><br />
<br />
<h2>
Wow Slider</h2>
<a href="http://wowslider.com/best-jquery-slider-crystal-linear-demo.html" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyXY3ed1WV_JI6FcUuO65f6LlRuW4VC82Q7PVOAX9kTzerUj9LXH2MHKhs2SH9jiEvu5ddb5CwLQL7UP6bdYMD2r9lHBoYqETPuXoL4nI5bRmhnyMieSNSxmXXdX7EBngwEbjjWwgjC6SP/s1600/jquery-images-slider-14.jpg" imageanchor="1"><img alt="Wow Slider" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyXY3ed1WV_JI6FcUuO65f6LlRuW4VC82Q7PVOAX9kTzerUj9LXH2MHKhs2SH9jiEvu5ddb5CwLQL7UP6bdYMD2r9lHBoYqETPuXoL4nI5bRmhnyMieSNSxmXXdX7EBngwEbjjWwgjC6SP/s1600/jquery-images-slider-14.jpg" /></a><br />
<br />
<h2>
jquery Roundrr</h2>
<a href="http://addyosmani.com/blog/jquery-roundrr/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4_fT2QAa8MwHMVkc9k8HtiDxTQ-w9-7rVq-ra3C1WQupurH4pPOI_Wk1chMXBrt47-7Md-UyMJxOsnTpw3AddjmAZkcDW_ZJnWYOy2NTP4rnnliSpYxrMxRzQDwuNebXXB08KswKJlDL8/s1600/jquery-images-slider-15.jpg" imageanchor="1"><img alt="jquery Roundrr" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4_fT2QAa8MwHMVkc9k8HtiDxTQ-w9-7rVq-ra3C1WQupurH4pPOI_Wk1chMXBrt47-7Md-UyMJxOsnTpw3AddjmAZkcDW_ZJnWYOy2NTP4rnnliSpYxrMxRzQDwuNebXXB08KswKJlDL8/s1600/jquery-images-slider-15.jpg" /></a><br />
<br />
<h2>
S3slider/</h2>
<a href="http://www.serie3.info/s3slider/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4-Z6CQzltd_Aoj6NXFT2M8vSfaHf61tagx03oNWloxJ_MSO47AhwQDQzE8H5aRAtJE0FqHXl-y0-jaWj-k04VlOfNuNphMYdojSOdIPYWZELSfrkg46wnBrCcb48xOUvLdrP94OcTFeio/s1600/jquery-images-slider-16.jpg" imageanchor="1"><img alt="S3slider" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4-Z6CQzltd_Aoj6NXFT2M8vSfaHf61tagx03oNWloxJ_MSO47AhwQDQzE8H5aRAtJE0FqHXl-y0-jaWj-k04VlOfNuNphMYdojSOdIPYWZELSfrkg46wnBrCcb48xOUvLdrP94OcTFeio/s1600/jquery-images-slider-16.jpg" /></a><br />
<br />
<h2>
Moving Boxes Slider</h2>
<a href="http://css-tricks.com/moving-boxes/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpBrRgC5tlgvgVf9sIBk2hoQZQeGSto9VjZXR8gy7mshPMlXcKukph4APzhxKAa0V8RIQAS9eup-hUkYmoeiDsNNgPrGXus4zd_aQFiJZkNQ6s3PcDgXfpIIasEZp7PBXrGND_vAJNIN7O/s1600/jquery-images-slider-17.jpg" imageanchor="1"><img alt="Moving Boxes Slider" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpBrRgC5tlgvgVf9sIBk2hoQZQeGSto9VjZXR8gy7mshPMlXcKukph4APzhxKAa0V8RIQAS9eup-hUkYmoeiDsNNgPrGXus4zd_aQFiJZkNQ6s3PcDgXfpIIasEZp7PBXrGND_vAJNIN7O/s1600/jquery-images-slider-17.jpg" /></a><br />
<br />
<h2>
Supersized jQuery Slider Plugin</h2>
<a href="http://www.buildinternet.com/project/supersized/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4rmEQ-BePnlMQXb7yMTRn4NUBVKNAb-FUav8I249rz4j80JdF69-TgrfFxukCUoRiElehGHH2zDms-Jyfju1MPnLOiywzuuUjvb1RDXln3OrCG2yaaS5PlO53sDsw_OhBfxOh3DI4pCxX/s1600/jquery-images-slider-18.jpg" imageanchor="1"><img alt="Supersized jQuery Slider Plugin" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4rmEQ-BePnlMQXb7yMTRn4NUBVKNAb-FUav8I249rz4j80JdF69-TgrfFxukCUoRiElehGHH2zDms-Jyfju1MPnLOiywzuuUjvb1RDXln3OrCG2yaaS5PlO53sDsw_OhBfxOh3DI4pCxX/s1600/jquery-images-slider-18.jpg" /></a><br />
<br />
<h2>
jQuery Image Slider With Thumbnail</h2>
<a href="http://coffeescripter.com/code/ad-gallery/#ad-image-6" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheYE72Q9m3I7zDDUYehRXzGXlag5zRwWBJ0ySPQgOgqCTCJMafALO-p-zQkjWmxYQgzpH83Wn78xd-jalAkphfhpec1R2aEQgmfhoKtIS1gCIf7QcY_zxUKXAZMQgpWugRst3rZaLVsiYM/s1600/jquery-images-slider-19.jpg" imageanchor="1"><img alt="jQuery Image Slider With Thumbnail" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheYE72Q9m3I7zDDUYehRXzGXlag5zRwWBJ0ySPQgOgqCTCJMafALO-p-zQkjWmxYQgzpH83Wn78xd-jalAkphfhpec1R2aEQgmfhoKtIS1gCIf7QcY_zxUKXAZMQgpWugRst3rZaLVsiYM/s1600/jquery-images-slider-19.jpg" /></a><br />
<br />
<h2>
Apple Gallery Slideshow</h2>
<a href="http://demo.tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/demo.html" target="_blank"></a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi74wkv5E4Z2tKk0rCh6dDBDa2Hl6gK5iBuRVskN3VX8xHf3VH2soTpZOcMtrDVmsA0yzs52rukYKm_8soIx658pP_7k8DM_TNMgyJ-7NuhRhkIJ6u-fgqJilXweMbvN3dgnA8gi3-bLNbw/s1600/jquery-images-slider-20.jpg" imageanchor="1"><img alt="apple-gallery-slideshow" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi74wkv5E4Z2tKk0rCh6dDBDa2Hl6gK5iBuRVskN3VX8xHf3VH2soTpZOcMtrDVmsA0yzs52rukYKm_8soIx658pP_7k8DM_TNMgyJ-7NuhRhkIJ6u-fgqJilXweMbvN3dgnA8gi3-bLNbw/s1600/jquery-images-slider-20.jpg" /></a><br />
<br />
<h2>
3d Wall Gallary</h2>
<a href="http://tympanus.net/codrops/2011/02/02/3d-wall-gallery/" target="_blank"></a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEgXpv_qwA0u5j8eqC5x4bzr7mIugJUQSwba8uYUnRyTy_N2JmfxHJ6i6ab9pk2G9bfd6d8mqsCpOO0Zfx4MaeWf5rZuAdsP2upBtfbTdGMpbkg3dMq1luZfTU9HaPjbGgSOCO0GRke3SX/s1600/jquery-images-slider-21.jpg" imageanchor="1"><img alt="3d-slider" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEgXpv_qwA0u5j8eqC5x4bzr7mIugJUQSwba8uYUnRyTy_N2JmfxHJ6i6ab9pk2G9bfd6d8mqsCpOO0Zfx4MaeWf5rZuAdsP2upBtfbTdGMpbkg3dMq1luZfTU9HaPjbGgSOCO0GRke3SX/s1600/jquery-images-slider-21.jpg" /></a><br />
<br />
<h2>
3d Slice Slider</h2>
<a href="http://tympanus.net/codrops/2011/09/05/slicebox-3d-image-slider/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3LuPnu7dYgUp2RU0jmTedOnUFJNDqQ0SyB1wnkZ7OmZBdT1zF_62uY1fVeqxYF_yTBVoyjEYuGDuacXNcceIuoBy9eK_ZAN_PcSCHcLJ1O9ty-apHjAtf6mrZdOrECebaFyeHGqAh5RLp/s1600/jquery-images-slider-22.jpg" imageanchor="1"><img alt="3d Slice Slider" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3LuPnu7dYgUp2RU0jmTedOnUFJNDqQ0SyB1wnkZ7OmZBdT1zF_62uY1fVeqxYF_yTBVoyjEYuGDuacXNcceIuoBy9eK_ZAN_PcSCHcLJ1O9ty-apHjAtf6mrZdOrECebaFyeHGqAh5RLp/s1600/jquery-images-slider-22.jpg" /></a><br />
<br />
<h2>
FerroSlider</h2>
<a href="http://www.alessandroferrini.it/lab/jQueryPlugins/ferroSlider/docs/" target="_blank"></a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPeFsGy6zlwvyxn7gtt_44KzGu7DIvU6jYyW_fBFxURgDlElVk3LHCbtsxjuvYCb0nBDueQgEGUSqYgEkJc1xOetOoMyMkstbRR3OGWUmGOK6ZRscBLv0JckwtZpHbBsRt5v1JFTU37hh6/s1600/jquery-images-slider-23.jpg" imageanchor="1"><img alt="FerroSlider" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPeFsGy6zlwvyxn7gtt_44KzGu7DIvU6jYyW_fBFxURgDlElVk3LHCbtsxjuvYCb0nBDueQgEGUSqYgEkJc1xOetOoMyMkstbRR3OGWUmGOK6ZRscBLv0JckwtZpHbBsRt5v1JFTU37hh6/s1600/jquery-images-slider-23.jpg" /></a><br />
<br />
<h2>
Aviaslider</h2>
<a href="http://aviathemes.com/aviaslider/?slider=diagonal-blocks" target="_blank"></a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibZG0bMC3HN-G2P81MMP5_U9i5mg-JWb5_RJWyHpggS-suaeuszZyNMQnCKLTqXqiVMgwqZ58u-TkCnpHJT1cwHdToffmDdTnVIlkG_EIcLTCBe6QZG9S-LPCUGVwfIRNmLHYp5XckRhE5/s1600/jquery-images-slider-24.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibZG0bMC3HN-G2P81MMP5_U9i5mg-JWb5_RJWyHpggS-suaeuszZyNMQnCKLTqXqiVMgwqZ58u-TkCnpHJT1cwHdToffmDdTnVIlkG_EIcLTCBe6QZG9S-LPCUGVwfIRNmLHYp5XckRhE5/s1600/jquery-images-slider-24.jpg" title="Aviaslider" /></a><br />
<br />
<h2>
Skitter Slider</h2>
<a href="http://www.skitter-slider.net/" target="_blank"></a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTJJu_SCJAAFih5vsZZo9qNI6F5-XVEcHAz-eGB9TCBC8_Lpcsbuk5sT72E1DO-KcLHoT3sPPhHIudOZsGSDEJCT5Jk9e-6NxQVFQ5wwGXQUuNavU_xDEfVaq1WitUkHlVCv2OCmLu3K5a/s1600/jquery-images-slider-25.jpg" imageanchor="1"><img alt="Skitter Slider" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTJJu_SCJAAFih5vsZZo9qNI6F5-XVEcHAz-eGB9TCBC8_Lpcsbuk5sT72E1DO-KcLHoT3sPPhHIudOZsGSDEJCT5Jk9e-6NxQVFQ5wwGXQUuNavU_xDEfVaq1WitUkHlVCv2OCmLu3K5a/s1600/jquery-images-slider-25.jpg" /></a></div>
</div>
yesongshttp://www.blogger.com/profile/14466160119267287649noreply@blogger.com5tag:blogger.com,1999:blog-4276763109087946480.post-76083861816090999872013-05-07T07:00:00.000-07:002013-05-23T11:40:36.255-07:00Commonly Used Social Media Icons Vector And Psd Free<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="custom_p">
Social Media icons are very important for a website .Mostly In two ways one is seo and other is design. Social Media icons play important role while <a href="http://thinklala.blogspot.com/" title="Design a website - Thinklala">designing a website</a>. Here is a vector of <b>most commonly used social media icons</b> buttons. These are glossy and having border. That give them a <b>3d button</b> look.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTyFQXgyOnltpRkD8tAuiZJh28XkZFi8CcRHNkIb3mI5WU0zVEijfxVN6jGeEXBSc3SOgus5I0NTlAtOsPbgstrHGKClskTFTDP7b7dc6xLt4YTkA-_ffT6gQR6vgaUiFIVi70qSFf7jgV/s1600/social-media-glossy-button-icon.png" imageanchor="1"><img alt="social-media-glossy-button-icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTyFQXgyOnltpRkD8tAuiZJh28XkZFi8CcRHNkIb3mI5WU0zVEijfxVN6jGeEXBSc3SOgus5I0NTlAtOsPbgstrHGKClskTFTDP7b7dc6xLt4YTkA-_ffT6gQR6vgaUiFIVi70qSFf7jgV/s1600/social-media-glossy-button-icon.png" title="Free Social Media icon glossy 3d Buttons- Thinklala" /></a><br />
<h3 style="text-align: left;">
Download Zip file of Social Media Icons<a name='more'></a></h3>
<br />
<a class="download_but" href="https://docs.google.com/viewer?a=v&pid=sites&srcid=ZGVmYXVsdGRvbWFpbnx0aGlua2xhbGF8Z3g6M2Y4YjQ0YTQ2ZDUwN2ViNA" title="Download Zip file of Glossy social icons">Download</a></div>
</div>
<br />
<h3 style="text-align: left;">
Zip Include Following items</h3>
<ol style="text-align: left;">
<li>Vector Image.</li>
<li>40 social icons with transparent background.</li>
<li>Layered Psd file of icons that is easily customizable.</li>
</ol>
<br />
<br /></div>
yesongshttp://www.blogger.com/profile/14466160119267287649noreply@blogger.com4tag:blogger.com,1999:blog-4276763109087946480.post-33973292877245536152013-05-01T23:04:00.002-07:002013-05-01T23:04:55.631-07:0025 + Shopping Cart / Ecommerce Website Designs<div dir="ltr" style="text-align: left;" trbidi="on"><div class="custom_p custom_link ">Now a days a new trend of shopping is on its peak. I am talking about <b>online shopping</b>. Everybody is busy on shop online. And if you are thinking about to <b>create a Shopping cart Website</b>. You should first select the <b>design of shopping cart website</b>. There is no doubt that the design matters in every site but in shopping cart in matters most. Because if the user not likes design of your site or your design makes irritate to user the user will never visit your site again. There are also lots of others important things to be taken care while creating a shopping cart website. That we discussed later.<br />
<br />
Now we are talking about the design. Here are some examples of shopping carts site. That can give an idea about the design. <br />
<br />
<h1 style="line-height: 34px;">Shopping Cart / Ecommerce Website Designs</h1><br />
<a href="http://www.tesco.com/" target="_blank">Visit site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMqPTNkW1TFrHvYUUvyEd5LME8PFIFL-5qxoJU0Wqw9YSff797ad2KPwHEjJbw5Mv8tEhBX4QP86MZrB9kcWaWycEHuuYM-dJ6YyMqV6jNEC8bl07wLXL75_HTsSNQUqrw0pcMnyYRBEV7/s1600/shopping-cart-desgin-2.jpg" imageanchor="1"><img alt="shopping-cart-desgin-2" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMqPTNkW1TFrHvYUUvyEd5LME8PFIFL-5qxoJU0Wqw9YSff797ad2KPwHEjJbw5Mv8tEhBX4QP86MZrB9kcWaWycEHuuYM-dJ6YyMqV6jNEC8bl07wLXL75_HTsSNQUqrw0pcMnyYRBEV7/s1600/shopping-cart-desgin-2.jpg" tilte="shopping-cart-desgin" /></a><br />
<br />
<a href="http://www.argos.co.uk/static/Home.htm" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLkgxLQHCGuva5nnPZeljxlK1bV8yUt1VF9Hg7QBdOkhS-QMZAz57dAL8iRwIhXuKprk0mtiOFdpJYu7DWpGRfvkHadWJaoNeLpcGdSBnSldXqy2oW5HMGfmj-3E4qowu7m5q_dWA7BRPY/s1600/shopping-cart-desgin-3.jpg" imageanchor="1"><img alt="shopping-cart-website-design-2" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLkgxLQHCGuva5nnPZeljxlK1bV8yUt1VF9Hg7QBdOkhS-QMZAz57dAL8iRwIhXuKprk0mtiOFdpJYu7DWpGRfvkHadWJaoNeLpcGdSBnSldXqy2oW5HMGfmj-3E4qowu7m5q_dWA7BRPY/s1600/shopping-cart-desgin-3.jpg" /></a><br />
<br />
<a href="http://www.zalando.co.uk/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5Q24xqbupmMLtwxn2VewUg55oBJjBLUAVM3BGX2H9e6wKuE2Ih4P3IITqcAtUX4eDd-_TokGJH416GgYi7s3dBBPMLtk6-On5FXompulDAY7ZJ2c3d1qb-IDXC3YJRHqAGtV3NdDEBQod/s1600/shopping-cart-desgin-4.jpg" imageanchor="1"><img alt="shopping-cart-website-design-3" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5Q24xqbupmMLtwxn2VewUg55oBJjBLUAVM3BGX2H9e6wKuE2Ih4P3IITqcAtUX4eDd-_TokGJH416GgYi7s3dBBPMLtk6-On5FXompulDAY7ZJ2c3d1qb-IDXC3YJRHqAGtV3NdDEBQod/s1600/shopping-cart-desgin-4.jpg" /></a><br />
<br />
<a href="http://www.asos.com/Men/?WT.ac=Generic_Men" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9I1HpRgQ4Mq1d4Qhz-JucBu1oFBe49lCED9xuIHPLPoqHRJ-fscsC_0MlRvPephIbNXA10KFpEIvaM5NeHLvdnWLvzJRIyC6ZiVy0CyEaqfpAdeWCxvX25S6Da7Qjzjxo2gRv1iB35_A1/s1600/shopping-cart-desgin-5.jpg" imageanchor="1"><img alt="shopping-cart-website-design-4" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9I1HpRgQ4Mq1d4Qhz-JucBu1oFBe49lCED9xuIHPLPoqHRJ-fscsC_0MlRvPephIbNXA10KFpEIvaM5NeHLvdnWLvzJRIyC6ZiVy0CyEaqfpAdeWCxvX25S6Da7Qjzjxo2gRv1iB35_A1/s1600/shopping-cart-desgin-5.jpg" /></a><br />
<br />
<a href="http://www.viviennewestwood.co.uk/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-xicdZffWZsGAC0zk4x0i6d1sZS-vldxt2ev8W5LFywbsOwAV4gfDEvu7xtb7-UEuCoinlRjc5lCq_vUJZqWIOXSXO2srEJbUmRf3Gq3YGpEKgOlf6gQrNoWOVA0TSx9jNBzFVHBKukVZ/s1600/shopping-cart-desgin-6.jpg" imageanchor="1"><img alt="shopping-cart-website-design-5" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-xicdZffWZsGAC0zk4x0i6d1sZS-vldxt2ev8W5LFywbsOwAV4gfDEvu7xtb7-UEuCoinlRjc5lCq_vUJZqWIOXSXO2srEJbUmRf3Gq3YGpEKgOlf6gQrNoWOVA0TSx9jNBzFVHBKukVZ/s1600/shopping-cart-desgin-6.jpg" /></a><br />
<br />
<a href="http://www.buyforlessonline.co.uk/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVNpcS6kq3IqMNT0qzu2-KGqZRis0E4dBOOT_ZhCuUV7vXF23ivjQkBPqu9Dr-KjtJj2w4uXKyTtsCZrA-L6ZZg3WiFRgksjeEDkgPaZgwnjFJwOcQVD5czvFG_fmiPaNSD32ldvHRT9mO/s1600/shopping-cart-desgin-7.jpg" imageanchor="1"><img alt="shopping-cart-website-design-6" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVNpcS6kq3IqMNT0qzu2-KGqZRis0E4dBOOT_ZhCuUV7vXF23ivjQkBPqu9Dr-KjtJj2w4uXKyTtsCZrA-L6ZZg3WiFRgksjeEDkgPaZgwnjFJwOcQVD5czvFG_fmiPaNSD32ldvHRT9mO/s1600/shopping-cart-desgin-7.jpg" /></a><br />
<br />
<a href="http://www.muji.us/store/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0NyYC1Oy0d8c3uLAxW-o-3je4U7k87h7KKmBIdGhYcxMZjQxqCIiZ8riSEd38cayQFr9LgmNmpYcHeF2bQJ9qgo52ZDJ9X1s5FaxB9S0o_0L4TckJv5e_rvoxewtAfVsPGLt0m2BUsESv/s1600/shopping-cart-desgin-8.jpg" imageanchor="1"><img alt="shopping-cart-website-design-7" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0NyYC1Oy0d8c3uLAxW-o-3je4U7k87h7KKmBIdGhYcxMZjQxqCIiZ8riSEd38cayQFr9LgmNmpYcHeF2bQJ9qgo52ZDJ9X1s5FaxB9S0o_0L4TckJv5e_rvoxewtAfVsPGLt0m2BUsESv/s1600/shopping-cart-desgin-8.jpg" /></a><br />
<br />
<a href="http://www.abercrombie.com/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOBiB8M1cVX-be9F87VNMzT3XPovi4DXCgkUT-PvGaQoH7aaenVu8m8ciDEzcZz7Ob2JET_1yRK150IAEmHtO2T2JZXmNUshRXv3Al6P-1W3FfH2Y67tDpp8WMCCTzgPQT24qLllWtT3FA/s1600/shopping-cart-desgin-9.jpg" imageanchor="1"><img alt="shopping-cart-website-design-8" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOBiB8M1cVX-be9F87VNMzT3XPovi4DXCgkUT-PvGaQoH7aaenVu8m8ciDEzcZz7Ob2JET_1yRK150IAEmHtO2T2JZXmNUshRXv3Al6P-1W3FfH2Y67tDpp8WMCCTzgPQT24qLllWtT3FA/s1600/shopping-cart-desgin-9.jpg" /></a><br />
<br />
<a href="http://rediswhite.com/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPrzEry-3AsEbgX5uK7W3q8AcqYRH6TTp4YSPR1X0ZIhjwnM7rTcuqSISpVbO3_VXHeZP3SaUnrTCajOzrGRchdyFL6Bmx6lsKG9PhbiwdDWpM6Y1YDHYm1pVYCPsG-k2zOgArUBTdDuvx/s1600/shopping-cart-desgin-11.jpg" imageanchor="1"><img alt="shopping-cart-website-design-9" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPrzEry-3AsEbgX5uK7W3q8AcqYRH6TTp4YSPR1X0ZIhjwnM7rTcuqSISpVbO3_VXHeZP3SaUnrTCajOzrGRchdyFL6Bmx6lsKG9PhbiwdDWpM6Y1YDHYm1pVYCPsG-k2zOgArUBTdDuvx/s1600/shopping-cart-desgin-11.jpg" /></a><br />
<br />
<a href="http://www.basspro.com/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkbtsxhVuRXtB6TRMC6fjSGqCJ_gI0Zs1sHQNVeQt1AwgiSpWaD8NZBWUdC_UcLNyfDuWkWWwbzJAk4UBJblqui6YUuJPNmCEGtRlwKqIPMhXk5sUqhVnYGcbv5tvHtI_OS3LY2Ove1bXC/s1600/shopping-cart-desgin-12.jpg" imageanchor="1"><img alt="shopping-cart-website-design-10" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkbtsxhVuRXtB6TRMC6fjSGqCJ_gI0Zs1sHQNVeQt1AwgiSpWaD8NZBWUdC_UcLNyfDuWkWWwbzJAk4UBJblqui6YUuJPNmCEGtRlwKqIPMhXk5sUqhVnYGcbv5tvHtI_OS3LY2Ove1bXC/s1600/shopping-cart-desgin-12.jpg" /></a><br />
<br />
<a href="http://myphonedeals.co.uk/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5tizKkEwF72eZfHuAEE4x7k8nadUM8Z8ZGMmc1VlE4CK5tPlklG7k0WcnO-DZOJhdNsThd_UyZdobVoOBkbfikdXJWVvbfCaSseBcDo0c0V6phqBx3KBeoZV4g8iJKeV8eh6zcFW8JPlt/s1600/shopping-cart-desgin-13.jpg" imageanchor="1"><img alt="shopping-cart-website-design-11" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5tizKkEwF72eZfHuAEE4x7k8nadUM8Z8ZGMmc1VlE4CK5tPlklG7k0WcnO-DZOJhdNsThd_UyZdobVoOBkbfikdXJWVvbfCaSseBcDo0c0V6phqBx3KBeoZV4g8iJKeV8eh6zcFW8JPlt/s1600/shopping-cart-desgin-13.jpg" /></a><br />
<br />
<a href="http://www.47brand.com/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0mUpBnFKXLlj_9TXCXd4ipFnNUnIXFrJHlKL8cn1EdmgwTRnRj1zNBXiYqFvlTMILcqoorhIS7H5v9Y_-80KLpq28tuEOiWIDjvVnmdr4C0p5XD7fDRCdg8C5d7AiW12G9BCfsPEwQLpG/s1600/shopping-cart-desgin-14.jpg" imageanchor="1"><img alt="shopping-cart-website-design-12" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0mUpBnFKXLlj_9TXCXd4ipFnNUnIXFrJHlKL8cn1EdmgwTRnRj1zNBXiYqFvlTMILcqoorhIS7H5v9Y_-80KLpq28tuEOiWIDjvVnmdr4C0p5XD7fDRCdg8C5d7AiW12G9BCfsPEwQLpG/s320/shopping-cart-desgin-14.jpg" /></a><br />
<br />
<a href="http://www.designbyhumans.com/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhti3WAM3BWEvDxnt26_tnpksUWI5SpEbXvEkw96lvWmH58t6LYwAArfJg9RhpVa6oOSzzja_bEivt0Ed6kg2Wv-pUbJiq4ff4znZU0UIB_kWU2P2JT7mF_L38WVF2r5ozA3r0u9bUBbOcc/s1600/shopping-cart-desgin-15.jpg" imageanchor="1"><img alt="shopping-cart-website-design-13" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhti3WAM3BWEvDxnt26_tnpksUWI5SpEbXvEkw96lvWmH58t6LYwAArfJg9RhpVa6oOSzzja_bEivt0Ed6kg2Wv-pUbJiq4ff4znZU0UIB_kWU2P2JT7mF_L38WVF2r5ozA3r0u9bUBbOcc/s1600/shopping-cart-desgin-15.jpg" /></a><br />
<br />
<a href="ttp://www.diva.net.au/#/home" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnC4TGhPHqsls5gFsIWVP6D96L2r_dKB8p3alymNrklVd62-UIkYe2ld4ag5D8ndr-OiLez9AbeJAaL6Xlb8bcEPW3b8f5vrsvsE_1zdI7GIvcPAmjmj0F2lHlTgzDK3V8OOf0PrgpcnvM/s1600/shopping-cart-desgin-16.jpg" imageanchor="1"><img alt="shopping-cart-website-design-14" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnC4TGhPHqsls5gFsIWVP6D96L2r_dKB8p3alymNrklVd62-UIkYe2ld4ag5D8ndr-OiLez9AbeJAaL6Xlb8bcEPW3b8f5vrsvsE_1zdI7GIvcPAmjmj0F2lHlTgzDK3V8OOf0PrgpcnvM/s1600/shopping-cart-desgin-16.jpg" /></a><br />
<br />
<a href="http://www.storyville.com/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuRzgPd_Z3gANDOZiSjqeaeYQKwvZgaT1bXamRsiDBn8zwn1luQWbvkmDQNp4r10ryURZ0bRtlL27N2PPVQfce-I1tKPoJBiSLHh9lgItUfXa0R_XTnWps6JenR0DgX7ODyS-En2NY9RP0/s1600/shopping-cart-desgin-17.jpg" imageanchor="1"><img alt="shopping-cart-website-design-15" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuRzgPd_Z3gANDOZiSjqeaeYQKwvZgaT1bXamRsiDBn8zwn1luQWbvkmDQNp4r10ryURZ0bRtlL27N2PPVQfce-I1tKPoJBiSLHh9lgItUfXa0R_XTnWps6JenR0DgX7ODyS-En2NY9RP0/s1600/shopping-cart-desgin-17.jpg" /></a><br />
<br />
<a href="http://www.godiva.com/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjciV3-n7z8EwN-d6RIayaKGpDXn-DZYGPiJeQIuBi5iRkp1Md9Q9jJXliUCzHspI8pNeqOmDSjzn9s0FI1AaohzzeeQeE0QVDlWUUJnlKLt8GuSTPGHVuJfC6hlL6ZwrK_C9GenpGphwDs/s1600/shopping-cart-desgin-18.jpg" imageanchor="1"><img alt="shopping-cart-website-design-16" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjciV3-n7z8EwN-d6RIayaKGpDXn-DZYGPiJeQIuBi5iRkp1Md9Q9jJXliUCzHspI8pNeqOmDSjzn9s0FI1AaohzzeeQeE0QVDlWUUJnlKLt8GuSTPGHVuJfC6hlL6ZwrK_C9GenpGphwDs/s1600/shopping-cart-desgin-18.jpg" /></a><br />
<br />
<a href="http://www.patrikervell.com/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqNzMYr7rg8FUr8PMd6_RFgo3HpD__1WET2WbQgaSPfwtSjSZMW_2X9RMJnJlMIE8GF64ZYZCOwg1If0KqntUGUWTjsxXyE3yPMhwQwDJhDLiROO0WRMyXV25M4na06tdX5ix7dVHWYFzx/s1600/shopping-cart-desgin-19.jpg" imageanchor="1"><img alt="shopping-cart-website-design-17" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqNzMYr7rg8FUr8PMd6_RFgo3HpD__1WET2WbQgaSPfwtSjSZMW_2X9RMJnJlMIE8GF64ZYZCOwg1If0KqntUGUWTjsxXyE3yPMhwQwDJhDLiROO0WRMyXV25M4na06tdX5ix7dVHWYFzx/s1600/shopping-cart-desgin-19.jpg" /></a><br />
<br />
<a href="http://us.levi.com/home/index.jsp" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPO-HReZEuulg7iKEUNdAuSCdlptO8ybUUfIhCELVdct8ZzreeqGEVNqUvc56-8k0_STgEocWCGoEwBZgKcR3bJTiNc8PuEm1VXqveubjXbe5WuBqx-lVLahfQ26qZGWi-oG7LWscoAA2i/s1600/shopping-cart-desgin-20.jpg" imageanchor="1"><img alt="shopping-cart-website-design-18" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPO-HReZEuulg7iKEUNdAuSCdlptO8ybUUfIhCELVdct8ZzreeqGEVNqUvc56-8k0_STgEocWCGoEwBZgKcR3bJTiNc8PuEm1VXqveubjXbe5WuBqx-lVLahfQ26qZGWi-oG7LWscoAA2i/s1600/shopping-cart-desgin-20.jpg" /></a><br />
<br />
<a href="https://www.drippinginfat.com/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXrsSK4YfFEPdgZYNYK3Q_AvZFhY2TVDsERiw0Q2heN8_4Nj6TDVH61tctw_UM_hYCyenftqfU1QrgRTJD3NN64G_5PfXpuI6II_mO-lYs1q_ci5sgKAkOok4k4Ad3CgOVxxELSzhkQ_k-/s1600/shopping-cart-desgin-21.jpg" imageanchor="1"><img alt="shopping-cart-website-design-19" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXrsSK4YfFEPdgZYNYK3Q_AvZFhY2TVDsERiw0Q2heN8_4Nj6TDVH61tctw_UM_hYCyenftqfU1QrgRTJD3NN64G_5PfXpuI6II_mO-lYs1q_ci5sgKAkOok4k4Ad3CgOVxxELSzhkQ_k-/s1600/shopping-cart-desgin-21.jpg" /></a><br />
<br />
<a href="http://www.farfetch.com/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2CRyLHXf2txO6KHA3MJQ3l0rNJxKJFQKE6jfSqAZO5DY2Zrmwsib6Fh9El7SJXsYkK3n6mivm_1_ZDG7c1vEX6IHiw0v79NuVB_sNP8GCOH9NG1UEvc8NlIxYZVzXHYk1GHwtL5385Jez/s1600/shopping-cart-desgin-22.jpg" imageanchor="1"><img alt="shopping-cart-website-design-20" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2CRyLHXf2txO6KHA3MJQ3l0rNJxKJFQKE6jfSqAZO5DY2Zrmwsib6Fh9El7SJXsYkK3n6mivm_1_ZDG7c1vEX6IHiw0v79NuVB_sNP8GCOH9NG1UEvc8NlIxYZVzXHYk1GHwtL5385Jez/s1600/shopping-cart-desgin-22.jpg" /></a><br />
<br />
<a href="http://www.nau.com/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsr-tlYbJeO_AZz4Ta3kviUJ0IPyqEUtInKZA9QO6WjyKWLMBAIsADYwYI5dvCGmrbn51_WJlmbxi-GLP5U0X9EICrbks_OVLnqUEVmKAUfA-_rB4Apj4wy2sVwwlM0iQrPTnak7e4TLpI/s1600/shopping-cart-desgin-23.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsr-tlYbJeO_AZz4Ta3kviUJ0IPyqEUtInKZA9QO6WjyKWLMBAIsADYwYI5dvCGmrbn51_WJlmbxi-GLP5U0X9EICrbks_OVLnqUEVmKAUfA-_rB4Apj4wy2sVwwlM0iQrPTnak7e4TLpI/s1600/shopping-cart-desgin-23.jpg" /></a><br />
<br />
<a href="http://www.tensionwire.com/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4QwpTVVRNvsHFbB5XhuOZ84KT_wF8jWk_PN4teDlShAlVzA6og2kKcvfNKzpzb7lkL2FbbZ6IoLFuO5b9kmAsVl8Nph4yvpDzTVjfueg_US5xYxa-aYPNWtq1lmeOEihxtUWOsD9PuSn9/s1600/shopping-cart-desgin-24.jpg" imageanchor="1"><img alt="shopping-cart-website-design-21" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4QwpTVVRNvsHFbB5XhuOZ84KT_wF8jWk_PN4teDlShAlVzA6og2kKcvfNKzpzb7lkL2FbbZ6IoLFuO5b9kmAsVl8Nph4yvpDzTVjfueg_US5xYxa-aYPNWtq1lmeOEihxtUWOsD9PuSn9/s1600/shopping-cart-desgin-24.jpg" /></a><br />
<br />
<a href="http://www.saholic.com/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEDJZ6B_EFcjczZ4wiujF1M1LA1LYfgh-FNudNsYnQnO2n_3W47FExP0qGzI5kX-W9CJ6mFsqbs5Tz6rEE1fnNfeO5uSagFbTVh0om0-AYhmeP7K5Py6FaWkTva8x3gaCLkFortigP3_XL/s1600/shopping-cart-desgin-25.jpg" imageanchor="1"><img alt="shopping-cart-website-design-22" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEDJZ6B_EFcjczZ4wiujF1M1LA1LYfgh-FNudNsYnQnO2n_3W47FExP0qGzI5kX-W9CJ6mFsqbs5Tz6rEE1fnNfeO5uSagFbTVh0om0-AYhmeP7K5Py6FaWkTva8x3gaCLkFortigP3_XL/s1600/shopping-cart-desgin-25.jpg" /></a><br />
<br />
<a href="http://shop.acnestudios.com/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-itgM1jdEpkffldjY1Lo7GIh1lU8Id5UcGzgc3zb9mS7e9b4QxGkEqnOsiSIGJaG9b4_K2i0uUnAvWiG1pxqoVlKgsdBZpAmN01GBBCWcLjXnmFzFBrT5NyxhS5tsw1MYxBzXuISGBtM1/s1600/shopping-cart-desgin-26.jpg" imageanchor="1"><img alt="shopping-cart-website-design-24" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-itgM1jdEpkffldjY1Lo7GIh1lU8Id5UcGzgc3zb9mS7e9b4QxGkEqnOsiSIGJaG9b4_K2i0uUnAvWiG1pxqoVlKgsdBZpAmN01GBBCWcLjXnmFzFBrT5NyxhS5tsw1MYxBzXuISGBtM1/s1600/shopping-cart-desgin-26.jpg" /></a><br />
<br />
<a href="http://www.guess.com/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_kh8p_i_bOoV4ZxfdmYGICNbeX09wOHPYGjbRWLvL5uuR_e8FOAU7EMYwes7-U_lAkKZM9udJycblTo2ZlBGv9wpH2MytbGjrRLfw2wbzyy-vX7mmMJFxS5KsPJJcOL88qmvskfp67-fH/s1600/shopping-cart-desgin-27.jpg" imageanchor="1"><img alt="shopping-cart-website-design-25" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_kh8p_i_bOoV4ZxfdmYGICNbeX09wOHPYGjbRWLvL5uuR_e8FOAU7EMYwes7-U_lAkKZM9udJycblTo2ZlBGv9wpH2MytbGjrRLfw2wbzyy-vX7mmMJFxS5KsPJJcOL88qmvskfp67-fH/s1600/shopping-cart-desgin-27.jpg" /></a><br />
<br />
<a href="http://www.fabialifestyle.com/Pages/Home.aspx" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiULP7zZvQh7lZHGmceYudnO91SpmkCJueYF0ZdzQWc1xr3b9nTReaQk9eVL9UUzRsU9WfDh1_27nW4UTnlAzhFD2gr_fU_kt7i0DA1H_kl4leoMPpnC7JphEL-DwrL94Q_0z9M3GkG1arr/s1600/shopping-cart-desgin-1.jpg" imageanchor="1"><img alt="shopping-cart-website-design-23" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiULP7zZvQh7lZHGmceYudnO91SpmkCJueYF0ZdzQWc1xr3b9nTReaQk9eVL9UUzRsU9WfDh1_27nW4UTnlAzhFD2gr_fU_kt7i0DA1H_kl4leoMPpnC7JphEL-DwrL94Q_0z9M3GkG1arr/s1600/shopping-cart-desgin-1.jpg" /></a><br />
</div></div>yesongshttp://www.blogger.com/profile/14466160119267287649noreply@blogger.com10tag:blogger.com,1999:blog-4276763109087946480.post-24930295186593470042013-04-25T02:52:00.001-07:002013-04-28T23:19:56.482-07:00How to Create a CSS Dropdown Menu <div dir="ltr" style="text-align: left;" trbidi="on"><div class="custom_p">To create a menu with css is not a difficult task. You must understand the css and selectors of css. And you are able to create your own drop down menu with css. There is no need of images, jquery or javascript. If you are not able to create a menu with css no need to worry you can find it on our site.<br />
In this post you will learn how to create a drop down menu with css3 only. We are not using any image or any javascript in this. And if you don't want to use <a href="http://www.thinklala.blogspot.in/2013/04/25-jquery-horizontal-and-vertical-menu.html">jquery menu</a> in your site and you want to use <a href="http://www.thinklala.blogspot.in/2013/04/20-pure-css3-menu-design.html">css3 menu</a>. Then here is the best option for you. You can customize it easily.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqhkeAtcyC-oTcCjL8Iz5LgFeuduA89y9_RDQ-n7OH5vgijas1TPVHKl8pWEX6kLIW9py7xMyY4I74GJxYysdW3ATDxs30wNqYZtdab-WgL1l3n2NUXPwhgeEdPNz9j1YfGs-Zd7jgeHFO/s1600/css3-2-level-dropdown-menu.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqhkeAtcyC-oTcCjL8Iz5LgFeuduA89y9_RDQ-n7OH5vgijas1TPVHKl8pWEX6kLIW9py7xMyY4I74GJxYysdW3ATDxs30wNqYZtdab-WgL1l3n2NUXPwhgeEdPNz9j1YfGs-Zd7jgeHFO/s1600/css3-2-level-dropdown-menu.jpg" alt="pure-css-menu" title="create-pure-css-menu"/></a></div><br />
<a class="readmore" href="http://www.thinklala.blogspot.in/2013/04/demo-of-css-3-menu.html"> Demo</a> <a class="readmore" href="https://sites.google.com/site/thinklala/document/css3menu.zip?attredirects=0&d=1" style="margin-right: 20px;" target="_blank"> Download</a><br />
<br />
Now we are creating a dropdown menu that has two levels of drop downs. The child drop down will be show when the user will hover on parent link. <br />
Now follow the steps for create a menu.<br />
<br />
<h2 class="custom_h2">Html Structure </h2>I am not using div instead I am using nav because I am using html 5 and The <br />
<nav> tag defines a section of navigation links.<br />
This is the html structure for menu first ul is the master ul. We add another ul under the Services and Articles li that is the child menu for these. For article drop down has further child. And also we have create 3 div with bottomArrow and RightArrow class. These divs will indicate that this li has further children. If you do not want to show them you can hide them.<br />
<br />
<div style="overflow: scroll;"><div style="width: 800px;"><br />
<xmp><nav><br />
<ul><li><a href="http://www.blogger.com/blogger.g?blogID=4276763109087946480#">Home</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4276763109087946480#">Services</a><br />
<br />
<ul><li><a href="http://www.blogger.com/blogger.g?blogID=4276763109087946480#">Web Designing</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4276763109087946480#">User Development</a></li>
</ul><br />
</li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4276763109087946480#">Articles</a><br />
<br />
<ul><li><a href="http://www.blogger.com/blogger.g?blogID=4276763109087946480#">Photoshop</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4276763109087946480#">Illustrator</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4276763109087946480#">Web Designing</a><br />
<br />
<ul><li><a href="http://www.blogger.com/blogger.g?blogID=4276763109087946480#">HTML</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4276763109087946480#">CSS</a></li>
</ul></li>
</ul></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4276763109087946480#">Inspiration</a></li>
</ul></nav> <br />
<br />
<br />
</xmp></div></div>After creating the html your html will be look as this. These are simple unordered lists.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqbhHacQQiRO7Jd0gHu5UnPgFlGSzQDiHuc6g_b9m2U9Iy-0r0PF8WqSDaYUQ2HwYM64w71lMw07YaeXTP2tSUCYEh3grbdA7D4Qb6uJqs3T4tx-jpM9iOWJrfM1LBGvNaauyj6vdHrKfq/s1600/html-menu.jpg" imageanchor="1"><img alt="simple-html-menu" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqbhHacQQiRO7Jd0gHu5UnPgFlGSzQDiHuc6g_b9m2U9Iy-0r0PF8WqSDaYUQ2HwYM64w71lMw07YaeXTP2tSUCYEh3grbdA7D4Qb6uJqs3T4tx-jpM9iOWJrfM1LBGvNaauyj6vdHrKfq/s1600/html-menu.jpg" /></a><br />
<br />
<h2 class="custom_h2">css for Menu</h2><pre>nav ul ul {
display: none;
}
</pre>Now time to apply css to the menu . I am using tag name and advance css selectors instead of id or class because it will make my html and css clean and more readable. Now first I hide all the child ul I have written nav ul ul. It means all ul inside a ul. So all the child ul is hidden now.<br />
<div style="overflow: scroll;"><div style="width: 900px;"><pre>nav ul {
background: #b3b7bf;
background: -moz-linear-gradient(top, #b3b7bf 0%, #7c7e84 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b3b7bf), color-stop(100%,#7c7e84));
background: -webkit-linear-gradient(top, #b3b7bf 0%,#7c7e84 100%);
background: -o-linear-gradient(top, #b3b7bf 0%,#7c7e84 100%);
background: -ms-linear-gradient(top, #b3b7bf 0%,#7c7e84 100%);
background: linear-gradient(to bottom, #b3b7bf 0%,#7c7e84 100%);
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
padding: 0 20px;
border-radius: 0px;
list-style: none;
position: relative;
display: inline-block;
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
padding: 20px 40px;
color: rgba(0, 0, 0, 0.68);
font-family:arial;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
text-decoration: none;
font-size: 15px;
font-weight: bold;
}
</pre></div></div><br />
Now I am defining background for parent ul by writing nav ul. And I am using css3 gradient background. You can change the color combination as per your requirements. And I have also give <code>position: relative; </code> the child ul have absolute position and then they will positioned according to parent ul. Otherwise they will positioned as the widow.<br />
<br />
In <code>nav ul li </code>I have define <code>float: left;</code> it means all the li of parent ul will comes in a single row.<br />
<br />
In <code>nav ul li a </code> I have give style to text like font-family, font size etc. And I have give <code>display: block; </code> if I do not give it block then it will not get padding. And it will not display as box.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF5D19CuLv2zmACqUGbcfelayWTXLQvqhx9ku3VMl0LsxPo5XdSr_jmdS6nfc44QR91Xl8CZMOZvQpzWv_e2xg5ynepsooEo0jyQQRcucgdVcCwXVOl2p4rROb5mo34srVJ61yw0x2CfHa/s1600/html-gradient-menu.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF5D19CuLv2zmACqUGbcfelayWTXLQvqhx9ku3VMl0LsxPo5XdSr_jmdS6nfc44QR91Xl8CZMOZvQpzWv_e2xg5ynepsooEo0jyQQRcucgdVcCwXVOl2p4rROb5mo34srVJ61yw0x2CfHa/s1600/html-gradient-menu.jpg" /></a><br />
<br />
<div style="overflow: scroll;"><div style="width: 900px;"><pre>nav ul li:hover>ul {
display: block;
}
nav ul li:hover {
background: #7abcff; /* Old browsers */
background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
background: linear-gradient(to bottom, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
}
nav ul li:hover a {
color: rgba(0, 0, 0, 0.68);
}
</pre></div></div><br />
In <code>nav ul li:hover>ul </code>I have give property <code>display:block</code> to ul on hover of li. And I have written <code>nav ul li:hover>ul </code> It means when anyone will hover on li then its immediate child ul be display. If I will not put > then all the ul be display. <br />
<br />
In <code>nav ul li:hover </code>I have change the background color of each li on which user will hover.<br />
<br />
In <code>nav ul li:hover a </code>I have changed the text color when user will hover on li.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7PRVV8jfP9diRCMR2zh8bs9f9FLAiZB418Nb80So2_F-Tm2FoU0LC8GE7-pkY4aLlmFMcVJjq1l0mlXVoBts1HDPJnizkDGIfGwqzr-PEVq_XIkmFVmiICr2-Qw9FMZ1kQyRhSQJaaca5/s1600/css3-dropdown-menu.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7PRVV8jfP9diRCMR2zh8bs9f9FLAiZB418Nb80So2_F-Tm2FoU0LC8GE7-pkY4aLlmFMcVJjq1l0mlXVoBts1HDPJnizkDGIfGwqzr-PEVq_XIkmFVmiICr2-Qw9FMZ1kQyRhSQJaaca5/s1600/css3-dropdown-menu.jpg" alt="simple-css-menu"/></a><br />
<br />
<pre>nav ul ul {
background: #5f6975;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #fff;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
}
</pre><br />
Now I have give complete style to main menu. Now the time is to apply css on sub menus. <br />
<br />
In <code>nav ul ul</code>I have give <code>background color</code> to child ul and padding will set the position of text and also give <code>position: absolute;</code> now the sub ul will not affect the parent ul when it display and <code>top: 100%;</code> will make it display where the parent li end as vertically .<br />
<br />
In <code>nav ul ul li </code> I have target the li of sub menu and give <code>float: none </code> because I don’t want to display them in a single line. And then give <code>position: relative </code> that will set the position of their child ul.<br />
<br />
In <code>nav ul ul li a </code> I have give padding to center the text .<br />
<br />
<pre>nav ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
</pre><br />
In <code>nav ul ul ul </code> I am targeting the third sub menu and <code>position: absolute </code> will set its position that will not affect its parent and <code>left: 100%;</code> will make it display where its parent li ends as horizontally. And <code>top: 0; </code> will make it display where its parent li starts as vertically.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqhkeAtcyC-oTcCjL8Iz5LgFeuduA89y9_RDQ-n7OH5vgijas1TPVHKl8pWEX6kLIW9py7xMyY4I74GJxYysdW3ATDxs30wNqYZtdab-WgL1l3n2NUXPwhgeEdPNz9j1YfGs-Zd7jgeHFO/s1600/css3-2-level-dropdown-menu.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqhkeAtcyC-oTcCjL8Iz5LgFeuduA89y9_RDQ-n7OH5vgijas1TPVHKl8pWEX6kLIW9py7xMyY4I74GJxYysdW3ATDxs30wNqYZtdab-WgL1l3n2NUXPwhgeEdPNz9j1YfGs-Zd7jgeHFO/s1600/css3-2-level-dropdown-menu.jpg" alt="css-dropdown-menu"/></a><br />
<br />
<a class="readmore" href="http://www.thinklala.blogspot.in/2013/04/demo-of-css-3-menu.html" style="margin-right: 20px;"> View Demo</a><br />
</nav></div></div>yesongshttp://www.blogger.com/profile/14466160119267287649noreply@blogger.com1tag:blogger.com,1999:blog-4276763109087946480.post-25443926431420351242013-04-25T01:31:00.000-07:002013-04-25T02:54:51.232-07:00Demo of Css 3 Menu<div dir="ltr" style="text-align: left;" trbidi="on"><a href="http://thinklala.blogspot.in/2013/04/how-to-create-css-dropdown-menu.html">Back to Tutorial</a><br />
<div style="overflow:scroll; height:400px;"><div style="width:900px"><style type="text/css">
nav ul ul {
display: none;
}
ul{
margin:0px !important;
}
nav li {
height: 60px !important;
padding-bottom: 0px !important;
margin-bottom: 0px !important;
}
nav ul {
background: #b3b7bf;
background: -moz-linear-gradient(top, #b3b7bf 0%, #7c7e84 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b3b7bf),
color-stop(100%, #7c7e84) );
background: -webkit-linear-gradient(top, #b3b7bf 0%, #7c7e84 100%);
background: -o-linear-gradient(top, #b3b7bf 0%, #7c7e84 100%);
background: -ms-linear-gradient(top, #b3b7bf 0%, #7c7e84 100%);
background: linear-gradient(to bottom, #b3b7bf 0%, #7c7e84 100%);
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
padding: 0 20px;
border-radius: 0px;
list-style: none;
position: relative;
display: inline-block;
}
nav ul li {
float: left;
}
nav ul li a {
display: block !important;
padding: 20px 40px !important;
color: rgba(0, 0, 0, 0.68) !important;
font-family: arial !important;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6) !important;
text-decoration: none !important;
font-size: 15px !important;
font-weight: bold !important;
}
nav ul li:hover>ul {
display: block;
}
nav ul li:hover {
background: #7c7e84;
background: -moz-linear-gradient(top, #7c7e84 0%, #b3b7bf 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7c7e84),
color-stop(100%, #b3b7bf) );
background: -webkit-linear-gradient(top, #7c7e84 0%, #b3b7bf 100%);
background: -o-linear-gradient(top, #7c7e84 0%, #b3b7bf 100%);
background: -ms-linear-gradient(top, #7c7e84 0%, #b3b7bf 100%);
background: linear-gradient(to bottom, #7c7e84 0%, #b3b7bf 100%);
filter: progid : DXImageTransform.Microsoft.gradient ( startColorstr =
'#7c7e84', endColorstr = '#b3b7bf', GradientType = 0 );
}
nav ul li:hover a {
color: rgba(0, 0, 0, 0.68);
}
nav ul ul {
background: #82848A !important;;
border-radius: 0px !important;;
padding: 0 !important;
position: absolute !important;;
top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #fff;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
}
nav ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
</style><br />
<nav><br />
<ul><li><a href="#">Home</a><br />
</li>
<li><a href="#">Services</a><ul><li><a href="#">Web Designing</a><br />
</li>
<li><a href="#">User Development</a><br />
</li>
</ul></li>
<li><a href="#">Articles</a><ul><li><a href="#">Photoshop</a><br />
</li>
<li><a href="#">Illustrator</a><br />
</li>
<li><a href="#">Web Designing</a><ul><li><a href="#">HTML</a><br />
</li>
<li><a href="#">CSS</a><br />
</li>
</ul></li>
</ul></li>
<li><a href="#">Inspiration</a><br />
</li>
</ul></nav><br />
</div></div><br />
<h2 class="custom_h2" >Source Code</h2><h2 class="custom_h2" >Html</h2><br />
<div style="overflow:scroll;"><div style="width:800px;"><xmp ><nav><br />
<ul><li><a href="#">Home</a></li>
<li><a href="#">Services</a><br />
<br />
<ul><li><a href="#">Web Designing</a></li>
<li><a href="#">User Development</a></li>
</ul><br />
</li>
<li><a href="#">Articles</a><br />
<br />
<ul><li><a href="#">Photoshop</a></li>
<li><a href="#">Illustrator</a></li>
<li><a href="#">Web Designing</a><br />
<br />
<ul><li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
</ul></li>
</ul></li>
<li><a href="#">Inspiration</a></li>
</ul></nav> <br />
<br />
<br />
</xmp><br />
</div></div><br />
<h2 class="custom_h2" >css</h2><br />
<div style="overflow:scroll;"><div style="width:800px;"><pre>nav ul ul {
display: none;
}
nav ul {
background: #b3b7bf;
background: -moz-linear-gradient(top, #b3b7bf 0%, #7c7e84 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b3b7bf),
color-stop(100%, #7c7e84) );
background: -webkit-linear-gradient(top, #b3b7bf 0%, #7c7e84 100%);
background: -o-linear-gradient(top, #b3b7bf 0%, #7c7e84 100%);
background: -ms-linear-gradient(top, #b3b7bf 0%, #7c7e84 100%);
background: linear-gradient(to bottom, #b3b7bf 0%, #7c7e84 100%);
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
padding: 0 20px;
border-radius: 0px;
list-style: none;
position: relative;
display: inline-block;
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
padding: 20px 40px ;
color: rgba(0, 0, 0, 0.68) ;
font-family: arial ;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6) ;
text-decoration: none ;
font-size: 15px ;
font-weight: bold ;
}
nav ul li:hover>ul {
display: block;
}
nav ul li:hover {
background: #7c7e84;
background: -moz-linear-gradient(top, #7c7e84 0%, #b3b7bf 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7c7e84),
color-stop(100%, #b3b7bf) );
background: -webkit-linear-gradient(top, #7c7e84 0%, #b3b7bf 100%);
background: -o-linear-gradient(top, #7c7e84 0%, #b3b7bf 100%);
background: -ms-linear-gradient(top, #7c7e84 0%, #b3b7bf 100%);
background: linear-gradient(to bottom, #7c7e84 0%, #b3b7bf 100%);
filter: progid : DXImageTransform.Microsoft.gradient ( startColorstr =
'#7c7e84', endColorstr = '#b3b7bf', GradientType = 0 );
}
nav ul li:hover a {
color: rgba(0, 0, 0, 0.68);
}
nav ul ul {
background: #82848A ;
border-radius: 0px ;
padding: 0 ;
position: absolute ;
top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #fff;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
}
nav ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
</pre></div></div></div>yesongshttp://www.blogger.com/profile/14466160119267287649noreply@blogger.com0tag:blogger.com,1999:blog-4276763109087946480.post-62263693706151555382013-04-22T02:20:00.000-07:002013-04-22T02:20:23.164-07:0025 Jquery Horizontal And Vertical Menu <div dir="ltr" style="text-align: left;" trbidi="on"><div class="custom_p custom_link">First thing that put impact on a website is menu of website. So the menu of your website should be perfect. In last post I have discussed about <a href="http://www.thinklala.blogspot.in/2013/04/20-pure-css3-menu-design.html">css3 menu</a>. But the other option is <b>create a menu with jquery</b>. Because you can give really awesome animations with jquery. If you are not as much familiar with jquery.<br />
<br />
No problem . There are many online <b>free jquery menu plugins</b> available. Which you can use freely. Some of jquery menu plugins are as follows you can you any of them in your site. <br />
<br />
<h2>jQuery Bubble menu</h2><a href="http://tympanus.net/codrops/2010/04/29/awesome-bubble-navigation-with-jquery/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEise3e49MBClSIWyo-EFNwbYFd537XVqIVK3co6sq34FitbY3wA-Xsj3TzeeWH_DkPzk3WY91iQDX9gaf7CrHWqlUi02DHza7RoZFCeawdWi_9J14-FiGrNnUF0BBe7Do53IJtpyfyumqGI/s1600/1-bubble-menu.jpg" imageanchor="1"><img alt="jQuery Bubble menu" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEise3e49MBClSIWyo-EFNwbYFd537XVqIVK3co6sq34FitbY3wA-Xsj3TzeeWH_DkPzk3WY91iQDX9gaf7CrHWqlUi02DHza7RoZFCeawdWi_9J14-FiGrNnUF0BBe7Do53IJtpyfyumqGI/s1600/1-bubble-menu.jpg" title="jQuery Bubble menu" /></a><br />
<br />
<h2>Rock Bubble Menu</h2><a href="http://tympanus.net/codrops/2010/04/30/rocking-and-rolling-rounded-menu-with-jquery/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb-qY-0AcyZqgaeeyiXCqZyaaiiLuq-P30PxVZw6HcMfwbFclCmOCfsSB0ONHsW0xF3GoX3f1YiR5aVqWjcX7mBYuTlkoqsrNdS8BkJDE7_jB4MKhDk6P0pcR_3_MVqoMPPD38R7RF41cI/s1600/2-rock-role-bubble-menu.jpg" imageanchor="1"><img alt="rock-green-bubble-menu" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb-qY-0AcyZqgaeeyiXCqZyaaiiLuq-P30PxVZw6HcMfwbFclCmOCfsSB0ONHsW0xF3GoX3f1YiR5aVqWjcX7mBYuTlkoqsrNdS8BkJDE7_jB4MKhDk6P0pcR_3_MVqoMPPD38R7RF41cI/s1600/2-rock-role-bubble-menu.jpg" /></a><br />
<br />
<h2>Grey Golden Glossy Menu</h2><a href="http://net.tutsplus.com/tutorials/html-css-techniques/use-sprites-to-create-an-awesomeness-filled-navigation-menu/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDzwvoo9aDfYxwLzYw4MkOkUZNr4iVnP6nNz1nverirjMn6HjUbJw35bjUj60avSMoiaI17NAfYzfg10ItTEkAIEmJ6ElaOPkFJHqScF7lV5daOzpALoiM7PfLr-TC33yxreWECz_XoNFH/s1600/3--jquery-glossy-menu.jpg" imageanchor="1"><img alt="Grey Golden Glossy Menu" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDzwvoo9aDfYxwLzYw4MkOkUZNr4iVnP6nNz1nverirjMn6HjUbJw35bjUj60avSMoiaI17NAfYzfg10ItTEkAIEmJ6ElaOPkFJHqScF7lV5daOzpALoiM7PfLr-TC33yxreWECz_XoNFH/s1600/3--jquery-glossy-menu.jpg" /></a><br />
<br />
<h2>Green Slide Menu</h2><a href="http://www.scriptiny.com/2008/05/horizontal-javascript-accordion-menu/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqDkfeEp7ZKKvZKTaf-wDH1cAgKgVVm4PPJgZM9fgr5Zm4YlDgGXFcFVUCmSQhaXGQIzxj9MLOt6IcL6pDPqcqIq9-Y0dYrdmNxytHL33sjtl6JJ8g5eBrAugH6QaDnFa9Nj41eZ1A5fkh/s1600/4-jquery-sliding-menu.jpg" imageanchor="1"><img alt="Green Slide Menu" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqDkfeEp7ZKKvZKTaf-wDH1cAgKgVVm4PPJgZM9fgr5Zm4YlDgGXFcFVUCmSQhaXGQIzxj9MLOt6IcL6pDPqcqIq9-Y0dYrdmNxytHL33sjtl6JJ8g5eBrAugH6QaDnFa9Nj41eZ1A5fkh/s1600/4-jquery-sliding-menu.jpg" /></a><br />
<br />
<h2>Window Type Menu</h2><a href="http://www.codebrewery.ch/memu/sample.html" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVUgoGZS34tePZeHgAGJ5HBiDdD0Csd-xm0BmIpGuBGQXED3qgqQWQsCi9y7H0iaxT1tY3KIDlT6xTJFT2kCNyF84iN6nWj6dLQLuzh-HZEZJmm7PIpA-ex1lTWWrE-AhSCP1O_BTB1KkZ/s1600/5-window-type-menu-jquery.jpg" imageanchor="1"><img alt="Window Type Menu" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVUgoGZS34tePZeHgAGJ5HBiDdD0Csd-xm0BmIpGuBGQXED3qgqQWQsCi9y7H0iaxT1tY3KIDlT6xTJFT2kCNyF84iN6nWj6dLQLuzh-HZEZJmm7PIpA-ex1lTWWrE-AhSCP1O_BTB1KkZ/s1600/5-window-type-menu-jquery.jpg" /></a><br />
<br />
<h2>Green DropDown Menu</h2><a href="http://www.script-tutorials.com/demos/91/index.html" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg-Tpysq3UpbX4O5NoRiNaRlYXWjdTuHscqusg_dnkGQgkxccdxgDXOkIZEqEbT3gDg8eZybV-vnm6qa5nzDWbFa9Vc4dxNNvdXBDNjXQmHuQLzc4sYr5illgW0HZ8tqiSRk2N9QOPjTN0/s1600/6-sliding-dropdown-menu.jpg" imageanchor="1"><img alt="Green DropDown Menu" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg-Tpysq3UpbX4O5NoRiNaRlYXWjdTuHscqusg_dnkGQgkxccdxgDXOkIZEqEbT3gDg8eZybV-vnm6qa5nzDWbFa9Vc4dxNNvdXBDNjXQmHuQLzc4sYr5illgW0HZ8tqiSRk2N9QOPjTN0/s1600/6-sliding-dropdown-menu.jpg" /></a><br />
<br />
<h2>Black Horizontal and Vertical Menu</h2><a href="http://www.htmldrive.net/items/show/1173/Pure-CSS3-animation-Menu-Navigation" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_-ekYHY3vj2fQOYfBhoZHGDq7xIQRWBD5clFFG4ETEK1JtSUJIABkFpNiEsHbmGdS-sLHfM41KonMIj-aBhYdBWf-oJlCwcM8ewju3tI0bcoK6QkH1fJGJKYh4ePj-gQr3tPLM90MDlSq/s1600/7-black-glossy-menu.jpg" imageanchor="1"><img alt="Black Horizontal and Vertical Menu" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_-ekYHY3vj2fQOYfBhoZHGDq7xIQRWBD5clFFG4ETEK1JtSUJIABkFpNiEsHbmGdS-sLHfM41KonMIj-aBhYdBWf-oJlCwcM8ewju3tI0bcoK6QkH1fJGJKYh4ePj-gQr3tPLM90MDlSq/s1600/7-black-glossy-menu.jpg" /></a><br />
<br />
<h2>Full Screen Menu</h2><a href="http://tympanus.net/codrops/2010/06/28/awesome-cufonized-fly-out-menu/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVY6uup_wNcKA5tYUh3lE9tKpCRnPMCvbG6aD0S92jKbNl6_eopFYm4zpsnCpMVnmrFpX_1hKoy_LZAJvnmGTsWela8tRGHD58O51f8puXjLOIEctIOY7zVFPlJtZkmXJHJ7citxxM_urY/s1600/8-full-screen-menu.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVY6uup_wNcKA5tYUh3lE9tKpCRnPMCvbG6aD0S92jKbNl6_eopFYm4zpsnCpMVnmrFpX_1hKoy_LZAJvnmGTsWela8tRGHD58O51f8puXjLOIEctIOY7zVFPlJtZkmXJHJ7citxxM_urY/s1600/8-full-screen-menu.jpg" /></a><br />
<br />
<h2>Vertical Slide Menu</h2><a href="http://tympanus.net/codrops/2009/11/30/beautiful-slide-out-navigation-a-css-and-jquery-tutorial/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFpFAnKQSZDvpb5NJhWsorc5UCokqgHgqJKlkl0efQ5bvzANI5gJ9X_Nlrzv2ATD3MFdiFS4C32h_CoYUckBQzSUka8xZwCcbI2z57C-PPEQgyF0tNET7BllEWbmXCvMF3HxLZDajwneit/s1600/9-slide-out-jquery-menu.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFpFAnKQSZDvpb5NJhWsorc5UCokqgHgqJKlkl0efQ5bvzANI5gJ9X_Nlrzv2ATD3MFdiFS4C32h_CoYUckBQzSUka8xZwCcbI2z57C-PPEQgyF0tNET7BllEWbmXCvMF3HxLZDajwneit/s1600/9-slide-out-jquery-menu.jpg" /></a><br />
<br />
<h2>Background Navigation Menu</h2><a href="http://tympanus.net/codrops/2010/05/05/beautiful-background-image-navigation-with-jquery/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcXLJ1x0IQdzoA7qSRzuUpEu1Oa460SR-8J3H-2nNlo5Nyn-mGX1X0vYusBV3hS8kXbzs8MS9NtFCUJPp3faxrH1aIBPLaHAWH1W9rIjsu3n7ANQDelT-_IGtqKrp9gNXU0pbSn9wFe_3Q/s1600/10-background-naviagtion-menu.jpg" imageanchor="1"><img alt="Background Navigation Menu" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcXLJ1x0IQdzoA7qSRzuUpEu1Oa460SR-8J3H-2nNlo5Nyn-mGX1X0vYusBV3hS8kXbzs8MS9NtFCUJPp3faxrH1aIBPLaHAWH1W9rIjsu3n7ANQDelT-_IGtqKrp9gNXU0pbSn9wFe_3Q/s1600/10-background-naviagtion-menu.jpg" /></a><br />
<br />
<h2>Slide Push Menu</h2><a href="http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/" target="blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPxP5jYqZhXfSIdJhZnGOeST-1m20MzqS-yIxo-OZYeDlG8F8JQ8g1oS43pZC2DbPHI0OJTqTYCVbOXSR2Hlokf2t7GJf5O5pP-6jR5EYfd9wwy-hTatZfVQh78Hr48cL8Pp16ExZ1d60Z/s1600/11-slide-push-menu.jpg" imageanchor="1"><img alt="Slide Push Menu" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPxP5jYqZhXfSIdJhZnGOeST-1m20MzqS-yIxo-OZYeDlG8F8JQ8g1oS43pZC2DbPHI0OJTqTYCVbOXSR2Hlokf2t7GJf5O5pP-6jR5EYfd9wwy-hTatZfVQh78Hr48cL8Pp16ExZ1d60Z/s1600/11-slide-push-menu.jpg" /></a><br />
<br />
<h2>Large Drop Down Menu</h2><a href="http://tympanus.net/codrops/2013/03/05/horizontal-drop-down-menu/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqL05tuZKtOVu7K25s7Fv0XvHCm-duzIR7i2lFvUHMbUN5qi6trXLxNXClkig5USOOZluuqHgvQke4L0k0LWqCFiwB-5wSO5hXiRRwZeNU2Q8Ir_otipAn_otemBq3dCebSHTCSehVCdZ2/s1600/12-large-drop-down-menu.jpg" imageanchor="1"><img alt="Large Drop Down Menu" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqL05tuZKtOVu7K25s7Fv0XvHCm-duzIR7i2lFvUHMbUN5qi6trXLxNXClkig5USOOZluuqHgvQke4L0k0LWqCFiwB-5wSO5hXiRRwZeNU2Q8Ir_otipAn_otemBq3dCebSHTCSehVCdZ2/s1600/12-large-drop-down-menu.jpg" /></a><br />
<br />
<h2>Colored Drop Down Menu</h2><a href="http://buildinternet.com/live/smoothmenu/animated-menu.html" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS7n85XruprTLIXfgWAzBd1F9c_eci8DaaNtTqsoYIoADFn0yq5Pj-0KRV-xElChNbkIeNxzyc5nN2hny6SdxWVslr5IyU9hIqbNtOT7H28BACFh3kfWB0L6F3xOyK4YkMJexu11TR-BFu/s1600/13-color-dropdown-menu.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS7n85XruprTLIXfgWAzBd1F9c_eci8DaaNtTqsoYIoADFn0yq5Pj-0KRV-xElChNbkIeNxzyc5nN2hny6SdxWVslr5IyU9hIqbNtOT7H28BACFh3kfWB0L6F3xOyK4YkMJexu11TR-BFu/s1600/13-color-dropdown-menu.jpg" /></a><br />
<br />
<h2>Simple Tabbed Jquery Menu</h2><a href="http://www.htmldrive.net/items/show/1212/useful-Tabbed-Menu-with-jQuery" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8z2Rb7aNGuQi_lF9pBUWoHiG62DnhD5IyzH-ZzWGz0cwCWqfmyR7wH9swadxQjrgb1FYTXCssX-uTOEq5WFdEzshaUqLaf3HP22I3i9lw5v4k1M1TgfLK0IIkVI7vb4nzIa9IIJgqB_ri/s1600/14-simple-tabed-menu.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8z2Rb7aNGuQi_lF9pBUWoHiG62DnhD5IyzH-ZzWGz0cwCWqfmyR7wH9swadxQjrgb1FYTXCssX-uTOEq5WFdEzshaUqLaf3HP22I3i9lw5v4k1M1TgfLK0IIkVI7vb4nzIa9IIJgqB_ri/s1600/14-simple-tabed-menu.jpg" /></a><br />
<br />
<h2>Animated Drop Down Menu</h2><a href="http://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-6qmjqzTR5cxAAFq0lr8aX62PejHysgNBmedgAyxXkl1kEPWRbmVDOtOh1j6GpeRcZq2zLUh3NzwXjEXYzMl-VFB_VyMeTnNP9dXDbWvYDaGxGw1Wgk1sISyufNhY15izLQRYIk1tbLbu/s1600/15-dropdown-list-menu.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-6qmjqzTR5cxAAFq0lr8aX62PejHysgNBmedgAyxXkl1kEPWRbmVDOtOh1j6GpeRcZq2zLUh3NzwXjEXYzMl-VFB_VyMeTnNP9dXDbWvYDaGxGw1Wgk1sISyufNhY15izLQRYIk1tbLbu/s1600/15-dropdown-list-menu.jpg" /></a><br />
<br />
<h2>Professional Drop down Menu</h2><a href="http://www.hongkiat.com/blog/drop-down-menu-30-free-scripts-to-enhance-header-navigation/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNCTp5ez7jNNjv2ODy-Ro5x3zyceJpucRopH3J9KesfBn6T_aO93xUF4mJxb46SlyakM5TBdN4t-hHLIA6N3zJjdZbgQo84AhACxw55A0h9DN6OzO_Gn6nfRyXvlfRTmxUkbItBp0SHoAM/s1600/16-professional-dropdown-menu.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNCTp5ez7jNNjv2ODy-Ro5x3zyceJpucRopH3J9KesfBn6T_aO93xUF4mJxb46SlyakM5TBdN4t-hHLIA6N3zJjdZbgQo84AhACxw55A0h9DN6OzO_Gn6nfRyXvlfRTmxUkbItBp0SHoAM/s1600/16-professional-dropdown-menu.jpg" /></a><br />
<br />
<h2>jQuery Simple Drop down Menu</h2><a href="http://dynamicdrive.com/dynamicindex1/droptabmenu.htm" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5xlIK9b4aTU8qHgCe33BE9v-EbfZ-oPGR4qUfMGbVSyVbd9vf3JqJ3hVIY9GovjuJkkxtl22NBv-1L8gzfiuW5CAPcYj6GWHOvEMCZfty_d_FkMt68x3WEJsMmxf3S7_sj_gDyDXbmtX-/s1600/17-multiple-dropdown-menu.jpg" imageanchor="1"><img alt="jQuery Simple Drop down Menu" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5xlIK9b4aTU8qHgCe33BE9v-EbfZ-oPGR4qUfMGbVSyVbd9vf3JqJ3hVIY9GovjuJkkxtl22NBv-1L8gzfiuW5CAPcYj6GWHOvEMCZfty_d_FkMt68x3WEJsMmxf3S7_sj_gDyDXbmtX-/s1600/17-multiple-dropdown-menu.jpg" /><br />
</a><br />
<br />
<h2>Vimio Like Menu</h2><a href="http://www.jankoatwarpspeed.com/create-vimeo-like-top-navigation/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxPE6dy7c8l3-1wzIuc7rXbwOkuEPVLxI1gkIlTKcDKz0m11VK-fA4Kfer4n1CSULeeEOKTnUu4k5OC-qWEHovCLGEOODyBfNy_5ART2OYxm5oLLOsqhegZXFnHOcO3VxFsmbH4THZOAhF/s1600/18-Vimeo-like-menu.jpg" imageanchor="1"><img alt="Vimio Like Menu" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxPE6dy7c8l3-1wzIuc7rXbwOkuEPVLxI1gkIlTKcDKz0m11VK-fA4Kfer4n1CSULeeEOKTnUu4k5OC-qWEHovCLGEOODyBfNy_5ART2OYxm5oLLOsqhegZXFnHOcO3VxFsmbH4THZOAhF/s1600/18-Vimeo-like-menu.jpg" /></a><br />
<br />
<h2>Glossy Grey Menu</h2><a href="http://apycom.com/menus/16-gray.html" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMyKEe5xqGamQG1hANpbtec4lvk4jPuaq1lFscNjgLK823g7mbr3xeg4gIqBrZAdG8G3IWDCMKUYxaOrzDefOkd6AkCqoW0OQdXtF1InENof2zD8KsSuCRGaoHL_68a7TUODsHcjHls2kh/s1600/19-glossy-grey-dropdown-menu.jpg" imageanchor="1"><img alt="Glossy Grey Menu" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMyKEe5xqGamQG1hANpbtec4lvk4jPuaq1lFscNjgLK823g7mbr3xeg4gIqBrZAdG8G3IWDCMKUYxaOrzDefOkd6AkCqoW0OQdXtF1InENof2zD8KsSuCRGaoHL_68a7TUODsHcjHls2kh/s1600/19-glossy-grey-dropdown-menu.jpg" /></a><br />
<br />
<h2>Black and Grey Menu</h2><a href="http://apycom.com/menus/3-white.html" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZMAzydZPN78Hzr-6yrc9QMcCkERzRUyWByIaFWpVHBwhVQMr_v9DuKW5rcGvYgz_YKW4AKN42DXwbxBe0EPpl3Gmf0ZG7wYh2CA4rBgIjS2ZQ5yxIH_01meD5StHZkA8cf-53ZnyjXS7o/s1600/20-glossy-large-dropdown-menu.jpg" imageanchor="1"><img alt="Black and Grey Menu" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZMAzydZPN78Hzr-6yrc9QMcCkERzRUyWByIaFWpVHBwhVQMr_v9DuKW5rcGvYgz_YKW4AKN42DXwbxBe0EPpl3Gmf0ZG7wYh2CA4rBgIjS2ZQ5yxIH_01meD5StHZkA8cf-53ZnyjXS7o/s1600/20-glossy-large-dropdown-menu.jpg" /></a><br />
<br />
<h2>Text Icom Square Menu</h2><a href="http://tympanus.net/codrops/2011/07/12/animated-text-and-icon-menu/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigp7XKg5yPyFL1GedWIFJ2A11Rdt3dp4VoT27pU3baavVQduRfI_m0D_0U6eGIHRnghyphenhyphen3BUhX3nhkB60niAROMyR7hJVuc0GcHnI1ETTqdB0VF1wxWjyua4Dw0OHau2ZJbSpw9WhOwY2hn/s1600/21-text-icon-menu.jpg" imageanchor="1"><img alt="Text Icom Square Menu" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigp7XKg5yPyFL1GedWIFJ2A11Rdt3dp4VoT27pU3baavVQduRfI_m0D_0U6eGIHRnghyphenhyphen3BUhX3nhkB60niAROMyR7hJVuc0GcHnI1ETTqdB0VF1wxWjyua4Dw0OHau2ZJbSpw9WhOwY2hn/s1600/21-text-icon-menu.jpg" /></a><br />
<br />
<h2>Slide Up Menu</h2><a href="http://tympanus.net/codrops/2010/03/09/a-fresh-bottom-slide-out-menu-with-jquery/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu4WnEso799_2SAcmvLRA5wRkhig7FMiO-Pi7ZBRAVgRr9_RrdJDOLfQLVipkPbKaQF7KLHNBa1vKjFyMT-ZIxB-0GfSHjBiYhk4HUcg6IQ3lML0wokIh0126fGeZlUZ0ZmLJnT4teRawm/s1600/22-jquery-slide-menu.jpg" imageanchor="1"><img alt="Slide Up Menu" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu4WnEso799_2SAcmvLRA5wRkhig7FMiO-Pi7ZBRAVgRr9_RrdJDOLfQLVipkPbKaQF7KLHNBa1vKjFyMT-ZIxB-0GfSHjBiYhk4HUcg6IQ3lML0wokIh0126fGeZlUZ0ZmLJnT4teRawm/s1600/22-jquery-slide-menu.jpg" /></a><br />
<br />
<h2>Single Page Website Menu</h2><a href="http://www.htmldrive.net/items/show/1169/Nice-jQuery-Walking-Navigation" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4mAdsmbQOP4f-HmtUQ4P1Lajk2aIq5_uNXNXyPHmve2vX_5rKONTu9uCD3aZdnYqzyMa4htz1Z99Za5w6dmXBlNy-rn4bRrpoYiO1nT0YAVRlhNT6CnEbm4PeGkPLqrF3rOYRZsH1mmoS/s1600/24-single-page-menu.jpg" imageanchor="1"><img alt="Single Page Website Menu" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4mAdsmbQOP4f-HmtUQ4P1Lajk2aIq5_uNXNXyPHmve2vX_5rKONTu9uCD3aZdnYqzyMa4htz1Z99Za5w6dmXBlNy-rn4bRrpoYiO1nT0YAVRlhNT6CnEbm4PeGkPLqrF3rOYRZsH1mmoS/s1600/24-single-page-menu.jpg" /></a><br />
<br />
<h2>Jquery Icon Menu</h2><a href="http://net.tutsplus.com/tutorials/javascript-ajax/jquery-os-x-style-dock-and-stack-navigation/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWhckynz8RRAR7bTFkRJVbuWhWegKQpyUgI9xKAA8IqOd_-Xytc9CoFviUUWPqEHJimb_Mucmlgt8HNtbgqm0dk364dccoIdGuZcQmRvubgD-wdnFx5IdUHqx8GZnsHlJtE0QYQJgQdqLz/s1600/23-icon-menu.jpg" imageanchor="1"><img alt="Jquery Icon Menu" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWhckynz8RRAR7bTFkRJVbuWhWegKQpyUgI9xKAA8IqOd_-Xytc9CoFviUUWPqEHJimb_Mucmlgt8HNtbgqm0dk364dccoIdGuZcQmRvubgD-wdnFx5IdUHqx8GZnsHlJtE0QYQJgQdqLz/s1600/23-icon-menu.jpg" /></a><br />
<br />
<h2>Simple Horizontal Menu</h2><a href="http://sebnitu.github.io/HorizontalNav/#" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXDAEpNgDyj4STmtMpLFvh_mPSCXz4yAV3j_EfJfhfkiqCMRTIPvAG9H6lgOkHThuCMGb1gfK7tAHXEyO7hUBCy-1bCd4ureUALqMMt2tevej1YFn-L8YDddufUr3DVZTyzar5OGytowM4/s1600/25-simple-jquery-menu.jpg" imageanchor="1"><img alt="Jquery Simple Horizontal Menu" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXDAEpNgDyj4STmtMpLFvh_mPSCXz4yAV3j_EfJfhfkiqCMRTIPvAG9H6lgOkHThuCMGb1gfK7tAHXEyO7hUBCy-1bCd4ureUALqMMt2tevej1YFn-L8YDddufUr3DVZTyzar5OGytowM4/s1600/25-simple-jquery-menu.jpg" /></a></div></div>yesongshttp://www.blogger.com/profile/14466160119267287649noreply@blogger.com3tag:blogger.com,1999:blog-4276763109087946480.post-57173247375091273342013-04-17T03:04:00.003-07:002013-04-17T03:07:51.327-07:0033 Single Page Website Design<div dir="ltr" style="text-align: left;" trbidi="on"><div class="custom_p custom_link"><a href="http://www.thinklala.blogspot.com/">Website developing</a> is an interesting task. There are so many design techniques are followed by designers. Today i am going to discuss about <b>single page website design</b>.Now a days the single page website is very commonly used. Because it has many advantages. Like your visitors will find all the data on a single page. He or she does not need to navigate different pages. And it also reduces the complexity of website. The single page website may take a small time when it first load but once it was loaded you need not to navigate to other page and reload the pages again and again. <br />
<br />
Here is a list of best one page website design. You can get an idea for design your website. <br />
<br />
<h1 style="font-weight:normal">List of Single Page Website Design</h1><br />
<a href="http://pitch.csspiffle.com/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9QrSWrXITQ5a5paifIFFJAeoXYKJkZM7epYAL6Ca_-C1vCI2jt6TKOj_FeHUozi3_T-UihqtYOok_m0EyjtKLOu-mTflq16X0jsrITr6d7ijjPWGkAjkoBQOQnNWaPXFj39Ughenpnt6i/s1600/1)+white-single-page-web-design.jpg" imageanchor="1"><img alt="singlePage-website-design-1" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9QrSWrXITQ5a5paifIFFJAeoXYKJkZM7epYAL6Ca_-C1vCI2jt6TKOj_FeHUozi3_T-UihqtYOok_m0EyjtKLOu-mTflq16X0jsrITr6d7ijjPWGkAjkoBQOQnNWaPXFj39Ughenpnt6i/s1600/1)+white-single-page-web-design.jpg" title="singlePage-website-design-1" /></a><br />
<br />
<a href="http://www.daybreak2012.com/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPQ4OUgZGlFWCaSbzxKIJhwO8mILDtca3kL2kHbeU6Y27cD-diYXgJ_NaqmxAVX9EefalfrxxqfbK5-MvPsPybfAHpiFstI1k8Lczp6dU8tZ0c31Hy1QqbVXw1mNmmknvFa5uEFYDs4rKE/s1600/2)-singlePage-website-design.jpg" imageanchor="1"><img alt="singlePage-website-design-2" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPQ4OUgZGlFWCaSbzxKIJhwO8mILDtca3kL2kHbeU6Y27cD-diYXgJ_NaqmxAVX9EefalfrxxqfbK5-MvPsPybfAHpiFstI1k8Lczp6dU8tZ0c31Hy1QqbVXw1mNmmknvFa5uEFYDs4rKE/s1600/2)-singlePage-website-design.jpg" title="singlePage-website-design-2" /></a><br />
<br />
<a href="http://peeltheorange.com/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG6eHasDndRQCtbq5GI1RlWhsqfYD0vhzTAj3pSxZZmvKQwuACYNhp7VYT5qilwuLhGJr8Bso3K28jmHn0W2CpDXO289_rumuvzeZ3_ULmQjenS8QFgdTMiAQdYDbgd6ckbo5ud7R1_zfd/s1600/3)-singlePage-website-design.jpg" imageanchor="1"><img alt="singlePage-website-design-3" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG6eHasDndRQCtbq5GI1RlWhsqfYD0vhzTAj3pSxZZmvKQwuACYNhp7VYT5qilwuLhGJr8Bso3K28jmHn0W2CpDXO289_rumuvzeZ3_ULmQjenS8QFgdTMiAQdYDbgd6ckbo5ud7R1_zfd/s1600/3)-singlePage-website-design.jpg" title="singlePage-website-design-3" /></a><br />
<br />
<a href="http://intothearctic.gp/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXKQzIW_6IL5JPKGUmifK4wkozMEobj9ftdqKoaBzrtRz7ftLkiqpisHt6sPTwM9-DTOqaZussxt9FOvcF8z8IEWtyd6I-sceZpKLAgOiruSVlyrLUXyVlvnAz1TWgssM6nS9qK5I6byOS/s1600/4)-singlePage-website-design.jpg" imageanchor="1"><img alt="singlePage-website-design-4" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXKQzIW_6IL5JPKGUmifK4wkozMEobj9ftdqKoaBzrtRz7ftLkiqpisHt6sPTwM9-DTOqaZussxt9FOvcF8z8IEWtyd6I-sceZpKLAgOiruSVlyrLUXyVlvnAz1TWgssM6nS9qK5I6byOS/s1600/4)-singlePage-website-design.jpg" title="" /></a><br />
<br />
<a href="http://www.originalspirit.com/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXVgEJoRgwF-21ro3gg_WctBReU-wn_ZjDyfKR2ttSIt32N-85dIoIIQ9ixoS1-Zu5RuNreK9hE8KtPgG5ybGfbQqDjws4o1bsFpppDMfC6JbisMfrDXRukd0Jh25owvc5kPNFmX28Oj8g/s1600/5)-singlePage-website-design.jpg" imageanchor="1"><img alt="singlePage-website-design-5" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXVgEJoRgwF-21ro3gg_WctBReU-wn_ZjDyfKR2ttSIt32N-85dIoIIQ9ixoS1-Zu5RuNreK9hE8KtPgG5ybGfbQqDjws4o1bsFpppDMfC6JbisMfrDXRukd0Jh25owvc5kPNFmX28Oj8g/s1600/5)-singlePage-website-design.jpg" title="" /></a><br />
<br />
<a href="http://www.dangersoffracking.com/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-D8hdKBVk7FjA6aVYcMPoICGcX8-WzhgYRw86JU7-F2ebpCFiQA0BphPr6Pa6lXH0BKAEgSfQCqW7j1UbMBOxgyqSIZnu4bmL7xrczjs7O05knRwxyGK4s7wHSgSWxDXR38TEJYqE4cYE/s1600/6)-singlePage-website-design.jpg" imageanchor="1"><img alt="singlePage-website-design-6" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-D8hdKBVk7FjA6aVYcMPoICGcX8-WzhgYRw86JU7-F2ebpCFiQA0BphPr6Pa6lXH0BKAEgSfQCqW7j1UbMBOxgyqSIZnu4bmL7xrczjs7O05knRwxyGK4s7wHSgSWxDXR38TEJYqE4cYE/s1600/6)-singlePage-website-design.jpg" title="" /></a><br />
<br />
<a href="http://www.intacto10years.com/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCIBgLUmXMHuUiFjW2E2rFTB_qR7Myp-KvQ7SUH0NVXXEbWZd4EXKPpMotiIMyHS1ndJ6HGhTSkSmCn8FGRez-MqQ9QO4ek69AZ-I4I_q3SpPIWhyrAOpzdlX-iVk7RN3ZBIS2Vv9qUePO/s1600/7)-singlePage-website-design.jpg" imageanchor="1"><img alt="singlePage-website-design-17" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCIBgLUmXMHuUiFjW2E2rFTB_qR7Myp-KvQ7SUH0NVXXEbWZd4EXKPpMotiIMyHS1ndJ6HGhTSkSmCn8FGRez-MqQ9QO4ek69AZ-I4I_q3SpPIWhyrAOpzdlX-iVk7RN3ZBIS2Vv9qUePO/s1600/7)-singlePage-website-design.jpg" /></a><br />
<br />
<a href="http://www.putzengel.at/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZIE8IogFUm6X_dhGHza1L_5sUq4SlAp6DEuvsRquFyZW5gZYgBrV5vXX1UK0O-aIjZHNMBoB-0hJ_b1B5gztT28DjROK1Pc6bhpYeMT7T3_Wv_-A22Nu0rPn3p-pgNK-PPjMfE0AVv9h1/s1600/8)-singlePage-website-design.jpg" imageanchor="1"><img alt="singlePage-website-design-8" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZIE8IogFUm6X_dhGHza1L_5sUq4SlAp6DEuvsRquFyZW5gZYgBrV5vXX1UK0O-aIjZHNMBoB-0hJ_b1B5gztT28DjROK1Pc6bhpYeMT7T3_Wv_-A22Nu0rPn3p-pgNK-PPjMfE0AVv9h1/s1600/8)-singlePage-website-design.jpg" /></a><br />
<br />
<a href="http://promo.narr8.me/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1oDno0XOUsZ1hztooGxE5WWoEjIs6AkkTVCvlczhq9U6w2QYoKCmOI4tY-DP78aJNK_4QfQ_YhNDuNGdiCCu7qPEVH5v2xvUhnqqlIP9qslbBpkEHGr-i6s0lSDsGbffj4ezHTzFeMDXI/s1600/9)-singlePage-website-design.jpg" imageanchor="1"><img alt="singlePage-website-design-9" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1oDno0XOUsZ1hztooGxE5WWoEjIs6AkkTVCvlczhq9U6w2QYoKCmOI4tY-DP78aJNK_4QfQ_YhNDuNGdiCCu7qPEVH5v2xvUhnqqlIP9qslbBpkEHGr-i6s0lSDsGbffj4ezHTzFeMDXI/s1600/9)-singlePage-website-design.jpg" /></a><br />
<br />
<a href="http://www.basilgloo.com/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNQhhxL6yUCCnskxxcSt__rgfH_bC3Ie3ZMWpi2Yaqou7GSiDA29_8tTwyGm9iSM_rMBVCN1LxqwsSPcWHKd6oQpPxVdFM-glRTc1oIlFMjTTBNb8jU6x1NoybeYObWOJf33M9yWbPTtc-/s1600/10)-singlePage-website-design.jpg" imageanchor="1"><img alt="singlePage-website-design-10" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNQhhxL6yUCCnskxxcSt__rgfH_bC3Ie3ZMWpi2Yaqou7GSiDA29_8tTwyGm9iSM_rMBVCN1LxqwsSPcWHKd6oQpPxVdFM-glRTc1oIlFMjTTBNb8jU6x1NoybeYObWOJf33M9yWbPTtc-/s1600/10)-singlePage-website-design.jpg" /></a><br />
<br />
<a href="http://sipp.cc/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghBPbV_Eni-dZUvIFxxzCx3AVkYiU-vTgVoCDTtLA1GjId0Ev45dhhcdMPf2001adDwF282oUywa9NMzwONao_sLf7mrjqb_AJIr1fjApA8JTa0l6jalDXa9inccQdXS8yYoThZ4VURSBy/s1600/11)-singlePage-website-design.jpg" imageanchor="1"><img alt="singlePage-website-design-11" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghBPbV_Eni-dZUvIFxxzCx3AVkYiU-vTgVoCDTtLA1GjId0Ev45dhhcdMPf2001adDwF282oUywa9NMzwONao_sLf7mrjqb_AJIr1fjApA8JTa0l6jalDXa9inccQdXS8yYoThZ4VURSBy/s1600/11)-singlePage-website-design.jpg" /></a><br />
<br />
<a href="http://www.barrelny.com/24/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ5VkVfJbKyAlPyBhiSqx_jmDpEV2wWSOaXElUz7fShm8pJM5GDTOOTyrwJatJp2vDa8ZyXmO1tkj4GIOmLkuNnYzO4FQvpur0i8_FxJrhEE0s9pNHcrJlgvTNFz83A8vHMN3irfnRQJRv/s1600/12)-singlePage-website-design.jpg" imageanchor="1"><img alt="singlePage-website-design-12" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ5VkVfJbKyAlPyBhiSqx_jmDpEV2wWSOaXElUz7fShm8pJM5GDTOOTyrwJatJp2vDa8ZyXmO1tkj4GIOmLkuNnYzO4FQvpur0i8_FxJrhEE0s9pNHcrJlgvTNFz83A8vHMN3irfnRQJRv/s1600/12)-singlePage-website-design.jpg" /></a><br />
<br />
<a href="http://helpus.welessthanthree.com/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicbu90omB2v1CDoew_sCR0GHvHzaRW-wfIaexhpi5glpg3xxalaRmKGIy8DLz0QQXJslD2e7Dh9Z5NjhGca30yEIpw_5Do3KqDKdlyYtsqmdNynWuhHKQsk5T9YHvZIiz8hnt9e1ehrxoT/s1600/13)-singlePage-website-design.jpg" imageanchor="1"><img alt="singlePage-website-design-13" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicbu90omB2v1CDoew_sCR0GHvHzaRW-wfIaexhpi5glpg3xxalaRmKGIy8DLz0QQXJslD2e7Dh9Z5NjhGca30yEIpw_5Do3KqDKdlyYtsqmdNynWuhHKQsk5T9YHvZIiz8hnt9e1ehrxoT/s1600/13)-singlePage-website-design.jpg" /></a><br />
<br />
<a href="http://exposanten.belgianboatshow.be/nl/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpEcjS5fJk0lGTuJGOfVCp0l2UqMvLhRRYMfCxGBWD3DSEuEGx2_jqLCbdNkd9Bx_MnLSnCC3vMNWmwYmR7ub2SuvkCEPWdfKEufOhGNsd197QOBi-noZUi646DMoNtGlWwoMXjpxFFsD3/s1600/14)-singlePage-website-design.jpg" imageanchor="1"><img alt="singlePage-website-design-14" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpEcjS5fJk0lGTuJGOfVCp0l2UqMvLhRRYMfCxGBWD3DSEuEGx2_jqLCbdNkd9Bx_MnLSnCC3vMNWmwYmR7ub2SuvkCEPWdfKEufOhGNsd197QOBi-noZUi646DMoNtGlWwoMXjpxFFsD3/s1600/14)-singlePage-website-design.jpg" /></a><br />
<br />
<a href="http://marisapassos.com/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjovwtWNo5I3NeTYyNarv6_z1Y59Hp8jrLTJd5z3a9pJWIgvr3kVd89aSY0avmxUKq4XehCdWKcS0lZIupS8znI_cLzZT-kq_Ah2QfyQLXIeDYPu5XBPxQaU321zP10ZZrWu5dQNawYP6Hb/s1600/15)-singlePage-website-design.jpg" imageanchor="1"><img alt="singlePage-website-design-15" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjovwtWNo5I3NeTYyNarv6_z1Y59Hp8jrLTJd5z3a9pJWIgvr3kVd89aSY0avmxUKq4XehCdWKcS0lZIupS8znI_cLzZT-kq_Ah2QfyQLXIeDYPu5XBPxQaU321zP10ZZrWu5dQNawYP6Hb/s1600/15)-singlePage-website-design.jpg" /></a><br />
<br />
<a href="http://www.digitalatelier.ro/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN90YcyH8OvnEir4B7QDbiPNDJBNfqvaP2YM0cd19eX2ENhfb-gNJq2rKFuE1CZDiSvypzYm_3zWdHqEYQEwTATNr6OgFQFFG0qV5bqkdFu9RvZuRRM3F-TbNPUXDOXU65pXQzyMGhYuJW/s1600/16)-singlePage-website-design.jpg" imageanchor="1"><img alt="singlePage-website-design-16" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN90YcyH8OvnEir4B7QDbiPNDJBNfqvaP2YM0cd19eX2ENhfb-gNJq2rKFuE1CZDiSvypzYm_3zWdHqEYQEwTATNr6OgFQFFG0qV5bqkdFu9RvZuRRM3F-TbNPUXDOXU65pXQzyMGhYuJW/s1600/16)-singlePage-website-design.jpg" /></a><br />
<br />
<a href="http://www.vitosalvatore.com/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjmuO7fjOTHCcpjQbPhyphenhyphensMNH_zikwOX846TtOiCf7N6bMRTkQpf8secqETYE3jge2OgAwRInxoIeV97NVmYVnT6RMLxE93dDlN5JbP3eoQl6DOlSHctaB-0QsimQMHxSN7o9LrPLUDUWPU/s1600/17)-singlePage-website-design.jpg" imageanchor="1"><img alt="singlePage-website-design-17" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjmuO7fjOTHCcpjQbPhyphenhyphensMNH_zikwOX846TtOiCf7N6bMRTkQpf8secqETYE3jge2OgAwRInxoIeV97NVmYVnT6RMLxE93dDlN5JbP3eoQl6DOlSHctaB-0QsimQMHxSN7o9LrPLUDUWPU/s1600/17)-singlePage-website-design.jpg" /></a><br />
<br />
<a href="http://www.imgonnarelph.com/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHO2f2IrjvQAfmGlIvDL5DCfUTbfyoWXDmWmyvTaGyW7yuLebXAB1yQWJUBYWblkTW0zmneh4idUd5oKBaTY05JU5kjfrQohh7wdNwML_4KIYop7Jqn3gPC500e1i0liVlZCn6NGNcCo8z/s1600/18)-singlePage-website-design.jpg" imageanchor="1"><img alt="singlePage-website-design-18" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHO2f2IrjvQAfmGlIvDL5DCfUTbfyoWXDmWmyvTaGyW7yuLebXAB1yQWJUBYWblkTW0zmneh4idUd5oKBaTY05JU5kjfrQohh7wdNwML_4KIYop7Jqn3gPC500e1i0liVlZCn6NGNcCo8z/s1600/18)-singlePage-website-design.jpg" /></a><br />
<br />
<a href="http://perconte.com/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM00J5Oo3qw24b6rekBcj81_ZIKGKOjKPUnK6IVJdjMOTzPIB9mwP72lEP7zOM7ENs4v7qZUMBM1w1agDikf7ZvcZ4N6mmzTezxdub-wBDMCHN7lCBLaFl9N4k8WIoRelVY-ud-U5oXYyl/s1600/19)-singlePage-website-design.jpg" imageanchor="1"><img alt="singlePage-website-design-19" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM00J5Oo3qw24b6rekBcj81_ZIKGKOjKPUnK6IVJdjMOTzPIB9mwP72lEP7zOM7ENs4v7qZUMBM1w1agDikf7ZvcZ4N6mmzTezxdub-wBDMCHN7lCBLaFl9N4k8WIoRelVY-ud-U5oXYyl/s1600/19)-singlePage-website-design.jpg" /></a><br />
<br />
<a href="http://www.weshootbottles.com/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSOh0-3ANt_sh9B0btuja5QdBGTYOaTJCKsYW8EF7pG_GVvtr_c9Pi6AqZxpKSY3RXWrEn-GIFmW1qEkeNcqf32K1OcUzzMZulv5Zk0SypJJDhd8Bsebz8rUWGUUptIF9Cl2X2i2t28Lb3/s1600/20)-singlePage-website-design.jpg" imageanchor="1"><img alt="singlePage-website-design-20" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSOh0-3ANt_sh9B0btuja5QdBGTYOaTJCKsYW8EF7pG_GVvtr_c9Pi6AqZxpKSY3RXWrEn-GIFmW1qEkeNcqf32K1OcUzzMZulv5Zk0SypJJDhd8Bsebz8rUWGUUptIF9Cl2X2i2t28Lb3/s1600/20)-singlePage-website-design.jpg" /></a><br />
<br />
<a href="http://annualreport.elevationchurch.org/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2LwFNALewVfDIvQhgemull4chVfr0oLbd_gx92X2O9ur_L4Lk4r_c2JaCYEiLZYhZJwpIPE9PgrFjIuKncZwrKha078jETD8xc5_e5BVfxnw5ZncGKxekPcD6Z196ECmddmTccE2jmm_7/s1600/21)-singlePage-website-design.jpg" imageanchor="1"><img alt="singlePage-website-design-21" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2LwFNALewVfDIvQhgemull4chVfr0oLbd_gx92X2O9ur_L4Lk4r_c2JaCYEiLZYhZJwpIPE9PgrFjIuKncZwrKha078jETD8xc5_e5BVfxnw5ZncGKxekPcD6Z196ECmddmTccE2jmm_7/s1600/21)-singlePage-website-design.jpg" /></a><br />
<br />
<a href="http://hoynebrewing.ca/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYAHfn5CTx7jIMstPIV5mJIt24hpy9HTL1SKAr510R392fZ4xvilWTWdj17qOwckjV_fO5fex-ZYjwfj40J1gGPUqKITax9iPn-PRck__ylxlTjSFlpeDNKip17JOvwfItC_ig7Y3-PTxS/s1600/22)-singlePage-website-design.jpg" imageanchor="1"><img alt="singlePage-website-design-22" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYAHfn5CTx7jIMstPIV5mJIt24hpy9HTL1SKAr510R392fZ4xvilWTWdj17qOwckjV_fO5fex-ZYjwfj40J1gGPUqKITax9iPn-PRck__ylxlTjSFlpeDNKip17JOvwfItC_ig7Y3-PTxS/s1600/22)-singlePage-website-design.jpg" /></a><br />
<br />
<a href="http://teacakedesign.com/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaM553JZWWwVpMq71giDkZyblzupjB43aASvBM5lQSASmnnPPpJk50HlJnLOtc2ItGVKqU94GO8ujzVNtZPWOWQR0O43G06bBuuUTkp2DwpITUbxj_d-239ychI58Y4IjEZ3t_hbFialRY/s1600/23)-singlePage-website-design.jpg" imageanchor="1"><img alt="singlePage-website-design-23" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaM553JZWWwVpMq71giDkZyblzupjB43aASvBM5lQSASmnnPPpJk50HlJnLOtc2ItGVKqU94GO8ujzVNtZPWOWQR0O43G06bBuuUTkp2DwpITUbxj_d-239ychI58Y4IjEZ3t_hbFialRY/s1600/23)-singlePage-website-design.jpg" /></a><br />
<br />
<a href="http://mailboxing.com/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzQBRmvJd8dkS1kuL2U3dufGQmNTcaeXBOuloWemm-FSob8QvTtewUYsjwx4eL1Srs5OOChS0sUtSn9MCpAuJ514cP5mzzykpeYsNJaSnMDaFWGlvlGL3poZ85CwwHMn2Yly29zmptYViC/s1600/24)-singlePage-website-design.jpg" imageanchor="1"><img alt="singlePage-website-design-24" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzQBRmvJd8dkS1kuL2U3dufGQmNTcaeXBOuloWemm-FSob8QvTtewUYsjwx4eL1Srs5OOChS0sUtSn9MCpAuJ514cP5mzzykpeYsNJaSnMDaFWGlvlGL3poZ85CwwHMn2Yly29zmptYViC/s1600/24)-singlePage-website-design.jpg" /></a><br />
<br />
<a href="http://www.bountybev.com/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-edtcE4KFz6KeT99-LKlDb07x60lE_la_2crzBH0qbZgQhpm1H1L4253KWwtiX-_Br1n4eteyq7-p44JSxJAX62NTYNPXCfESsJa_tzdfhvJ6EhJejVmgYbbMe1lk_Z76BHJibkl4EKRS/s1600/25)-singlePage-website-design.jpg" imageanchor="1"><img alt="singlePage-website-design-25" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-edtcE4KFz6KeT99-LKlDb07x60lE_la_2crzBH0qbZgQhpm1H1L4253KWwtiX-_Br1n4eteyq7-p44JSxJAX62NTYNPXCfESsJa_tzdfhvJ6EhJejVmgYbbMe1lk_Z76BHJibkl4EKRS/s1600/25)-singlePage-website-design.jpg" /></a><br />
<br />
<a href="http://creativenuts.com/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtOS-uxIdEOMCogFC2KhHyuXYSLBvc7vJJN3RMmwrFYRPY3vQHOENFHrNI-Hx2PFT57nAllDJ7bRCv1_JW4d-uvme0dGYzuhx-4Rj8g9mLwOYEm746zGPJeB7OT76GwcIZ-9EsaNEegBdF/s1600/26)-singlePage-website-design.jpg" imageanchor="1"><img alt="singlePage-website-design-26" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtOS-uxIdEOMCogFC2KhHyuXYSLBvc7vJJN3RMmwrFYRPY3vQHOENFHrNI-Hx2PFT57nAllDJ7bRCv1_JW4d-uvme0dGYzuhx-4Rj8g9mLwOYEm746zGPJeB7OT76GwcIZ-9EsaNEegBdF/s1600/26)-singlePage-website-design.jpg" /></a><br />
<br />
<a href="http://www.twenty2designs.com/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsHZL37OONr03QsGy9lEPEw62kgOKVHGAYaCM2RpQyMEDfWKU5aFbgb3lOmlQFnNq7HOx4L6Wv3GQSlik7Sw24mHBPIVFP4Qzx1Mz8Yu-0xk0qZpp-zNS_fpQQpMXpiFGsFeiWIik36vUm/s1600/27)-singlePage-website-design.jpg" imageanchor="1"><img alt="singlePage-website-design-27" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsHZL37OONr03QsGy9lEPEw62kgOKVHGAYaCM2RpQyMEDfWKU5aFbgb3lOmlQFnNq7HOx4L6Wv3GQSlik7Sw24mHBPIVFP4Qzx1Mz8Yu-0xk0qZpp-zNS_fpQQpMXpiFGsFeiWIik36vUm/s1600/27)-singlePage-website-design.jpg" /></a><br />
<br />
<a href="http://twofishillustration.com/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitm44Qom2lBr7xRVnUj20uSdqrXtFmNcJdquAPfL7Av2GDbVdYk5h6IT0Qs8ADkheV7vximw5KhMiGBvf9iUaQRqjCaP9e7UqW2WIyF8PlW86cnzC42PRP86QIzBScMG0r4XzNoJCfF0hw/s1600/28)-singlePage-website-design.jpg" imageanchor="1"><img alt="singlePage-website-design-28" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitm44Qom2lBr7xRVnUj20uSdqrXtFmNcJdquAPfL7Av2GDbVdYk5h6IT0Qs8ADkheV7vximw5KhMiGBvf9iUaQRqjCaP9e7UqW2WIyF8PlW86cnzC42PRP86QIzBScMG0r4XzNoJCfF0hw/s1600/28)-singlePage-website-design.jpg" /></a><br />
<br />
<a href="http://www.larissabrandao.com/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIwwUKCDlm3MX6TZ7iURbFPSv5AJAZkTAJ5fIGkhN6vdAPJ_YPcAu_amjxCRW6L_NkGSfaoJce9b2AGaWbLxqB6iiZxKzR4YkVCyznty20I026QcZmsWgnnAaCx7kBOHdZbU6XlzDHl8w_/s1600/29)-singlePage-website-design.jpg" imageanchor="1"><img alt="singlePage-website-design-29" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIwwUKCDlm3MX6TZ7iURbFPSv5AJAZkTAJ5fIGkhN6vdAPJ_YPcAu_amjxCRW6L_NkGSfaoJce9b2AGaWbLxqB6iiZxKzR4YkVCyznty20I026QcZmsWgnnAaCx7kBOHdZbU6XlzDHl8w_/s1600/29)-singlePage-website-design.jpg" /></a><br />
<br />
<a href="http://www.siebennull.com/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHYN29gofqwXpeA_pplet2e45UZ2gjaMqp_LqisruLCPN-0hgNo3N2NwgkKusUaQtUsUYUh3BQW8kHtI4-cxAtjr3rV3Foz6T1zV-jR-hrfgWNUdKSq7iBEufxhGBTltgl0uqpZrEoMO6P/s1600/30)-singlePage-website-design.jpg" imageanchor="1"><img alt="singlePage-website-design-30" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHYN29gofqwXpeA_pplet2e45UZ2gjaMqp_LqisruLCPN-0hgNo3N2NwgkKusUaQtUsUYUh3BQW8kHtI4-cxAtjr3rV3Foz6T1zV-jR-hrfgWNUdKSq7iBEufxhGBTltgl0uqpZrEoMO6P/s1600/30)-singlePage-website-design.jpg" /></a><br />
<br />
<a href="http://www.bulletpr.co.uk/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeTGjPZKpCOc3BNfC_ZyHk4MebORE0os5JLXDrM2xZYJUdVirWbJwlugeWrou7dXa2k8UA2pgcJPviZlD77tWOP9ZlV2e2NV_xY-zHgrHomOIIx_3wlzF4TJ_P1GvBhza4nOCejxVI7Euz/s1600/31)-singlePage-website-design.jpg" imageanchor="1"><img alt="singlePage-website-design-31" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeTGjPZKpCOc3BNfC_ZyHk4MebORE0os5JLXDrM2xZYJUdVirWbJwlugeWrou7dXa2k8UA2pgcJPviZlD77tWOP9ZlV2e2NV_xY-zHgrHomOIIx_3wlzF4TJ_P1GvBhza4nOCejxVI7Euz/s1600/31)-singlePage-website-design.jpg" /></a><br />
<br />
<a href="http://www.bikingboss.com/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVX72-f0qIP22ek975VaXYZVTWv3KL82IrFK7sqUGmyGKmZQqjOr4mTQPE4vAm16TMGrvtNu_9o9f7T4pOOkOrxKTgKhcfOYjrFfdtUYsOp2KSgtlPxDzb055Y0UwuMWvFv7OInlQ3P2Fy/s1600/32)-singlePage-website-design.jpg" imageanchor="1"><img alt="singlePage-website-design-32" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVX72-f0qIP22ek975VaXYZVTWv3KL82IrFK7sqUGmyGKmZQqjOr4mTQPE4vAm16TMGrvtNu_9o9f7T4pOOkOrxKTgKhcfOYjrFfdtUYsOp2KSgtlPxDzb055Y0UwuMWvFv7OInlQ3P2Fy/s1600/32)-singlePage-website-design.jpg" /></a><br />
<br />
<a href="http://www.vondutch.com/" target="_blank">Visit Site</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNKMlR7PP0Y94QCLgbwjnc8Q5FXtrdVfvAwui7z2IueE3fOAO7QEZ3c5AQk4_OY-D1dZQiLoMB6NSeDshATDpycIAAKZf5Cgit-Zl6uYhRP7p42wU0URZmOBt3gCNfYuSEdvffLWBDEnqR/s1600/33)-singlePage-website-design.jpg" imageanchor="1"><img alt="singlePage-website-design-33" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNKMlR7PP0Y94QCLgbwjnc8Q5FXtrdVfvAwui7z2IueE3fOAO7QEZ3c5AQk4_OY-D1dZQiLoMB6NSeDshATDpycIAAKZf5Cgit-Zl6uYhRP7p42wU0URZmOBt3gCNfYuSEdvffLWBDEnqR/s1600/33)-singlePage-website-design.jpg" /></a><br />
<br />
<b>If you want to add your site here then mail us at <a href="mailto:aps.singh67@gmail.com">aps.singh67@gmail.com</a></b><br />
</div></div>yesongshttp://www.blogger.com/profile/14466160119267287649noreply@blogger.com5tag:blogger.com,1999:blog-4276763109087946480.post-42077469215522438202013-04-13T04:48:00.003-07:002013-04-13T04:49:05.300-07:0020 + Pure css3 Menu Design<div dir="ltr" style="text-align: left;" trbidi="on"><div class="custom_p">When we open a website. First impression of website is menu of website. So the menu of a website should be perfect. You have many choices to <b>create a website menu</b>. You can use jquery , javaScript, and css also. Each have their own advantages and limitations. In this post we have more than 20 latest design of css3 menu. The <b>advantage of develop a menu with css</b> is that there is no conflict and css menu is very light weighted. So it will load fast that will improve the performance of your website. You can select any of the following menu for your website and use it, But don’t forget to read the license of the menu. These are almost free css menu.<br />
<br />
<h2>Black css3 Drowpdown menu</h2><a href="http://cssmenumaker.com/menu/black-css3-drop-down-menu" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBGQiVyrwG26AVSzlVyHhHnaJ_S9sNXTZWGGZSe8kQ_wucaPXArNf3K0ktgg5y_NiOsjg1eW2UcJf6YAgjTlQJFYhpiII2c06zixdWi_vYRU3L0_V3EyeNliI6MPMUq0Z8nqod_ud1ZwzT/s1600/black-css-dropdown-menu.png" imageanchor="1"><img alt="Black css3 Drowpdown menu" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBGQiVyrwG26AVSzlVyHhHnaJ_S9sNXTZWGGZSe8kQ_wucaPXArNf3K0ktgg5y_NiOsjg1eW2UcJf6YAgjTlQJFYhpiII2c06zixdWi_vYRU3L0_V3EyeNliI6MPMUq0Z8nqod_ud1ZwzT/s1600/black-css-dropdown-menu.png" title="Black Drowpdown menu using css3" /></a><br />
<br />
<h2>MultiLevel Css3 Animated Menu</h2><a href="http://www.red-team-design.com/css3-animated-dropdown-menu" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPh2aq4YHV1SV_Dm4-I_0lkSA5PgaD1cqThiHqpZEtaQS5S9LrOXBH552q60C9jFouTEbT1rP26A7byxnTGHs6eoC6dHwj79YOcxOFCubB3su_uDnc1THoWw_WXzRvgtL5jhWvdZh9Mtoa/s1600/black-multilever-css-menu.jpg" imageanchor="1"><img alt="MultiLevel Css3 Animated Black Menu" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPh2aq4YHV1SV_Dm4-I_0lkSA5PgaD1cqThiHqpZEtaQS5S9LrOXBH552q60C9jFouTEbT1rP26A7byxnTGHs6eoC6dHwj79YOcxOFCubB3su_uDnc1THoWw_WXzRvgtL5jhWvdZh9Mtoa/s1600/black-multilever-css-menu.jpg" /></a><br />
<br />
<h2>Apple like css3 Menu</h2><a href="http://cssmenumaker.com/menu/apple-css3" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0IWmhpWm4-8GDapkZKkac5r2EX0giWCor2czk2MzRqZWx9JgBp1g05F6A2F8ECiMc1tLikC8XibwMrnXPMQMAqx9CawEQqVjthGAtGW6_dfBbRHFbkiMlTKU7ItEuViiOv-DVuzPVnrWY/s1600/grey-apple-style-menu.png" imageanchor="1"><img alt="Apple like css3 Menu" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0IWmhpWm4-8GDapkZKkac5r2EX0giWCor2czk2MzRqZWx9JgBp1g05F6A2F8ECiMc1tLikC8XibwMrnXPMQMAqx9CawEQqVjthGAtGW6_dfBbRHFbkiMlTKU7ItEuViiOv-DVuzPVnrWY/s1600/grey-apple-style-menu.png" /></a><br />
<br />
<h2>Blue Drop Down Menu css3 </h2><a href="http://cssmenumaker.com/menu/blue-opera-drop-down-menu" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsjAhUC_VtwamGHItPazv5ralD24H3QKdUfRxj8i4WVtUnZYQz74rg9kxcB3EI0EHPXeEVAauLFxMZbhGk4ou0SykcR9iodg_idFyGP5fjW5TvcfXra8Msl8v4iuLv8VJKBOhu_ZhOfc4T/s1600/blu-black-menu.jpg" imageanchor="1"><img alt="Blue Drop Down Menu css3" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsjAhUC_VtwamGHItPazv5ralD24H3QKdUfRxj8i4WVtUnZYQz74rg9kxcB3EI0EHPXeEVAauLFxMZbhGk4ou0SykcR9iodg_idFyGP5fjW5TvcfXra8Msl8v4iuLv8VJKBOhu_ZhOfc4T/s1600/blu-black-menu.jpg" /></a><br />
<br />
<br />
<h2>Large Animated Css3 Menu</h2><a href="http://cssmenumaker.com/menu/animated-drop-down-css3" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDv4MGhhsJLFlcwgr7jNPOXTjNEaSCKOVZO34jI3MVnO987ceLtWXlZP_CpwnfdPfJjLrFrePmDXA5g4vsr54-d89rnUvCDWFehJ0u9NmPZ7_XTCIq7NDboIIv1NAJnKXxidel5vTQvH5m/s1600/black-square-css-menu.jpg" imageanchor="1"><img alt="Animated Css3 Menu" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDv4MGhhsJLFlcwgr7jNPOXTjNEaSCKOVZO34jI3MVnO987ceLtWXlZP_CpwnfdPfJjLrFrePmDXA5g4vsr54-d89rnUvCDWFehJ0u9NmPZ7_XTCIq7NDboIIv1NAJnKXxidel5vTQvH5m/s1600/black-square-css-menu.jpg" /></a><br />
<br />
<h2>Stylish Vertical Css3 Menu</h2><a href="http://www.tobypitman.com/jquery-style-menu-with-css3/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWAWMLEzWm50y58b8nbqPBV8Ow4oQfxXT62l_8_hBFBFy2GmSoKrqiZeSMBEAX8lo_c9FUXnXzihOtxhPJO9akS8MuB-AiNzBIzxl757xsQAFqvHFFLn67snALZWyROTZNdYnzsKISW5NY/s1600/grey-css3-verticle-menu.jpg" imageanchor="1"><img alt="Stylish Vertical Css3 Menu" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWAWMLEzWm50y58b8nbqPBV8Ow4oQfxXT62l_8_hBFBFy2GmSoKrqiZeSMBEAX8lo_c9FUXnXzihOtxhPJO9akS8MuB-AiNzBIzxl757xsQAFqvHFFLn67snALZWyROTZNdYnzsKISW5NY/s1600/grey-css3-verticle-menu.jpg" /></a><br />
<br />
<h2>CSS3 Animated Menu</h2><a href="http://tutorialzine.com/2011/05/css3-animated-navigation-menu/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyM7zm-HQhjx1WNqKVLwZhsFi6QwqVuKHOPLe8ba-QEmAwpVjmo_1tlR9QcPSrJbdCf19_t5gCkRumMR1IN2ralkA614awAq_xlAbOrABZSnCIMXBbX2BrFjGACaAZ89kyeL08xzm96Zzr/s1600/animation-css3-menu.jpg" imageanchor="1"><img alt="CSS3 Animated Menu" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyM7zm-HQhjx1WNqKVLwZhsFi6QwqVuKHOPLe8ba-QEmAwpVjmo_1tlR9QcPSrJbdCf19_t5gCkRumMR1IN2ralkA614awAq_xlAbOrABZSnCIMXBbX2BrFjGACaAZ89kyeL08xzm96Zzr/s1600/animation-css3-menu.jpg" /></a><br />
<br />
<br />
<h2>Css3 Metal Menu with Icons</h2><a href="http://www.script-tutorials.com/css3-metal-menu-with-icons/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhH42OvYSjO0JMvJL-4Dq_ffrewaoMeTus6cuCXaG29T6Y76IzkHMvjRhO4mXDBXjXHuJy_0AQnCQ6z_g-OS3BQge3fosk5kdmh4G_Jl1O5BTcqdLksSQuOGBCEwgS-jjE5wRu0G6RcMIB/s1600/icon-css-menu.jpg" imageanchor="1"><img alt="Css3 Metal Menu with Icons" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhH42OvYSjO0JMvJL-4Dq_ffrewaoMeTus6cuCXaG29T6Y76IzkHMvjRhO4mXDBXjXHuJy_0AQnCQ6z_g-OS3BQge3fosk5kdmh4G_Jl1O5BTcqdLksSQuOGBCEwgS-jjE5wRu0G6RcMIB/s1600/icon-css-menu.jpg" /></a><br />
<br />
<h2>Blue glossy Menu With css3</h2><a href="http://www.script-tutorials.com/creating-css3-dropdown-menu/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_BMbFGHyPZG2WzsN81C_zqYaPf-UpqRCrbSpTbLsmGWhXc9GqANCTxXScDWccX30waClz8w0ZayFTqy2GQgg3EFwTAUZb3xaFuIHFF9h7iU18BxPHNqictcMsC1ochm3hnsnuBhOQGlWu/s1600/blue-gradient-css-menu.jpg" imageanchor="1"><img alt="Blue glossy Menu With css3" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_BMbFGHyPZG2WzsN81C_zqYaPf-UpqRCrbSpTbLsmGWhXc9GqANCTxXScDWccX30waClz8w0ZayFTqy2GQgg3EFwTAUZb3xaFuIHFF9h7iU18BxPHNqictcMsC1ochm3hnsnuBhOQGlWu/s1600/blue-gradient-css-menu.jpg" /></a><br />
<br />
<h2>Stunning Grey Dropdown Menu With Css3</h2><a href="http://netdna.webdesignerdepot.com/uploads7/create-a-stunning-menu-in-css3/demo/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF5ls_k7R4W3CwSuCxNkS-NRn_qS1naqi6Q43gFSxAyuSolmIUGx_hT3ghyqs0l_ud4JluTK1rPB_HlryQMX3g9s_7vQ4sgefNC4t3deAIGobgn__oANFW_4xi-xwqrkYwHihxydaUcDKu/s1600/pure-css3-menu.jpg" imageanchor="1"><img alt="Stunning Grey Dropdown Menu With Css3" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF5ls_k7R4W3CwSuCxNkS-NRn_qS1naqi6Q43gFSxAyuSolmIUGx_hT3ghyqs0l_ud4JluTK1rPB_HlryQMX3g9s_7vQ4sgefNC4t3deAIGobgn__oANFW_4xi-xwqrkYwHihxydaUcDKu/s1600/pure-css3-menu.jpg" /></a><br />
<br />
<h2>Circle Menu with Css</h2><a href="http://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/index10.html" target="_blank">Demo</a> <a href="http://tympanus.net/codrops/2011/10/24/creative-css3-animation-menus/" target="_blank">Download</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglpOrKnpRQ1HKt82lKHk0Ruhuu_Ew0LPQw-36cXXxFqrxMSG9Yvyibi-lNwMnQ_ukez98r7KDCok35VVgh7fbQYn8RAHc25fHm0UAk3BuVYAiqQEfWISAv8AXT9j3NKvHX5AaNIPielwBS/s1600/circle-css-menu.jpg" imageanchor="1"><img alt="Circle Menu with Css" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglpOrKnpRQ1HKt82lKHk0Ruhuu_Ew0LPQw-36cXXxFqrxMSG9Yvyibi-lNwMnQ_ukez98r7KDCok35VVgh7fbQYn8RAHc25fHm0UAk3BuVYAiqQEfWISAv8AXT9j3NKvHX5AaNIPielwBS/s1600/circle-css-menu.jpg" /></a><br />
<br />
<h2>Grey Simple css3 Menu</h2><a href="http://www.ixtendo.com/html5css3-gray-navigation-menu/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguz07elFuODjLWoLlrrOJ437fgXpiYIUXQRfiLnTiX5iwFvHW2Q97gzqSe4KIamWKU-gxB27bKTKCznui8kSCQlAQQI2JtGvmZtxWmSA9U-oeWogyWZdi37-AnpohxL58G9tXdoFIvg0_5/s1600/simple-one-level-css-menu.jpg" imageanchor="1"><img alt="Grey Simple css3 Menu" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguz07elFuODjLWoLlrrOJ437fgXpiYIUXQRfiLnTiX5iwFvHW2Q97gzqSe4KIamWKU-gxB27bKTKCznui8kSCQlAQQI2JtGvmZtxWmSA9U-oeWogyWZdi37-AnpohxL58G9tXdoFIvg0_5/s1600/simple-one-level-css-menu.jpg" /></a><br />
<br />
<h2>Clean and Simple Css3 Menu</h2><a href="http://cssdeck.com/labs/clean-and-minimal-menu-navigation-in-pure-css3" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3t80eB3RZdNJyRFahKBjsEsAaw0KJDwy4vCoNsulvuqyoIUebwTPMJHnrhU1NYBcEGCwgW_nfCOEQzqbvIHN6k9uLcapQFGB9TZkQUzmoyp-cp-zkKj4nDLggUWTuOuwpvShEnyZpscMj/s1600/simple-css-menu.jpg" imageanchor="1"><img alt="Clean and Simple Css3 Menu" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3t80eB3RZdNJyRFahKBjsEsAaw0KJDwy4vCoNsulvuqyoIUebwTPMJHnrhU1NYBcEGCwgW_nfCOEQzqbvIHN6k9uLcapQFGB9TZkQUzmoyp-cp-zkKj4nDLggUWTuOuwpvShEnyZpscMj/s1600/simple-css-menu.jpg" /></a><br />
<br />
<h2>Collection of Effects With Css</h2><a href="http://cssdeck.com/labs/collection-of-menu-effects" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilepT4uLtqIEFPlCf2Oh8KvpqqVSj6v7C0KZCVzli00QFaNIAvajj-eOT7bH7LTBPFTX3CRuMIWffP_JykJ6h2tCUb3fXej-C6ul-8a3Nlyq1-CghN0oExM8QGk9LIYqN-p_2IiQF5Pysm/s1600/jquerr-effect-css-menu.jpg" imageanchor="1"><img alt="awesome effects with css3" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilepT4uLtqIEFPlCf2Oh8KvpqqVSj6v7C0KZCVzli00QFaNIAvajj-eOT7bH7LTBPFTX3CRuMIWffP_JykJ6h2tCUb3fXej-C6ul-8a3Nlyq1-CghN0oExM8QGk9LIYqN-p_2IiQF5Pysm/s1600/jquerr-effect-css-menu.jpg" /></a><br />
<br />
<h2>Css3 LavaLamp Menu</h2><a href="http://www.script-tutorials.com/pure-css3-lavalamp-menu/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpJ_p-XsSB4g1OWpVKdpU8mTbAEbyiTR0bP_SmzMrgcjegMq6kzyDunKY9t3XlDUmnBrqXmDZdklfY3UOeJa8LoZ00h8nQEHbuciBV9ava9BXB4Gy54fZjQjZhqTEob0pPqRxyrqPs78wa/s1600/asa.jpg" imageanchor="1"><img alt="Css3 LavaLamp Menu" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpJ_p-XsSB4g1OWpVKdpU8mTbAEbyiTR0bP_SmzMrgcjegMq6kzyDunKY9t3XlDUmnBrqXmDZdklfY3UOeJa8LoZ00h8nQEHbuciBV9ava9BXB4Gy54fZjQjZhqTEob0pPqRxyrqPs78wa/s1600/asa.jpg" /></a><br />
<br />
<h2>Css3 Menu with images and text</h2><a href="http://nettuts.s3.amazonaws.com/819_megamenu/demo/index.html" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7lMEqH_W1zD1mhjKbklctak-KGBw_Ym-4pObRs8c-tdhWgVnzGltj36NRLnieFmdDmyfKxvpw4z7oCPPKCJ45JxEzcaoJr8ZXQjvZQc6hDhbqw8luL2Uu8MXS1k33dUXNjnkD-NqpPSKU/s1600/multicolumn-css-menu.jpg" imageanchor="1"><img alt="Css3 Menu with images and text" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7lMEqH_W1zD1mhjKbklctak-KGBw_Ym-4pObRs8c-tdhWgVnzGltj36NRLnieFmdDmyfKxvpw4z7oCPPKCJ45JxEzcaoJr8ZXQjvZQc6hDhbqw8luL2Uu8MXS1k33dUXNjnkD-NqpPSKU/s1600/multicolumn-css-menu.jpg" /></a><br />
<br />
<h2>Css Vertical Icon Menu</h2><a href="http://tutorialzine.com/2010/06/css3-minimalistic-navigation-menu/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfG4uvJvQoiSAGkkX-TEUX2De5dFK1W_-eJ3TKgltKwPJ_5qHbVhct1iFuUqqGutFgWen5-E_yw53_7f4DSqubuxko7sZyiMXhY6Cux7vqaQOQ7kqzs0y506WF7Alv9CXsJijjVFv7a_cH/s1600/side-menu-css.jpg" imageanchor="1"><img alt="Css Vertical Icon Menu" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfG4uvJvQoiSAGkkX-TEUX2De5dFK1W_-eJ3TKgltKwPJ_5qHbVhct1iFuUqqGutFgWen5-E_yw53_7f4DSqubuxko7sZyiMXhY6Cux7vqaQOQ7kqzs0y506WF7Alv9CXsJijjVFv7a_cH/s1600/side-menu-css.jpg" /></a><br />
<br />
<h2>Responsive CSS Menu</h2><a href="http://pixelsdaily.com/resources/html-css/responsive-css-navigation-menu/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPawpvA-57CFWon44YvyhMDngFz9UVGRtbBlosECggsKmc0qRaSmkdzLxm1SceD-eH5H9Yskl-LWbT2LM1t1s286WcatY2_nlg-yC7WtC-fLhDcRPNSxMjVSw8yiDd5Sid_3g1ObIqfQGT/s1600/responsive-css-menu.jpg" imageanchor="1"><img alt="Responsive CSS Menu" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPawpvA-57CFWon44YvyhMDngFz9UVGRtbBlosECggsKmc0qRaSmkdzLxm1SceD-eH5H9Yskl-LWbT2LM1t1s286WcatY2_nlg-yC7WtC-fLhDcRPNSxMjVSw8yiDd5Sid_3g1ObIqfQGT/s1600/responsive-css-menu.jpg" /></a><br />
<br />
<h2>Css Multicolor Button overlapped</h2><a href="http://deepubalan.com/blog/2010/01/18/cool-sprites-free-overlapped-css-menu-using-css-sprites/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTW6NWLlX2_e8-Fss616x-YpUWE-bA-M78-3g9CBQ3HR3teylLRfsP4cJydlSiu1HGJr4slzXZs0ldX2jvw4DwpY5xrX0EAmVCBivv4c86L5_qYmv9l5CiLw0i1LO_jBeaCqnwovV2BMVS/s1600/colored-css-menu.jpg" imageanchor="1"><img alt="Css Multicolor Button overlapped" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTW6NWLlX2_e8-Fss616x-YpUWE-bA-M78-3g9CBQ3HR3teylLRfsP4cJydlSiu1HGJr4slzXZs0ldX2jvw4DwpY5xrX0EAmVCBivv4c86L5_qYmv9l5CiLw0i1LO_jBeaCqnwovV2BMVS/s1600/colored-css-menu.jpg" /></a><br />
<br />
<h2>Green Drop Down Menu css3 </h2><a href="http://cssmenumaker.com/menu/green-opera-drop-down-menu" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0yNCyKcNoW6FtR2I_clh7GJb7XkE9vUhdgiznZdH6Qnx-apF-YaUw3Y08G7GdSyJky1AQt9rsXf86h3VAnTHoELzHmPF-sfgba2ja5tj3POTe0dpwVmwzPkK8Uz9Dx2Ut5i379DgGEtvE/s1600/black-green-css-menu.jpg" imageanchor="1"><img alt="Green Drop Down Menu css3" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0yNCyKcNoW6FtR2I_clh7GJb7XkE9vUhdgiznZdH6Qnx-apF-YaUw3Y08G7GdSyJky1AQt9rsXf86h3VAnTHoELzHmPF-sfgba2ja5tj3POTe0dpwVmwzPkK8Uz9Dx2Ut5i379DgGEtvE/s1600/black-green-css-menu.jpg" /></a><br />
<br />
<h2>3d Menu with Css3</h2><a href="http://designshack.net/tutorialexamples/AnimatedMenu/animatedMenu.html" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaX7lEqOCJgpFCwup529_pRxe92DPdkbrmDCJuzMEL9HAGJFmJji8X-gQZymsZDOYL1AhZc64Etp5CnKBgv113x1wrPMc4133SDxOz6KRdxEsUsCikU4S51zZpnFERjX_Q1YQH03kFp7Bs/s1600/text-css-menu.jpg" imageanchor="1"><img alt="3d Menu with Css3" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaX7lEqOCJgpFCwup529_pRxe92DPdkbrmDCJuzMEL9HAGJFmJji8X-gQZymsZDOYL1AhZc64Etp5CnKBgv113x1wrPMc4133SDxOz6KRdxEsUsCikU4S51zZpnFERjX_Q1YQH03kFp7Bs/s1600/text-css-menu.jpg" /></a><br />
<br />
<h2>Vertical 3d Menu with css3</h2><a href="http://www.script-tutorials.com/css3-vertical-multicolor-3d-menu/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW3t2-93wklw7wYvbrUoM6vSkZIBqj1hSXQs4hiGPXJyPtXYu3r_kb3hWmHXTC2YWtZJ59BvAfi9UpeHYDcOgyGkxallEBZA2W_F2UiDeR_ivp03mi_ioPbyQYVRL9ubSS5PlYR3j_cq0v/s1600/side-menu-css-2.jpg" imageanchor="1"><img alt="Vertical 3d Menu with css3" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW3t2-93wklw7wYvbrUoM6vSkZIBqj1hSXQs4hiGPXJyPtXYu3r_kb3hWmHXTC2YWtZJ59BvAfi9UpeHYDcOgyGkxallEBZA2W_F2UiDeR_ivp03mi_ioPbyQYVRL9ubSS5PlYR3j_cq0v/s1600/side-menu-css-2.jpg" /></a><br />
<br />
<h2>Neat Header and Menu with Css3</h2><a href="http://www.script-tutorials.com/neat-and-modern-header-section-with-css3/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0e7RTzFY-tZ__9ZyKnSrJ3W6sdgRe5ZeqFd8yCgnMAmXw7rw6HfOE0Y31Wvjx_kI6ab9pwKUxjjLZVZ2oJVv4O5qSIzQu0XWqDzEnoKAZ__zeG356rAB9CLV2m0SgaKDp-yU_4SDt74yY/s1600/simple-white-css-menu.jpg" imageanchor="1"><img alt="Neat Header and Menu with Css3" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0e7RTzFY-tZ__9ZyKnSrJ3W6sdgRe5ZeqFd8yCgnMAmXw7rw6HfOE0Y31Wvjx_kI6ab9pwKUxjjLZVZ2oJVv4O5qSIzQu0XWqDzEnoKAZ__zeG356rAB9CLV2m0SgaKDp-yU_4SDt74yY/s1600/simple-white-css-menu.jpg" /></a><br />
<br />
<h2>Animated Button Menu with css3</h2><a href="http://www.script-tutorials.com/creating-css3-animated-menu/" target="_blank">Demo</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9bFcygPTxIh9uIbaIbg93sguJgqMdbXR8weDDqMd9b9SpssnpJvy0pjjXC4HY_1xUR8a5ao4y4EJZlBTFN0ZmLfFLQmDKqkx0fjm-DzSY8ex-jTRuv1XoO89fMBx_FYpfz9f-UHb4rg7J/s1600/white-bluse-simple-css-menu.jpg" imageanchor="1"><img alt="Animated Button Menu with css3" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9bFcygPTxIh9uIbaIbg93sguJgqMdbXR8weDDqMd9b9SpssnpJvy0pjjXC4HY_1xUR8a5ao4y4EJZlBTFN0ZmLfFLQmDKqkx0fjm-DzSY8ex-jTRuv1XoO89fMBx_FYpfz9f-UHb4rg7J/s1600/white-bluse-simple-css-menu.jpg" /></a></div></div>yesongshttp://www.blogger.com/profile/14466160119267287649noreply@blogger.com1tag:blogger.com,1999:blog-4276763109087946480.post-66707387481813107342013-04-10T00:07:00.001-07:002013-04-10T00:07:24.629-07:00How To Install Custom Shapes In Photoshop<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="custom_p">
Earlier I have discussed about <a href="http://www.thinklala.blogspot.in/2013/04/35-set-of-photoshop-custom-shapes.html">photoshop custom shapes</a> and I have provide download link for photoshop custom shapes. In this post i will tell you <b>how to install custom shapes in photoshop</b>. This is really a simple task. You just neet to follow the following steps and you can use custom shapes easily. <br />
<br />
Step 1: <a href="http://www.thinklala.blogspot.in/2013/04/35-set-of-photoshop-custom-shapes.html">Download any custom shapes</a> file. That is a .csh file <br />
<br />
Step 2: Select custom shapes tool from toolbar.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg41n6R37wnoziOl_VryeuREnQEXpeGNS0QbharYfbtnSBmPm7GQD1MHD0rfOYyH8W5GGZDg1UREucH_pyomusiBopsxNbmobLAOCaAzHolrvKtidIh56eGXvNBpbu21XbAjSAPm84gVRx/s1600/Select_custom_shape.png" imageanchor="1"><img alt="install custom shapes in photoshop step 2" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg41n6R37wnoziOl_VryeuREnQEXpeGNS0QbharYfbtnSBmPm7GQD1MHD0rfOYyH8W5GGZDg1UREucH_pyomusiBopsxNbmobLAOCaAzHolrvKtidIh56eGXvNBpbu21XbAjSAPm84gVRx/s1600/Select_custom_shape.png" style="max-width: 590px;" title="How to install custom shapes in photoshop(1)" /></a><br />
<br />
Step3: select shapes from toolbar on the top and a shape box will open. Now click on small arrow on the right top corner of box.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ddKf-HqxSfa4QcV1_crXIUNVBGe-z3lTQ-Gw6IHTuUHAwa-8WznxJHR54lcQ2AOZIw_zTyM9EcBJjIFU5Isci7fN86r2IC58vAnblMW0mDKW_eYmEnhsABJk0C3eGeU_1XGdvHtpd__k/s1600/Select_custom_shape_2.png" imageanchor="1"><img alt="install custom shapes in photoshop step 3" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ddKf-HqxSfa4QcV1_crXIUNVBGe-z3lTQ-Gw6IHTuUHAwa-8WznxJHR54lcQ2AOZIw_zTyM9EcBJjIFU5Isci7fN86r2IC58vAnblMW0mDKW_eYmEnhsABJk0C3eGeU_1XGdvHtpd__k/s1600/Select_custom_shape_2.png" style="max-width: 590px;" title="How to install custom shapes in photoshop(2)" /></a><br />
<br />
Step 4: now select load shapes option from the list and new window will be open. Now select the file which you have downloaded. And click on load button. The shapes will be added to your photoshop. <br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3oFtTzy1BKz2oxlH4xc8zra9Qg2DCA7UDKqP5DjSwkR6ieLPZBNYMpnox26De3Mh-sf8lTiEZazzikPA8UknMNtWVW5POZWtQL9qRcma3NEpedbcPMqAIbyRkeYFpEfFi0BjGjM1fGY4Y/s1600/Select_custom_shape_3.png" imageanchor="1"><img alt="install custom shapes in photoshop step 4" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3oFtTzy1BKz2oxlH4xc8zra9Qg2DCA7UDKqP5DjSwkR6ieLPZBNYMpnox26De3Mh-sf8lTiEZazzikPA8UknMNtWVW5POZWtQL9qRcma3NEpedbcPMqAIbyRkeYFpEfFi0BjGjM1fGY4Y/s1600/Select_custom_shape_3.png" style="max-width: 590px;" title="how to install custom shapes in photoshop(3)" /></a><br />
<br /></div>
</div>
yesongshttp://www.blogger.com/profile/14466160119267287649noreply@blogger.com0tag:blogger.com,1999:blog-4276763109087946480.post-37689160774453675192013-04-08T02:51:00.000-07:002013-04-29T03:47:27.596-07:0035 + Set of Photoshop custom shapes <div dir="ltr" style="text-align: left;" trbidi="on"><div class="custom_p">Photoshop is most significant tool used in designing. And <b>Photoshop custom shapes</b> are most significant in Photoshop. Because in increase the reusability. You can draw custom shapes yourself or there are thousands of shapes available on internet. You just need to download them and install them. But you should aware about <a href="http://thinklala.blogspot.in/2013/04/how-to-install-custom-shapes-in.html">how to install custom shapes in photoshop</a>. And you can use them easily. Here is the list of more than 35 set of custom photoshop shapes. <br />
<br />
<a href="http://themeec.deviantart.com/art/Web-and-Technology-Logos-348847759" target="_blank">Web and Technology Logos</a> <br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkiyF6rQH5B01owYpNzB7d3-c-v7UI9-nrTWQgAZsnPJaZTqsrolNV7FjutEjPc9DwTBMaeTH0AiFNJJ6rZ5_9EiX2nX8IkWHCejLTxsHtmhdXf1KlXXbeZZbzcqosRN2JF1lttivQ1C3m/s1600/web-Technology-icons-shapes.jpg" imageanchor="1"><img alt="Web and Technology Logos" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkiyF6rQH5B01owYpNzB7d3-c-v7UI9-nrTWQgAZsnPJaZTqsrolNV7FjutEjPc9DwTBMaeTH0AiFNJJ6rZ5_9EiX2nX8IkWHCejLTxsHtmhdXf1KlXXbeZZbzcqosRN2JF1lttivQ1C3m/s1600/web-Technology-icons-shapes.jpg" title="Web and Technology Logos photoshop Shapes" /></a><br />
<br />
<a href="http://dezignus.com/tribal-tattoos/" target="_blank">Tattoos</a> <br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTLEv1Az0p2yyiA5Hs4YqEXzzWK9crqBh5rcQO3479IXGMf_OBreAE389164RieqDgRWGb4VJQJGV2hJWwHD1XA5_rOZyUTs0GLNrEG_zk1xn6srwCaTV68lQrEIwCZimgN_s1PPMujNly/s1600/custom_shape26.jpg" imageanchor="1"><img alt="Different tattoos" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTLEv1Az0p2yyiA5Hs4YqEXzzWK9crqBh5rcQO3479IXGMf_OBreAE389164RieqDgRWGb4VJQJGV2hJWwHD1XA5_rOZyUTs0GLNrEG_zk1xn6srwCaTV68lQrEIwCZimgN_s1PPMujNly/s1600/custom_shape26.jpg" /></a><br />
<br />
<a href=http://www.shapes4free.com/photoshop-custom-shapes/40-free-photoshop-shapes-sun-clouds-homes-keys/" target="_blank">Home,Sun,Clouds shape</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy0-JJ2J_Y-syPGX4o2GhLlhL_ZmsRUU8IMT32yV-7j_WtOd7uN2fJXnV9roeKsh0UZOJ87I_EDf4oMcmcZuVp1D-X5iU89O4Yg4zjyGN3K9uGQwMtLZ0a6CkAFsl1-ggpu43_7W3udmcs/s1600/sun-clouds-homes-keys-lg.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy0-JJ2J_Y-syPGX4o2GhLlhL_ZmsRUU8IMT32yV-7j_WtOd7uN2fJXnV9roeKsh0UZOJ87I_EDf4oMcmcZuVp1D-X5iU89O4Yg4zjyGN3K9uGQwMtLZ0a6CkAFsl1-ggpu43_7W3udmcs/s320/sun-clouds-homes-keys-lg.jpg" alt="misc-Home,Sun,Clouds shape" title=""misc-Home,Sun,Clouds shape"/></a><br />
<br />
<a href="http://dezignus.com/snowflakes-shapes/" target="_blank">Snowflakes</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj7yZK0eVm90KnldGo677qs5jNgHIoZvQQ1SYUfbd1jXr2CgT-wAVAeFmdaoTLkIDvnJ41JVmbnt7NW9-ymW_-xpwepxO4ge_t1_sTBHU1aWM15FdOHMjQs6xR5YcJSptM9ha24czzPPiZ/s1600/custom_shape24.jpg" imageanchor="1"><img alt="snowflakes shapes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj7yZK0eVm90KnldGo677qs5jNgHIoZvQQ1SYUfbd1jXr2CgT-wAVAeFmdaoTLkIDvnJ41JVmbnt7NW9-ymW_-xpwepxO4ge_t1_sTBHU1aWM15FdOHMjQs6xR5YcJSptM9ha24czzPPiZ/s1600/custom_shape24.jpg" /></a><br />
<br />
<a href="http://www.shapes4free.com/photoshop-custom-shapes/shopping-ecommerce-photoshop-shapes-60-free-vectors/" target="_blank">Shopping Ecommerce Icons Shapes</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsZqnrMQt8Qumb_VZQUxh-LMtc-2rfXKmiErtr7Kbnwiix8sVcw9cScIesI7013o_CPpLPRWDlNCdP5i3RwbqiGlijLuA3aGmbRAwCHMLoSaXHT0V1_x6AvnXFv6bGTIvzd44w8mB2socH/s1600/shopping-photoshop-shapes.jpg" imageanchor="1"><img alt="Shopping Ecommerce Shapes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsZqnrMQt8Qumb_VZQUxh-LMtc-2rfXKmiErtr7Kbnwiix8sVcw9cScIesI7013o_CPpLPRWDlNCdP5i3RwbqiGlijLuA3aGmbRAwCHMLoSaXHT0V1_x6AvnXFv6bGTIvzd44w8mB2socH/s1600/shopping-photoshop-shapes.jpg" /></a><br />
<br />
<a href="http://www.brushportal.com/photoshop-custom-shapes/Animal%20Shapes/ANIMAL-PHOTOSHOP-VECTOR-SHAPES/436/detail.html" target="_blank">12 Animal Custom Shapes</a> <br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuigmnj1U3oY-EkP_I2Tx_z0gEl-4aNf5Z4D00zVCI606w63nZNPc49Nf4MIwrTYAvF6UAQhW1BaQRUSWwRu7VtLn6OTFV6TDjJKAPv65SutLBjTPjVKVOwf5YADJxOD0Tuxymf7r1HUdC/s1600/12-animal-shapes.png" imageanchor="1"><img alt="Animal Custom photoshop Shapes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuigmnj1U3oY-EkP_I2Tx_z0gEl-4aNf5Z4D00zVCI606w63nZNPc49Nf4MIwrTYAvF6UAQhW1BaQRUSWwRu7VtLn6OTFV6TDjJKAPv65SutLBjTPjVKVOwf5YADJxOD0Tuxymf7r1HUdC/s1600/12-animal-shapes.png" title="Animal Custom photoshop Shapes" /></a><br />
<br />
<a href="http://xara24.deviantart.com/art/Badges-and-Shields-Custom-Shapes-347055818" target="_blank">Badges Custom Shapes</a> <br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1aToWy2tnmmT4ZWuy-zolm5EBorCpFlwVNF5z5Kz4RZHkiVXNykf1bcR_JxBelyRfT8ouuB-zACFD4QssKY9IpWXnkNxE8nS7nS8LCz-PKKYQfVCEEp2qRjHDv1lgfa0pGkMWezmANztN/s1600/custom_shape5.jpg" imageanchor="1"><img alt="Badges Custom Shapes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1aToWy2tnmmT4ZWuy-zolm5EBorCpFlwVNF5z5Kz4RZHkiVXNykf1bcR_JxBelyRfT8ouuB-zACFD4QssKY9IpWXnkNxE8nS7nS8LCz-PKKYQfVCEEp2qRjHDv1lgfa0pGkMWezmANztN/s1600/custom_shape5.jpg" title="Badges shapes for photoshop" /></a><br />
<br />
<a href="http://stelamata.deviantart.com/art/25-Photoshop-Shapes-335644516" target="_blank"><br />
25+ Flowers Shapes</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSHbceO3MayJQuKTLpI5vVrBhA1Iq1L5ufNWt6T_eDHREKIn7y_PHKeGmSG4xo_bU-qwOknu7bphx4Z1JU4bh8JeFOBgLe-FdV7q_ssIt13LWA0SzyS9oUe0HcQEceHcxtIbBhu9Fjt9wC/s1600/flowers-photoshop-shapes.jpg" imageanchor="1"><img alt="Flowers Shapes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSHbceO3MayJQuKTLpI5vVrBhA1Iq1L5ufNWt6T_eDHREKIn7y_PHKeGmSG4xo_bU-qwOknu7bphx4Z1JU4bh8JeFOBgLe-FdV7q_ssIt13LWA0SzyS9oUe0HcQEceHcxtIbBhu9Fjt9wC/s1600/flowers-photoshop-shapes.jpg" title="Download 25+ Flowers Photoshop custom Shapes" /></a><br />
<br />
<a href="http://www.brushportal.com/photoshop-custom-shapes/abstract-shapes/STAR-BURST-PHOTOSHOP-SHAPES/240/detail.html" target="_blank">Star Burst</a> <br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2g150V2kXZI6y7oQjGVxQHhouvpicOvrYx66OHMgeD7tNeeEq1R46Vs3EkM9rOyqr69z8Bs9vNPn5DDVu8XAwqkru3DhZ-yhaQMz3Jjs4f4yf-TGutpCXiEScJhFsuRMSzLEMfHHg_boe/s1600/star-burst-shapes.jpg" imageanchor="1"><img alt="Star burst custom shapes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2g150V2kXZI6y7oQjGVxQHhouvpicOvrYx66OHMgeD7tNeeEq1R46Vs3EkM9rOyqr69z8Bs9vNPn5DDVu8XAwqkru3DhZ-yhaQMz3Jjs4f4yf-TGutpCXiEScJhFsuRMSzLEMfHHg_boe/s1600/star-burst-shapes.jpg" /></a><br />
<br />
<a href="http://cesstrelle.deviantart.com/art/Animal-Custom-Shapes-317739786" target="_blank">Animal custom Shapes</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH-JGwy5nswDwIUlcqRCSpwiwibg3TYZ_sesC_3eJMPJhoInJ0Z-dGIaAMQtoGSH2j1agJYB9odY1mLm_Q16woJQKLtdhw20KhvLhyphenhyphenpB6MXEF5HriUYQMfqP5rWzebwlgwI4x_hvbfPlNq/s1600/custom_shape2.png" imageanchor="1"><img alt="Animal Custom Shapes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH-JGwy5nswDwIUlcqRCSpwiwibg3TYZ_sesC_3eJMPJhoInJ0Z-dGIaAMQtoGSH2j1agJYB9odY1mLm_Q16woJQKLtdhw20KhvLhyphenhyphenpB6MXEF5HriUYQMfqP5rWzebwlgwI4x_hvbfPlNq/s1600/custom_shape2.png" /></a><br />
<br />
<a href="http://rakanksa.deviantart.com/art/Shapes-500-311728439" target="_blank">500 Shapes Set</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWVneO-s-a_Rm1Fixx028OHfP1Lk7jQfKiBFUNKsYiG_IQG0etQ0xT8lKdenMXvSHkrEHEQ-IVOo7b8knQMmnPIfUKyP7_ypmIz13ii9Oom6oaAVpp25pcSmbl8C1-6iClIUTVdYE54ZLz/s1600/custom_shape23.jpg" imageanchor="1"><img alt="set of 500 shapes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWVneO-s-a_Rm1Fixx028OHfP1Lk7jQfKiBFUNKsYiG_IQG0etQ0xT8lKdenMXvSHkrEHEQ-IVOo7b8knQMmnPIfUKyP7_ypmIz13ii9Oom6oaAVpp25pcSmbl8C1-6iClIUTVdYE54ZLz/s1600/custom_shape23.jpg" /></a><br />
<br />
<a href="http://shapes4free.deviantart.com/art/70-Hand-Drawn-Arrows-PS-Shapes-238866917" target="_blank">Hand Drawn Arrows</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_JuXJYcbv6O2nSSoewIhwz1LylWM6F-hvkG0lq_90GAu3z_KhR3TugqNYqToBORCRtb7h3gpo9r1mfi2fPiM_HvmBV6PoAm5Q4bqEn63hQm_WfZsuumTH2KxjcGMkLgvpiROiyzLiOQ1h/s1600/hand-draw-arrow-shapes.png" imageanchor="1"><img alt="Hand drawn Arrows Shapes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_JuXJYcbv6O2nSSoewIhwz1LylWM6F-hvkG0lq_90GAu3z_KhR3TugqNYqToBORCRtb7h3gpo9r1mfi2fPiM_HvmBV6PoAm5Q4bqEn63hQm_WfZsuumTH2KxjcGMkLgvpiROiyzLiOQ1h/s1600/hand-draw-arrow-shapes.png" /></a><br />
<br />
<a href="http://shapes4free.deviantart.com/art/45-Photoshop-Web-Shapes-238886365" target="_blank">Custom Web Shapes</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgxPCBedAbDn7hh106I_ahGUpTTc5OUfUT7Gn_ULx_k6ugDGIsbbIT5MJEnuvD72MvBgRDxoKeOqGFturJ1N11UUK0Pvieyjvbm9T73sZzL2ooYIIJcTrRMr0MATk2SbbW7pNOD3sr0rks/s1600/custom_shape1.jpg" imageanchor="1"><img alt="set of Custom Web Shapes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgxPCBedAbDn7hh106I_ahGUpTTc5OUfUT7Gn_ULx_k6ugDGIsbbIT5MJEnuvD72MvBgRDxoKeOqGFturJ1N11UUK0Pvieyjvbm9T73sZzL2ooYIIJcTrRMr0MATk2SbbW7pNOD3sr0rks/s1600/custom_shape1.jpg" /></a><br />
<br />
<a href="http://shapes4free.deviantart.com/art/12-Chat-PS-Custom-Shapes-210927344">Chat </a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVOv_3GjU6qtV8ywOqglNMZPmfryqcdBrUXaTGOskE4r6533sAJOYFACqfiMEOcyByy54iCTx2NKZh09IbvzyamwTLUJzNNMfctYoB5jZ5TfIjtATT4Zi73DEwtCkWBL6QA0At9ntH6cWS/s1600/comment-box-shapes.jpg" imageanchor="1"><img alt="chat comment box shapes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVOv_3GjU6qtV8ywOqglNMZPmfryqcdBrUXaTGOskE4r6533sAJOYFACqfiMEOcyByy54iCTx2NKZh09IbvzyamwTLUJzNNMfctYoB5jZ5TfIjtATT4Zi73DEwtCkWBL6QA0At9ntH6cWS/s1600/comment-box-shapes.jpg" /></a><br />
<br />
<a href="http://truemisha.deviantart.com/art/Custom-Shapes-pack-202665833">Common used shapes</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoIImdJSe6HwZfCTqqOwV7CG13Rm-QfZ8YaUHJAgJfe1NLqwgtsGDdkM5oQGjlAyV5iXbTC0qZc9E3Rq94WpDv2zGoh1KLS_dYR24KBWnzZB7UYd_6uPdHfhlHdHf3XF-zxMfVrFY-3aXv/s1600/custom_shape9.jpg" imageanchor="1"><img alt="Common used shapes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoIImdJSe6HwZfCTqqOwV7CG13Rm-QfZ8YaUHJAgJfe1NLqwgtsGDdkM5oQGjlAyV5iXbTC0qZc9E3Rq94WpDv2zGoh1KLS_dYR24KBWnzZB7UYd_6uPdHfhlHdHf3XF-zxMfVrFY-3aXv/s1600/custom_shape9.jpg" /></a><br />
<br />
<a href="http://hurleyrocks.deviantart.com/art/Media-Shapes-196020006" target="_blank">Custom Media Shapes</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVUpwkx6lRPxzBjsJxKCrrU1uM607KUMHl69Ym_ZMXzIymy_tEw28oRHjNp6M5MlhEHpoYhAmlaDX6ihCp3pvU8yQcPSh8DcL1otF3GX2zbole0KO8kY6wRO9UExap28row32e1GFWnp7T/s1600/custom_shape17.jpg" imageanchor="1"><img alt="Media shapes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVUpwkx6lRPxzBjsJxKCrrU1uM607KUMHl69Ym_ZMXzIymy_tEw28oRHjNp6M5MlhEHpoYhAmlaDX6ihCp3pvU8yQcPSh8DcL1otF3GX2zbole0KO8kY6wRO9UExap28row32e1GFWnp7T/s1600/custom_shape17.jpg" /></a><br />
<br />
<a href="http://see-create.deviantart.com/art/Car-logos-75705868" target="_blank">Car logos</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSVzxxX24Q_oDT-8SA6Qt4Axq8UkUKHC0MXy9M6Tqxc-UZjJYKGx0aLdJ4BY8gI0nIpClzQV6ms7B93IPoE3XU0Y7ES3B8ouKHKEKsEVD9RHswY2KelAUyh6Rj4qRn-Nyo24lh4IybAK4d/s1600/custom_shape7.jpg" imageanchor="1"><img alt="car logos shapes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSVzxxX24Q_oDT-8SA6Qt4Axq8UkUKHC0MXy9M6Tqxc-UZjJYKGx0aLdJ4BY8gI0nIpClzQV6ms7B93IPoE3XU0Y7ES3B8ouKHKEKsEVD9RHswY2KelAUyh6Rj4qRn-Nyo24lh4IybAK4d/s1600/custom_shape7.jpg" /></a><br />
<br />
<a href="http://dezignus.com/sexy-girls-2/" target="_blank">Sexy girls Shape</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHw4_kYhNk5K7f8DZrfEcbRqNxbl_ZU4pS1GMhnY1Zd0m_Z1cOQB-rKMB7WKHeNbIfzkzVl8b48dOTtIiLYmOSSanFEOO5NaTPw40Jt5w_mE49jA0niQp4t5JD5aiazriNLgRbLkjgNglM/s1600/custom_shape22.jpg" imageanchor="1"><img alt="sexy girls" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHw4_kYhNk5K7f8DZrfEcbRqNxbl_ZU4pS1GMhnY1Zd0m_Z1cOQB-rKMB7WKHeNbIfzkzVl8b48dOTtIiLYmOSSanFEOO5NaTPw40Jt5w_mE49jA0niQp4t5JD5aiazriNLgRbLkjgNglM/s1600/custom_shape22.jpg" /></a><br />
<br />
<a href="http://www.shapes4free.com/photoshop-custom-shapes/web-arrows-icons/" target="_blank">Custom Arrows</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSM0uwKRcpSip0TcMSZDy17gG5y5u8Dl_amta0RJ-FEHX8CjnPwmry6Faq2HnC65nSoEz0kk6fVVJXhFHB4sCXnyeOzyfuguzuSFViABDCZKXfTKaJhCwPp8ElJY4RUPHeF5AF8nnfIUjQ/s1600/arrow-photoshop-shapes.jpg" imageanchor="1"><img alt="custom web arrows" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSM0uwKRcpSip0TcMSZDy17gG5y5u8Dl_amta0RJ-FEHX8CjnPwmry6Faq2HnC65nSoEz0kk6fVVJXhFHB4sCXnyeOzyfuguzuSFViABDCZKXfTKaJhCwPp8ElJY4RUPHeF5AF8nnfIUjQ/s1600/arrow-photoshop-shapes.jpg" /></a><br />
<br />
<a href="http://dezignus.com/floristic-shapes2/" target="_blank">Floristic shapes</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaqUCGBdxJbG1zdP48k0tcX1tay1nNcVl5-HTAtfmC7WNsNyr6u7RYXNscsZMR_SqhgtbiHlSreUEaqeI5GX49eJXycd_5fsnxE6JpINxlgaKV4Y00kcYNf0_fAzfhh5Y5mzBdm3NNxABx/s1600/custom_shape14.jpg" imageanchor="1"><img alt="Floristic shapes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaqUCGBdxJbG1zdP48k0tcX1tay1nNcVl5-HTAtfmC7WNsNyr6u7RYXNscsZMR_SqhgtbiHlSreUEaqeI5GX49eJXycd_5fsnxE6JpINxlgaKV4Y00kcYNf0_fAzfhh5Y5mzBdm3NNxABx/s1600/custom_shape14.jpg" /></a><br />
<br />
<a href="http://thesuper.deviantart.com/art/Straights-and-Swirls-51496232" target="_blank">Straights and Swirls</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMP1Z5cCG5vfjDk_B6agwzM8f29vINVwo6QFIXAnpjTK9GF9Kjd7YICLHaUXX7tT75MhInfBiUJgwaffP1zj57qnkU-o70uLWbe-LJMCstIw4QrMbBPI3o9gJ5_RRNhouEaeph2RcAvvTi/s1600/custom_shape25.jpg" imageanchor="1"><img alt="Straights and Swirls Photoshop Shapes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMP1Z5cCG5vfjDk_B6agwzM8f29vINVwo6QFIXAnpjTK9GF9Kjd7YICLHaUXX7tT75MhInfBiUJgwaffP1zj57qnkU-o70uLWbe-LJMCstIw4QrMbBPI3o9gJ5_RRNhouEaeph2RcAvvTi/s1600/custom_shape25.jpg" /></a><br />
<br />
<a href="http://thesuper.deviantart.com/art/Live-Trees-37471587" target="_blank">Live Trees</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfsr92XmG-uBFtAMA9yK87jyI4xBktnU8fPF3olYf5MnkKYNpFAi7xxJx0mAO9ys0GDVnBo_ta3ZcHhxPOyf45FjgD0wfqTk8ih8qfgXXHV68xmHCeG5eKB970hhMRd_vWalRgYAlmjni1/s1600/custom_shape16.jpg" imageanchor="1"><img alt="Live trees" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfsr92XmG-uBFtAMA9yK87jyI4xBktnU8fPF3olYf5MnkKYNpFAi7xxJx0mAO9ys0GDVnBo_ta3ZcHhxPOyf45FjgD0wfqTk8ih8qfgXXHV68xmHCeG5eKB970hhMRd_vWalRgYAlmjni1/s1600/custom_shape16.jpg" /></a><br />
<br />
<a href="http://dezignus.com/vector-flourish-ornaments/" target="_blank">Flourish ornaments</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOofE3HJ3QLjW2nGc9iFvL3KVgOoe22Rlz4MSp2bq08SHPRnMBBdJRrFXZuPaYmWIis7rrYpqba5e6XNdnmt12npwnmXKVx2Gt7spXDY-tcOxUyHDOIVJ99IuRYf9zGdiq4ZMiBrosLSz7/s1600/custom_shape29.jpg" imageanchor="1"><img alt="Flourish ornaments Vector" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOofE3HJ3QLjW2nGc9iFvL3KVgOoe22Rlz4MSp2bq08SHPRnMBBdJRrFXZuPaYmWIis7rrYpqba5e6XNdnmt12npwnmXKVx2Gt7spXDY-tcOxUyHDOIVJ99IuRYf9zGdiq4ZMiBrosLSz7/s1600/custom_shape29.jpg" /></a><br />
<br />
<a href="http://thesuper.deviantart.com/art/Photoshop-Custom-Shapes-Bugs-47718273" target="_blank">Bugs</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYB_p0XTNPZN8OF3uJKBnPBizF299HWpmmWNB2JcEVOVz-55k_6ucBlPUS7TJGh3WwM-reui1Vkd7tsypKU0TyCEnRmjl-fVWXVx5WyOUeoKRXFk3B0z5t3waAnzpqkvCgtKa3Wz2m-JWL/s1600/custom_shape20.jpg" imageanchor="1"><img alt="Bugs shapes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYB_p0XTNPZN8OF3uJKBnPBizF299HWpmmWNB2JcEVOVz-55k_6ucBlPUS7TJGh3WwM-reui1Vkd7tsypKU0TyCEnRmjl-fVWXVx5WyOUeoKRXFk3B0z5t3waAnzpqkvCgtKa3Wz2m-JWL/s1600/custom_shape20.jpg" /></a><br />
<br />
<a href="http://thesuper.deviantart.com/art/Dead-Trees-36004240" target="_blank">Dead Trees</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1gi-d6ynSifqH4SRjRwV9usoJ4d236qKIPOFWPGg7m2VriiqFrSJnpz-zwjdk-3fDtMa2WUhzBM5E2vtSnYwV-GYA17PAC6z9ayo0XRKYlpdfW07uJwV1xzqAuNZ94P0kl5CEi9AXqCkT/s1600/custom_shape11.jpg" imageanchor="1"><img alt="Dead trees" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1gi-d6ynSifqH4SRjRwV9usoJ4d236qKIPOFWPGg7m2VriiqFrSJnpz-zwjdk-3fDtMa2WUhzBM5E2vtSnYwV-GYA17PAC6z9ayo0XRKYlpdfW07uJwV1xzqAuNZ94P0kl5CEi9AXqCkT/s1600/custom_shape11.jpg" /></a><br />
<br />
<a href="http://lassekorsgaard.deviantart.com/art/Custom-Shape-Pack-25734024" target="_blank">Custom Shape Pack</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4kaOCz54c8jUTTBow-wtg95mUNr3q2UW5eujspVQD6TH3oVrDHmxZ6YvGbdWEVt5oHtDi0zZETtkgCl5DLGCbpf1v1o8SjWXqR833MlzoZ9pyRGW_wfP646K-ZtaptQ_TZ3L7sMFbLYa7/s1600/custom_shape8.jpg" imageanchor="1"><img alt="custom shape pack" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4kaOCz54c8jUTTBow-wtg95mUNr3q2UW5eujspVQD6TH3oVrDHmxZ6YvGbdWEVt5oHtDi0zZETtkgCl5DLGCbpf1v1o8SjWXqR833MlzoZ9pyRGW_wfP646K-ZtaptQ_TZ3L7sMFbLYa7/s1600/custom_shape8.jpg" /></a><br />
<br />
<a href="http://danijel-one.deviantart.com/art/Vector-Shape-Mix-58009267" target="_blank">Mix Shapes</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy_iyuPhmSJBDZmpbM-MEEQLj1L9j70T3brcXwjaNl_hEUCoBZaUk08It05tOkhH9ucrtdzS28T9GDItVTou3pwST1GIge6K3oEZ6daGSnJYTpklaQ1AmGGiu1jS4ShXZ2NE6fGgCx9Pe-/s1600/custom_shape27.jpg" imageanchor="1"><img alt="Mix sahpes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy_iyuPhmSJBDZmpbM-MEEQLj1L9j70T3brcXwjaNl_hEUCoBZaUk08It05tOkhH9ucrtdzS28T9GDItVTou3pwST1GIge6K3oEZ6daGSnJYTpklaQ1AmGGiu1jS4ShXZ2NE6fGgCx9Pe-/s1600/custom_shape27.jpg" /></a><br />
<br />
<a href="http://hfs991hfs.deviantart.com/art/Hero-Shapes-82286081" target="_blank">Super Hero Shapes</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL8sURG7EKsMG6szSyB3D0WTSe0Da56NAsEUrv9fNinJ3ANdCH-7qHr6p_UwYBclNBJ-nzzNiVZxoSBR-8Ly7eXvcP7RbxtoW0XBNpw5vgHfye3BLwx2R13SabwXEhd9nA_YJzSvVxns8H/s1600/custom_shape40.jpg" imageanchor="1"><img alt="super hero" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL8sURG7EKsMG6szSyB3D0WTSe0Da56NAsEUrv9fNinJ3ANdCH-7qHr6p_UwYBclNBJ-nzzNiVZxoSBR-8Ly7eXvcP7RbxtoW0XBNpw5vgHfye3BLwx2R13SabwXEhd9nA_YJzSvVxns8H/s1600/custom_shape40.jpg" /></a><br />
<br />
<a href="http://richardperkins.deviantart.com/art/Assorted-Logos-91198824" target="_blank">Tv channels and Companies</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6AE87MlE0EOHrrHVwKiiTfGnqk0g1JenKLHKTI0co27gfPwAUY4-VRXXW0_meM2gVGkGHtoS2IPsiHXahY5P9GZuna6BxiNXOzyMTKTPOxqrg49DCLFMpOwZ0YKuxlqNnAweXUQStcL4e/s1600/custom_shape4.jpg" imageanchor="1"><img alt="Tv Channels and Famous companies" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6AE87MlE0EOHrrHVwKiiTfGnqk0g1JenKLHKTI0co27gfPwAUY4-VRXXW0_meM2gVGkGHtoS2IPsiHXahY5P9GZuna6BxiNXOzyMTKTPOxqrg49DCLFMpOwZ0YKuxlqNnAweXUQStcL4e/s1600/custom_shape4.jpg" /></a><br />
<br />
<a href="http://dezignus.com/kitchen-appliances-dishware/" target="_blank">Kitchen appliances </a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDeUiwAJ78dI3vNlTv1LIA2ov5UTCX031CuvjyF6ZlOZv71_lhIwiQ3chgap20cVLaf4_CHW9Jx5RXZ0gOLtVzKoKCymw8BjFRFrJ_V7sa30SG7EQMRzCaKQn75OsETNova1hsIAN9tFTa/s1600/custom_shape15.jpg" imageanchor="1"><img alt="Kitchen appliances Shapes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDeUiwAJ78dI3vNlTv1LIA2ov5UTCX031CuvjyF6ZlOZv71_lhIwiQ3chgap20cVLaf4_CHW9Jx5RXZ0gOLtVzKoKCymw8BjFRFrJ_V7sa30SG7EQMRzCaKQn75OsETNova1hsIAN9tFTa/s1600/custom_shape15.jpg" /></a><br />
<br />
<a href="http://joeadonis.deviantart.com/art/Female-Shapes-42524741" target="_blank">Females Shapes</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD2gvlkEhsXd6qVf7w85zM269xboCl2EGsV9GVGsvyohSQq1zXlG78tKCaipYu1PnQl-lbfapCupiZRMMgP61cw9pwcVDbzqMg8m1U08E2PUdxPANT8Epnq5SjZfRbO35ysxDsTWtskXGA/s1600/custom_shape13.png" imageanchor="1"><img alt="Custom females shapes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD2gvlkEhsXd6qVf7w85zM269xboCl2EGsV9GVGsvyohSQq1zXlG78tKCaipYu1PnQl-lbfapCupiZRMMgP61cw9pwcVDbzqMg8m1U08E2PUdxPANT8Epnq5SjZfRbO35ysxDsTWtskXGA/s1600/custom_shape13.png" /></a><br />
<br />
<a href="http://richardperkins.deviantart.com/art/Assorted-Logos-2-178965992" target="_blank">Social icons</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizecpCyfiVSzrJh_xlsDpv9e8RAlq4y8ETTnVwmybvLNIAO6ZRTYTohvAQe6HYvje1oiZQ6U83PZqJUFBwUaLVATDJyNDEpp7YFek8ykTMPNPK8tN3xrEZ_IX2kNXBDuxbA49VqxNjez5C/s1600/custom_shape3.png" imageanchor="1"><img alt="custom social icons shapes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizecpCyfiVSzrJh_xlsDpv9e8RAlq4y8ETTnVwmybvLNIAO6ZRTYTohvAQe6HYvje1oiZQ6U83PZqJUFBwUaLVATDJyNDEpp7YFek8ykTMPNPK8tN3xrEZ_IX2kNXBDuxbA49VqxNjez5C/s1600/custom_shape3.png" /></a><br />
<br />
<a href="http://transitio.deviantart.com/art/Different-speaker-shapes-125882234" target="_blank">Speaker shapes</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj13crY7hl7DOaD4lKl0F7ewHwUWQ3k_sRB1vhZbNQ3H010g6MHd_C2kfv-JE5KsxR3E7an0n94YlcFDZytQ_vITLgOe4casRR9fjQQvQBL9wcgZ-jJHIBspdhRQ92m8riD_SwnCO-WwKRl/s1600/custom_shape12.png" imageanchor="1"><img alt="speaker shapes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj13crY7hl7DOaD4lKl0F7ewHwUWQ3k_sRB1vhZbNQ3H010g6MHd_C2kfv-JE5KsxR3E7an0n94YlcFDZytQ_vITLgOe4casRR9fjQQvQBL9wcgZ-jJHIBspdhRQ92m8riD_SwnCO-WwKRl/s1600/custom_shape12.png" /></a><br />
<br />
<a href="http://lukeroberts.deviantart.com/art/Custom-Shapes-Guns-Updated-19065883" target="_blank">Guns</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuhbPoROH82cKB0UgF9GDalqiAn7WaR7AVPcPIfxE8-_aTa4wjDHZIhoORas91NsH4jfd2D10pQd8k_FQ713urCQmiLpGVvinOxEd1Cb7nVwUMqoU1sfy_Aa3NxXrLdk06O-m3LsP9-Vcs/s1600/custom_shape18.jpg" imageanchor="1"><img alt="Guns shapes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuhbPoROH82cKB0UgF9GDalqiAn7WaR7AVPcPIfxE8-_aTa4wjDHZIhoORas91NsH4jfd2D10pQd8k_FQ713urCQmiLpGVvinOxEd1Cb7nVwUMqoU1sfy_Aa3NxXrLdk06O-m3LsP9-Vcs/s1600/custom_shape18.jpg" /></a><br />
<br />
<a href="http://dezignus.com/signsofthezodiac/" target="_blank">Zodiac signs</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBnbFG5E6OxBAYFj-ByYxOddtfxMGoPfZdWjSmTvOmbCIAHHWscbPrqEc-MbZsiTTA1StycVwnGdLqIoiY4wSSE7sEBUPfkud8MpPuPMLH8JIcZ8WafPIw8f4AwBm9Mh_idoZUxzEzturu/s1600/custom_shape30.jpg" imageanchor="1"><img alt="Zodiac signs Shapes Photoshop" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBnbFG5E6OxBAYFj-ByYxOddtfxMGoPfZdWjSmTvOmbCIAHHWscbPrqEc-MbZsiTTA1StycVwnGdLqIoiY4wSSE7sEBUPfkud8MpPuPMLH8JIcZ8WafPIw8f4AwBm9Mh_idoZUxzEzturu/s1600/custom_shape30.jpg" /></a><br />
<br />
<a href="http://dezignus.com/rss-icons/" target="_blank">Rss Icons Shapes</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIsgQeRFA8II4Kskt_wMztKlJNIr8T7b8_Lf0bT9KQ4roBduV5pQf0sIVi2ERfv6dTEpBFbCQ8gRHdvOz68ixG4Xbb1tJvNUN5kbDHKpWi77jOVLd65gMzxqdWy_70RGGli9NLbX0mTr_O/s1600/custom_shape21.jpg" imageanchor="1"><img alt="Rss feed icons shapes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIsgQeRFA8II4Kskt_wMztKlJNIr8T7b8_Lf0bT9KQ4roBduV5pQf0sIVi2ERfv6dTEpBFbCQ8gRHdvOz68ixG4Xbb1tJvNUN5kbDHKpWi77jOVLd65gMzxqdWy_70RGGli9NLbX0mTr_O/s1600/custom_shape21.jpg" /></a><br />
<br />
<a href="http://dezignus.com/business-girls/" target="_blank">Business Girls</a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5kM5nMbtV9KzcycW8drpK7sKt3JJpPq4Jb8MlknIxkHEJbsFsNcbUzw3deMWuX5vbk_u29QNor2wyXR-7PWRb1SAFzgDi4wPw1lBSrMMMk082nCKRCfcxe3Y_f84uuIMiGtFZKCiJG3Ei/s1600/custom_shape6.png" imageanchor="1"><img alt="busines-girls and women" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5kM5nMbtV9KzcycW8drpK7sKt3JJpPq4Jb8MlknIxkHEJbsFsNcbUzw3deMWuX5vbk_u29QNor2wyXR-7PWRb1SAFzgDi4wPw1lBSrMMMk082nCKRCfcxe3Y_f84uuIMiGtFZKCiJG3Ei/s1600/custom_shape6.png" /></a><br />
</div></div>yesongshttp://www.blogger.com/profile/14466160119267287649noreply@blogger.com0tag:blogger.com,1999:blog-4276763109087946480.post-38757015784443353662013-03-28T04:46:00.000-07:002013-03-28T04:46:09.116-07:00Width of Standard Devices Used in css Media Queries.<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="custom_p custom_table">
In last post I have discussed that how to use <a href="http://thinklala.blogspot.in/2013/03/css-media-types-and-css-media-queries.html">css media queries</a> to write css for different screen sizes. In this post we will discuss about screen sizes of some commonly used devices. So that will help you to write media queries for each device. <br />
<br />
<h1>
Width of Most commonly used devices is as follows</h1>
.<br />
<table border="1" cellpadding="0" cellspacing="0"><tbody>
<tr>
<td><b>Device</b></td>
<td><b>Width</b> </td>
<td><b>Height</b></td>
</tr>
<tr>
<td>iPhone 5</td>
<td>320</td>
<td>568</td>
</tr>
<tr>
<td>iPhone 3G and 4</td>
<td>320</td>
<td>480</td>
</tr>
<tr>
<td>iPad</td>
<td>768</td>
<td>1024</td>
</tr>
<tr>
<td>Google Nexus 7</td>
<td>600</td>
<td>905</td>
</tr>
<tr>
<td>Samsung Galaxy S2</td>
<td>320</td>
<td>533</td>
</tr>
</tbody>
</table>
<br />
<b>Smart phones landscape</b>: Apply css on when screen width is greater than 321px<br />
<pre>@media only screen and (min-width : 321px) {
/* css */
}
</pre>
<br />
<b>Smart phones Portrait</b>: Apply css on when screen width is Less than 320px<br />
<pre>@media only screen and (max-width : 320px) {
/* css */
}
</pre>
<br />
<b>iPads landscape</b>: In iPads we can check the orientation of the device. So we can mention orientation in the query and the css will apply when the orientation is landscape.<br />
<pre>@media only screen and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* css */
}
</pre>
<br />
<b>iPads portrait</b>: css will apply when the orientation of device is portrait.<br />
<pre>@media only screen and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* css */
}
</pre>
<br />
<b>For small devices</b><br />
<pre>@media all and (max-width: 240px) {
/* css */
}
</pre>
<br />
<b>For Standard Desktop </b><br />
<pre>@media all and (min-width: 1024px) and (max-wdth:1366px) {
/* css */
}
</pre>
<br />
<b>For large Screens </b><br />
<pre>@media all and (min-width: 1367px) {
/* css */
}
</pre>
</div>
<div id="wrc-float-icon" style="background-image: url(safari-extension://com.avast.wrc-6H4HRTU5E3/16bddd1a/images/float/green-3.png); display: none; height: 42px; left: 15px; position: fixed; top: 15px; width: 42px; z-index: 2147483646;">
</div>
</div>
yesongshttp://www.blogger.com/profile/14466160119267287649noreply@blogger.com1tag:blogger.com,1999:blog-4276763109087946480.post-87150424294337379392013-03-25T05:19:00.000-07:002013-03-28T04:30:15.606-07:00Css Media Types And css Media Queries<div dir="ltr" style="text-align: left;" trbidi="on"><div class="custom_p">When there was only monitors are available then the task of web designer is very easy. But now days there are a lot of devices are available in the market. And each device has different screen size and resolution. And it is a difficult task for a web designer to make a website that will look perfect on each device. <br />
<br />
Suppose I am making a site on my screen according to 1320 resolution and 1300px width and I found that the site look nice on my screen. But if someone open it on small screen then what happen? The entire site will collapse. There can be scrolling on page or the content will be overflowing from site. Then the site looks very bad and that will not good for a designer. <br />
<br />
For this css has define media types and you can write different <b>css for different screens sizes</b> and resolution. You can define <b>css media queries</b> in your style sheet and write css for different screens. We will cover syntax and <b>example of css media queries</b>. And also cover all the media types available in css.<br />
<br />
<h2 style="font-size: 18px;">Types of css media</h2><ol style="text-align: left;"><li>All: Used for all devices.</li>
<li>Aural: used for speech and sound devices.</li>
<li>Print: used for all printers.</li>
<li>Braille: Used for paged braille printers.</li>
<li>Handheld: used for small device or handy devices.</li>
<li>Projection: used for projectors.</li>
<li>Screen: used for computer screens.</li>
<li>Tv: used for television devices.</li>
<li>Tty: used teletypes and terminals</li>
</ol><br />
<br />
<h2 style="font-size: 18px;">How to use css Media queries. </h2><b>There are two ways to use css media queries.</b><br />
<h3 style="font-size: 15px;">One is make separate css file for each screen size and import file on the basis of size. In this css media query is written on the html page.</h3><br />
1. In the following example if anyone open website on the screen width between 650px and 899px then the mediumcss file will be included in the html page.<br />
<pre><link rel='stylesheet' media='screen and (min-width: 650px)
and (max-width: 899px)' href='css/mediumcss.css' /></pre>2. In the following example if anyone open website on a screen having width less than 649px then smallcss will be included in the page. <br />
<pre><link rel='stylesheet' media='screen
and (max-width: 649px)' href='css/smallcss.css' /></pre>3. In the following example if anyone open website on screen having width greater than 900px then largecss will be included in the page. <br />
<pre><link rel='stylesheet' media='screen
and (min-width: 900px)' href='css/largecss.css' /></pre><h3 style="font-size: 15px;">The second way is make a single file of css and write media queries in that css file and define css for different screen sizes.</h3><br />
When the browser width is less than 518px the following css will apply to the li under menubar class.<br />
<pre>@media all and (max-width: 518px) {
.menuBar ul l
{
Width:200px;
Padding:10px;
display:block
}
}
</pre>When the browser width will be between 519px and 698px then the following css will apply to li under menubar class.<br />
<pre>@media all and (min-width: 519px) and (max-width: 698px) {
.menuBar ul l
{
Width:200px;
Padding:5px;
display:block
}
}
</pre>Now when the browser width will be between 699px and 999px then the following css will apply to li under menubar class.<br />
<pre>@media all and (min-width: 699px) and (max-width: 999px) {
.menuBar ul l
{
Width:120px;
Padding:5px;
Float :left
}
}
</pre>Until the width of browser is greater than 1000px the following css will apply to the li under menu bar<br />
<pre>@media all and (min-width: 1000px) {
.menuBar ul l
{
Width:120px;
Padding:5px;
float :left
background-image:url(‘abc.png’);
}
}
</pre><br />
I have defined few example you can put any number of media queries in your css to make your site more attractive and size compatible. And also you can define different media types as I have used all media types. And also you can define orientation in media queries like<br />
<pre>@media (orientation:portrait) { ... }
</pre>References: <a href="http://www.w3.org/TR/css3-mediaqueries/">http://www.w3.org/TR/css3-mediaqueries/</a><br />
So this is all about media queries in css. </div><br />
</div>yesongshttp://www.blogger.com/profile/14466160119267287649noreply@blogger.com1tag:blogger.com,1999:blog-4276763109087946480.post-72755271680495887412013-03-20T05:21:00.000-07:002013-03-20T05:27:27.300-07:00All Css | css3 Selectors <div dir="ltr" style="text-align: left;" trbidi="on"><div class="custom_p custom_table"><p>To apply css on elements there are different ways to select an element. The most uses way is class or id of element. But there are many selectors available by which an element can be selected and we can apply css to that element. </p><br />
<h1>List of all css selectors</h1><table border="1" cellspacing="0" cellpadding="0" ><tbody>
<tr> <td valign="top" >Selectors</td> <td valign="top" >Example </td> <td valign="top" >Description</td> </tr>
<tr> <td valign="top" >*</td> <td valign="top" >*</td> <td valign="top" >Select all the elements</td> </tr>
<tr> <td valign="top" >.ClassName</td> <td valign="top" >.test{<br />
Color:red;<br />
}</td> <td valign="top" >This is the most common selector used in css in this select all the elements with the class name test. </td> </tr>
<tr> <td valign="top" >#idofElelment</td> <td valign="top" >#test{<br />
Color:red;<br />
}</td> <td valign="top" >Element selects with the id test</td> </tr>
<tr> <td valign="top" >Element </td> <td valign="top" >div{<br />
Color:red;<br />
}</td> <td valign="top" >Select all the div on the page.</td> </tr>
<tr> <td valign="top" >Element , Element,</td> <td valign="top" >Div,span{<br />
Color:red;<br />
}</td> <td valign="top" >Select all the div and span element on the page</td> </tr>
<tr> <td valign="top" >Element Element</td> <td valign="top" >Div span{<br />
Color:red;<br />
}</td> <td valign="top" >Select all the span elements inside div elements on the page.</td> </tr>
<tr> <td valign="top" >Element> Element</td> <td valign="top" >Div > span{<br />
Color:red;<br />
}</td> <td valign="top" >Select only child span element of div. Means it will only select span element that are direct child of div. as in the example show it will select only first span because it is direct child of div</td> </tr>
<tr> <td valign="top" >Element+ Element</td> <td valign="top" >Div+span{<br />
Color:red;<br />
}</td> <td valign="top" >Select all span elements that will come immediately after div element.</td> </tr>
<tr> <td valign="top" >[attribute]</td> <td valign="top" >[title]{<br />
Color:red;<br />
}</td> <td valign="top" >Select all the elements with title attribute.</td> </tr>
<tr> <td valign="top" >[attribute=value]</td> <td valign="top" >[title=abc]{<br />
}</td> <td valign="top" >Select all the elements having title=”abc”</td> </tr>
<tr> <td valign="top" >[attribute~=value]</td> <td valign="top" >[title~=abc]{<br />
}</td> <td valign="top" >Select all the elements having word abc in title</td> </tr>
<tr> <td valign="top" >[attribute|=value]</td> <td valign="top" >[title|=ab]{<br />
}</td> <td valign="top" >Select all the elements whose title is starting with ab</td> </tr>
<tr> <td valign="top" >:link</td> <td valign="top" >a : link{<br />
}</td> <td valign="top" >Select all the unvisited link</td> </tr>
<tr> <td valign="top" >:visited</td> <td valign="top" >a : visited {<br />
}</td> <td valign="top" >Select all the visited link</td> </tr>
<tr> <td valign="top" >:active</td> <td valign="top" >a : active {<br />
}</td> <td valign="top" >Select all the active link</td> </tr>
<tr> <td valign="top" >:hover</td> <td valign="top" >Div:hover{<br />
}</td> <td valign="top" >Select the element on mouseover it</td> </tr>
<tr> <td valign="top" >:focus</td> <td valign="top" >input:focus{<br />
}</td> <td valign="top" >Select the element when element has focus</td> </tr>
<tr> <td valign="top" >:first-letter</td> <td valign="top" >Span:first-letter{<br />
}</td> <td valign="top" >Select the first letter of every span element on page.</td> </tr>
<tr> <td valign="top" >:first-line</td> <td valign="top" >Span:first- line {<br />
}</td> <td valign="top" >Select the first line of every span element on page.</td> </tr>
<tr> <td valign="top" >:first-child </td> <td valign="top" >Span:first- child {<br />
}</td> <td valign="top" >Select all span elements on page which are the first child of its parent.</td> </tr>
<tr> <td valign="top" >:before</td> <td valign="top" >Span: before {<br />
content:”this is test "; <br />
}</td> <td valign="top" >Before is use to add some content. It will add “this is test” before every span element on the page.</td> </tr>
<tr> <td valign="top" >:after</td> <td valign="top" >Span: after {<br />
content:”this is test "; <br />
}</td> <td valign="top" >After is use to add some content. It will add “this is test” after every span element on the page.</td> </tr>
</tbody> </table><br />
<h2 style="font-size:20px;">These all are the css 1 and css2 selectors. Now following is the list of css3 selectors</h2><br />
<table border="1" cellspacing="0" cellpadding="0" ><tbody>
<tr> <td valign="top" >Selectors</td> <td valign="top" >Example </td> <td valign="top" >Description</td> </tr>
<tr> <td valign="top" >element1~element2</td> <td valign="top" >Div~span</td> <td valign="top" >Select all the span elements that will come after the div element.</td> </tr>
<tr> <td valign="top" >[attribute^=value]</td> <td valign="top" >div[title^="main"]</td> <td valign="top" >Select all div elements whose title starts with main .</td> </tr>
<tr> <td valign="top" >[attribute$=value]</td> <td valign="top" >div[title$="main"]</td> <td valign="top" >Select all div elements whose title value ends with main . </td> </tr>
<tr> <td valign="top" >[attribute*=value]</td> <td valign="top" >div[title*="main"]</td> <td valign="top" >Select all div elements whose title contains main.</td> </tr>
<tr> <td valign="top" >:first-of-type</td> <td valign="top" >Span::first-of-type</td> <td valign="top" >Select every span element that is the first child of its parent</td> </tr>
<tr> <td valign="top" >:last-of-type</td> <td valign="top" >Span: last-of-type</td> <td valign="top" >Select every span element that is the last child of its parent </td> </tr>
<tr> <td valign="top" >:only-of-type</td> <td valign="top" >Span: only-of-type</td> <td valign="top" >Select all the span elements that is the only element of its parent. Means if the div have two child span then they will not be selected but if the div has one child span then it will be selected. Means there can be other child elements but the span should be one.</td> </tr>
<tr> <td valign="top" >:only-child</td> <td valign="top" >Span :only-child</td> <td valign="top" >Select every the span element that is the only child of its parent. Means if the parent has only one child and that should be span.</td> </tr>
<tr> <td valign="top" >:nth-child(n)</td> <td valign="top" >span:nth-child(3)</td> <td valign="top" >Select every span element that is the third child of their parent.</td> </tr>
<tr> <td valign="top" >:nth-last-child(n)</td> <td valign="top" >span :nth-last-child (3)</td> <td valign="top" >Select every span element that is the third child of its parent but in this child is count from last child. Mean select the third last child span of its parent.</td> </tr>
<tr> <td valign="top" >:nth-of-type(n)</td> <td valign="top" >span:nth-of-type(3)</td> <td valign="top" >Select every span element that is the third span element of its parent.</td> </tr>
<tr> <td valign="top" >:nth-last-of-type(n)</td> <td valign="top" >span: last-of-type(3)</td> <td valign="top" >Select every span element that is third span element from its parent. But in this counting is start from last child. Means select last third span of its parent.</td> </tr>
<tr> <td valign="top" >:last-child</td> <td valign="top" >Span: last-child</td> <td valign="top" >Select every span element that is the last child of its parent.</td> </tr>
<tr> <td valign="top" >:root</td> <td valign="top" >:root</td> <td valign="top" >Select the root of the document.</td> </tr>
<tr> <td valign="top" >:empty</td> <td valign="top" >div :empty</td> <td valign="top" >Select every div that has no children. </td> </tr>
<tr> <td valign="top" >:target</td> <td valign="top" >.test:target</td> <td valign="top" >Select the current active link element in the element that has test class.</td> </tr>
<tr> <td valign="top" >:enabled</td> <td valign="top" >Input: enabled</td> <td valign="top" >Select all enabled input elements on the page</td> </tr>
<tr> <td valign="top" >:disabled</td> <td valign="top" >input :disabled</td> <td valign="top" >Select all the disabled input elements on the page.</td> </tr>
<tr> <td valign="top" >:checked</td> <td valign="top" >input :checked</td> <td valign="top" >Select all the checked input elements on the page. </td> </tr>
<tr> <td valign="top" >:not(selector)</td> <td valign="top" >:not(span)</td> <td valign="top" >Select all the elements on the page except span. </td> </tr>
<tr> <td valign="top" >::selection</td> <td valign="top" >::selection</td> <td valign="top" >Select the area that is selected by use.</td> </tr>
</tbody> </table><br />
<br />
<br />
</div><br />
</div>yesongshttp://www.blogger.com/profile/14466160119267287649noreply@blogger.com0tag:blogger.com,1999:blog-4276763109087946480.post-83619863156304082682013-03-18T22:58:00.000-07:002013-03-18T22:59:41.548-07:00Standard Fonts supported by all browser<div dir="ltr" style="text-align: left;" trbidi="on"><div class="custom_p">Everyone wants to make his/her website attractive. For making attractive website the font style also matters that which font you are using on your website. You want to use new fonts on your website but there is a problem with that every font is not supported by all browsers. Only some fonts are there which are supported by all browser and the list of fonts are given below which are supported by all the browsers.<br />
<br />
Browser uses the fonts that are installed on your machine. So if a visitor of your site wants to see your site as you made he or she has to install all the fonts which you have use in your site. But css also provide a solution to this problem with font face property. Which is not a difficult task. But if you don’t want to use that property I advise you to use standard fonts that are available on all machines. Because that will not spoil your site.<br />
<br />
<h3 style="text-align: left;">List of standards fonts supported by all browsers.</h3><br />
In the following list each font is written in three colors. Because name of window fonts are different from Mac fonts name. So we are showing each font name in three colors one is for generic font name second one is for window font name and third one is for Mac font name. <br />
<br />
<span style="color: #939393;">Window Font </span><span style="color: #3c92fc;"> / Mac Font </span> / Font family<br />
<br />
<br />
<ul style="text-align: left;"><li><span style="color: #939393;">Arial</span>, <span style="color: #3c92fc;"> Arial, Helvetica</span>, sans-serif</li>
<li><span style="color: #939393;">Arial Black</span>, <span style="color: #3c92fc;"> Arial Black, Gadget,</span>, sans-serif</li>
<li><span style="color: #939393;">Georgia1</span>, <span style="color: #3c92fc;"> Georgia,</span>, serif</li>
<li><span style="color: #939393;">Courier New</span>, <span style="color: #3c92fc;"> Courier New,</span>, monospace</li>
<li><span style="color: #939393;">Impact</span>, <span style="color: #3c92fc;"> Impact5, Charcoal6,</span>, sans-serif</li>
<li><span style="color: #939393;">Lucida Console</span>, <span style="color: #3c92fc;"> Monaco5,</span>, monospace</li>
<li><span style="color: #939393;">Lucida Sans Unicode</span>, <span style="color: #3c92fc;"> Lucida Grande,</span>, sans-serif</li>
<li><span style="color: #939393;">Palatino Linotype</span>, <span style="color: #3c92fc;"> Book Antiqua3, Palatino,</span>, serif</li>
<li><span style="color: #939393;">Tahoma</span>, <span style="color: #3c92fc;"> Geneva,</span>, sans-serif</li>
<li><span style="color: #939393;">Times New Roman</span>, <span style="color: #3c92fc;"> Times New Roman, Times,</span>, serif</li>
<li><span style="color: #939393;">Trebuchet MS1</span>, <span style="color: #3c92fc;"> Trebuchet MS,</span>, sans-serif</li>
<li><span style="color: #939393;">Verdana</span>, <span style="color: #3c92fc;"> Verdana, Geneva,</span>, sans-serif</li>
</ul><br />
<ul style="text-align: left;"></ul></div></div>yesongshttp://www.blogger.com/profile/14466160119267287649noreply@blogger.com0tag:blogger.com,1999:blog-4276763109087946480.post-354050350071836392013-03-16T00:16:00.002-07:002013-04-22T23:59:06.737-07:00Rss feed submission In Seo<div dir="ltr" style="text-align: left;" trbidi="on"><h1>What is Rss feed submission?</h1><div class="custom_p"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJg2VJqeHo5tGSMlGOD3gtK7GR0pPef472Pe6L1W7gSodv0mLXCzE65xFrfrAVRBD4jUD-YSwatZ-wSWHVGo7fgqVA6kkLMcvWzuETp3cDMV64EwR8aNFWwiqNSO3-4wJO3BbFMtIG1qeG/s1600/rss-feed-submission-seo-thinklala.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="rss-feed-submission-seo-thinklala" border="0" height="217" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJg2VJqeHo5tGSMlGOD3gtK7GR0pPef472Pe6L1W7gSodv0mLXCzE65xFrfrAVRBD4jUD-YSwatZ-wSWHVGo7fgqVA6kkLMcvWzuETp3cDMV64EwR8aNFWwiqNSO3-4wJO3BbFMtIG1qeG/s320/rss-feed-submission-seo-thinklala.png" title="rss-feed-submission-seo-thinklala" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div> Rss (Rich Site Summary) and some is calling Really Simple Syndication is a format or a way to expose your content on the web or others. Many sites make their rss feed and readers who wants can subscribe the rss feed and they can also share it on web. Data in a rss Is known as feed. And it contains all the updates of a website, video, images, headings, links etc. <br />
<br />
<h2>Importance of Rss feed and its submission</h2>Rss feed has your all website or blog posts and link to each of them. And submitting them to a website means that website will index your all blogposts of all pages of your website. And that will rapidly <b><a href="http://www.thinklala.blogspot.in/2012/09/types-of-seo.html"><span style="color: #6fa8dc;">increase the page rank of your website</span></a></b>. <br />
<br />
There are many sites where you can submit your rss feed and they will index your all pages. <b>List of site for rss submission</b> is also available on think lala.<br />
<br />
The people who subscribe your rss feed means they like your blog and the wants regular updates from your blog and they really like to read your posts. So that will read your blog regularly and help to maintain the traffic on your blog or site. And also it tells the reputation of your blog. Which will help you in writing further.<br />
<br />
<h2>How to create rss feed</h2>Rss feed is a well structured xml file. That has some standards. Rss feed can be created manually or can via a software. There are many online rss feed creator available. If you want to create the feed manually then follow these steps.<br />
<br />
Step 1 create an empty xml file. For this you can use simple notepad or any xml editor. <br />
<br />
Step 2 starting the xml file with <br />
<?xml version="1.0"?> <br />
<br />
Step 3 Add channel tag<br />
<rss version="2.0"><br />
<channel><br />
<br />
Step 4 now its time to add information about the rss feed like title, description, language etc<br />
<title>Test Blog Feed</title><br />
<link>http://thisistest.com</link><br />
<description>Latest seo information</description><br />
<language>en-us</language><br />
<br />
Step 5 Now you can add items to your rss feed. You can add as many items in your rss feed. Every item has a date and a link and also has description. <br />
<item><br />
<title>First article</title><br />
<link>http://www. thisistest.in/2012/09/what-is-directory-submission.html</link><br />
<guide>http://www. thisistest.in/2012/09/what-is-directory-submission.html</guide><br />
<description>This thisistest information about directory submission<description><br />
</item><br />
<br />
Step 6 close main tag <br />
</channel><br />
</rss><br />
<br />
Step 7 Your rss feed is ready now you can validate your rss feed. There are many online feed validate tools available<br />
http://validator.w3.org/feed/<br />
<br />
So it is necessary to have a rss feed for your site or blog. Because this is the only way that will tell your readers about the all the updates on your site. <br />
<h2>List of some sites where you can submit rss feed</h2><br />
<ul style="text-align: left;"><li>www.technorati.com</li>
<li>www.rss-verzeichnis.de/anmelden.php</li>
<li>www.weblogs.com/</li>
<li>www.feedage.com</li>
<li>www.rssmountain.com</li>
</ul></div></div>yesongshttp://www.blogger.com/profile/14466160119267287649noreply@blogger.com18tag:blogger.com,1999:blog-4276763109087946480.post-9581982666418385232013-03-14T11:01:00.003-07:002013-04-22T23:58:51.857-07:00 Press Release In SEO<div dir="ltr" style="text-align: left;" trbidi="on"><h1 style="text-align: left;">What is press release? </h1><div><div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal;"><div class="separator" style="clear: both; color: #333333; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtZbTaazROQBtS48tzXEce9jJtdDumNuwbB5Ulykdilja7kIB3hO-CqIPN4vXDnEInXL8oOUCtE2Oy0wl0VivXUOuLHh_kCS7iTP9iHgKE0JXhwmMEoDNdc9Fmi1M6yxn2RgHqiXhq1fHb/s1600/press-release+-+seo+.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="What is press release in seo" border="0" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtZbTaazROQBtS48tzXEce9jJtdDumNuwbB5Ulykdilja7kIB3hO-CqIPN4vXDnEInXL8oOUCtE2Oy0wl0VivXUOuLHh_kCS7iTP9iHgKE0JXhwmMEoDNdc9Fmi1M6yxn2RgHqiXhq1fHb/s320/press-release+-+seo+.png" title="What is press release in seo" width="320" /></a></div><div style="color: #333333;">In simple terms press release means write a message to media members or to a news group. Or to announce something in written to media or press is known as press release </div><div style="color: #333333;"><br />
</div><h2 style="color: #333333; font-size: 18px;">Importance of press release in seo</h2><div style="color: #333333;"><br />
</div><span style="color: #333333;">Now the question is what is the role of press release in seo. The press release is very useful </span><a href="http://www.thinklala.blogspot.in/2012/09/types-of-seo.html"><span style="color: #6fa8dc;">tool for seo</span></a><span style="color: #333333;">. Because a good press release can give you a number of back links instantly. Some people says that press release is old fashion and now it is not working. </span><br />
<div style="color: #333333;"><br />
</div><div style="color: #333333;">But is not right, press release plays very important role in seo. Press release is an important tool to tell other people about your company and product . And when you submit a press release the search engine index that news and if you give any link to your site in that news then your site will be get a backlink and thus more people will visit your site and site will be indexed also by search engine.</div><div style="color: #333333;"><br />
</div><span style="color: #333333;">But all it depends on how you write a press release. If you write an seo friendly press release. Then this will be help to your to </span><span style="color: #6fa8dc;"><a href="http://www.thinklala.blogspot.in/2012/09/types-of-seo.html"><span style="color: #6fa8dc;">get traffic on your site</span></a>. </span><br />
<div style="color: #333333;"><br />
</div><div style="color: #333333;">Some tips for how to write a press release.</div><div style="color: #333333;"><br />
</div><div style="color: #333333;"><b>Keywords:</b> First of all you should choose your keywords according to your product or company or website. This is very important task. Because all search is based on the keywords and the user enter keywords for search and search engine will find the result on the basis of keywords. </div><div style="color: #333333;"><br />
</div><div style="color: #333333;">For this keyword research should used. You should use appropriate keywords related to your product and which are more searched by audience. There are many online <b>keyword research tools</b> available. You can use any of them.</div><div style="color: #333333;"><br />
</div><div style="color: #333333;">The press release has the following parts.</div><div style="color: #333333;"><br />
</div><ul style="color: #333333; text-align: left;"><li><span style="font-size: 15px;">Heading</span></li>
<li><span style="font-size: 15px;">Subheading or Summary</span></li>
<li><span style="font-size: 15px;">Body</span></li>
<li><span style="font-size: 15px;">Company Bio</span></li>
<li><span style="font-size: 15px;">Contact Information</span></li>
</ul><div style="color: #333333;"><br />
</div><div style="color: #333333;"><br />
</div><div style="color: #333333;"><b>Heading:</b> Heading is the main part of a press release. Search engine shows the headline in the search when a search is made so be be specific about your heading. And use your primary keywords in the heading. Because search engine will first find the heading and if he will find the appropriate keyword then your news will be put in the result. And user will only click on your heading if your heading is interesting and easily understandable, So make an good and interesting headline. </div><div style="color: #333333;"><br />
</div><div style="color: #333333;"><b>Subheading or Summary</b>: summary is second part of press release. This contains short introductions about your news. This should also contain keywords and not so long. This should be not exceed than 240 characters. Be precise. </div><div style="color: #333333;"><br />
</div><div style="color: #333333;"><b>Body: </b>Write the detail of your news in the body phrase of your press release. The body should contain at least 300 words. And and 3-4 keyword phrases. </div><div style="color: #333333;"><br />
</div><div style="color: #333333;"><b>Company Bio</b> : This phrase should not so long it should be almost 100 to 125 words . In this phrase you will tell about your company , What is your company , What your company does etc. </div><div style="color: #333333;"><br />
</div><div style="color: #333333;"><b>Contact Information</b>: In this is section contact information is given mailing address ,email id etc . </div><div style="color: #333333;"><br />
</div><div style="color: #333333;">Now you can submit your press release. List of some sites is given below where you can submit press release. </div><div style="color: #333333;"><br />
</div><div style="color: #333333;"><br />
</div><ul style="color: #333333; text-align: left;"><li><span style="font-size: 15px;">Press release submit site list</span></li>
<li><span style="font-size: 15px;">http://www.24-7pressrelease.com/</span></li>
<li><span style="font-size: 15px;">http://ecommwire.com/</span></li>
<li><span style="font-size: 15px;">http://www.npr.org/</span></li>
<li><span style="font-size: 15px;">http://www.directionsmag.com</span></li>
<li><span style="font-size: 15px;">http://news.thomasnet.com/</span></li>
</ul></div></div></div>yesongshttp://www.blogger.com/profile/14466160119267287649noreply@blogger.com2tag:blogger.com,1999:blog-4276763109087946480.post-67844140034172527432012-09-30T06:05:00.000-07:002013-04-22T23:51:50.565-07:00What is directory submission<div dir="ltr" style="text-align: left;" trbidi="on"><br />
<h2 style="text-align: left;">What is directory submission? </h2><div class="MsoNormal">There are lots of web <b>directories </b>which contains many of sites.<b> Directory submission</b> is a process of add websites to online web directory. There are many online directories which allow you to add your website in the list. And after submitting the website they will approve that site .</div><h4 style="text-align: left;">Role of directory submission in SEO</h4><div class="MsoNormal">Directory submission is the very important part of SEO. It is basically included in off page SEO. I have mentioned on page SEO and Off page SEO in one of my previous articles.</div><div class="MsoNormal"><br />
</div><div class="MsoNormal"><b><u>Increase Ranking: </u></b>Directory submission generate foot prints for your site for search engines by following these footprints search engine find your site show in the search result. So as the search engine show your site in search result the ranking of your site will be increase.</div><div class="MsoNormal"><br />
</div><div class="MsoNormal"><b><u>Directory Submission Get Traffic:</u></b> In directory we submit the site in a particular category so which help to people find the sites of a category. That will give a generic traffic to your website. </div><div class="MsoNormal"><br />
</div><div class="MsoNormal"><b><u>Free Directory Submission:</u></b> As I have said some online sites are there which allow you to submit your site. In which some sites are free and some are paid. I advice you to submit your sites on paid directory. Because they have a good will and that really impact your website. Because if you have a back link from a good site then indexing of your site will be increase.</div><div class="MsoNormal"><br />
</div><div class="MsoNormal"><b><u>Manually Submit directory submission: </u></b> there are two types of directory submission one is automatic and manually. I advice you manually because manually you can put right keywords while submitting your site. And also you can read the rules and regulations of the site where you are submitting the sites. Because every site has its own rules and regulations and if your site is not according to that then they will not approve your site.</div><div class="MsoNormal"><b><u>Not do fast:</u></b> you should not submit your site to lots of directory in one day. You should do it slowly. You should take atleast 5 or 6 days </div><div class="MsoNormal"><b><u>Some of directory submission sites:<o:p></o:p></u></b></div><br />
<ol style="text-align: left;"><li>Technorati</li>
<li> 247webdirectory</li>
<li> brandez </li>
<li> canadawebdir</li>
<li> cis2010</li>
</ol></div>yesongshttp://www.blogger.com/profile/14466160119267287649noreply@blogger.com0tag:blogger.com,1999:blog-4276763109087946480.post-90810068434618904532012-09-30T05:49:00.001-07:002013-04-22T23:57:38.548-07:00What is Social Bookmarking<div dir="ltr" style="text-align: left;" trbidi="on"><h2 style="text-align: left;">What is social bookmarking.</h2><div class="MsoNormal">When you like any website or link then what will you do? You will bookmark that link in your browser. But why you do so because you search so many sites and you cannot remember them all. So for future you bookmark that site. But the memory of computer is limited so how many sites you can <b>bookmark </b>on your system and there is also so many risk factors like if your os corrupt your all data will be lost. To avoid this use <a href="http://www.thinklala.blogspot.in/" title="social bookmarking sites">social bookmarking sites</a>.<b> Social bookmarking</b> is same as bookmark your favorite links but not in the browser instead of on a server that is a website like dig.com, Stumbleupon etc. </div><div class="MsoNormal"><br />
</div><div class="MsoNormal"> There are many advantages of bookmark on social bookmarking sites that are </div><div class="MsoNormal"></div><ul style="text-align: left;"><li>You can categorized your sites</li>
<li>You can share it with others</li>
<li>You can also find bookmarks sites by others</li>
<li>You will find relevant sites according to your need</li>
<li>It is very safe .</li>
</ul><div class="MsoNormal">You can find them anywhere like if you bookmarked on your computer then you have to carry your coputer.</div><div class="MsoNormal"><b>Now What is the Importance of social bookmarking in SEO<o:p></o:p></b></div><div class="MsoNormal">Social bookmarking is very important part of seo Because </div><div class="MsoNormal"><br />
</div><div class="MsoNormal"><b><u>Get Generic Traffic: </u></b>you will bookmark your site on any bookmarking site. Then the other users on that site will find your site and open it. They will visit your site and if they find it interesting it then they can bookmark it also. And this process will be continue.</div><div class="MsoNormal"><br />
</div><div class="MsoNormal"><b><u>Get back links:</u></b> For SEO back links are very important. A site has a large number of back links will have a good page rank. So if you share a website on a social bookmarking site like dig or pintrest then it will give a back link to that site. And if any other likes your link then he or she can bookmark it and so on. So this will increase the back links to your website. And the ranking of your site will be increase .</div><div class="MsoNormal"><br />
</div><div class="MsoNormal"><b><u>Spread your product:</u></b> by social bookmarking you can spread your product on the internet. Because there are so many users use the bookmarking sites they all will see your product and by this your sale will be also increase.</div><div class="MsoNormal"><br />
</div><div class="MsoNormal"><b><u>Increases Page Ranking:</u></b> social bookmarking is helpful to increase page ranking because it gives many back links to your site and also give generic traffic to your site. <o:p></o:p></div><div class="MsoNormal">How to Submit site to social bookmarking sites<o:p></o:p></div><div class="MsoNormal">It is not a difficult task to submit a site. You just need to follow these steps</div><div class="MsoNormal"></div><ol style="text-align: left;"><li><span style="text-indent: -0.25in;">Signup to bookmarking site</span></li>
<li><span style="text-indent: -0.25in;">Then enter the link you want to submit</span></li>
<li><span style="font-size: 7pt; text-indent: -0.25in;"> </span><span style="text-indent: -0.25in;">Enter a relative title to your page</span></li>
<li><span style="font-size: 7pt; text-indent: -0.25in;"> </span><span style="text-indent: -0.25in;">Enter a description for your page</span></li>
<li><span style="font-size: 7pt; text-indent: -0.25in;"> </span><span style="text-indent: -0.25in;">Enter related tags to your page</span></li>
</ol><h3 style="text-align: left;">List of Some social bookmarking sites:</h3><div class="MsoListParagraphCxSpMiddle">Digg.com</div><div class="MsoListParagraphCxSpMiddle">Stumbleupon.com</div><div class="MsoListParagraphCxSpMiddle">Reddit.com</div><div class="MsoListParagraphCxSpMiddle">Pintrest.com</div><div class="MsoListParagraphCxSpMiddle">Delicious</div><div class="MsoListParagraphCxSpMiddle">Slashdot</div><div class="MsoListParagraphCxSpLast">Friendfeed</div><br />
</div>yesongshttp://www.blogger.com/profile/14466160119267287649noreply@blogger.com0