Today we have a round up of useful CSS, Ajax, Tutorials, tools, Graphics, WordPress and articles we’ve found in July that is worth your time.

Photoshop and Illustrator Tutorials

1- 15 Photoshop Tutorials for Creating Product Advertisements

A list of 15 tutorials that will help you to create more attractive and eye-catching advertisements with Photoshop. Check out his tutorials.

2- How to create the Sony-Ericsson logo - Photoshop tutorial

This Photoshop tutorial will show you step by step how to create the Sony-Ericsson logo. Check out this post

3- Illustrator Make with Mesh

4- Hell of tutorial in Photoshop

An awesome tutorial teaching us how to create a 3D text with fire coming from the inside of the document like a hole. Check out this tutorial.

5- BOLT - Walt Disney Pictures

How to make a very interesting Walt Disney wallpaper. Check out this tutorial

6- Text Effect Quickie: Vibrant Pop Text Effect

In just a few moments, you can add a vibrant splash to your text that will really add some pop-culture flavor to your designs! Check out this post.

7- 3D Transform a Colorful Cube Design

In this tutorial, you’ll learn one way to create a design using repeating elements in a style inspired by Sean Hodge. Check out this tutorial

Ajax and Javascript

8- Fantastic News Ticker Newsvine-like using Mootools

This tutorial explains how to implement a News Ticker, with news vertical scrolling, using mootools. Check out this tutorial.

9- Wordpress Sidebar Turned Apple-Flashy Using jQuery UI

If you love the sidebar on the Apple Startpage, this tutorial will teach you how to create one in your WordPress theme using jQuery. Check out this tutorial.

10- Garage Door Style Menu (using Animated Background Images with jQuery)

Build a “Garage Door” style menu, where an image “slides up” to reveal another image behind it. Check out the demo

11- Create an apple style menu and improve it via jQuery

Learn how to create a leopard style menu from scratch using Photoshop, HTML, CSS and then improve it via jQuery. Check out the demo

12- Check All/None Checkboxes Using MooTools

There’s nothing worse than having to click every checkbox in a list. Why not allow users to click one item and every checkbox becomes checked? Here’s how to do just that with MooTools 1.2. Check out the demo

CSS and XHTML

13- Unit PNG Fix

Here’s another solution for PNG fix for IE6 from Unit Interactive Labs.

14- Navigation bar with tabs using CSS and sliding doors effect

A simple navigation bar with tabs using CSS and sliding doors effect. Check out this post.

15- Getting Started With CSS: 20 Awesome Introductory Tuts

Don’t stress out with overly-complicated tutorials - here are 20 awesome introductory tuts to CSS. Check out this post.

16- Web-Based Tools for Optimizing, Formatting and Checking CSS

Stylesheets can get large real quickly, both in terms of length and file size. To ensure that your web pages render correctly and quickly, here’s a compilation of some of the best free, web-based CSS optimizers/compressors, code formatters, and validation services. Check out this post.

17- How to make a list with rounded corners, auto width and hover effect

This tutorial will teach you how to create a list with rounded corners. Check out the demo here.

18- Mega Awesome CSS Resource List!

CSS Articles are posted every day on the web but the trouble is finding the quality ones. A well written article linking to CSS basics articles, writing good code, css frameworks, css layouts, navigation, forms, and of course cross browser tips Check out this amazing post

Design

19- How To Display Feedburner Subscriber Count In Text

I believe you’ve seen websites and blogs that uses the text-based Feedburner subscriber count instead of the chicklet. I hope you are not getting the idea the these guys update their feed count manually. Instead, it can be done easily with scripts, and the reason why you want to do is - it gives you total flexibility in terms of design, styling and display. Check out the Tutorial

20- 10 Great Eco Print Companies

Great article and resources about 10 great eco print companies. Check out this post

21- Improve Your Creative Process, Better Design, Quicker Approvals

Discussing ways that could improve your approval process and improve your designs significantly. Check out this post

22- The Best Time Of The Day To Do Things As A Designer

This article will go through the best time of the day to do things in relation to your mental state of mind which in turn will make you more productive as a designer. Check out this post

