Create an Elegant Featured Content Slider for Wordpress

This featured content slider is based on The Coda Slider, a neat device used by Panic Software to display information about their Code product on their website (http://www.panic.com). This effect is beautiful, flexible, and often copied.

Related Tutorials

How to make a 'child theme' for WordPress. A pictorial introduction for beginners
Child themes are a very interesting feature of WordPress and surpisingly little-known, given their power and how easy they are to use. This is a detailed tutorial on child themes for WordPress, easy to follow, and with pictures illustrating each essential step.

Generated Content
Tutorial that will explain all about generated content and its relation with CSS. Generated content is a content created by a browser but not represents either by a markup or the content itself.

Expandable/Collapsible Content
Sometimes content itself, not presentation or navigation, brings a subtle usability challenge. When page text is unavoidably long and complex, the mass of material can lead to confusion through a loss of context.

Adding Generated Content in CSS2
It's a natural step in the development of CSS- the ability to use CSS to dynamically insert content onto the page that's part of an element's style.

Two level CSS Tabs menu
Building on a regular CSS Tabs Menu, this CSS menu supports second level content that can be associated with specific tabs. By giving both a tab and the desired sub content a class of "selected", the sub content becomes visible on the page.

Content Box
Learn to code and style a content box using HTML and CSS!

Using CSS To Center Content
Shows how to center any type of Web page content using CSS. Includes examples with explanations.

Make a Sprite Powered Menu
This tutorial will bring you through the process of building a slick menu using a single CSS sprite image. It's a simple, but elegant solution for most websites. This was one of the design strategies that first helped me to start using smarter markup. For those of you just getting introduced to this technique today, hopefully you'll have some similar results.

Slanted Divider Menu
It's an elegant CSS menu bar that uses a transparent "slanted" image to act as a divider and separate each menu item.

Build A Full-Width Centered Navigation Bar
Right around the time I was developing the code for the Super Simple Navigation Bar I wrote about a while back, a friend came to me with an interesting problem. He needed a horizontal navigation bar like the one I was creating, with the following changes: 1. The navigation bar background should stretch the full width of the screen (not just the width of the centered content area), but 2. The navigation elements themselves should still be centered over the content area.

HTML and CSS
The fastest route to true HTML/CSS mastery! Need to build a web site? Or update one? Or just create some effective new web content? Maybe you just need to update your skills, do the job better.Welcome. This tutorial for you.

Create Sidebars of Equal Height with Faux Columns
CSS can sometimes be a tricky business. There are times when even the simplest of layouts take some serious brainstorming! One of those frustrating times is when you want to create a series of columns of equal height, but the content in one column might be longer than the next. Heres where the Faux Column technique steps in, lets take a look at how this solution can make even the most complicated layout a breeze to code up .

Horizontal And Vertical Centering
I know many people have wondered how to center their content both horizontally and vertically but never managed to find a solution on how to do this using CSS. I have seen people use tables to accomplish this, in this tutorial I will show you how it can be done.

Making Modular Layout Systems
Jason Santa Maria details his approach to building a modular system for laying out pages with CSS. Devising a method for dealing with the presentational when presentation is all you've got, this can be a handy way to predictably tame content without becoming predictable.

From PSD to CSS/HTML in Easy Steps
Thanks for staying with us and here we now have part 3 of 4 in our series of how to turn a psd to css/html. In part 1 and part 2 of this article we created some of the major elements that we will need in order to hold our content.

CSS Basics
Well, the content of this tutorial includes What is CSS? How do I make my CSS file? What do I put into my CSS file? How do I put the CSS on my site?

Absolutely Positioned Ads
The best areas to place advertising can vary from page to page and it depends on the type of content and layout you have. But one element that all websites have in common is a header and it's the first thing that visitors usually see. For that reason, it's a great spot to place advertisements.If you're following the new trend to lay out your site with CSS, you're not using tables. So how do you position the ad in a specific area? Let's learn how to absolutely position an ad!

Removing the annoying bottom scrollbar in a browser
In a browser window you will have two ways of scrolling the webpage content that is produced, using a vertical scroll bar also known as the y-axis scrollbar and the horizontal scrollbar also known as the x-axis (Sort of like the axis on a typical two axis graph) Depending on how a website is designed you may or may not see it, and sometimes it has been forced to appear as maybe that certain website needs it to function properly. But for some of you out there you may think whats this annoying scrollbar doing here's and no matter how many widths you change it's determined to stay Well with this CSS Hack/Trick you will be able to hide that annoying horizontal scroll bar with a simple CSS code.

CSS Image Sprites Tutorial - Create Multiple Buttons with Graphic Rollovers
Image sprites can be a great way to create graphic rollovers and cut down on your bandiwdth. Here is an in depth, well illustrated tutorial on how to use them to create a navigation.

CSS Tutorial For Beginners
In this tutorial, you will learn how to: Create an external CSS file and link it to multiple HTML files; Embed and import a style sheet; Create inline style sheets; Use tap selector and class selector; Set up font sizes, colors, faces and styles; Set up background color and image; Set up margins, text-align and decoration; Create layers; Set up atributes of the table, and more...

Create button rollover effect
In this post I will show how to create easy cool rollover button effect which can be used for menu and navigations on your website.

Create custom form button
This tutorial explains how to create custom web form button using CSS and the background image

Redefine tags and create classes with Css
Use Css to manage different types of html tags and create classes for personal style sites. Before planning a complex project that leads to the creation of an entirely web site with CSS, it's important to understand how CSS work.

Creating Your First CSS Website
This is a great tutorial that will teach you everything that you have ever wanted to know about CSS. It's definitely worth a look. Using this step by step guide, you will learn from start to finish how to create a CSS style website. These detailed instructions will teach you everything you need to know to create a professional modern site!

Create an image pre-loader with CSS only
In this article, you will learn how to create an image pre-loader without Javascript.

Creating a Navigation Bar with CSS
This interesting tutorial in HTML and CSS will show you how to create a Navigation Bar. It takes 16 steps, but they are short and easy to read. The great photos and screenshots make each step very understandable. Thanks to CSS, you can format your links with any style you choose and and can align your links horizontally or vertically. Also, using CSS instead of images to create a rollover effect helps your page load faster.

Creating a website navigation bar with CSS
There are many ways to create a navigation bar, you can use a programs like Photoshop and then convert the image into code, but when I see people creating them in Photoshop I think why bother? When you can simply use CSS for the whole creation and code of it. In this tutorial I will show you how to create a very clean navigation bar that will use one line of XHTML and the rest will be CSS.

CSS Navigation Menus
Are you looking to create navigation menus using CSS? Are you looking to use different styles for your navigation menus? This tutorial will teach you how to create different menu styles for a main menu, submenu, and footer menu.

Coloured Scrollbars in IE5+
Learn how to create cloured scrollbars for Internet Explorer 5+.

CSS and Lists
How to add some style to your bullets and numbers that create those lovely <OL> and <UL> lists.

Table Borders
Learn how to create stylish 1px width borders on your tables .

Tableless forms
Learn by example how to create a tableless css form.

CSS Menu Style 1
This very nice and sweet tutorial will show you how to draw a very real egg crack to create the illusion of an egg-born infant.

DHTML
DHTML is any combination of Style Sheets, JavaScript, Layering, Positioning, and Page Division, at the 4.0 browser level, intended to create movement or user interactivity.

Scrollbars
Learn how to make customized scrollbars that add flavor to your page. Ever wonder how to create those cool colored scrollbars? They are very easy. I'll show you the code first and explain it all.

CSS horizontal menu
From this tutorial you will find out how simple is to create awesome horizontal menus for your website using CSS and HTML.

Star Rater
Create an interactive star rating system completely in CSS. As you mouseover the stars, they illuminate and allow you to submit your rating.

Pure CSS Popups
Learn how to create static-text popups purely through the power of CSS without using Javascript.

How To Create Depth And Nice 3D Ribbons
We learned how to realize a nice 3D ribbon and how to play with the drop shadow in Photoshop to simulate depth in a web design layout.

Create an Elegant Featured Content Slider for Wordpress

View Tutorial