pMany exciting new functions and features are being thought up for CSS3: text-shadow, box-sizing, opacity, multiple backgrounds, border-radius, border-image, etc#8230;/p
pCSS3 leads to greater flexibility and makes it much easier to recreate previously complex effects. Not all current browsers support CSS3, but it is however possible to create equivalent effects and serve it with the power of jQuery./p
pThis article presents 5 CSS3 techniques which can dramatically get you a stunning user interfaces and how to achieve almost the same effects using jQuery for browsers that are not compatible yet with CSS3 new features./p
pspan id=”more-8907″/span/p
h3 class=”title”1. Border Radius: Create rounded corners/h3
pW3C has offered a very interesting option for borders in CSS3, of which one is border-radius. This CSS3 styling rule allows rounded corners to be set. Both Mozila/Firefox and Safari 3 have implemented this function, which allows you to create round corners on box-items. /p
p class=”img”img src=”http://noupe.com/img/css3-jquery1.jpg” alt=”10 CSS3 Features in All Browsers using jQuery”//p
pUse the followig css code to replicate the above example./p
pre name=”code” class=”css”
#rounded-box {
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 15px;
}
/pre
pBelow you will find jQuery solutions and plugins that will allow you to create rounded corners without using images./p
h5 class=”title”bHow To »/b a href=”http://ragamo.medioclick.com/jquery/corners/”jQuery Canvas Rounded Corners/a/h5
p class=”img”a href=”http://ragamo.medioclick.com/jquery/corners/”img src=”http://noupe.com/img/css3-jquery2.jpg” alt=”10 CSS3 Features in All Browsers using jQuery”//a/p
pjQuery Plug-in to make rounded corners on your DOM objects using lt;canvasgt; element. Tested in IE7 and FF3/p
pYou can change the following bOptions/b:/p
ul class=”post”
liradio – (int) radius size of corners/li
liinColor – (color) inside color of element/li
lioutColor – (color) outside color of corners/li
liborderSize – (int) border width/li
liborderColor – (color) color of borders/li
/ul
h5 class=”title”bHow To »/b a href=”http://www.atblabs.com/jquery.corners.html”jQuery Corners/a /h5
p class=”img”a href=”http://www.atblabs.com/jquery.corners.html”img src=”http://noupe.com/img/css3-jquery3.jpg” alt=”10 CSS3 Features in All Browsers using jQuery”//a/p
pThis jQuery plugin will easily create beautifully rounded corners. No images or obtrusive markup necessary./p
h3 class=”title”2. Border Image/h3
pAnother exciting new border feature of CSS3 is the property a href=”http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-image-uri”border-image/a. Border-image, allows an image to be used as the border of an element. Each side of the image corresponds to a side of the HTML object./p
p class=”img”img src=”http://noupe.com/img/css3-jquery4.jpg” alt=”10 CSS3 Features in All Browsers using jQuery”//p
pCurrently b#8220;Border Image#8221;/b is only implemented in the upcoming Firefox3.1 and recent releases of Safari and Chrome. Below you will find a tricky jQuery solution that will allow you to have this feature work in: Firefox 2.*, Firefox 3, Firefox 3.1, Safari 3.*, Chrome 1.0, Opera 9.*, Opera 10br /
and IE7./p
h5 class=”title”bHow To »/b a href=”http://www.lrbabe.com/sdoms/borderImage/index.html”jquery.borderImage.js/a /h5
p class=”img”a href=”http://www.lrbabe.com/sdoms/borderImage/index.html”img src=”http://noupe.com/img/css3-jquery5.jpg” alt=”10 CSS3 Features in All Browsers using jQuery”//a/p
pjquery.borderImage is a cross-browser, partial implementation of CSS3#8217;s border-image property. This plugin can create the same effect as border-image by creating nine slices from the image one by one, and then tile them in the background of our element./p
h3 class=”title”3. Multiple Backgrounds/h3
pCSS3 allows for multiple background images on one element, this is a real time saver. To do this, you can separate backgrounds by commas, like this/p
p class=”img”img src=”http://noupe.com/img/css3-jquery6.jpg” alt=”10 CSS3 Features in All Browsers using jQuery”//p
pre name=”code” class=”css”
#multiple-background-box {
background: url(top-bg.gif) top left no-repeat,
url(bottom-bg.gif) bottom left no-repeat,
url(middle-bg.gif) left repeat-y;
padding: 20px;
}
/pre
pSince this features is not supported by most browsers yet, and you want multiple/layered backgrounds for a div tag, you would nest div tags inside of each other with the CSS to give it the background you wanted. That#8217;s a lot of code, and doesn#8217;t seem too effecient. The solution is to use jQuery with the Background Layers plugin. /p
h5 class=”title”bHow To »/b a href=”http://www.protocoder.com/web-design/css/css-multiple-backgrounds-background-layering-with-jquery.html”CSS Multiple Backgrounds / Background Layering with jQuery/a /h5
pThe Background Layers plugin reduces the amount XHTML you need to write simply by adding a few lines of JavaScript, making your code much less cumbersome. The concept is similar to the use of layers in Photoshop, one background image on top of another./p
pre name=”code” class=”js”
lt;script type=quot;text/javascriptquot; src=quot;/includes/jquery.background_layers.jsquot;gt;lt;/scriptgt;
lt;script type=quot;text/javascriptquot;gt;
$(function(){
$(#39;.marioBox#39;).add_layer(quot;#A4D3FFquot;);
$(#39;.marioBox#39;).add_layer(quot;url(#39;/images/mario_floor.gif#39;) no-repeat bottomquot;);
$(#39;.marioBox#39;).add_layer(quot;url(#39;/images/mario_bush.gif#39;) no-repeat 10px 167pxquot;);
$(#39;.marioBox#39;).add_layer(quot;url(#39;/images/mario_pipe.gif#39;) no-repeat 180px 183pxquot;);
$(#39;.marioBox#39;).add_layer(quot;url(#39;/images/mario_cloud.gif#39;) no-repeat 90px 93pxquot;);
$(#39;.marioBox#39;).add_layer(quot;url(#39;/images/mario_cloud.gif#39;) no-repeat 180px 53pxquot;);
$(#39;.marioBox#39;).add_layer(quot;url(#39;/images/mario_cloud.gif#39;) no-repeat 20px 73pxquot;);
$(#39;.marioBox#39;).add_layer(quot;url(#39;/images/goomba.gif#39;) no-repeat 70px 214pxquot;);
$(#39;.marioBox#39;).add_layer(quot;url(#39;/images/mario.gif#39;) no-repeat 180px 156pxquot;);
});
lt;/scriptgt;
lt;div class=quot;marioBoxquot; style=quot;height: 248px; width: 248px;quot;gt;lt;/divgt;
/pre
p class=”img”a href=”http://www.protocoder.com/web-design/css/css-multiple-backgrounds-background-layering-with-jquery.html”img src=”http://noupe.com/img/css3-jquery7.jpg” alt=”10 CSS3 Features in All Browsers using jQuery”//a/p
pThe code above demonstrate laying backgrounds than to use a few sprites from the classic video game, Super Mario Bros 3. /p
h3 class=”title”4. Box Shadow and Text Shadow/h3
pThe main goal of this property is to give designers and css coders a nice way to display a shadow behind your text. The property syntax should look like this:/p
pre name=”code” class=”css”
h3 { text-shadow: 2px 2px 2px #333; }
/pre
p class=”img”a href=”http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/”img src=”http://noupe.com/img/css3-jquery8.jpg” alt=”10 CSS3 Features in All Browsers using jQuery”//a/p
pA very useful article i found a href=”http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/”at Kretschmann’s website/a, explaing different usage of this property and including different example for using it in a nice way./p
pAgain, this property is not supported by Firefox and IE, so we have to find ourself another way of doing it using jQuery. /p
h5 class=”title”bHow To »/b a href=”http://eyebulb.com/dropshadow/”Drop Shadow/a /h5
p class=”img”a href=”http://eyebulb.com/dropshadow/”br /
img src=”http://noupe.com/img/css3-jquery9.jpg” alt=”10 CSS3 Features in All Browsers using jQuery”//a/p
pThis plugin creates soft drop shadows behind page elements, including text and transparent images. It accepts options for the horizontal and vertical offsets, amount of blur, opacity, and color. Please look at the a href=”http://eyebulb.com/dropshadow”demo/a page for examples./p
h5 class=”title”bHow To »/b a href=”http://kilianvalkhof.com/2008/javascript/text-shadow-in-ie-with-jquery/”Text-shadow in Internet Explorer/a /h5
p class=”img”a href=”http://kilianvalkhof.com/2008/javascript/text-shadow-in-ie-with-jquery/”br /
img src=”http://noupe.com/img/css3-jquery10.jpg” alt=”10 CSS3 Features in All Browsers using jQuery”//a/p
pText-shadow in Internet Explorer adds text-shadow effects to Internet Explorer. You can easily turn it on by calling textShadow();./p
h3 class=”title”5.Transparency #038; Opacity/h3
pThe most widely implemented feature of CSS3 up till now is opacity. ‘opacity’ sets the value to how opaque an elements. An element with opacity value 1.0 will be fully opaque (visible) while an element with opacity value 0.0 will be the complete opposite, invisible. Any value inbetween will determine how opaque (or transparent) the element is. Check out this interesting post by a href=”http://www.zenelements.co.uk/blog/css3-opacity/”Zen Elements/a explaining how to use it./p
p class=”img”a href=”http://www.zenelements.co.uk/blog/css3-opacity/”br /
img src=”http://noupe.com/img/css3-jquery11.jpg” alt=”10 CSS3 Features in All Browsers using jQuery”//a/p
pThe above opacity example is set in another layer containing a completely random, never seen before background and each layer uses the following CSS:/p
pre name=”code” class=”css”
div.L1 { background:#036; opacity:0.2; width:575px; height:20px; }
div.L2 { background:#036; opacity:0.4; width:575px; height:20px; }
div.L3 { background:#036; opacity:0.6; width:575px; height:20px; }
div.L4 { background:#036; opacity:0.8; width:575px; height:20px; }
div.L5 { background:#036; opacity:1.0; width:575px; height:20px; }
/pre
h5 class=”title”bHow To »/b a href=”http://www.unitorganizer.com/myblog/2007/08/gradient_jquery_plugin.html”Element gradient/a /h5
p class=”img”a href=”http://www.unitorganizer.com/myblog/2007/08/gradient_jquery_plugin.html”br /
img src=”http://noupe.com/img/css3-jquery12.jpg” alt=”10 CSS3 Features in All Browsers using jQuery”//a/p
pIt allows you to define a gradient fill and have an element filled with a gradient. You can set the direction of the gradient (right-left or up-down) and the opacity of the gradient easily./p
div class=”feedflare”
a href=”http://feeds2.feedburner.com/~f/Noupe?a=Dwei0i0c”img src=”http://feeds2.feedburner.com/~f/Noupe?i=Dwei0i0c” border=”0″/img/a a href=”http://feeds2.feedburner.com/~f/Noupe?a=WnLbFPAM”img src=”http://feeds2.feedburner.com/~f/Noupe?i=WnLbFPAM” border=”0″/img/a a href=”http://feeds2.feedburner.com/~f/Noupe?a=7AAxK61m”img src=”http://feeds2.feedburner.com/~f/Noupe?i=7AAxK61m” border=”0″/img/a a href=”http://feeds2.feedburner.com/~f/Noupe?a=y2evu1Nt”img src=”http://feeds2.feedburner.com/~f/Noupe?d=50″ border=”0″/img/a
/divimg src=”http://feeds2.feedburner.com/~r/Noupe/~4/2Nkzok34EgY” height=”1″ width=”1″/
{ 0 comments… add one now }