23- The Emergence of Gradient Grunge Design

Let’s take a look at some of the characteristics that make up Gradient Grunge design trend today. Check out the post

Freebies

24- Free High-Res Texture Pack: Grungy Watercolor

25- Free High-Res Texture Pack: The Anatomy of a *Really* Old Book

26- Free vector african animals set

27- Web Design Resource - 25 Sites to download Free Web Templates

Check out these 25 websites that offer quality website templates for free download (under creative-commons) - some of these sites give some stylish web designs that’s worth to download and have a look Check it out

28- Texture Brushes Set 2

29- Brush Stroke

Freelance

30- How To Cope With Rejection As A Freelancer

A well written article about positive thinking and coping with rejection as a freelance writer. Check out this post

31- Putting Twitter to Work For Your Freelance Writing Business

Twitter is some kind a strange marriage between a blogging platform and an instant messaging client. This posts highlights different ways you can use to put twitter for Your Freelance Writing Business. Check out this post

32- The creative brief: improve your project workflow

A creative brief is a questionnaire for your client, that covers all the information you are going to require to be able to go ahead and begin site architecture, mood boards & wire-framing (if necessary). One tool we use to capture this data is a creative briefing document. Check out this post

33- How to Make Your Design Project Successful Every Time

Tips for getting to the root of the your client’s business objective, so your design work can actively solve it. Check out this post

Free WordPress Themes

34- Free Theme: Outdoorsy Theme Now Available to Download

. The theme is called “outdoorsy” and it’s perfect for the individual who wants something “slightly” different from your usual standard free theme. This theme is very unique, and quite graphics heavy, which we are aware of. Check out the online demo

35- Tigerpress: A Free Wordpress Theme

Tigerpress Wordpress theme has 2 columns and provides a simple and very user-friendly Mac-alike interface (design based on Apple’s Tiger Mac OS X). Check it out

36- Free WordPress Theme: Old News Now Avaliable To Download

The design is simple 3 column layout with inspirations from scrap paper. This theme would be perfect for someone looking to make an easy to simple and easy to read blog. Check it out

WordPress

37- Amazing WordPress hacks part 2

Order Allow,Deny
Deny from all

Allow from all

The second part of Amazing WordPress hacks article, you will see how to set Post Expiration time and date in another way, Secure your wp-includes folder and how to make Wordpress Static HTML Template. Check out this article

38- 15 Awesome WordPress Resource Sites

There are tons of tutorial sites out there that provide tips, tricks, and resources to teach both beginner and advanced users more about WordPress. Here are 15 of the best WordPress resource sites on the ‘net. Check out this post.

39- How To Create WordPress Themes From Scratch Part 1

How to create a wordpress theme from scratch in these 3 parts of tutorial series. Covering Structuring, designing in Photoshop, slicing, coding into fully css based html, and finally wordpress implementation. Check out this Tutorial

40- How To Make Your Own Default Avatar in 5 Minutes

The avatars are a great way to make things more personal and create some variety between the different comments.This tutorial will teach you how to create your default avatar image for people who don’t have an avatar. Check out this Tutorial

Inspiration

41- 24 Design and Inspiration Websites

Collection of design and inspiration websites. Check out the post

42- Mixed Media Abstract Art

43- July’s Best : 15 CSS Design on CssLeak

New Launches

44- DesignMag

Steven Snell of VandelayDesign has launched another great website, DesignM.ag. A useful and resourceful site for the web design community. Starting with amazing posts offering great resources and tips for the design community. Check out the community news section and the design gallery.

45- Script & Style

Script & Style is going to be a user-driven stream of links, which anybody can submit to using the article submission form. There will also be exclusive tutorials from time to time. Check out this new site

Resources

46- 200+ Free Grunge Photoshop Brushes

Photoshop brushes are one of the most useful and often under-rated aspects of the program. Here is a collection of some of the hottest and newest free grunge Photoshop brushes from a variety of brush sites. Check out the Tutorial

47- 11 of the Highest User Ranked Free Fonts

