tag:blogger.com,1999:blog-87681958225351087522024-03-14T01:01:46.186+05:30Web Design SolutionsHtml tags, css tags, css hack and more...Dipuhttp://www.blogger.com/profile/08133221798164434079noreply@blogger.comBlogger32125tag:blogger.com,1999:blog-8768195822535108752.post-34129330499783811982011-10-11T19:52:00.003+05:302011-10-11T19:52:40.915+05:30<div dir="ltr" style="text-align: left;" trbidi="on">
<a href='http://www.rgclix.com/?ref=dipuv16'><img src='http://www.rgclix.com/images/banner4.jpg'></a>
<br /></div>
Dipuhttp://www.blogger.com/profile/08133221798164434079noreply@blogger.com0tag:blogger.com,1999:blog-8768195822535108752.post-8532243371121303072011-10-11T19:52:00.001+05:302011-10-11T19:52:27.614+05:30<div dir="ltr" style="text-align: left;" trbidi="on">
<a href='http://www.rgclix.com/?ref=dipuv16'><img src='http://www.rgclix.com/images/banner3.jpg'></a>
<br /></div>
Dipuhttp://www.blogger.com/profile/08133221798164434079noreply@blogger.com0tag:blogger.com,1999:blog-8768195822535108752.post-85473661368040474962011-10-11T19:51:00.003+05:302011-10-11T19:51:51.012+05:30<div dir="ltr" style="text-align: left;" trbidi="on">
<a href='http://www.rgclix.com/?ref=dipuv16'><img src='http://www.rgclix.com/images/banner2.jpg'></a>
<br /></div>
Dipuhttp://www.blogger.com/profile/08133221798164434079noreply@blogger.com0tag:blogger.com,1999:blog-8768195822535108752.post-53933676019020052852011-10-11T19:51:00.001+05:302011-10-11T19:51:10.484+05:30<div dir="ltr" style="text-align: left;" trbidi="on">
<a href='http://www.rgclix.com/?ref=dipuv16'><img src='http://www.rgclix.com/images/banner1.jpg'></a>
<br /></div>
Dipuhttp://www.blogger.com/profile/08133221798164434079noreply@blogger.com0tag:blogger.com,1999:blog-8768195822535108752.post-36813443256614734222011-09-28T12:03:00.000+05:302011-09-28T12:03:02.272+05:30:last-child<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: #76a5af; color: white; padding: 15px;">
:last-child {
declaration aria
}
</div>
<br /></div>
Dipuhttp://www.blogger.com/profile/08133221798164434079noreply@blogger.com0tag:blogger.com,1999:blog-8768195822535108752.post-83298039196645109082011-09-28T12:00:00.001+05:302011-09-28T12:00:54.839+05:30:nth-last-of-type<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: #76a5af; color: white; padding: 15px;">
:nth-last-of-type( { number of expression | odd | even } )<br /> {
declaration aria
}
</div>
<br /></div>
Dipuhttp://www.blogger.com/profile/08133221798164434079noreply@blogger.com0tag:blogger.com,1999:blog-8768195822535108752.post-89733699490440904032011-09-28T11:54:00.000+05:302011-09-28T11:54:26.372+05:30:nth-of-type<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: #76a5af; color: white; padding: 15px;">
:nth-of-type( { expression | odd | even } ) <br/>{
declaration aria
}
</div>
<br /></div>
Dipuhttp://www.blogger.com/profile/08133221798164434079noreply@blogger.com0tag:blogger.com,1999:blog-8768195822535108752.post-28844992401945794072011-09-27T14:43:00.001+05:302011-09-27T14:44:28.390+05:30:nth-last-child(N)<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: #76a5af; color: white; padding: 15px;">
:nth-last-child( { number expression | odd | even } )<br />
{
declaration aria
}
</div>
<br /></div>
Dipuhttp://www.blogger.com/profile/08133221798164434079noreply@blogger.com0tag:blogger.com,1999:blog-8768195822535108752.post-46903853181661677072011-09-27T14:38:00.001+05:302011-09-27T14:43:40.871+05:30:nth-child<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: #76a5af; color: white; padding: 15px;">
:nth-child
(
{ expression | odd | even } ) <br />
{
declaration aria
}
</div>
<br /></div>
Dipuhttp://www.blogger.com/profile/08133221798164434079noreply@blogger.com0tag:blogger.com,1999:blog-8768195822535108752.post-44460146239379564322011-09-27T14:36:00.001+05:302011-09-27T14:36:30.650+05:30CSS3 - Pseudo Classes<div dir="ltr" style="text-align: left;" trbidi="on">
CSS objective "style of separation of content" depends largely on its ability to penetrate first the content. Well, in CSS3, that mission is enhanced by the addition of the Structural Funds of pseudo-classes. These selectors allow you to select children of a parent based on a set of common criteria, such as the third son, the children even / odd, the n-th child within each group of children of a certain type in the matrix, and more drugoe.Nemnogo overwhelming, yes, but better safe than disappointment.<br /><br />CSS3 pseudo-classes are supported in IE8+ , Firefox 3.1+, and Safari 3.1+ </div>
Dipuhttp://www.blogger.com/profile/08133221798164434079noreply@blogger.com0tag:blogger.com,1999:blog-8768195822535108752.post-76295152501706754512011-09-23T09:44:00.000+05:302011-09-23T09:44:02.159+05:30Text Stroke<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: #76a5af; color: white; padding: 15px;">
.classname {
-webkit-text-stroke: 3px black;
color: white;
}
</div>
<br /></div>
Dipuhttp://www.blogger.com/profile/08133221798164434079noreply@blogger.com0tag:blogger.com,1999:blog-8768195822535108752.post-33679229418148805322011-09-23T09:42:00.005+05:302011-09-23T09:42:55.170+05:30Text Outline<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: #76a5af; color: white; padding: 15px;">
body { background-color: white; }
.classname {
text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black;
color: white;
}
</div>
</div>
Dipuhttp://www.blogger.com/profile/08133221798164434079noreply@blogger.com0tag:blogger.com,1999:blog-8768195822535108752.post-27279603511436081322011-09-22T14:27:00.002+05:302011-09-23T09:40:20.793+05:30Multiple Background<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: #76a5af; color: white; padding: 15px;">
.bg {
background: url(image/flower.jpg) 0 0 no-repeat,
url(image2/tree.jpg) 100% 0 no-repeat;
}
</div>
</div>
Dipuhttp://www.blogger.com/profile/08133221798164434079noreply@blogger.com0tag:blogger.com,1999:blog-8768195822535108752.post-41801129978028029732011-09-18T19:49:00.001+05:302011-09-21T17:38:28.136+05:30CSS3 Solutions for Microsoft Internet Explorer<div dir="ltr" style="text-align: left;" trbidi="on">
CSS3 probably the latest trend in web design at this time, allowing developers to implement a series of solutions for their projects with a simple CSS to avoid having to semantic no marks, JavaScript complex and additional images,. Unfortunately, it is not surprising that Microsoft Internet Explorer, even in its most recent version is not yet compatible with most of the properties and features introduced in CSS3.<br />
<br />
<span style="color: #cc0000; font-size: x-large;"> </span><br />
<h3>
<span style="color: #cc0000; font-size: x-large;">Transparency and Opacity</span></h3>
<span style="background-color: yellow;"></span>
<br />
<div style="background-color: yellow;">
</div>
<div style="background-color: #76a5af; color: white; padding: 15px;">
#idname {<br />
opacity: .4; /* IE9+ and other browsers */ <br />
filter: alpha(opacity=40); /* IE6+ */<br />
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* IE6+ */<br />
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* works in IE8 only */
}
</div>
<br />
<span style="color: #cc0000; font-size: x-large;"> </span><br />
<h3>
<span style="color: #cc0000; font-size: x-large;">Rounded Corners or border-radius </span></h3>
<span style="background-color: yellow;"></span>
<br />
<div style="background-color: yellow;">
</div>
<div style="background-color: #76a5af; color: white; padding: 15px;">
.class-name
{<br />
border-radius: 15px;<br />
behavior: url(border-radius.htc);<br />
}
</div>
<br />
<span style="color: #cc0000; font-size: x-large;"> </span><br />
<h3>
<span style="color: #cc0000; font-size: x-large;">Box-shadow </span></h3>
<span style="background-color: yellow;"></span>
<br />
<div style="background-color: yellow;">
</div>
<div style="background-color: #76a5af; color: white; padding: 15px;">
.class-name <br />
{<br />
-moz-box-shadow: 2px 2px 3px #969696; /* Firefox 3.5+ */<br />
-webkit-box-shadow: 2px 2px 3px #969696; /* Safari & Chrome */<br />
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3); /* ie */<br />
}
</div>
<br />
<span style="color: #cc0000; font-size: x-large;"> </span><br />
<h3>
<span style="color: #cc0000; font-size: x-large;">Gradients </span></h3>
<span style="background-color: yellow;"></span>
<br />
<div style="background-color: yellow;">
</div>
<div style="background-color: #76a5af; color: white; padding: 15px;">
.class-name <br />
{ background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */ <br />
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb)); /* Chrome and Safari */<br />
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 and IE7 */<br />
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */<br />
}
</div>
<br />
<span style="color: #cc0000; font-size: x-large;"> </span><br />
<h3>
<span style="color: #cc0000; font-size: x-large;">Conditional comments </span></h3>
<span style="background-color: yellow;"></span>
<br />
<div style="background-color: yellow;">
</div>
<div style="background-color: #76a5af; color: white; padding: 15px;">
<br />
<pre><code><link rel="stylesheet" type="text/css" href="style.css" /></code></pre>
<pre><code> </code></pre>
<pre><code><!--[if IE]>
<link rel="stylesheet" type="text/css" href="allversion-ie.css" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie-6.0.css" />
<![endif]-->
<!--[if lt IE 6]>
<link rel="stylesheet" type="text/css" href="ie-5.0+5.5.css" />
<![endif]--></code></pre>
<br /></div>
</div>
Dipuhttp://www.blogger.com/profile/08133221798164434079noreply@blogger.com0tag:blogger.com,1999:blog-8768195822535108752.post-22775982598489592312011-09-15T15:58:00.001+05:302011-09-15T15:58:28.411+05:30CSS3 - Columns<div dir="ltr" style="text-align: left;" trbidi="on">
#columns {<br /><br /> -webkit-column-count: 3;<br /> -webkit-column-rule: 1px solid #bbb;<br /> -webkit-column-gap: 2em;<br /><br /> -moz-column-count: 3;<br /> -moz-column-rule: 1px solid #bbb;<br /> -moz-column-gap: 2em;<br /><br /> column-count: 3;<br /> column-rule: 1px solid #bbb;<br /> column-gap: 2em;<br /><br /> display: block;<br />}</div>
Dipuhttp://www.blogger.com/profile/08133221798164434079noreply@blogger.com0tag:blogger.com,1999:blog-8768195822535108752.post-28728993245492327032011-09-15T15:22:00.000+05:302011-09-15T15:22:46.180+05:30CSS3 - Layering multiple shadowbox<div dir="ltr" style="text-align: left;" trbidi="on">
#Example_layer {<br />
-moz-box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;<br />
-webkit-box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;<br />
box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;<br />
}</div>
Dipuhttp://www.blogger.com/profile/08133221798164434079noreply@blogger.com0tag:blogger.com,1999:blog-8768195822535108752.post-30063716699846970302011-09-15T14:48:00.000+05:302011-09-15T14:48:58.076+05:30CSS - Shadow with the ‘inset’<div dir="ltr" style="text-align: left;" trbidi="on">
#Example_inset {<br />-moz-box-shadow: inset -5px -5px 0 5px #888;<br />-webkit-box-shadow: inset -5px -5px 0 5px#888;<br />box-shadow: inset -5px -5px 0 5px #888;<br />} </div>
Dipuhttp://www.blogger.com/profile/08133221798164434079noreply@blogger.com0tag:blogger.com,1999:blog-8768195822535108752.post-63818940646887283682011-09-15T14:29:00.000+05:302011-09-15T14:29:08.161+05:30CSS3 - Background Size<div dir="ltr" style="text-align: left;" trbidi="on">
#bg1 {<br />
background-size: auto;<br />
}<br />
#bg2 {<br />
background-size: 275px 125px;<br />
}
</div>
Dipuhttp://www.blogger.com/profile/08133221798164434079noreply@blogger.com0tag:blogger.com,1999:blog-8768195822535108752.post-29005064792355283772011-09-15T09:55:00.000+05:302011-09-15T09:55:30.381+05:30CSS - Border-Radius<div dir="ltr" style="text-align: left;" trbidi="on">
#my_CSS3_id {<br /> text-align:center;<br /> margin:0 auto;<br /> height:50px;<br /> width:580px;<br /> border: 5px solid #c4c8cc;<br /> -moz-border-radius: 15px;<br /> -webkit-border-radius: 15px;<br />}<br /><br />#my_CSS3_id2 {<br /> text-align:center;<br /> margin:20px auto;<br /> height:50px;<br /> width:580px;<br />border: 5px solid #c4c8cc;<br /> -moz-border-radius-topleft: 15px;<br /> -moz-border-radius-topright: 0px;<br /> -moz-border-radius-bottomright: 15px;<br /> -moz-border-radius-bottomleft: 0px;<br /> -webkit-border-top-left-radius: 15px;<br /> -webkit-border-top-right-radius: 0px;<br /> -webkit-border-bottom-left-radius: 0px;<br /> -webkit-border-bottom-right-radius: 15px;<br /> <br /> <br /> -khtml-border-radius-topleft:15px;<br /> -khtml-border-radius--topright:15px;<br /> -khtml-border-radius-bottomright: 0px;<br /> -khtml-border-radius-bottomleft: 0px;<br /> <br /> border-radius-topright-topleft:15px;<br /> border-radius-topright-topright:15px;<br /> border-radius-topright-bottomright: 0px;<br /> border-radius-topright-bottomleft: 0px;<br />}</div>
Dipuhttp://www.blogger.com/profile/08133221798164434079noreply@blogger.com0tag:blogger.com,1999:blog-8768195822535108752.post-68368431224699167822011-09-15T09:54:00.001+05:302011-09-15T09:54:29.160+05:30CSS3 - Transform<div dir="ltr" style="text-align: left;" trbidi="on">
#my_CSS3_id {<br /> text-align:center;<br /> margin:0 auto;<br /> height:50px;<br /> width:580px;<br /> font-size:20px;<br /> color:#FFF;<br /> background-color:#999;<br />-moz-transform: rotate(7deg);<br /> -webkit-transform: rotate(7deg);<br />}<br /><br />#my_CSS3_id2 {<br /> text-align:center;<br /> margin:20px auto;<br /> height:50px;<br /> width:580px;<br /> font-size:20px;<br /> color:#FFF;<br /> background-color:#F00;<br />-moz-transform: skew(-25deg);<br /> -webkit-transform: skew(-25deg);<br />}</div>
Dipuhttp://www.blogger.com/profile/08133221798164434079noreply@blogger.com0tag:blogger.com,1999:blog-8768195822535108752.post-91820792841212048032011-09-14T19:01:00.000+05:302011-09-14T19:01:41.135+05:30CSS3 - Opacity<div dir="ltr" style="text-align: left;" trbidi="on">
#L1 { background:#036; opacity:0.2; height:20px; width:500px; margin:20px auto; text-align:center; }<br />#L2 { background:#036; opacity:0.4; height:20px; width:500px; margin:20px auto; text-align:center;}<br />#L3 { background:#036; opacity:0.6; height:20px; width:500px; margin:20px auto; text-align:center;}<br />#L4 { background:#036; opacity:0.8; height:20px; width:500px; margin:20px auto; text-align:center; }<br />#L5 { background:#036; opacity:1.0; height:20px; width:500px; margin:20px auto; text-align:center; }<br /><br /><br />#L7 { height:20px; width:500px; margin:20px auto; text-align:center; }<br />#L8 { opacity:0.25; width:150px; height:50px; margin:20px auto; text-align:center; }<br />#L9 {opacity:0.50; width:150px; height:50px; margin:20px auto; text-align:center; }<br />#L10 { opacity:0.75; width:150px; height:50px; margin:20px auto; text-align:center; }<br />#L11 { opacity:1.0; width:150px; height:50px; margin:20px auto; text-align:center; }</div>
Dipuhttp://www.blogger.com/profile/08133221798164434079noreply@blogger.com0tag:blogger.com,1999:blog-8768195822535108752.post-66445895146008088462011-09-14T18:52:00.000+05:302011-09-14T18:52:05.226+05:30CSS3 - Text Shadow<div dir="ltr" style="text-align: left;" trbidi="on">
#my_CSS3_id {<br /> text-align:center;<br /> margin:0 auto;<br /> height:50px;<br /> width:580px;<br />text-shadow: 2px 2px 7px #111;<br /> font-size: 3.2em;<br /> color: #f5f5f5;<br />}<br /><br />#my_CSS3_id2 {<br /> text-align:center;<br /> margin:20px auto;<br /> height:50px;<br /> width:580px;<br /> text-shadow: 0px -11px 10px #C60, 0px -3px 9px #FF0;<br /> font-size: 3.2em;<br /> color: #fff;<br /> text-align: center;<br /> padding: 10px 0px 5px 0px;<br /> background: #151515;<br />}</div>
Dipuhttp://www.blogger.com/profile/08133221798164434079noreply@blogger.com0tag:blogger.com,1999:blog-8768195822535108752.post-77716622689778827932011-09-14T18:49:00.000+05:302011-09-14T18:49:11.845+05:30CSS3 - rgb-rgba-Color-Opacity<div dir="ltr" style="text-align: left;" trbidi="on">
#L1 { background:rgb(60, 80, 100); height:20px; width:500px; margin:20px auto; text-align:center; }<br />#L2 { background:rgb(60, 100, 100); height:20px; width:500px; margin:20px auto; text-align:center;}<br />#L3 { background:rgb(60, 120, 100); height:20px; width:500px; margin:20px auto; text-align:center;}<br /><br />#L4 { background:rgb(25, 50, 100); height:20px; width:500px; margin:20px auto; text-align:center; }<br />#L5 { background:rgb(25, 50, 150); height:20px; width:500px; margin:20px auto; text-align:center; }<br />#L6 { background:rgb(25, 50, 200); height:20px; width:500px; margin:20px auto; text-align:center; }<br /><br />#L7 { background:rgba(153, 134, 117, 0.2); height:20px; width:500px; margin:20px auto; text-align:center; }<br />#L8 { background:rgba(153, 134, 117, 0.4); height:20px; width:500px; margin:20px auto; text-align:center; }<br />#L9 { background:rgba(153, 134, 117, 0.6); height:20px; width:500px; margin:20px auto; text-align:center; }<br />#L10 { background:rgba(153, 134, 117, 0.8); height:20px; width:500px; margin:20px auto; text-align:center; }<br />#L11 { background:rgba(153, 134, 117, 1.0); height:20px; width:500px; margin:20px auto; text-align:center; }</div>
Dipuhttp://www.blogger.com/profile/08133221798164434079noreply@blogger.com0tag:blogger.com,1999:blog-8768195822535108752.post-2606079097726489392011-09-14T18:48:00.001+05:302011-09-14T18:48:18.568+05:30CSS3 - Multiple Columns<div dir="ltr" style="text-align: left;" trbidi="on">
#my_CSS3_id {<br /> margin:0 auto;<br /> height:50px;<br /> width:500px;<br />text-align: justify;<br />-moz-column-width: 15em;<br />-moz-column-gap: 2em;<br />-webkit-column-width: 15em;<br />-webkit-column-gap: 2em;<br />}<br /><br />#my_CSS3_id2 {<br /><br /> margin:20px auto;<br /> height:50px;<br /> width:500px;<br /> text-align: justify;<br />-moz-column-count: 4;<br />-moz-column-gap: 1.5em;<br />-moz-column-rule: 1px solid #c4c8cc;<br />-webkit-column-count: 3;<br />-webkit-column-gap: 1.5em;<br />-webkit-column-rule: 1px solid #c4c8cc;<br />}</div>
Dipuhttp://www.blogger.com/profile/08133221798164434079noreply@blogger.com0tag:blogger.com,1999:blog-8768195822535108752.post-72971521645428963752011-09-14T18:46:00.001+05:302011-09-14T18:46:59.348+05:30CSS3 - hsla-Color-Opacity<div dir="ltr" style="text-align: left;" trbidi="on">
#L1 { background:hsl(320, 100%, 25%); height:20px; width:500px; margin:20px auto; text-align:center; }<br />#L2 { background:hsl(320, 100%, 50%); height:20px; width:500px; margin:20px auto; text-align:center;}<br />#L3 { background:hsl(320, 100%, 75%); height:20px; width:500px; margin:20px auto; text-align:center;}<br /><br />#L4 { background:hsl(202, 100%, 50%); height:20px; width:500px; margin:20px auto; text-align:center; }<br />#L5 { background:hsl(202, 50%, 50%); height:20px; width:500px; margin:20px auto; text-align:center; }<br />#L6 { background:hsl(202, 25%, 50%); height:20px; width:500px; margin:20px auto; text-align:center; }<br /><br />#L7 { background:hsla(165, 35%, 50%, 0.2); height:20px; width:500px; margin:20px auto; text-align:center; }<br />#L8 { background:hsla(165, 35%, 50%, 0.4); height:20px; width:500px; margin:20px auto; text-align:center; }<br />#L9 { background:hsla(165, 35%, 50%, 0.6); height:20px; width:500px; margin:20px auto; text-align:center; }<br />#L10 { background:hsla(165, 35%, 50%, 0.8); height:20px; width:500px; margin:20px auto; text-align:center; }<br />#L11 { background:hsla(165, 35%, 50%, 1.0); height:20px; width:500px; margin:20px auto; text-align:center; }</div>
Dipuhttp://www.blogger.com/profile/08133221798164434079noreply@blogger.com0