<?xml version="1.0" encoding="iso-8859-1"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:content="http://purl.org/rss/1.0/modules/content/">

<channel>
<title>Web Style Sheets - Web Developer Tutorials</title>
<link>http://www.devarticles.com</link>
<!-- PubSubHubbub Discovery -->
<link rel="hub"  href="http://devshednet.superfeedr.com/" xmlns="http://www.w3.org/2005/Atom" />
<link rel="self" href="http://www.devarticles.com/rss-feeds-59.xml" xmlns="http://www.w3.org/2005/Atom" />
<!-- End Of PubSubHubbub Discovery -->
<atom:link href="http://www.devarticles.com/rss-feeds-59.xml" rel="self"/>
<description>Web Style Sheets Analysis and Tutorials at Dev Articles.  Dev Articles is a community focused on front end display technologies such as HTML5, CSS3, Javascript, AJAX and graphic displays.</description>
<language>en-us</language>
<lastBuildDate>Wed, 22 Feb 2012 23:06:45 -0500</lastBuildDate>
<pubDate>Wed, 22 Feb 2012 23:06:45 -0500</pubDate>
<item><title>CSS3 Accordian Menu: Horizontally Display Hyperlinks</title>
<pubDate>Mon, 13 Feb 2012 12:30:05 -0500</pubDate>
<link>http://www.devarticles.com/c/a/Web-Style-Sheets/CSS3-Accordian-Menu-Horizontally-Display-Hyperlinks/</link>
		<description><![CDATA[Web designers can choose between many options today when adding an appealing navigation bar to a website. Whether you're planning to build up a plain vanilla menu, or create more complex navigational structures, such as hierarchical drop-downs, mega-menus and flyouts, chances are that you can tackle the entire implementation process with confidence. Animated navigation bars, however, are another story.]]></description>
		<content:encoded><![CDATA[Indeed, things get more complicated when it's necessary to construct a navigation bar (in any of its abundant flavors) that displays some form of animated behavior. In many cases, the process requires you to work with the complexities of raw JavaScript, or to climb the learning curve of one of the many JavaScript libraries available.  A good example of such a situation is the development of the so-called  accordion  menus. There are jQuery plug-ins that allow you to build these popular user interfacing elements quickly and unobtrusively, while leaving the markup clear and pristine. Sometimes, ...]]></content:encoded>
<category>Web Style Sheets</category>
<guid isPermaLink="true">http://www.devarticles.com/c/a/Web-Style-Sheets/CSS3-Accordian-Menu-Horizontally-Display-Hyperlinks/</guid>
</item>
<item><title>CSS Combinators: Working with Child Combinators</title>
<pubDate>Mon, 06 Feb 2012 08:00:05 -0500</pubDate>
<link>http://www.devarticles.com/c/a/Web-Style-Sheets/CSS-Combinators-Working-with-Child-Combinators/</link>
		<description><![CDATA[In this conclusion to a three-part series on combinators, you'll learn how to use the child combinator when building your own web pages.]]></description>
		<content:encoded><![CDATA[If you're constantly in search of newer and more efficient methodologies that permit you to improve the overall quality of your CSS code, then take a peek at combinators. This underrated feature, bundled with the specification for a long time, will let you define the visual presentation of your web page elements by using fewer CSS classes and selectors. In this way, it can help you keep the markup much cleaner and unpolluted. If you've already read the two previous parts of this tutorial, you now have a solid background on how to work with CSS combinators. In those pieces I developed some exam...]]></content:encoded>
<category>Web Style Sheets</category>
<guid isPermaLink="true">http://www.devarticles.com/c/a/Web-Style-Sheets/CSS-Combinators-Working-with-Child-Combinators/</guid>
</item>
<item><title>CSS Combinators: Using General Siblings</title>
<pubDate>Wed, 25 Jan 2012 00:00:00 -0500</pubDate>
<link>http://www.devarticles.com/c/a/Web-Style-Sheets/CSS-Combinators-Using-General-Siblings/</link>
		<description><![CDATA[In this second part of a  three-part tutorial, I develop a couple of examples which show how easy it is to exploit the functionality provided by the general sibling combinator, and how its usage (even in simple cases) can lead to writing shorter and more efficient CSS snippets.]]></description>
		<content:encoded><![CDATA[As one of the most underrated facilities of the CSS specification, combinators are powerful tools that allow you to improve the assignment of styles to elements on a web page. While their functionality remained  forgotten  in a dark corner for many years, due to the lack of a proper support by some browser vendors (with Internet Explorer clearly leading the crowd), things have changed for good. Now it's possible to utilize them in a pretty cross-browser fashion. The best way to demonstrate how useful combinators can be is through some concrete, functional code samples. In keeping with this req...]]></content:encoded>
<category>Web Style Sheets</category>
<guid isPermaLink="true">http://www.devarticles.com/c/a/Web-Style-Sheets/CSS-Combinators-Using-General-Siblings/</guid>
</item>
<item><title>Intro to CSS Combinators</title>
<pubDate>Thu, 19 Jan 2012 08:00:03 -0500</pubDate>
<link>http://www.devarticles.com/c/a/Web-Style-Sheets/Intro-to-CSS-Combinators/</link>
		<description><![CDATA[In this first part of a three-part tutorial, you'll get a quick overview of what CSS combinators are and how to use them to improve the overall efficiency and robustness of your CSS code.]]></description>
		<content:encoded><![CDATA[Combinators are quite possibly one of the most underrated features of CSS. However, the indifferent attitude with which programmers treat them wasn't because of their useless nature or limited functionality. In fact, as with many other  forgotten  facilities provided by the specification, many browser vendors included  quot;support quot; for combinators that was buggy, poor, and in the worse case, simply non-existent. Despite  this, today there's new hope for getting combinators up and running, as most browsers (yes, even Internet Explorer 7 and up) allow you to use them in a pretty confident ...]]></content:encoded>
<category>Web Style Sheets</category>
<guid isPermaLink="true">http://www.devarticles.com/c/a/Web-Style-Sheets/Intro-to-CSS-Combinators/</guid>
</item>
<item><title>CSS Semicircles and Web Page Headers</title>
<pubDate>Wed, 28 Dec 2011 08:00:04 -0500</pubDate>
<link>http://www.devarticles.com/c/a/Web-Style-Sheets/CSS-Semicircles-and-Web-Page-Headers/</link>
		<description><![CDATA[In this two-part tutorial, I develop a few approachable examples that show how to use the  quot;border-radius quot; CSS3 property in a somewhat “unconventional” fashion to render all sorts of circular shapes on a web page. With this technique, you need not  deal with multiple (and sometimes heavy) background images.]]></description>
		<content:encoded><![CDATA[Are you looking for a simple approach that lets you decorate your HTML elements with a few engaging circular shapes, but don't want to deal with the burdens and complexities of Photoshop? Then take a look at the  border-radius  CSS3 property. It not only will permit you to render native rounded corners in a snap, but it'll be your best partner for displaying circles on a web page without using background images. Of course, the best way to prove the  hidden  functionality provided by  border-radius  is with some concrete, functional code samples. In the first part of this two-part tutorial I de...]]></content:encoded>
<category>Web Style Sheets</category>
<guid isPermaLink="true">http://www.devarticles.com/c/a/Web-Style-Sheets/CSS-Semicircles-and-Web-Page-Headers/</guid>
</item>
<item><title>Drawing Circular Shapes with CSS3 and Border Radius</title>
<pubDate>Wed, 21 Dec 2011 00:00:00 -0500</pubDate>
<link>http://www.devarticles.com/c/a/Web-Style-Sheets/Drawing-Circular-Shapes-with-CSS3-and-Border-Radius/</link>
		<description><![CDATA[In this first part of a two-part tutorial, I demonstrate how easy it is to drop a few circles on a web page, thanks to the “border-radius” property.]]></description>
		<content:encoded><![CDATA[Since they made their triumphal appearance on the stage of web design, some CSS3 properties have become the favorite tools of many designers because of the functionality they offer right out of the box. Many of these properties make it much easier to build eye-catching web pages that (hopefully) keep users engaged. While there's nothing wrong with using these properties in a  quot;conventional quot; way, it's fun to take CSS3 to the next level by using the properties in a more  atypical  fashion. Doing this allows you, among other things, to create quite appealing effects.  That's exactly the ...]]></content:encoded>
<category>Web Style Sheets</category>
<guid isPermaLink="true">http://www.devarticles.com/c/a/Web-Style-Sheets/Drawing-Circular-Shapes-with-CSS3-and-Border-Radius/</guid>
</item>
<item><title>More CSS Pagination Link Templates</title>
<pubDate>Wed, 14 Dec 2011 11:30:03 -0500</pubDate>
<link>http://www.devarticles.com/c/a/Web-Style-Sheets/More-CSS-Pagination-Link-Templates/</link>
		<description><![CDATA[If you want to extend the functionality of your website with a neat pagination mechanism, but aren't sure of how to give the page links an appealing look, then keep reading this tutorial. In a step-by-step fashion, youll learn how to create several ready-to-use pagination templates with only a few straightforward CSS properties. This is the conclusion to a two-part article.]]></description>
		<content:encoded><![CDATA[If you've read the first part, you probably have a pretty good idea of how to provide your pagination links with an engaging appearance. In that article I developed a couple of clean templates, which made use of some background colors and borders to polish the link's visual presentation. Even though the properties involved in the styling process were old favorites, which you've surely been using for years, they yields results that were more than acceptable. As I said just a moment ago, my plan here is to put at your disposal a decent variety of pagination templates. This way, you can pick the ...]]></content:encoded>
<category>Web Style Sheets</category>
<guid isPermaLink="true">http://www.devarticles.com/c/a/Web-Style-Sheets/More-CSS-Pagination-Link-Templates/</guid>
</item>
<item><title>CSS Pagination Links</title>
<pubDate>Tue, 06 Dec 2011 14:30:05 -0500</pubDate>
<link>http://www.devarticles.com/c/a/Web-Style-Sheets/CSS-Pagination-Links/</link>
		<description><![CDATA[In this first part of a two-part tutorial, I show how to create a couple of basic paging templates. You can massage and tweak them to fit more specific requirements. As you'll see, the entire construction process does not require any special CSS skills.]]></description>
		<content:encoded><![CDATA[The most difficult part of building a pagination system is the logic that must be implemented behind the scenes. In most cases, the tasks of calculating the number of links that will be displayed per page, as well as the amount of pages that will be used to span the corresponding content are performed by some kind of server-side component (even though some JavaScript libraries accomplish this quite decently in the client side). Of course, you don't need to reinvent the wheel every time you wish to drop a pagination mechanism onto your web pages. Currently there's a plethora of libraries and fr...]]></content:encoded>
<category>Web Style Sheets</category>
<guid isPermaLink="true">http://www.devarticles.com/c/a/Web-Style-Sheets/CSS-Pagination-Links/</guid>
</item>
<item><title>Animated CSS3 Image Gallery: Advanced Transitions</title>
<pubDate>Mon, 28 Nov 2011 08:00:07 -0500</pubDate>
<link>http://www.devarticles.com/c/a/Web-Style-Sheets/Animated-CSS3-Image-Gallery-Advanced-Transitions/</link>
		<description><![CDATA[In this second part of a two-part series on building image galleries with CSS3, I'll show you a different way to handle transitions between thumbnails and full-sized images.]]></description>
		<content:encoded><![CDATA[Although the idea may sound intimidating, building a dynamic (and by dynamic I mean  animated quot;) image gallery using a few CSS3 properties is much easier than you might think. Indeed, in the previous part of this series, I implemented a simple, yet extendable image gallery, which used the  transition  CSS3 property to dynamically hide and display a given image when users hovered their cursors on its associated thumbnail. Best of all, the entire animation process didn't require coding a single line of JavaScript.  As with any other web-based user interface component, it's possible to easily...]]></content:encoded>
<category>Web Style Sheets</category>
<guid isPermaLink="true">http://www.devarticles.com/c/a/Web-Style-Sheets/Animated-CSS3-Image-Gallery-Advanced-Transitions/</guid>
</item>
<item><title>CSS3 Animated Image Gallery: Transitions</title>
<pubDate>Wed, 23 Nov 2011 12:00:07 -0500</pubDate>
<link>http://www.devarticles.com/c/a/Web-Style-Sheets/CSS3-Animated-Image-Gallery-Transitions/</link>
		<description><![CDATA[In this first part of a two-part tutorial, you'll learn how to create an animated image gallery by using only some standard markup and a few CSS3 properties.]]></description>
		<content:encoded><![CDATA[Since the beginning of the Internet, image galleries have been one of the most overused (and sometimes misused) user interface elements available. There's a good reason for this timeless popularity: supported by HTTP from its first incarnation, images were (and are) a powerful tool for delivering content to users in a refreshing and effective way, without condemning them to long lines of arid and dull text. As one might expect, image galleries have gone through a constant and healthy evolution process. This process ranged from primitive implementations that relied heavily on a bunch of   lt;im...]]></content:encoded>
<category>Web Style Sheets</category>
<guid isPermaLink="true">http://www.devarticles.com/c/a/Web-Style-Sheets/CSS3-Animated-Image-Gallery-Transitions/</guid>
</item>
<item><title>CSS3 Properties: Fixed Heights with box-sizing</title>
<pubDate>Mon, 07 Nov 2011 10:30:04 -0500</pubDate>
<link>http://www.devarticles.com/c/a/Web-Style-Sheets/CSS3-Properties-Fixed-Heights-with-boxsizing/</link>
		<description><![CDATA[In this two-part tutorial, I develop some examples to show you the functionality of the “box-sizing” property. You'll see how simple it is to use it to control the box model applied to elements on a web page.]]></description>
		<content:encoded><![CDATA[If you think that the many new features included with CSS3 can only display nifty rounder corners, drop a few native shadows around text and boxes and animate HTML elements, then take a look at  box-sizing.  This underrated property of the standard lets you easily control the way that the box model of a selector is rendered on screen.  In other words,  box-sizing  specifies whether or not the padding added to an element will affect the dimensions assigned to it (read: its width and height). That's pretty good, since implementing a correct box model used to be a lost cause for most web designer...]]></content:encoded>
<category>Web Style Sheets</category>
<guid isPermaLink="true">http://www.devarticles.com/c/a/Web-Style-Sheets/CSS3-Properties-Fixed-Heights-with-boxsizing/</guid>
</item>
<item><title>CSS3 Properties: Altering Strokes and 3D Effects</title>
<pubDate>Tue, 01 Nov 2011 08:00:04 -0400</pubDate>
<link>http://www.devarticles.com/c/a/Web-Style-Sheets/CSS3-Properties-Altering-Strokes-and-3D-Effects/</link>
		<description><![CDATA[If you think the only way to add appealing stroke effects to your web page elements is via Photoshop, think again. CSS3 includes a brand new property, called “text-stroke,” which permits you to render this popular effect without the complexities of an image editing application. Creating eye-catching text strokes with the property is a snap; you simply specify the size of the stroke in pixels along with its foreground color. This is all you need to do.]]></description>
		<content:encoded><![CDATA[Unfortunately, the  quot;text-stroke quot; property is only supported (at least at this moment) by webkit-based browsers, like Safari and Chrome. This shouldn't prevent you, however, from giving the property a try and seeing what it can do. With that idea in mind, in the first part of this two-part tutorial, I developed some examples which showed you how to use the property to decorate the H2 elements of a sample (X)HTML document with different types of stroke effects. The entire styling process was limited to specifying distinct stroke sizes and varying the corresponding foreground colors.  I...]]></content:encoded>
<category>Web Style Sheets</category>
<guid isPermaLink="true">http://www.devarticles.com/c/a/Web-Style-Sheets/CSS3-Properties-Altering-Strokes-and-3D-Effects/</guid>
</item>
<item><title>CSS3 Properties: Text-Stroke</title>
<pubDate>Mon, 31 Oct 2011 00:00:00 -0400</pubDate>
<link>http://www.devarticles.com/c/a/Web-Style-Sheets/CSS3-Properties-TextStroke/</link>
		<description><![CDATA[In this introductory part of a two-part tutorial, I provide you with a quick and practical guide to using the brand new “text-stroke” CSS3 property. This property permits you to create eye-catching text effects in a snap.]]></description>
		<content:encoded><![CDATA[Most programmers, if asked which features of CSS3 they consider the most engaging, would probably reply with something like native shadows, rounded corners or transitions. They'd be right, too, as these capabilities have generated the most hype in the last few months. They're also decently supported by most modern browsers, with the usual exception of Internet Explorer.  It's fair to note, however, that CSS3 comes bundled with other handy properties. These have been somewhat overlooked because they lack proper cross-browser implementation (at least at the time of this writing). A good example ...]]></content:encoded>
<category>Web Style Sheets</category>
<guid isPermaLink="true">http://www.devarticles.com/c/a/Web-Style-Sheets/CSS3-Properties-TextStroke/</guid>
</item>
<item><title>CSS3 Transitions: Width and Height Properties</title>
<pubDate>Wed, 12 Oct 2011 08:30:04 -0400</pubDate>
<link>http://www.devarticles.com/c/a/Web-Style-Sheets/CSS3-Transitions-Width-and-Height-Properties/</link>
		<description><![CDATA[If you enjoyed the first part of this two-part tutorial on using CSS transitions, you'll love the conclusion. You'll learn how to transition the  quot;width quot; and  quot;height quot; properties of a generic HTML container.]]></description>
		<content:encoded><![CDATA[If you think that the tasty mix of native shadows, juicy gradients and transformations that come with CSS3 are more than enough to satisfy your appetite for new stuff, take a bite of the specification's dessert cake. It includes a powerful transition module, which permits you to transition different properties of an HTML element without having to put a single foot in the field of JavaScript. Yummy! What's more, if you've read the introductory part of this tutorial, you're already familiar with the inner workings of CSS3 transitions. In that first installment I developed some easy examples, whi...]]></content:encoded>
<category>Web Style Sheets</category>
<guid isPermaLink="true">http://www.devarticles.com/c/a/Web-Style-Sheets/CSS3-Transitions-Width-and-Height-Properties/</guid>
</item>
<item><title>Creating a Drop Down Menu in CSS3</title>
<pubDate>Fri, 07 Oct 2011 08:30:04 -0400</pubDate>
<link>http://www.devarticles.com/c/a/Web-Style-Sheets/Creating-a-Drop-Down-Menu-in-CSS3/</link>
		<description><![CDATA[In this second part of a two-part series on CSS transitions, we'll build on the navigation bar we created last time to create an animated drop-down menu.]]></description>
		<content:encoded><![CDATA[If you want to add a dynamic touch to your website's user interface without having to deal with the hassles and complexities of JavaScript, then you should check out the  quot;transition quot; CSS3 property. In case its name doesn't ring any bells, the property permits you to create an animated transition between two states of an HTML element, pretty similar to what you can do with a movie clip in Flash. That sounds pretty interesting, right? Moreover, if you've already read the previous part of this tutorial, it's quite probably that you're now familiar with using the  quot;transition quot; p...]]></content:encoded>
<category>Web Style Sheets</category>
<guid isPermaLink="true">http://www.devarticles.com/c/a/Web-Style-Sheets/Creating-a-Drop-Down-Menu-in-CSS3/</guid>
</item>
</channel>
</rss>