There are an infinite amount of resources and lists for great free fonts. Here is a great list of 11 quality free fonts. Check out this post

48- 13 Most Unusual Search Engines You Should Remember

Every search engine listed here has some different way of searching or unusual presentation. Check out this post

49- 50 Absolutely Killer Flash Templates

Sit back and scroll through this amazing post, 50 Killer Flash templates. Check out this post

50- 42 Resources of Inspiration for Graphic Designers and Lovers of Design

Resources of Inspiration for Graphic Artists and Designers and Lovers of Design. Check out this post

Textures and Brushes

51- Oriental Photoshop Brushes And Vector Images For Mysterious Designs

This is a collection of oriental Photoshop brushes & vector images for more mysterious designs. The collection includes Chinese dragons, Japanese, Chinese & Arabic texts, people, houses, mosques & various figures. Check out this post

52- 350+ Brushes, Textures, and Fonts: Massive Hand Drawn Roundup

Interviews

53- Favorite Design-Related Sites of 21 Designers

DesignM.ag is a new site that aims to meet the needs of the web design community. Here is a collection of design-related sites that are visited frequently by other designers. Check out this post

54- An Interview With Paul Boag

An interesting interview with Paul Boag of Boagworld. Check out this interview

55- An Interview With Morgan Porter

They Don’t Teach Business in Design School: An Interview With Morgan Porter. Check out this interview

56- An interview with James White

SEO and Web Traffic

57- 17 fast and easy steps to more web traffic

Anyone who has ever looked at a successful blog, or website will tell you that the reason it is probably successful, is because of the content. You need to set your goals to improve your traffic. Check out this post

So we’ve decided to take a deep look at articles about CSS-based layouts and the result was a list of 40 tutorials, resources and best practices offering gorgeous and valid CSS-based Layouts.

You might be interested to check other CSS related posts:

• 9 Timeless 3 Column Layout Techniques
• The 7 CSS Hacks that we should use
• Using CSS to Do Anything: 50+ Creative Examples and Tutorials
• Using CSS to Fix Anything: 20+ Common Bugs and Fixes

CSS Layout Tutorials

1-Three column fixed layout structure using CSS- This post explains how to realize an HTML/CSS basic structure to design a simple three column fixed page layout with standard elements (logo top bar, navigation bar, text stage, center column for post categories and right column to insert Google AdSense 120X600 ads), to use in your projects.

2-Design page layout using CSS- How to design page’s layout for your site using a css file.

3-How To Create a Horizontally Scrolling Site- Different techniques for creating horizontally scrolling layouts.

• Live Example View it Here | Download

4-Super Simple Two Column Layout- Different techniques for creating horizontally scrolling layouts.

• Live Example View it Here | Download

5-Simple 2 column CSS layout- This is a tutorial on how to use CSS to create a simple two column layout. The layout consists of a header, a horizontal navigation bar, a main content column, a sidebar, and a footer. It is also horizontally centered in the browser window.

• Live Example View it Here

6-The holy grail layout - 3 columns and a lot less problems - This is a article discuss the three columns – two fixed-width sidebars and a fluid center column, all while keeping the markup clean and semantic, and most importantly well structured.

• Live Example View it Here

7-CSS Centering 101- How to center a fixed-width layout using CSS

<body>
  <div id="container">
    ...entire layout goes here...
  </div>
</body>

Using CSS, the following two rules force whatever is contained within #container to be centered:

body {
  text-align: center;
  }
#container {
  margin: 0 auto;
  width: xxxpx;
  text-align: left;
  }

8-Creating a CSS layout from scratch- This guide will attempt to take you step by step, through the process of creating a fully functioning CSS layout.

9-Multi-Column Layouts Climb Out of the Box- Multiple columns, equal column heights, fixed or liquid center column, clean markup, and CSS.

• Live Example View it Here

10- In search of the One True Layout- Total Layout Flexibility, Equal Height Columns, Vertical placement of elements across grids/columns. This article shows how to achieve each of these goals, and then how to combine them, creating what could be called the One True Layout

• Live Example View it Here

