tag:blogger.com,1999:blog-22512217259624459812024-03-13T13:09:31.066+05:30Happy to Help YouAnonymoushttp://www.blogger.com/profile/16352846248495208792noreply@blogger.comBlogger6125tag:blogger.com,1999:blog-2251221725962445981.post-39275056576471396572013-04-01T20:10:00.001+05:302013-04-01T20:10:26.480+05:30 Five CSS3 Breadcrumb Designs<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYOVLhIbUccnRwKBS9NaceBceFmQ0-ACsNTo-UR-2loygGxvsr4uwJsTG0zQCDTOuucVoAaUBB32dsGzEIyLwK9QVzJgus5NqxuVa3rTg1oVrbdQnfPUZIChBurwIPw3-Pimmn-jUkQyaJ/s1600/breadcrumb.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYOVLhIbUccnRwKBS9NaceBceFmQ0-ACsNTo-UR-2loygGxvsr4uwJsTG0zQCDTOuucVoAaUBB32dsGzEIyLwK9QVzJgus5NqxuVa3rTg1oVrbdQnfPUZIChBurwIPw3-Pimmn-jUkQyaJ/s1600/breadcrumb.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-size: 15px;">Breadcrumbs are an alternative navigation.
Not only do they act as a visual aid to inform the reader about their
position in the blog's hierarchy but also give a more structured feel.
The previous post was about how to integrate </span><a href="http://www.stylifyyourblog.com/2012/08/breadcrumbs-for-blogger.html" style="font-size: 15px;" target="_blank">Breadcrumbs into Blogger</a><span style="font-size: 15px;">
and this one is a showcase of 5 designs which you can use in place of
the default design provided before. All of these designs use CSS3
extensively with no use of images anywhere. Each of them
is beautifully styled and should integrate well with your blog's current
design.</span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-size: 15px;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: inherit;"><b style="background-color: white; color: #888888; line-height: 19.1875px; text-align: left;"><span style="border: 0px; color: #0b5394; list-style-type: none; margin: 0px; outline: 0px; padding: 0px;"><span style="border: 0px; color: black; list-style-type: none; margin: 0px; outline: 0px; padding: 0px;">Life Demo:</span><a href="http://www.stylifyyourblog.com/2012/08/5-css3-breadcrumb-designs.html" target="_blank"> </a></span></b><span style="background-color: white; border: 0px; color: #888888; line-height: 19.1875px; list-style-type: none; margin: 0px; outline: 0px; padding: 0px;"><b><a href="http://www.stylifyyourblog.com/2012/08/5-css3-breadcrumb-designs.html" target="_blank">Breadcrumb Designs</a></b></span></span></div>
<br />Anonymoushttp://www.blogger.com/profile/16352846248495208792noreply@blogger.com0tag:blogger.com,1999:blog-2251221725962445981.post-53864041736497030522013-04-01T18:41:00.004+05:302013-04-01T18:48:56.055+05:30CSS Image Gallery<div class="separator" style="clear: both; text-align: center;">
<a href="http://wowslider.com/css-image-gallery-push-stack.html" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgamkfYMMU_QK3lKSf1bI3rY3FFlOtG5OttKQ2wPxo9mFEkc94JnSWw1JgBfxyZHTzTON4HsCBT1NtF5RhNYU1uWxJentZTRWqFa-0kOmvb7zT-IkTr8hyphenhyphendjbzr6H7ozOsdThJ8KNlO2As/s1600/wowslide.jpg" /></a></div>
<br />
<br />
<pre id="line1" style="text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif;">CSS Image Gallery - Push Template Demo with Stack effect</span></pre>
Anonymoushttp://www.blogger.com/profile/16352846248495208792noreply@blogger.com0tag:blogger.com,1999:blog-2251221725962445981.post-23751636928338505012012-06-13T17:56:00.000+05:302013-04-01T19:06:51.174+05:306 Best Slideshow and Web Design<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: left;">
<span style="color: #0b5394; font-size: large;"><b>01. Revolution</b></span><br />
Looking for a full screen image slider that you may use as a background of your website? Try this.<b><i><br /></i><span style="color: #0b5394;"><span style="color: black;">Life Demo:</span> </span></b><span style="text-align: center;"><b><a href="http://www.shoprevolution.com/" target="_blank">Revolution Clothing</a></b></span></div>
<br />
<a href="http://www.shoprevolution.com/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFSvTVYFOPoQPbyZm9Wf1HPamFjhEJ9U5r2ncW3cqhrSoRgRHiAV6VuqCpIwfxGoK3K1vNlzScrNJ2RCUEominZhKEt2WJmmijQtCgTPvxHOeWxWngTBjAOSQjX8ZB4vgFpgshr_EaIjc/s1600/slideshow-01.jpg" /></a><br />
<br />
<span style="color: #0b5394;"><span style="font-size: large;">02. Sobe</span></span><br />
Now here is another awesome photo gallery plugin – just take a look
at the full screen showcase and you will know what I mean. However,
resolution may seem to be a BIG problem.<br />
<b><span style="color: #0b5394;"><span style="color: black;">Life Demo:</span> </span></b><a href="http://www.sobe.com/" target="_blank"><span style="text-align: center;"><b>Sobe</b></span></a><br />
<br />
<a href="http://www.sobe.com/" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNALXRoitq5mmhMoDPNNV9POAmIJxGDgazMysDkiFTy_xs98yerUhbDOr0vGncKSK0PvuWWLrX53CcQ_y09QX8DKJjkbNVJJ2UkDjgLslMIcZNGdu5mGnETI0URxxUuqPIOC-pDEKRj7E/s1600/slideshow-02.jpg" /></a>
<br />
<br />
<span style="color: #0b5394;"><span style="font-size: large;">03. Parklafun</span></span><br />
<b><span style="color: #0b5394;"><span style="color: black;">Life Demo:</span> </span></b><span style="text-align: center;"><b><a href="http://parklafun.com/" target="_blank">Park La Fun</a></b></span><br />
<span style="text-align: center;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://parklafun.com/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGH6JdXud6OhYOYtX1K-3jE5svuvrQpW1hwY14ia9zbc4iFTSXaNjaZeDlZhG7-CKangRjHMXW4-4_dD8B4WhA2_QMoYSriyYowmOz64pI5OLPNcs11AUVAcJ3boTTpHhdvhBLWlIMvXc/s1600/parklafun-slide.jpg" /></a></div>
<span style="text-align: center;"><br /></span></div>
Anonymoushttp://www.blogger.com/profile/16352846248495208792noreply@blogger.com0tag:blogger.com,1999:blog-2251221725962445981.post-20778721450492970382012-06-01T16:38:00.001+05:302013-04-26T16:37:50.894+05:30All Browser Specific css<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<h1 itemprop="name">
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: small;">How to write specific CSS for mozilla, chrome and IE</span></h1>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVOavwWpYwztRD75pvwQxaWBGxE2QR4nHBLJUr3vxtR398A77VbDmAZ3DXJXyCDNmxn71ip61NfvB6FT20S0Qr9TDhdRpbB3dtJqwYhUBcypXKwsmkHDV1uY3Tna1fuZCmYYAJN_Xj398/s1600/HTML_Icon_Final.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVOavwWpYwztRD75pvwQxaWBGxE2QR4nHBLJUr3vxtR398A77VbDmAZ3DXJXyCDNmxn71ip61NfvB6FT20S0Qr9TDhdRpbB3dtJqwYhUBcypXKwsmkHDV1uY3Tna1fuZCmYYAJN_Xj398/s1600/HTML_Icon_Final.png" /></a></div>
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: small;"></span><br />
<pre class="lang-php prettyprint"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: small;"><code><span class="Apple-style-span" style="color: #999999;"><span class="com">/***** Selector Hacks ******/</span><span class="pln">
</span><span class="com">/* IE6 and below */</span></span><span class="pln">
</span><span class="Apple-style-span" style="color: magenta;"><span class="pun">*</span><span class="pln"> html </span></span><span class="com"><span class="Apple-style-span" style="color: magenta;">#uno {</span> <span class="Apple-style-span" style="color: blue;">color</span><span class="Apple-style-span" style="color: magenta;">:</span><span class="Apple-style-span" style="color: blue;"> red</span> <span class="Apple-style-span" style="color: magenta;">}</span></span><span class="pln">
</span><span class="com" style="background-color: white;"><span class="Apple-style-span" style="color: #999999;">/* IE7 */</span></span><span class="pln">
</span><span class="Apple-style-span" style="color: magenta;"><span class="pun">*:</span><span class="pln">first</span><span class="pun">-</span><span class="pln">child</span><span class="pun">+</span><span class="pln">html </span></span><span class="com"><span class="Apple-style-span" style="color: magenta;">#dos {</span> <span class="Apple-style-span" style="color: blue;">color</span><span class="Apple-style-span" style="color: magenta;">:</span><span class="Apple-style-span" style="color: blue;"> red</span> <span class="Apple-style-span" style="color: magenta;">} </span></span><span class="pln">
</span><span class="com" style="background-color: white;"><span class="Apple-style-span" style="color: #999999;">/* IE7, FF, Saf, Opera */</span></span><span class="pln">
<span class="Apple-style-span" style="color: magenta;">html</span></span><span class="Apple-style-span" style="color: magenta;"><span class="pun">></span><span class="pln">body </span></span><span class="com"><span class="Apple-style-span" style="color: magenta;">#tres {</span> <span class="Apple-style-span" style="color: blue;">color</span><span class="Apple-style-span" style="color: magenta;">:</span> <span class="Apple-style-span" style="color: blue;">red</span> <span class="Apple-style-span" style="color: magenta;">}</span></span><span class="pln">
</span><span class="com"><span class="Apple-style-span" style="color: #999999;">/* IE8, FF, Saf, Opera (Everything but IE 6,7) */</span></span><span class="pln">
<span class="Apple-style-span" style="color: magenta;">html</span></span><span class="Apple-style-span" style="color: magenta;"><span class="pun">></span><span class="com">/**/</span><span class="pln">body </span></span><span class="com"><span class="Apple-style-span" style="color: magenta;">#cuatro { </span><span class="Apple-style-span" style="color: blue;">color</span><span class="Apple-style-span" style="color: magenta;">:</span> <span class="Apple-style-span" style="color: blue;">red</span> <span class="Apple-style-span" style="color: magenta;">}</span></span><span class="pln">
</span><span class="com"><span class="Apple-style-span" style="color: #999999;">/* Opera 9.27 and below, safari 2 */</span></span><span class="pln">
<span class="Apple-style-span" style="color: magenta;">html</span></span><span class="Apple-style-span" style="color: magenta;"><span class="pun">:</span><span class="pln">first</span><span class="pun">-</span><span class="pln">child </span></span><span class="com"><span class="Apple-style-span" style="color: magenta;">#cinco { </span><span class="Apple-style-span" style="color: blue;">color</span><span class="Apple-style-span" style="color: magenta;">:</span> <span class="Apple-style-span" style="color: blue;">red</span> <span class="Apple-style-span" style="color: magenta;">}</span></span><span class="pln">
</span><span class="com"><span class="Apple-style-span" style="color: #999999;">/* Safari 2-3 */</span></span><span class="pln">
<span class="Apple-style-span" style="color: magenta;">html</span></span><span class="Apple-style-span" style="color: magenta;"><span class="pun">[</span><span class="pln">xmlns</span><span class="pun">*=</span><span class="str">""</span><span class="pun">]</span><span class="pln"> body</span><span class="pun">:</span><span class="kwd">last</span><span class="pun">-</span><span class="pln">child </span></span><span class="com"><span class="Apple-style-span" style="color: magenta;">#seis {</span> <span class="Apple-style-span" style="color: blue;">color</span><span class="Apple-style-span" style="color: magenta;">:</span><span class="Apple-style-span" style="color: blue;"> red </span><span class="Apple-style-span" style="color: magenta;">}</span></span><span class="pln">
</span><span class="com"><span class="Apple-style-span" style="color: #999999;">/* safari 3+, chrome 1+, opera9+, ff 3.5+ */</span></span><span class="pln">
<span class="Apple-style-span" style="color: magenta;">body</span></span><span class="Apple-style-span" style="color: magenta;"><span class="pun">:</span><span class="pln">nth</span><span class="pun">-</span><span class="pln">of</span><span class="pun">-</span><span class="pln">type</span><span class="pun">(</span><span class="lit">1</span><span class="pun">)</span><span class="pln"> </span></span><span class="com"><span class="Apple-style-span" style="color: magenta;">#siete {</span> <span class="Apple-style-span" style="color: blue;">color</span><span class="Apple-style-span" style="color: magenta;">:</span><span class="Apple-style-span" style="color: blue;"> red</span> <span class="Apple-style-span" style="color: magenta;">}</span></span><span class="pln">
</span><span class="com"><span class="Apple-style-span" style="color: #999999;">/* safari 3+, chrome 1+, opera9+, ff 3.5+ */</span></span><span class="pln">
<span class="Apple-style-span" style="color: magenta;">body</span></span><span class="Apple-style-span" style="color: magenta;"><span class="pun">:</span><span class="pln">first</span><span class="pun">-</span><span class="pln">of</span><span class="pun">-</span><span class="pln">type </span></span><span class="com"><span class="Apple-style-span" style="color: magenta;">#ocho {</span><span class="Apple-style-span" style="color: blue;">color</span><span class="Apple-style-span" style="color: magenta;">:</span> <span class="Apple-style-span" style="color: blue;">red</span><span class="Apple-style-span" style="color: magenta;"> }</span></span><span class="pln">
</span><span class="com"><span class="Apple-style-span" style="color: #999999;">/* saf3+, chrome1+ */</span></span><span class="pln">
</span><span class="Apple-style-span" style="color: #990000;"><b><span class="lit">@media</span><span class="pln"> screen </span><span class="kwd">and</span><span class="pln"> </span><span class="pun">(-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">min</span><span class="pun">-</span><span class="pln">device</span><span class="pun">-</span><span class="pln">pixel</span><span class="pun">-</span><span class="pln">ratio</span><span class="pun">:</span><span class="lit">0</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></b></span><span class="pln">
</span><span class="com"><span class="Apple-style-span" style="color: magenta;">#diez {</span><span class="Apple-style-span" style="color: blue;">color</span><span class="Apple-style-span" style="color: magenta;">:</span><span class="Apple-style-span" style="color: blue;"> red </span><span class="Apple-style-span" style="color: magenta;">}</span></span><span class="pln">
</span><span class="pun"><span class="Apple-style-span" style="color: #660000;"><b>}</b></span></span><span class="pln">
</span><span class="com"><span class="Apple-style-span" style="color: #999999;">/* iPhone / mobile webkit */</span></span><span class="pln">
</span><span class="Apple-style-span" style="color: #660000;"><b><span class="lit">@media</span><span class="pln"> screen </span><span class="kwd">and</span><span class="pln"> </span><span class="pun">(</span><span class="pln">max</span><span class="pun">-</span><span class="pln">device</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">480px</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></b></span><span class="pln">
<span class="Apple-style-span" style="color: magenta;"> </span></span><span class="com"><span class="Apple-style-span" style="color: magenta;">#veintiseis {</span> <span class="Apple-style-span" style="color: blue;">color</span><span class="Apple-style-span" style="color: magenta;">:</span><span class="Apple-style-span" style="color: blue;"> red</span><span class="Apple-style-span" style="color: magenta;"> }</span></span><span class="pln">
</span><span class="pun"><b><span class="Apple-style-span" style="color: #660000;">}</span></b></span><span class="pln">
</span><span class="com" style="color: #999999;">/* Safari 2 - 3.1 */</span><span class="pln">
<span class="Apple-style-span" style="color: magenta;">html</span></span><span class="Apple-style-span" style="color: magenta;"><span class="pun">[</span><span class="pln">xmlns</span><span class="pun">*=</span><span class="str">""</span><span class="pun">]:</span><span class="pln">root </span></span><span class="com"><span class="Apple-style-span" style="color: magenta;">#trece {</span> <span class="Apple-style-span" style="color: blue;">color</span><span class="Apple-style-span" style="color: magenta;">:</span><span class="Apple-style-span" style="color: blue;"> red</span><span class="Apple-style-span" style="color: magenta;"> }</span></span><span class="pln">
</span><span class="com" style="color: #999999;">/* Safari 2 - 3.1, Opera 9.25 */</span><span class="pln">
</span><span class="Apple-style-span" style="color: magenta;"><span class="pun">*|</span><span class="pln">html</span><span class="pun">[</span><span class="pln">xmlns</span><span class="pun">*=</span><span class="str">""</span><span class="pun">]</span><span class="pln"> </span></span><span class="com"><span class="Apple-style-span" style="color: magenta;">#catorce { </span><span class="Apple-style-span" style="color: blue;">color</span><span class="Apple-style-span" style="color: magenta;">:</span><span class="Apple-style-span" style="color: blue;"> red</span><span class="Apple-style-span" style="color: magenta;"> }</span></span><span class="pln">
</span><span class="com" style="color: #999999;">/* Everything but IE6-8 */</span><span class="pln">
</span><span class="Apple-style-span" style="color: magenta;"><span class="pun">:</span><span class="pln">root </span><span class="pun">*></span><span class="pln"> </span></span><span class="com"><span class="Apple-style-span" style="color: magenta;">#quince { </span><span class="Apple-style-span" style="color: blue;">color</span><span class="Apple-style-span" style="color: magenta;">:</span><span class="Apple-style-span" style="color: blue;"> red</span><span class="Apple-style-span" style="color: magenta;"> }</span></span><span class="pln">
</span><span class="com" style="color: #999999;">/* IE7 */</span><span class="pln">
</span><span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span" style="color: magenta;"><span class="pun">*+</span><span class="pln">html </span></span></span><span class="com"><span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span" style="color: magenta;">#dieciocho {</span></span> <span class="Apple-style-span" style="color: blue;">color</span><span class="Apple-style-span" style="color: magenta;">:</span><span class="Apple-style-span" style="color: blue;"> red</span><span class="Apple-style-span" style="color: magenta;"> }</span></span><span class="pln">
</span><span class="com" style="color: #999999;">/* Firefox only. 1+ */</span><span class="pln">
</span><span class="com"><span style="color: magenta;">#veinticuatro, x:-moz-any-link { </span><span style="background-color: white;"><span style="color: blue;">color</span><span style="color: magenta;">:</span><span style="color: blue;"> red</span></span> <span style="background-color: white;"><span style="color: magenta;">}</span></span></span><span class="pln">
</span><span class="com" style="color: #999999;">/* Firefox 3.0+ */</span><span class="pln">
</span><span class="com" style="color: magenta;">#veinticinco, x:-moz-any-link, x:default { </span><span class="com" style="color: blue;">color</span><span class="com" style="color: magenta;">: </span><span class="com" style="color: blue;">red</span><span class="com" style="color: magenta;"> }</span><span class="pln">
</span><span style="background-color: white;"><span style="color: #999999;"><span class="com">/***** Attribute Hacks ******/</span><span class="pln">
</span><span class="com">/* IE6 */</span></span></span><span class="pln">
</span><span class="com" style="color: magenta;">#once { </span><span class="com" style="color: blue;">_</span><span class="com" style="color: blue;">color</span><span class="com" style="color: magenta;">: </span><span class="com" style="color: blue;">blue</span><span class="com" style="color: magenta;"> }</span><span class="pln">
</span><span class="com" style="color: #999999;">/* IE6, IE7 */</span><span class="pln">
</span><span class="com"><span style="color: magenta;">#doce { </span><span style="color: blue;">*color</span><span style="color: magenta;">: </span><span style="color: blue;">blue</span><span style="color: magenta;">;</span> <span style="color: #999999;">/* or #color: blue */</span> }</span><span class="pln">
</span><span class="com" style="color: #999999;">/* Everything but IE6 */</span><span class="pln">
</span><span class="com"><span style="color: magenta;">#diecisiete {</span> <span style="color: blue;">color</span><span style="color: #999999;">/**/</span><span style="color: magenta;">: </span><span style="color: blue;">blue</span><span style="color: magenta;">; }</span></span><span class="pln">
</span><span class="com" style="color: #999999;">/* IE6, IE7, IE8 */</span><span class="pln">
</span><span class="com"><span style="color: magenta;">#diecinueve {</span> <span style="color: blue;">color</span><span style="color: magenta;">:</span><span style="color: blue;"> blue\9</span><span style="color: magenta;">; }</span></span><span class="pln">
</span><span class="com" style="color: #999999;">/* IE7, IE8 */</span><span class="pln">
</span><span class="com"><span style="color: magenta;">#veinte {</span> <span style="color: blue;">color</span><span style="color: #999999;">/*\**/</span><span style="color: magenta;">:</span> <span style="color: blue;">blue\9</span><span style="color: magenta;">;</span> }</span><span class="pln">
</span><span class="com" style="color: #999999;">/* IE6, IE7 -- acts as an !important */</span><span class="pln">
</span><span class="com"><span style="color: magenta;">#veintesiete { </span><span style="color: blue;">color</span><span style="color: magenta;">: </span><span style="color: blue;">blue !ie</span><span style="color: magenta;">; }</span> <span style="color: #999999;">/* string after ! can be anything */</span></span><span class="pln">
</span></code></span></pre>
<pre class="lang-php prettyprint"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: small;"><code><span class="com"><span style="color: #999999;">
</span></span></code></span></pre>
<pre class="lang-php prettyprint"><h1 itemprop="name">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">How does one target IE7 and IE8 with valid CSS?</span></h1>
</pre>
<pre class="lang-php prettyprint"><span style="font-family: Arial, Helvetica, sans-serif;">I want to target IE7 and IE8 with W3C-compliant CSS. Sometimes fixing
CSS for one version does not fix for the other. How can I achieve this?</span><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: small;"><code><span class="com">
</span></code></span></pre>
<pre class="lang-php prettyprint"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: small;"><code><span class="com">
</span></code></span></pre>
<pre class="lang-php prettyprint"><span style="font-family: Arial, Helvetica, sans-serif;"><strong>Target IE versions with CSS "Hacks"</strong> </span>
<span style="font-family: Arial, Helvetica, sans-serif;">More to your point, here are the hacks that let you target IE versions.</span><span style="font-family: Arial, Helvetica, sans-serif;">
</span><span style="font-family: Arial, Helvetica, sans-serif;">Use "\9" to target IE8 and below.
Use "*" to target IE7 and below.
Use "_" to target IE6.</span>
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Example:</b></span>
<pre class="default prettyprint prettyprinted"><span style="color: magenta;"><code><span class="pln">.</span></code>Example<span class="pun">{</span></span></pre>
<pre class="default prettyprint prettyprinted"><code><span style="color: magenta;"><span class="pln">border</span><span class="pun">:</span></span><span class="lit" style="color: blue;">1px</span><span class="pln" style="color: blue;"> solid red</span><span class="pun"><span style="color: magenta;">;</span></span><span style="color: #999999;"><span class="pln"> </span><span class="com">/* standard */</span></span><span class="pln">
<span style="color: magenta;">border</span></span><span class="pun"><span style="color: magenta;">:</span></span><span style="color: blue;"><span class="lit">1px</span><span class="pln"> solid blue\9</span></span><span class="pun"><span style="color: magenta;">;</span></span><span class="pln"> </span><span class="com"><span style="color: #999999;">/* IE8 and below */</span></span><span class="pln">
</span><span style="color: magenta;"><span class="pun">*</span><span class="pln">border</span><span class="pun">:</span></span><span style="color: blue;"><span class="lit">1px</span><span class="pln"> solid orange</span></span><span class="pun"><span style="color: magenta;">;</span></span><span class="pln"> </span><span class="com" style="background-color: white;"><span style="color: #999999;">/* IE7 and below */</span></span><span class="pln">
<span style="color: magenta;">_border</span></span><span class="pun"><span style="color: magenta;">:</span></span><span style="color: blue;"><span class="lit">1px</span><span class="pln"> solid blue</span></span><span class="pun"><span style="color: magenta;">;</span></span><span class="pln"> </span><span class="com"><span style="color: #999999;">/* IE6 */</span></span><span class="pln">
</span><span class="pun"><span style="color: magenta;">}</span></span></code></pre>
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: small;"><code><span class="com">
</span></code></span></pre>
<strong><span style="font-family: Arial, Helvetica, sans-serif;">Explicitly Target IE versions without hacks using HTML</span></strong><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: small;">
</span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;">Use this approach if you don't want hacks in your CSS. Add a browser-unique class to the <code><html></html></code> element so you can select based on browser later.</span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;">For more information check out:</span> <b><span style="font-family: Arial, Helvetica, sans-serif;"><a href="http://stackoverflow.com/questions/814219/how-does-one-target-ie7-and-ie8-with-valid-css" target="_blank">Example >></a></span></b><br />
<b><span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></b>
<br />
<pre class="default prettyprint prettyprinted"><code><span class="pln"> </span><span class="tag"><head></head></span><span class="pln">
</span><span class="tag"><body></body></span><span class="pln">
</span><span class="tag"></span></code></pre>
</div>
<br />
<pre class="default prettyprint prettyprinted"><code><span class="pln"> </span><span class="tag"><head></head></span><span class="pln">
</span><span class="tag"><body></body></span><span class="pln">
</span><span class="tag"></span></code></pre>
<br />
<div id="wrc-float-icon" style="background-image: url(safari-extension://com.avast.wrc-6H4HRTU5E3/92cd48a8/images/float/green-3.png); display: none; height: 42px; left: 15px; position: fixed; top: 15px; width: 42px; z-index: 2147483646;">
</div>
</div>
Anonymoushttp://www.blogger.com/profile/16352846248495208792noreply@blogger.com0tag:blogger.com,1999:blog-2251221725962445981.post-59467987493262666132012-05-31T14:05:00.001+05:302013-04-01T19:11:32.586+05:30Font Generator Freedom<div dir="ltr" style="text-align: left;" trbidi="on">
<span class="Apple-style-span" style="color: #35383d; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;"><b style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Font Generator in Css Without image, but</b><span class="Apple-style-span" style="color: #3e3f3e; font-family: 'Century Gothic', 'Lucida Grande', Tahoma, Arial, sans-serif, sans; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span class="Apple-style-span" style="font-size: large; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">"All Browsers support"</span></span><b style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">.</b></span><br />
<span class="Apple-style-span" style="color: #35383d; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;"><b style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><br /></b></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.2shy2buy.net/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTBwODMZkGAi_2WhWr1gaiQK9cgsmXnZcQ6tqixbLUrA4pwK8G9k5QeQU7yuaM15SR-Vy79SZwfOvCHnbCf6hF_jkpw5g77FcBxA_qbAqvnLlEVJw0dTc_UxiPYqw3Spd-UotUJ75cuZ4/s1600/font-face-generator.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>Life Demo: </b><a href="http://www.2shy2buy.net/" target="_blank">2shy2buy.net</a></div>
<div class="separator" style="clear: both; text-align: left;">
<b><br /></b></div>
<div class="separator" style="clear: both; text-align: left;">
<b><span class="Apple-style-span" style="font-weight: normal;"><b>How to Generator Font flow this link:</b></span></b></div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://www.fontsquirrel.com/fontface/generator" target="_blank">Font Face</a></div>
<span class="Apple-style-span" style="color: #35383d; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;"><b style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><br /></b></span>
<div id="wrc-float-icon" style="background-image: url(safari-extension://com.avast.wrc-6H4HRTU5E3/13a5b938/images/float/green-3.png); display: none; height: 42px; left: 15px; position: fixed; top: 15px; width: 42px; z-index: 2147483646;">
</div>
</div>
Anonymoushttp://www.blogger.com/profile/16352846248495208792noreply@blogger.com0tag:blogger.com,1999:blog-2251221725962445981.post-27094649903992675992010-07-10T12:43:00.000+05:302012-07-05T13:38:35.521+05:30Rounded Corner Css Without image<div dir="ltr" style="text-align: left;" trbidi="on">
<div>
<b>Rounded Corner & Box shadow Css Without image </b><span class="Apple-style-span" style="color: #3e3f3e; font-family: 'Century Gothic','Lucida Grande',Tahoma,Arial,sans-serif,sans;"><span class="Apple-style-span" style="font-size: x-large;">In All Browsers</span></span><b> .</b></div>
<br />
<div>
There are lot of code snippets around to create rounded corner DIVs using images. But here is a simple CSS technique of rounding off the corners of the DIV using some css attributes. This technique will work in Firefox, Safari, Chrome, Internet Explorer and any other CSS3-compatible browser.<br />
<br />
<div>
<a href="http://www.fetchak.com/ie-css3/"><b>Life Demo</b></a> OR <b><a href="http://www.fetchak.com/ie-css3">Download or Read more</a></b></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhodCuj_1NXbdWBltsR4571DZBf_NlZ8z0CNrOHAxzM-Hmf3dbeayyYIksQJi7ievioqw4Z6H70cSGjJRnkIgBzeaiOaOt4shCpmlUEecQhgdquWLcBh4atjC4j1j35D8UXOYcUGF9K8Rs/s1600/all-browsers-icon.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="178" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhodCuj_1NXbdWBltsR4571DZBf_NlZ8z0CNrOHAxzM-Hmf3dbeayyYIksQJi7ievioqw4Z6H70cSGjJRnkIgBzeaiOaOt4shCpmlUEecQhgdquWLcBh4atjC4j1j35D8UXOYcUGF9K8Rs/s200/all-browsers-icon.jpeg" width="200" /></a></div>
<br /></div>
<br />
<style type="text/css">
.box1 {
background-color: #f0f0f0;
width: 433px;
height: 50px;
margin: 0 auto 15px auto;
padding: 30px;
border: 1px solid #CC0000;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
behavior: url(border-radius.htc);/*--for ie7---*/
}
</style><br />
<div class="box1">
CSS Rounded Corners In All Browsers (With No Images)</div>
</div>Anonymoushttp://www.blogger.com/profile/16352846248495208792noreply@blogger.com0