11-From PSD to HTML, Building a Set of Website Designs Step by Step-The entire process of getting from Photoshop to completed HTML.

• Live Example View it Here | Download files

12- 5 Tips for coding xhtml/css layouts- These are few tips that could help you out in the transition from table-based web design to standards compliant css based layouts.

13-Designing a CSS based template- This is the start of a step-by-step based tutorial about how to create a CSS based template page. This will be a tutorial consisting of several parts: part 1 covers the creation of the navigation buttons in Photoshop CS*, the 2nd part will be the creation of the background, next on the list is the header and layout of the page and the final part will be the implementation in CSS and XHTML.

• Download a QuickTime movie to see how this is done.

14-Breaking Out of the Box With CSS Layouts- If you understand how the grid works, you can fracture or abstract that grid to make your layout more dynamic and interesting. In achieving this goal (while supporting flexibility and maintainability), CSS designs have so much more to offer than table-based layouts. Jina Bolton explains how to acheive this goal.

15-Advanced CSS Layouts: Step by Step- The ultimate goal of this tutorial is to create a CSS layout that exactly resembles the WebReference.com layout made with tables and also behaves well with small window sizes and large fonts.

16-6 Keys to Understanding Modern CSS-based Layouts-
These are the six things that will help people understand CSS-based layouts: Box Model, Floated Columns, Sizing Using Ems, Image Replacement, Floated Navigation and Sprites.

17-Are you making these common blog layout mistakes?-
Discussing 4 mistakes in basic blog layout are all too common and all too easy to fix.

18-Page Layout-
A practical guide for positioing and floating elements in a CSS page layout.

• For Live Examples, you can check these layouts: Absolute Position within a relative box, two floated boxes and using a border to provide the background for a column.

19-Site in an Hour- Making Simple Work of Complex CSS Layouts

The best Layouts Resources

Most of these demonstrations can be used without asking for permission. However, some will require email approval first. Just check each site for the copyright requirements before use.

20-Sample CSS Page Layouts- Here are a range of CSS page layouts, including 2 column and 3 column layouts.

• For Live Examples, you can check these layouts: Liquid three column layout, Left aligned, set width and Liquid insanity.

21-The Perfect 3 Column Liquid Layout (Percentage widths)- No CSS hacks. SEO friendly. No Images. No JavaScript. Cross-browser & iPhone compatible.

• For Live Examples, you can check these layouts: Liquid three column layout, Left aligned, set width and Liquid insanity.

22-CSS TEMPLATES AND SAMPLES

• For Live Examples, you can check these layouts: 3 columns fixed
  centered, fixed Box totally
  centered and 3 columns, all
  dynamic.

23-IM Layouts- IM Layouts is a simple CSS layout system. IM Layouts offer full Grade-A browser support.

• For Live Examples, you can also check these layouts: The Holy Grail 3 Column Layout, The Classic Blog Layout and The Multi Column Layout.

24-CSSplay - CSS Layout Listing

• For Live Examples, you can check these layouts: Cross browser FIXED, Three columns and CSS Frame - The Holy Grill.

25-Layoutgala - Getting the maximum number of layouts based on the same markup, each with valid CSS and HTML, without hacks nor workaround and a good cross-browser compatibility. The result is a set of 40 layouts.

• For Live Examples, you can check these layouts: Three fixed Columns, Three percentage columns and Liquid, three columns, hybrid widths .

26-Glish- Many useful cross-browser CSS layout techniques

• For Live Examples, you can check these layouts: 3 columns, the holy grail, 2 columns, ALA style and 3 columns, all fluid .

27-Thenoodleincident- CSS Boxes going from a simple single box, through 3 columns with a full width top box, all with variations.

28-The Layout Reservoir- Many useful CSS layout techniques

• For Live Examples, you can check these layouts: 2 columns - left menu, 3 columns - flanking menus and Auto-width Margins .

29-The only CSS layout you need- In this article you are presented to ten different layouts with example pages, all based on the same HTML.

• For Live Examples, you can check these layouts: Three column CSS layout - left and right menu, Two column CSS layout - top and left menu and Three column CSS fluid layout: 100% width.

30-Yet Another Multicolumn Layout- is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.

• Download YAML here.

31-Liquid Designs- Liquid Designs is a gallery of websites designed with liquid layouts using XHTML and CSS

Best Practices

Also if you are looking for inspiration for CSS-based layout designs, you will find a nice collection of websites below. These sites show how css layouts can be applied on various type of sites. Check out how the layout can be divided into 2 columns, 3 columns, a mixture of narrow and wide columns.

32-Helldesign

33-Silverbackapp

34-OS communications informatiques

35-Rockatee

136-Darrenhoyt

37-Makebetterwebsites

38-Elitetheme

39-Studio7designs

40-Brightcreative

Templates.com is a powerful resource for those who are looking for different design products. Everything a designer might possibly need is there– 3D models, illustrations and website templates.

So what are you waiting for, just head over there and leave a message in the comments section in this blog post on Blog.Templates.com.

You might be interested to check other deviantART related posts:

• 40+ Extremely Beautiful Icon Sets Hand-picked from deviantART
• deviantART: 30+ Breathtaking Artworks

1-Bobel

2-Tramyad.ttf

3-Dreamforge Classic

4-Eight One

5-Cash Font

6-Techno Funk font

7-Tondo

8-Special-K

9-Quarters Typeface in .eps format.

10-PUPPETEER

11-Incinerator

12-Sliced AB

13-Aquanaut

14-Simplistic Font

15-Skirules-sans2.ttf

16-Fracta font family

17-Ugloosy.ttf

18-House M.D.

19-PlagueDeath.ttf

20-Homeboots

21-Trashco.ttf

22-Advent

23-SMUDGERS

24-MURDER OF MAYDAY

25-CRANBERRY BLUES

26-AvantGarde ALT

27-Sorry Luthi V1.0

28-TYPORM01R

29-Oktober

30-GUBBLEBUM

31-Scene II -Machiavelli

32-Gothique Cursive V.II

33-Avee Black

34-Ultravioleta

35-Ogive Curvature

36-Digital Ninja

37-Squair

38-Surrounding

39-Armalite Rifle

40-CFB

41-Loserboi Grunge

You might be interested to check other Illustrator related posts:

• 53 Killer Photoshop Illustrator Effects and Tutorials
• 30+ Outstanding Character Illustrations in Modern Web Design
• deviantART: 30+ Breathtaking Artworks
• Masters of Graphic Design and Illustration: 25+ Interviews

Tutorials

1-From Sketch to Vector Illustration- A technique of vector illustrating that takes a little bit more skill is starting with a hand drawn sketches.This tutorial will focus on that technique of vector illustrating.

2-Craft a Dramatic Vector Landscape Environment- This tutorial will show the intermediate Adobe Illustrator artist how to make a dramatic landscape environment.

3-Draw Your Self Portrait- Learn how to transform your photo into your vector self portrait. You’ll review techniques for tracing photos.

4-Complex Circular Design Techniques- This tutorial is split into 2 sections: The Rotate Tool, and a Custom Pattern Brush.

5-Creating trees in Illustrator- Green is in vogue and clients everywhere want natural imagery in their promotional material. Ben the Illustrator shows you how to create a fresh-looking tree.

6-Illustrator Tutorial: Figure Shading-
Drawing the human body is never easy, but shading it and giving it depth as well can be a real headache. A nice tutorial on figure shading by Russell Tate.

7-Texture- When working in Illustrator it’s nice to add textures that weren’t computer generated (like gradients or pattern fills). This is a step-by-step instructions on how you can create your own hand-made texture effects using a Chinagraph Pencil on simple Watercolor Paper.

8-Realistic Curtain- How to create a realistic curtain using the gradient mesh.

9-Wood Grain- Here is a quick way to create wood grain effect using the warp tools in illustrator.

10-Simple organic shapes the Illustrator way- Here is a nice way to create wood grain effect using the warp tools in illustrator.

11-Free Watercolor Brushes and Tutorial- How to create a couple watercolor brushes, and at the end of the tutorial you can download some Free Vectips Watercolor Brushes!

12-3D Logo Tutorial- In this Tutorial you will start with the making of a logo shape, going to rough 3D, and finishing it in Photoshop.

13-How To Create Your Own Vector Cartoon Character- Follow this tutorial to create your own vector character; Freddy the Fish.

14-Vector Polishing Techniques- This tutorial includes 9 Photoshop techniques that will show you how to add more depth, color, contrast, and texture into your vector art.

15-Chinese Bamboo- This tutorial will show you how to illustrate Chinese bamboo with Illustrator Symbol Sprayer and Mesh Tool.

16-ILLUSTRATE IMAGE INTO VECTOR- Basically, it is quite simple to illustrate an animate rather than a real object. Its color tone is simple and easy to apply. Yhis tutorial will teach you how to illustrate an image into vector.

17-Digital Art Tutorial - An old tutorial but worth every minute you spend on it.

18-Creating a Crazy Cool Logo

19-Create a Designer Font- How to break apart a font into vector bits that we can manipulate. This is a great way to add your style to a font or to make your own!

20-Swirl Mania in Illustrator and Photoshop- There are lots of ways to create swirls in Illustrator, in this tutorial you will learn 4 ways to create swirls, and by mixing them you will learn some very powerful techniques that will allow you to easily make tons of different styles of swirls and crazy sperm vectors.

21-Leather Stylin’ in Illustrator- How to create a quasi-realistic leather patch logo complete with buttons and stitching.

22-Create a Disco Environment with Twirl Tool, Crystalize , and Envelope Tool- In this tutorial you will see how to use envelope tool to create a Disco Ball , You will also utilize Twirl and Crystallize tool to understand its options .

23-Design Float Circle Icon- This tutorial will teach you how to create a Designer float icon using adobe Illustrator that will match with the awesome fasticon set.

24-Using Illustrator’s Mesh Tool as Nature Intended- How to use the Mesh tool to simulate nature’s way of colorizing things—in this case, a fallen leaf.

25-Vectoring Hair

26- Symmetrical Illustration: Thug Bunny!- This tutorial will go through the method of using symmetry in your artwork. Learn how to do half the work but still get the full benefit from your artwork.

27-Illustrator Shapes Tutorial - This is an Adobe Illustrator Tutorial on How to Make Shapes

Neat Tips & Tricks

28-Illustrator: The Tilde Trick-Holding down the tilde key, (the little squiggly line above the tab key, left of the number 1 on your keyboard.) while using a drawing tool will cause Illustrator to repeat the shape rapidly as you move your mouse.

29-illustrator Pucker and Bloat Effect- How to use the Pucker & Bloat Effect.

30-Live Trace- This article will show you how to use Illustrator’s Live Trace tool. Live Trace will allow you to completely convert photographs and other raster graphics into Vector graphics!

31-Save Time With Save Selection- Selecting multiple objects in Illustrator is essential to productivity. One of the best selection features in Illustrator is Save Selection.

32-Vector Effects- How to mix a photo with vector elements using Photoshop and Illustrator.

33-Blending Gradients in Illustrator- How do you make a gradient bend to the shape you are creating? The answer is in Illustrator’s under-used Blend tool. This tutorial will show you how.

34-Smart Scale object or Pattern- Do you know that you can scale patterns swatches by using smart scale?

35-Drawing with the pen tool- People often find it hard to get used to the pen tool in illustrator. Remember these three things and you will be rollin’ in no time.

36-A Gradient Brush?- Making a “gradient brushstroke,” that is, a gradient that will follow a path, rather than fill a shape.

Freebies

37-Vector Freebie: Illustrator Icons- Here are some free vector Illustrator icons! There are eight of the most-used Adobe Illustrator tools inside: both arrows, pencil, magnifying glass, hand, pen, brush, and eyedropper.

38-Sandwich Board Whitey & Wheaty

39-Colorful Illustration- Very beautiful dream like illustration in vector .eps format

40-The Butterfly Patch- A Sample Patch from one of the Tool Boxes available at aivault.

41-Free Vector Art - Spring Flowers

Best Practices

42-Midnight Terror by Matheus Castro

43-Madam Eninette

44-Bulgarian Jazz Festival 2008

45-He aint showing up hun

46-Bently Stamp

47-Lolly Zombification

48-Communion by Cristiano Siqueira

49-Dior Vector

50-The Swallowers of Pretty Things

51-Naketano

52-Fruit Tree

53-Overgrown

54-Drug Free Zone

55-Playstation 3

Illustrators Portfolios

56-James White

57-Eendar

58-Cris Vector

59-Maciej Mizer

60-Kacper Spala

61-Andrey Gordeev

Further Illustrator Portfolios

• Behance Network
• Cpluv
• 30 Insane Freelance Illustrator Portfolios Part 1 and 30 Insane Freelance Illustrator Portfolios Part 2.

View Demo | Download Files

WooThemes.com is the new face for Premium WordPress themes that we would only release news-style themes. WooThemes however released a bunch of different types of themes for different niche markets & needs.

WooThemes, is offering a new subscription-based club membership system for all WooThemes customers. Promising to release a minimum of one theme a month.

At WooThemes you will find some cutting edge WordPress templates. What i liked most is the ProudFolio theme, designed by Elliot Jay Stocks. Also Adii has designed another clean theme Vibrantcms with a very slick color palette.

You might be interested to check other CSS related posts :

• Using CSS to Fix Anything: 20+ Common Bugs and Fixes
• Using CSS to Do Anything: 50+ Creative Examples and Tutorials
• 63 Impressive Website Background-Images: Trends, Resources and Tutorials

Different Uses of Styled Lists

1-Custom Select Box

<dl class="dropdown">
<dt id="two-ddheader" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)" class="module">Recent Archives</dt>

<dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
<ul>
	<li><a href='http://www.darrenhoyt.com/2008/06/' title='June 2008'>June 2008</a></li>
	<li><a href='http://www.darrenhoyt.com/2008/05/' title='May 2008'>May 2008</a></li>
	<li><a href='http://www.darrenhoyt.com/2008/04/' title='April 2008'>April 2008</a></li>
</ul>
</dd>
</dl>

2-Code Blocks

<div id="portfolio">
<ul id="gallery">
<li><img src="/{client}/before.jpg" /></li>
<li><img src="/{client}/sketch.jpg" /></li>
<li><img src="/{client}/wireframe.jpg" /></li>
<li><img src="/{client}/after.jpg" /></li>
</ul>
<img id="frame" width="580" height="415" src="frame.png" />
<ul id="sequence">
<li id="before"><a href="/{client}/before.jpg"><a></li>
<li id="sketch"><a href="/{client}/sketch.jpg"><a></li>
<li id="wireframe"><a href="/{client}/wireframe.jpg"><a></li>
<li id="after"><a href="/{client}/after.jpg"><a></li>
</ul>
<a id="launch" rel="external" href="{url}">
<img src="launch.png" alt="Launch this site" />
</a>
</div>

3-Tabs

<ul id="home_button">
  <li><a href="javascript:void(0)" onMouseOver="showContent('home_welcome_content','home_button_welcome')" id="home_button_welcome" class="on">Welcome</a></li>
  <!-- <li><a href="javascript:void(0)" onMouseOver="showContent('home_mymonterey_content','home_button_mymonterey')" id="home_button_mymonterey">My Monterey</a></li> -->
  <li><a href="javascript:void(0)" onMouseOver="showContent('home_visitors_content','home_button_visitors')" id="home_button_visitors">Visitor's Guide</a></li>
  <li><a href="javascript:void(0)" onMouseOver="showContent('home_multimedia_content','home_button_multimedia')" id="home_button_multimedia">Multimedia Gallery</a></li>
  <!-- <li><a href="javascript:void(0)" onMouseOver="showContent('home_travelblog_content','home_button_travel')" id="home_button_travel">Travel Blog</a></li> -->
  <li><a href="javascript:void(0)" onMouseOver="showContent('home_weather_content','home_button_weather')" id="home_button_weather">Weather</a></li>
  <li><a href="javascript:void(0)" onMouseOver="showContent('home_surf_content','home_button_surf')" id="home_button_surf">Surf Report</a></li>
</ul>

4-Post’s Information

<ul>
  <li class="dateposted">Posted on: 19th November 2006</li>
  <li>Posted by: <a href="http://ifelse.co.uk">Phu</a></li>
  <li>Number of comments: <a href="http://ifelse.co.uk/archives/2006/11/19/cssedit-2-review/#comments">29</a></li>
  <li><a href="http://ifelse.co.uk/archives/2006/11/19/cssedit-2-review/#commentform">Add a comment</a></li>
</ul>

5-Popular Posts Block

6-Blog’s Comment

7-CSS Galleries

8-Text Blocks

Tutorials and Examples

1-Nested lists used to create a simple folder metaphore- A rough and ready example showing how to make a folder analalogy using a nested list.

2-Mini Slide Navigation

3-html vs css pt2/navigation lists- This article will take a closer look at navigation lists and how an extra span + optional extra class can make our css work easier.

 /* html code */  <li><a class="item"> nav item </a></li>  <li class="active"><span class="item"> nav item </span></li>  /* css code */  li .item {display:block; padding:0.5em;}  /* css code alternative */  li a, li span {display:block; padding:0.5em;}

4-Floating next and back buttons using lists- For this exercise, you want to float a “back” button to the left and a “next” button to the right. You could use two divs, but to make it simpler you will use two list items.

 /* html code */  <li><a class="item"> nav item </a></li>  <li class="active"><span class="item"> nav item </span></li>  /* css code */  li .item {display:block; padding:0.5em;}  /* css code alternative */  li a, li span {display:block; padding:0.5em;}

5-Safe Lists Next to Left-Floated Elements- There are lots of different methods to format nice html lists. But are those methods reliable in all contexts and in all browsers? In this article, we’ll have a look at a simple context: a list with some left-floated element next to it.

6-Style Your Ordered List- Here is a quick CSS tutorial on how you can use the ordered list (ol) and paragraph (p) element to design a stylish numbered list.

7-Centering List Items Horizontally- Slightly Trickier Than You Might Think

8-Advanced CSS Menu Trick- Instead of simply altering the state of the navigation item the user is currently rolling over, we want to alter the non navigation items as well. This will help focus the users attention on the item they have selected on, and create a new look and feel for the site overall.

9-A Stripe of List Style Inspiration- Instead of simply altering the state of the navigation item the user is currently rolling over, we want to alter the non navigation items as well. This will help focus the users attention on the item they have selected on, and create a new look and feel for the site overall.

Further Reading on CSS-Styled Lists

• Listutorial
• List Indent by Eric Meyer
• CSS Design: Taming Lists
• Style Unordered Lists

Today we have a round up of useful CSS, Ajax, Tutorials, tools, Graphics, WordPress and articles we’ve found in June that is worth your time.

Photoshop and Illustrator Tutorials

1- Add a Fresh Splash to your Design

In this tutorial, you will learn several techniques for enhancing a basic banner design for a product or service. These techniques can be employed to add a fresh splash to many of your designs! Checkout the Tutorial

2- 10 Great Sites for GIMP Tutorials and Guides

A list of 10 fantastic sites for learning and using the popular image editing software program “GIMP”. Checkout this post

3- Trendy Geometric Lines Design Tutorial

Starting with the design application of Adobe Illustrator create a group of vector based geometric lines at dynamic 45 degree angles, then follow the walkthrough to rough them up with brush textures in Adobe Photoshop resulting in a cool and trendy design style. Checkout this Tutorial

4- How To Make An Awesome Grungy Paper Texture From Scratch

Free High-Res Grungy Paper Textures tutorial. Checkout this tutorial.

5- Photoshop: Hand Drawn Design

Here is a quick tutorial to show you how to create a hand drawn design in Photoshop using the blending mode and alpha channel. Checkout this tutorial.

6- Sleek Phone Advertisement

This tutorial will show you guys how to make a very interesting and sleek Phone Advertising wallpaper. Checkout this tutorial.

7- Create an Energy Drink Ad Design