1. jQuery Sequential List

This tutorial will show you how to use jQuery to add a sequent of CSS classes to create a graphical list. The second example in this tutorial will show you how to add a comment counter to a comment list using jQuery’s prepend feature. The code is very simple, the following example shows how you can add a counter number to a comment list.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){

  $("#commentlist li").each(function (i) {
    i = i 1;
    $(this).prepend('<span class="commentnumber"> #' i '</span>');
   });

});
</script>

To get this markup:

<ol id="commentlist">
	<li><span class="commentnumber"> #1</span>
		...
	</li>
	<li><span class="commentnumber"> #2</span>
		...
	</li>
	<li><span class="commentnumber"> #3</span>
		...
	</li>
</ol>

Check out the demo here

2. jQuery Corners

This jQuery plugin will simple allow you to create rounded corner for your design elements including forms or anchor links without using images or obstructive markup.

Once jQuery and jQuery.corners scripts are loaded, rounding corners is easy.

<div style="background-color:#acc; padding:5px" class="rounded">
  Simple Example
</div>
<script>$(document).ready( function(){
  $('.rounded').corners();
});</script>

Check out the demo here

3. jQuery Checkbox

This jQuery plugin will simple skin checkboxes and radio buttons in a nice way.

Check out the demo here

4. Styling Buttons and Toolbars with the jQuery UI CSS Framework

This tutorial demonstrates how to incorporate the power of jQuery UI CSS framework classes in a custom widget to create and style buttons and toolbars.

Creating a basic button is very simple with the jQuery UI CSS framework and styling it is really easy. All you need to do is add the default “clickable” state by assigning the class ui-state-default. We also want these to have rounded corners, so we added the optional ui-corner-all framework class which adds CSS3 corner-radius properties to all corners without the need for any images or extra markup.

<button class="ui-state-default ui-corner-all" type="submit">Button</button>
<a href="#" class="ui-state-default ui-corner-all">Link</a>

Check out the demo here

5. Create A Colorful Sitemap With jQuery

In this article, Chris Coyier teaches us how to build a visually interesting sitemap that makes the hierarchy clearer through the use of color. The idea here is, when the mouse cursor hovers over a list, that list will brighten up a bit and fade to a unique color. When the mouse cursor is removed, the list will return to its original color.

Check out the demo here

6. Style Author Comments Differently with jQuery

Now you want to apply the custom styling applied to comments left by the author on blogger. The script will loop through all of the comments on the page, if the member link on the current comment matches the member link in the profile page on your blog, then it must be an author comment. The script will then apply an additional class to the comment, allowing you to style it separately.

Check out the demo here

7. asmSelect – Alternative Select Multiple

A progressive enhancement to <select multiple> form elements which is easier for users to understand and interact with than regular <select multiple> form elements. Also, it doesn’t require user to Ctrl-Click or Shift-Click multiple elements. Instead users of your form can add or remove elements individually, without risk of losing those that have already been selected.

Check out the demo here

8. Flexgrid

A lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source to load the content. Features include: Resizable columns, Resizable height, Sortable column headers, Cool theme, Can convert an ordinary table, Paging, Show/hide columns and more.

Check out the demo here

9. MaxLength

This plugin makes it easy to apply a "maxlength" attribute to custom elements for example a <textarea>. It also gives you the possibility to add a nice character counter under the element that shows the user how many chars he/she has left before the maxlength is reached, and/or an alert message.

To use this on a simple text area, all you have to do is:

<script type="text/javascript">
  $(document).ready(function(){
    $('#textarea_1_1').maxlength();
  });
</script>

Check out the demo here

10. ClockPick

ClockPick is a timepicker plugin, enabling users to enter a time value into a form field. Using a unique popup div UI, ClockPick gets the job done in about 1/5 the time it takes to enter a time value using a traditional select menu UI.

Check out the demo here

11. jQuery (mb)Menu 1.5

This is a powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way! You can add as many submenus as you want; if your submenu or menu is not declared in the page, the component’ll get it via ajax calling the template page with the id of the menu you need (the value of “menu” attribute) the ajax page should return a well formatted code as the example below for the menu voices code.

Check out the demo here

12. (mb)ContainersPlus 1.0

This is a useful plug in to build full featured and full skinnable containers. The container can be set to draggable, resizable, collapsable and minimizable. The container can be set to draggable and resizable by adding “draggable” and/or “resizable” to the class attribute; there is a custom attribute called buttons that accept: i [iconize], m [minimize], c [close] as value to add buttons to the button-bar. You can also add a left top corner icon by adding the attribute “icon” with the icon path as value.

Check out the demo here

13. Auto line-height for flexible layouts

Adjusts the line-height of a container (such as a div) in proportion to it’s width, relative to the font size.

Check out the demo here

14. UI.Layout

This plugin was inspired by the extJS border-layout, and recreates that functionality as a jQuery plug-in. The UI.Layout plug-in can create any UI look you want – from simple headers or sidebars, to a complex application with toolbars, menus, help-panels, status bars, sub-forms, etc.

Check out the demo here

15. Colorize

Colorize is a jQuery plugin to add background color to alternate table rows, highlight a row/column on mouse over, and colorize a row/column when you click your mouse button over it. You can colorize as many table rows as you want. A repeat mouse click reverts the row to the original background color.

Check out the demo here

16. jQuery 3 State Switch Plugin

jQuery 3 State Switch Plugin(J3SSW) is a jQuery Plugin that expresses the selection and some states of list item using radio button and checkbox at the same time. The applications of J3SSW includes some interfaces for sort key or filter key of any search results.

Check out the demo here

17. Animated Hover

Animated Hover provides animated transitions between hovered items for any jQuery project. Requires jQuery 1.2+ and Dimensions

Check out the demo here

18. jQuery Feed Menu

It’s nice to offer users an alternate way to get at your feeds, here is an easy and standard way of offering your feeds via a nice, compact menu, just like in the location bar, but on your site.

Check out the demo here

19. jquery Hover Sub Tag Cloud

Here is a new way to create your tag cloud Using jQuery and reduce its size, so my demo will introduce “Hover Sub Tags” under each main Tag, for example if you have Ajax as a tag, you can have jquery, mootools, etc… as sub-tags. A Sub Tag Cloud will appear when hovering over the main Tag links.

Check out the demo here

20. jQuery ListNav Plugin

This jQuery plugin supplies an easy way to unobtrusively add a letter-based navigation widget to any UL or OL list. An easily stylable (via CSS) nav bar appears above the list, showing the user the letters A-through-Z. Clicking one of the letters filters the list to show only the items in the list that start with that letter. Hovering over a letter (optionally) shows a count above the letter, indicating how many items will be displayed if that letter is clicked. Other options give you control over the basic functionality.

Check out the demo here

Go to Source

	#image		 { opacity: 0.8;}
	#image:hover { opacity: 1.0; }

Sorry for the lack of posts, I have been working on my new site, TheDesignersYard.com, which I will post screen shots and features very shortly!

Go to Source

1. Many of us may be familiar with you because of your book: “PHP for Absolute Beginners.” For those who are unfamiliar with you, can you tell us a bit about yourself and your life?

In a nutshell, I’m a PHP developer based out of Missoula, MT. I run a company called Ennui Design that specializes in small business and individual website development. I’m also into front-end development, which I do primarily using jQuery.

I’m 24, and I’ve been working in web development for about six years, and I’ve been developing full-time for about a year and a half now. I’m completely self-taught, so I owe my career to the blogosphere and the great folks who are always helping out on forums like W3schools and the like.

I also try to write, and I’ve written a couple articles around the web for sites like Smashing Magazine, CSS Tricks, and Nettuts+, as well as for my own blog on Ennui Design. Earlier this year, I got the opportunity to write a book for Apress publishing that came out in October, called “PHP for Absolute Beginners”, and I’m currently working on a new title for Apress called “Pro PHP and jQuery.”

2. How did you get started in web development?

I got started in web development out of necessity. When I was 18 or 19, I played in a band, and we needed a website. When we started looking at pricing, we realized there was no way we could afford to have one built for us. So I told the rest of the guys, “Well, I think I can figure this out.”

I got on w3schools (after searching “how to build a website” on Google) and worked through the HTML course, after which I was sure I was an expert web designer. So I built this awful, table-based website, complete with iframes and all inline styling.

When I got done with it, I thought to myself, “Well, that looks terrible.” So I built it again. And again. About fifteen or so rebuilds later, I had learned a little about CSS and JavaScript; the sites started looking a bit better and I felt fairly comfortable building them.

Right around that same time, a couple friends of mine needed websites, and I offered to build them for free. I did, and they were both happy with them, but I realized that maintenance on their sites was really cumbersome. That’s when I got into PHP, because I needed a solution that would allow for easier maintenance.

Since I didn’t know anything about content management systems or that there were existing CMSs available, I ended up rolling my own. It was full of holes, clunky, and feature-poor, but it did the trick, and I loved building it. I spent 14 hours a day in my favorite coffee shop tweaking it and rebuilding it.

After my two friends’ sites launched, I received a call from my first real client, and realized I could actually make money building websites. I spent four years trying to get good enough to build sites full time, and I finally hit that goal in Fall 2008, when I quit my day job at a FedEx Kinko’s to work full-time on Ennui Design projects.

3. What is the best way to learn PHP – and how was your experience writing this book?

Learning PHP is like learning any language. Yeah, you can do a bunch of exercises that don’t have real world application (”Repeat after me: ‘Cette espadon est glissante! This swordfish is slippery!’”), but that only helps you memorize concepts. I think you have to really immerse yourself in real world uses of the language so that you can see how and why it’s used.

That’s the approach I took when writing “PHP for Absolute Beginners.” We cover the basic concepts, then immediately build a real-world project (a very basic content management system).

Writing the book was great for me, because it forced me to defend my approach in development. I had a technical, editorial, and project reviewer, all keeping an eye on how everything was put together, which put the pressure on to do everything the right way, with no shortcuts. Learning to just do it properly the first time was a good lesson in patience for me. It will also help me when I’m working on future projects with collaborators, because I now have a better grip on writing self-descriptive code, including better inline documentation, and justifying my programming choices with concrete reasoning.

4. Recently, you co-wrote an 8-Part series called “Creating a Web App from Scratch” with Chris Coyier on CSS-Tricks>. What was that like?

Chris Coyier is the man, hands-down. I’m a workaholic, but that guy manages to make me feel like a slacker with the amount of work he produces consistently.
The tutorial series was a great way to force myself back into blogging (because I’ve been slacking lately), and an opportunity to give another real-world example to beginner to intermediate level developers. It’s one thing to explain a concept, but an entirely different beast when you’re attempting to explain a concept in the context of a real-life production site.

The comments we received were really helpful, because it showed us pieces of the app that we hadn’t thought of, like some security holes that we hadn’t considered and features that would really enhance the app.

That series was one of my favorite tutorials I’ve ever worked on, and I hope to put more of them together along those lines in the future.

5. Can you provide us with any information on your upcoming book, “Pro PHP and jQuery”?

Pro PHP and jQuery is going to be for intermediate to advanced PHP developers who want to become familiar with jQuery’s capabilities. It’s going to cover the creation of an AJAX-powered events calendar that’ll have a bunch of features like tooltips, file uploads, drag-n-drop ordering of events and photos, and other useful concepts.

AJAX is really powerful, and it allows developers to create web apps that feel like desktop apps (because they don’t have to reload all the time, etc.). The rise of jQuery and similar JavaScript libraries has made all that AJAX functionality really accessible to developers, and my goal with Pro PHP and jQuery is to bring the reader up to speed with building top-notch web apps.

6. You are owner of Ennui Design, which offers custom web development. What’s your day-to-day like?

As I mentioned earlier, Ennui Design is the company name under which I do my freelance work. I’ve tried to become a one-man army of sorts by offering top-to-bottom site development, from art and design to customized content management systems. Recently I’ve started to take on clients who need custom applications, and that’s been a lot of fun.

As of this month, I’m expanding Ennui Design and trying to build a network of fellow freelancers to help me handle my client load. I just brought on Drew Douglass recently, and I’m really excited to be working with him. I’m still looking for a front-end designer to help me with artwork and PSD-to-XHTML conversion, so if you know anyone…

7-What is your favorite web application framework and why?

Because I never knew that web application frameworks existed, I never learned any of them. I subscribe to the concept of multi-tiered architecture, and I’ve even written an article about it for Nettuts+.

I’ve looked into other patterns, like MVC, and I think they’re great, but I try not to get bogged down in programming dogma; if it’s easy to read, easy to maintain, and DRY for the most part, I consider it to be good code.

8. Can you tell us a bit about your personal projects?

Currently, I’m working on getting my CMS ready for an open source release with Drew Douglass and a few other friends. I’m also planning on developing a version 2.0 of Colored Lists with Chris Coyier (the app we built in our 8-part “Building a Web App from Scratch” series).I’ve also got a few jQuery plugins that I want to tidy up and release sometime in the future.

I recently decided to try my hand at product design as well and launched an apparel company called Humblecock with a couple close friends. We wanted high-quality, ultra-comfortable shirts for ourselves, and we decided that the best way to get them was to make them ourselves. It’s a brand new adventure, and I’m having a blast with it so far. It was one of my favorite websites to design, and it was really cool to design physical products.

My blog, unfortunately, has fallen victim to my overloaded project schedule. Between my client load and deadlines with my publisher, I’ve had very little free time. However, with the addition of Drew and (hopefully) other freelancers to the Ennui Design network, I’m hoping to have more time to blog again.

9. What are your favorite online resources to stay up to date on the web development industry?

I try to keep up with as many blogs as possible, really. If I’ve got a spare moment I’ll try and power-read as many articles as I can to see if any new developments are directly affecting any of the work I’m doing. Some of the sites I frequent are:

• Nettuts+
• Ajaxian
• David Walsh’s Blog
• Jonathan Snook’s blog
• ThemeForest

Chris Shiflett also has a lot of good articles on security in his back catalog that I use for reference regularly.

10. What’s your opinion on WordPress and Drupal?

I’ve barely used either, so I don’t think I’m really qualified to answer this question.

11. When working, how do you concentrate while writing code, and what is your favorite code editor?

I generally work at my home desk when I’m doing any kind of writing or heavy development. However, when I need a change of atmosphere, I’m known to haunt a local coffee shop (I actually spent so much time there that they had me build their website ).

I use XAMPP, Eclipse, and Firefox (with Firebug/FirePHP/Web Developer Toolbar) for the majority of my development. Eclipse is Java-based, but it’s also open source and has support for everything I’ve ever needed. I’ve briefly played with a few other IDEs, but it would take a pretty solid argument to convince me to switch at this point.

12. What do you think the future holds for PHP?

In the immediate future, it holds great news like anonymous functions and namespaces (with the adoption of PHP 5.3). I can’t wait until there’s wide enough support by the hosting companies to start using them.

On a less specific level, I think PHP and other “web” languages are going to start becoming more and more relevant for serious development. The whole world is moving online, and web apps are beginning to matter just as much as native apps, if not more so. I’m excited to see what’s next for PHP.

13. Any code pet peeves?

Personally, I hate to see code that sprawls. It really bothers me when code is written as a long string of actions instead of chunked up into small functions or methods that handle one action. That lack of separation leads to incredibly bloated, difficult to maintain files, and there tends to be a lot of repetitive code. It just begs for errors when you have two chunks of code that do the exact same thing.

In general, I just wish everyone would code like there was someone else working with you that needs to understand what the hell you’re talking about. The arrogance that leads someone to think, “If you’re not smart enough to understand how my code works, you shouldn’t be in my source code,” really bothers me; I think a better question is, “If you’re not smart enough to write clear code that any functional developer can understand, you shouldn’t be talking down to anyone.”

14. What type of music do you like? Any hobbies?

I grew up on country music, then started listening to Top 40 stuff as I got a bit older. I got introduced to metal, then punk and hardcore, then hip-hop, then folk. I found some good in all of it, but I listen to mostly folk/alternative and hip-hop now. I spend an inordinate amount of time listening to music, and I track it all through Last.fm.

I stay pretty busy, so I don’t have too many hobbies, but I make an effort to keep them non-geeky (I mean, at some point I’m going to need to impress the ladies, right?). I lift weights a few times a week, and I like cooking. I’m also a big time beer lover, and I love finding new microbrews and specialty beers (especially stouts and porters). I brew my own beer every month or two for fun, which is way more fun than it sounds. Plus, there’s nothing better than drinking a beer you bottled yourself. I try to travel as much as possible, also. I’m planning a couple road trips that pass by some of my favorite breweries in the spring, and I’m hoping to get out of the country next fall and hang out in Europe for a bit.

15. What are your future plans?

If I get everything I’m hoping for, I’ll be doing a little less in terms of freelance work and focusing more on the teaching aspect of programming. I’d love to continue producing in-depth tutorials alongside influential bloggers in the community, like Chris Coyier. I also hope to start speaking at conferences in 2010, if I’m lucky enough to get the opportunity.

Apress has been great, and I hope to continue writing books about web development. I also want to get back into writing articles for sites like Nettuts+ (I haven’t forgotten about that article, Jeffrey! I promise!) and regularly blogging on Ennui Design.

I also want to try and grow Humblecock as much as possible, if for no other reason than I want to be able to make exactly the clothes I want to wear.
And at some point I’ll have to grow more of a social life and start dating. My mother will have a heart attack if I keep coming home alone for Christmas.

Thanks so much for your valuable time, Jason! It was a pleasure to talk with you!

• Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web. Ready

Ready to take your skills to the next level, and start profiting from your scripts and components? Check out our sister marketplace, CodeCanyon.

Go to Source

Since previous article about CSS text effects got really big attention I decided to research and find more interesting articles and websites just focused on CSS3, teaching you how to use it, showing pros and cons and much more. To be honest it’s hard for me to keep up with technologies myself, but we really cannot not to use those new great selectors to make our designs even more beautiful, user-friendly and lightweighted. However since HTML5 is sort of tied with CSS3, I will soon continue with HTML5 article as well, so don’t miss it and keep coming back! Enjoy!

1. Take Your Design To The Next Level With CSS3

In this article you’ll learn why CSS3 should be used and how web designers use it already in good way. Great article for getting you started with CSS3.

2. Push Your Web Design Into The Future With CSS3

Here are five CSS3 techniques snatched from the future that you can put into practice in your website designs today.

3. Super Awesome Buttons with CSS3 and RGBA

Learn how to create super cool, scalable buttons with CSS3.

View Demo

4. A Look at Some of the New Selectors Introduced in CSS3

5. CSS 3 Cheat Sheet (PDF)

This is printable CSS 3 Cheat Sheet (PDF), a complete listing of all the properties, selectors types and allowed values in the current CSS 3 specification from the W3C. Each property is provided in a section that attempts to match it with the section (module) that it is most actively associated within the W3C specification.(Download *pdf)

6. CSS3.Info

CSS3 is the new kid in the stylesheet family. It offers exciting new possibilities to create an impact with your designs, allows you to use more diverse style sheets for a variety of occasions and lots more. Also check excellent CSS3 Preview page there, which shows demos of new features.

7. Get Started with CSS 3

Beautiful CSS3 tutorial article explaining several new CSS3 features and giving solutions how to create them actually.

8. Introduction to CSS3 – Part 1: What Is It?

These six part series are providing an introduction to the new CSS3 standard which is set to take over from CSS2 from DesignShack.

9. Accessibility Features of CSS from W3

This document summarizes the features of the Cascading Style Sheets (CSS), level 2 Recommendation ([CSS2]) known to directly affect the accessibility of Web documents. Some of the accessibility features described in this document were available in CSS1 ([CSS1]) as well. This document has been written so that other documents may refer in a consistent manner to the accessibility features of CSS.

10. Progressive Enhancement with CSS 3: A better experience for modern browsers

In this article you will look at how you can use graceful (or, progressive) enhancement techniques to make use of CSS3 features in browsers that support them, while ensuring that your code will still provide a satisfactory user experience in older browsers that do not yet support those features.

11. Conversation with CSS 3 team

In this article, xhtml.com interviews Bert Bos, chair of the CSS Working Group at W3C, about the next release of the CSS specification and how past design decisions are influencing the future of CSS. This interview offers a rare opportunity to learn more about the inner workings and thought processes of the CSS Working Group at W3C.

12. Six Questions: Eric Meyer on CSS3

Great interview with Eric Meyer about CSS3.

13. The fundamental problems with CSS3

This article brings up several problems and issues with CSS3, interesting reading.

14. CSS3 Exciting Functions and Features: 30+ Useful Tutorials

In this post you will take a look at some interesting properties of CSS3 that you can put into practice in your website designs today.

15. Old School Clock with CSS3 and jQuery

16. The CSS3 border-radius property

One of the CSS3 properties designers have been longing the most for is undoubtedly the border-radius property. With CSS3 border-radius property it’s possible to create the so popular rectangles with rounded corners exclusively via CSS – no images needed.

17. Get the best out of CSS3

Craig Grannell turns into a cross between Jeffrey Zeldman and Russell Grant, taking a peek at what the future of CSS has to offer – with a little help from Opera, Safari and Firefox

18. How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3

View Demo

19. Rounded Corner Boxes the CSS3 Way

20. #57: Using CSS3 by Chris Coyier

This screencast covers many of CSS3 techniques now possible, focusing on the ones that can be used for progressive visual enhancement. Border radius, @font-face, animations/transitions, text-shadow, box-shadow, multiple backgrounds, RGBa, gradients, border image.

21. HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

In this tutorial, your are going to build a blog page using next-generation techniques from HTML 5 and CSS 3. The tutorial aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them.

View Demo

22. 11 Classic CSS Techniques Made Simple with CSS3

In this tutorial from Nettuts you will learn eleven different time-consuming effects that can be achieved quite easily with CSS3.

23. CSS 3 selectors explained – Overview of CSS 3 selector syntax

24. 3 Easy and Fast CSS Techniques for Faux Image Cropping

25. CSS3 Borders Preview

CSS3 takes borders to a new level with the ability to use gradients, rounded corners, shadows and border images. Mozila, Firefox and Safari 3 have implemented this function, which allows you to create round corners on box-items.

26. CSS3 property tests

27. CSS3 Background Images (Sizing & Multiple Imgs)

Background images / textures are being used and implemented in many ways, often adding the nicest of finishing touches to a website. It is now proposed that in CSS 3, we can apply background image dimensions as well as use multiple background images. Along with the +/- quick list of compatible browsers, here is how

28. Overview of CSS3 Structural pseudo-classes

29. 5 CSS3 Techniques For Major Browsers using the Power of jQuery

30. jSlickmenu: A jQuery plugin for slick CSS3 menus

View Demo

31. Multiple Backgrounds (CSS3)

32. CSS: border-radius and -moz-border-radius

33. Modernizr

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

Related posts:

1. 55 Jquery Tutorials, Resources, Tips And Tricks: Ultimate Collection
2. 22 Advanced CSS Text Effects And Web Typography Tips
3. Google Adsense Monetizing, Traffic, Testing Tips, Tricks And Resources
4. 35 Websites To Teach You How To Use CSS Effectively
5. Easy Brush Text Nature Effect: Tutorial

Go to Source

November was a very interesting month. Take your time to read these fantastic articles written by helpful people for the design community.

That’s all guys… I hope you’ll find useful these bookmarks.

Amazing Tutorials and Tips for Web and Graphic Designers

Blog.SpoonGraphics.co.uk | How to Create a Crafts Inspired Vector Kids Illustration

1stWebDesigner.com | How To Create Great Typographic Wallpaper In Photoshop

Tutorial9.net | Create a Simple Autumn Scene in Photoshop

Psd.TutsPlus.com | How to Create a Realistic IES Lighting Effect in Photoshop

Sixrevisions.com | How to Design a Band Website Layout in Photoshop

DesignM.ag | Design an Attractive One-Page Portfolio Using Photoshop

SpyreStudios.com | The Anatomy Of An Infographic: 5 Steps To Create A Powerful Visual

SixRevisions.com | Minimal and Modern Layout: PSD to XHTML/CSS Conversion

SohTanaka.com | Mega Drop Down Menu w/ CSS and jQuery

JankoAtWarpSpeed.com | Create YouTube-like adaptable view using CSS and jQuery

Articles and Interviews

InspiredM.com | How To: Successfully Launch a Web Design Startup with Social Media and No Budget | Inspired Magazine

WebHostingSearch.com | 11 Elementary Tips to Consider When Redesigning Your Blog

SmashingMagazine.com | Quality-Price-Ratio in Web Design (Pricing Design Work)

AcuityDesigns.com | Competing Against The Agency – The Freelancer’s Epic Battle

SuperFreelancer.com | The other side of criticism – you can make it useful

DesignInformer.com | Ask the Expert – Using WordPress to Build Large Scale Websites with Derek Herman

WebM.ag | An Interview With Chris Coyier

WoorkUp.com | How to build a Social Networking Website with Drupal

WoorkUp.com | Useful Tips Every Web Designer Should Know About SEO

Freebies and Resources

Blog.SpoonGraphics.co.uk | Free Hi-Resolution Paint Stroke Photoshop Brushes

ThePhotoArgus.com | 24 Amazing Photoshop Actions to Help You Achieve a Retro Look

DesignM.ag | Freebie: Tea-Stained Paper Texture Set

WebDesignLedger.com | The Best Free Icon Sets of 2009

WebDesignLedger.com | 12 Excellent jQuery Plugins for Enhancing Forms

SmashingMagazine.com | 40 Free High-Quality WordPress Themes

WebDesignBooth.com | WordPress Web Optimization: 15 Tips And Plugins To Monitor, Speed Up And Optimize Your WordPress Blog

Showcases and Inspiration

SpeckyBoy.com | 50 Examples of Effective Uses of Typography Within Web Design

Noupe.com | The Beauty Of Splash Sculptures

Blog.EchoEnduring.com | 25 Creative Website Footers

CreativityDen.com | 35 Websites that use transparency effectively

SmashingShare.com | Photo Manipulation – 100 Kickass Photo Manipulation Art Examples

InstantsShift.com | 70+ Creative and Inspirational Website Designs

InspirationTi.me | Say it Loud! 63 Websites with Huge Typography

Aext.net | Showcase of 30+ Blog Designs With Awesome Datetime Display

Illustrations and Digital Painting

Sandara on DeviantART | Black knight and companion

Candra on DeviantART | Potion Shop

Behance.net | Portfolio Pieces on the Behance Network

Behance.net | Sport artwork on the Behance Network

Behance.net | New Illustrations on the Behance Network

WebSite of The Month – NewToYork.com

Los colores olvidados

Must-Follow on Twitter

Michela Chiucini (chelseagirl50) on Twitter

Callum Chapman (callumchapman) on Twitter

Calvin Lee (mayhemstudios) on Twitter

Must Follow Blogs of the Month

BlogOf.FrancescoMugnai.com

Design Informer – The Latest in Web Design and Graphic Design

AEXT.NET – Programming, Design, Blogging

The Best of the Month on Web Design Updates

55 Decisive Useful jQuery Tutorials | Web Design Updates

Design a cool and original jeans style Business Card in Photoshop

10 WordPress Plugins To Boost Up Your Theme You Have Ever Known

Tutorial: Design a Clean Good-Looking Portfolio In Photoshop

Don’t Forget, Good Stuff on PV.M Garage

Nice And Simple Toolbar For Your Website With CSS3 And jQuery

Inspirational Showcase Of Music-Related Logos

Go to Source

Update: Winners Announced

Congratulations to the following three readers who were randomly selected!

• Kaj Rietberg
• Rodrigo Flores
• Mark Christianson

If your name is listed above, please contact nettuts@tutsplus.com to claim your prize!

“Written by WordPress veterans Chris Coyier and Jeff Starr, Digging into WordPress is 400+ jam-packed pages of everything you need to get the most out of WordPress. WordPress is great right out of the box, but unless you want an ordinary vanilla blog, it is essential to understand the full potential of WordPress and have the right tools to get the job done.”

Those of you who read CSS-Tricks will be well aware that Chris writes in a very easy-to-understand fashion. Rather than flooding each article with high-level jargon that only the most knowledgeable of us can understand, he instead dumbs each article down to the fundamentals – even to the point of being honest enough to convey when he doesn’t quite understand the reasoning behind some line of code.

As a result, he’s built a wonderful community and reputation for himself in the last few years. This book, co-written with Jeff Starr, is no different: straight-forward, easy-to-understand, and simple.

Simple Learning

Thanks to the use of fun, and helpful illustrations, even those who are brand new to WordPress will be able to dig their heals in — with minimal confusion.

The 400 page ebook covers everything from navigating the admin panel, to creating a comments form, to even more advanced topics like plugin development. And though it’s generally good practice to point out a few negatives in one’s review, it’s difficult to do so when a book is such a pleasure to read.

Heart of a Teacher

Chris and Jeff, in this book, have proven that they have the hearts of teachers. Even for intermediate to advanced WordPressers, there’s something to be learned — and at $27, the purchase is a no-brainer!

“Digging into WordPress is perfect for WordPress users in the beginner to intermediate range, but contains plenty of great information for the advanced user as well. If you have any level of experience working with web design or WordPress, this book is written to help you take WordPress to the next level.”

400 Pages of Practical Information

“There is much to learn about the World’s most popular publishing platform.
From your first steps of learning about WordPress all the way through
maintaining a site throughout the years, this book is packed with truly
practical information.”

Lots of Code Samples

“We go into depth about the anatomy of a WordPress theme. How they work, and how
to write the code you need to do the things you want. This means real code that
you can sink your teeth into, as well as copy and paste. Beyond theme
building, we introduce many tricks your functions.php file can pull off and show
you ways to increase performance and security through HTAccess.”

What About the Free Copies!?

Chris has generously offered to give away a few copies to our community. To enter, simply leave a comment, and be sure to check back on Friday to see if you were randomly chosen!

• Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.

Go to Source

Content Sliders

This year we saw a growing popularity in using content sliders as a way to display several pieces of content within a limited area or to engage the user with the sliding animation. Normally this is done in a featured banner area near the top of the page. There were several jQuery plugins written in ‘09 to accomplish this type of effect, but here are our favorites.

AnythingSlider

AnythingSlider is created by Chris Coyier of CSS-Tricks and is a fully featured slider that is widely useful.

Easy Slider

Easy Slider is a content slider that gives you the the option to choose between classic previous/next navigation or to use a numeric “pagination” style navigation.

Coda-Slider 2.0

Coda-Slider 2.0 is aimed to mimic the slider effect on the promo page for Panic’s Coda software. The original version was hacked together in 2007, but this 2.0 version is built from the ground up.

Image Galleries

The days of having to use Flash to create image galleries with cross fading or sliding transitions are long gone. Thanks to jQuery these types of effects can be easily achieved with javascript. Here are our favorite image gallery plugins from this year.

Galleria

Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.

jQuery Panel Gallery

jQuery Panel Gallery is a compact image gallery that can easily be configured. Not one image needs to be sliced or edited to work with this plugin. The plugin handles everything itself. You can even configure fading transitions per image.

slideViewer

slideViewer checks for the number of images within your list, and dynamically creates a set of links to command (slide) you pictures. Also, clicking on each image will make the gallery slide to the next picture.

Supersized

Supersized cycles images with transitions and preloading. It automatically resizes images to fill browser while maintaining image dimension ratio.

Navigation

I believe navigation is an aspect of a web site that should kept simple and easy to use. However, if there is a need to create a more engaging nav, jQuery is your best bet. Here are a few of the best from ‘09.

jquery mb.menu

Horizontal Scroll Menu with jQuery

This isn’t a plugin, but I had to include it since it is such a cool effect. It’s a horizontal scroll menu that scrolls automatically according to your mouse axis-Y movement.

AutoSprites

Forms and Tables

Working with forms and tables is probably not the most glamorous part of web design and development, but it has to be done. There were several plugins released this year to help you spice things up a bit. Here are our favorites.

Password Strength

Password Strength tries to calculate how many possibilities the hacker needs to try to guess your password.

Ajax Fancy Capcha

Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers. It introduces a new, intuitive way of completing “verify humanity” tasks.

Chromatable

Chromatable allows you to easily create scrolling tables with fixed headers.

jqTransform

jqTransform is a styling plugin which allows you to skin form elements.

Uploadify

Uploadify allows the easy integration of a multiple (or single) file uploads on your website.

jExpand

jExpand is ultra lightweight jQuery plugin that will make your tables expandable. Typical for line of business applications, this feature can help you organize tables better. This way, tables can hold more information such as images, lists, diagrams and other elements.

Go to Source

Introduction

MyInkTrail, is my trek through the articles, tutorials, freebies and general news from the design community for each month. November was a fast moving month filled with quality design articles, resources, and plenty of turkey and family. There was also a couple of good looking books from familiar names in the design blogging world.

Articles

Tutorials

Freebies

Featured Stuff

Go to Source

By Paul Andrew

Learning CSS and how to use it effectively can be a reasonably easy thing to do for a beginning web developer. In the hands of a seasoned professional, CSS can be stretched and pushed it to its limits where it can seem complicated and yet perfect at the same time.

Being able to adapt to new ideas and different techniques, as well as seeking new solutions to old problems is part and parcel of being a web designer. And with the speed at which CSS development is constantly moving, keeping up with new developments can be challenging.

In this article, we’ll bring you up to date with the latest in CSS development through a collection of fresh CSS tutorials, techniques, and resources. We hope this extensive list will teach you something new, or else remind you of some methods you haven’t used for a while.

Menus, Buttons and Forms

Create a Button with Hover and Active States using CSS Sprites
Some designers neglect the click state (active: property in CSS) in web design, either because they’re unaware of it, underestimate the importance of it, or are just lazy. It’s a simple effect that improves usability by giving the user feedback as to what they’ve clicked on, and can add depth to a design.

CSS Absolute Positioning: Create A Fancy Link Block
Absolute positioning is a well-known CSS technique supported by all web browsers. If you position an element (an image, a table, or whatever) absolutely on your page, it will appear at the exact position you specify. In this tutorial, you’ll use absolute positioning to create a fancy link block.

Simply-Buttons v2
Cross-browser, custom HTML <button> elements with inactive, active, and hover states.

Create A Sexy Vertical Sliding Panel Using jQuery And CSS3
In this post you will learn how to create a flexible vertically-positioned sliding panel that simulates a drawer effect. Normally, this technique would be used for a horizontally-positioned sliding panel that would push everything else down, but with this technique, the panel overlays the content.

Style a List with One Pixel
Using a one-pixel background image in CSS (repeat-x for a horizontal line, repeat-y for vertical, and repeat for a fill color) you’ll learn how to style a depth-chart looking unordered list.

Pushing Your Buttons With Practical CSS3
“Calls to action are critical for any website, and a compelling, attention-grabbing, clickable button goes a long way toward driving that engagement. In the past, really awesome buttons needed extra markup, sliding doors or other trickery. We’ll show you here how to create nice button styles without any hacks or cheats.”

Multi-level Multi-column Multi Menus with pure CSS
Have you ever successfully built a multi-level, multi-column, multi-menu, light-weight, and cross browser menu or navigation with pure CSS and without JavaScript? This tutorial will teach you how.

Elegant Drop Menu with CSS only
If you have a clean web site that’s become cluttered with extra content, categories, and pages, this clean and elegant menu offers a great space-saving solution.

Create a Beautiful Dropdown Blogroll Without JavaScript
This tutorial demonstrates how to style a drop-down menu to hold your blogroll content (instead of using the typically-ugly HTML <select> element). Done with pure CSS, but requires hacks to work with IE6.

Build a Simple Button with CSS Image Sprites
In this tutorial you’ll learn how to create a simple button using CSS sprites. The tutorial covers creation of the image in Photoshop and finishes with the coded example.

CSS3 Hover Tabs without JavaScript
Using some new CSS3 techniques you’ll learn how to create a basic tabbed content area that changes on hover using pure CSS

Use Pure CSS To Style a Web Form Dynamically
Form elements are normally styled by changing the border color or background color properties via CSS. This tutorial shows you how to style text field and textarea elements of varying widths with rounded-corner background images.

Horizontal Sub-nav with CSS & jQuery
In this tutorial, Soh Tanaka teaches you how to create an elegant horizontal sub-nav using CSS and a little jQuery for IE6 compatibility.

CSS3 Speech Bubble
Learn how to create a speech bubble with HTML and CSS3.

Create Nice Scalable CSS Based Breadcrumbs
This tutorial shows you how to create a scalable CSS-based breadcrumb navigation using a single graphic, some basic CSS, and an unordered list.

Fluid Searchbox
Creating a search box that adjusts to the size of the browser window is simple, but becomes difficult when you add elements to the left and right of it, some being fixed width (width in px or em) and some fluid width (width in %). This article demonstrates a solution to this problem.

Using Rounded Corners with CSS3
As CSS3 gets closer to becoming the new standard for mainstream design, the days of rounded corners through elaborate background images is fading. In this tutorial you’ll learn how to create rounded corners using vendor-specific CSS3 techniques supported by Firefox and Safari.

Web Page Layout Techniques

The Ultimate Guide to Creating a Design and Converting it to HTML and CSS
This in-depth screencast tutorial is the third part of a series that demonstrates how to create an iPhone app web site. This tutorial demonstrates the final step: converting the Photoshop design into HTML and CSS.

How to Code a Clean Portfolio Design with jQuery Slider
This tutorial will teach you how to slice and code a web page from a Photoshop design, plus teach you how to implement a jQuery image slider.

Minimal and Modern Layout: PSD to XHTML/CSS Conversion
This is the second part of a two-part series of creating a minimal and modern website layout in Photoshop. The part focuses on converting the design to styled markup.

Create YouTube-like adaptable view using CSS and jQuery
Have you ever noticed the "change view" feature on YouTube that allows you to switch between normal and wide mode and thus expand/shrink the movie area? In this tutorial you’ll learn how to duplicate this feature using CSS and jQuery.

How to distribute elements horizontally using CSS
This article shows you how to resolve the problem of extra margin settings on first and last children that are distributed horizontally within a main container using CSS.

Sticky (Fixed) SideNav Layout with CSS
This tutorial teaches you how to build a frame-like fixed sidebar navigation menu that stays in place when the page is scrolled.

CSS: Design Out Of The Box
In this informative post, the author discusses a number of example website designs that break away from typical columned and boxed layout. The article includes a number of tips and best practices that can help designers accomplish a similar style.

5 Simple, But Useful CSS Properties
Another article from Web Designer Wall, this time discussing five well-supported, practical, but rarely-used, CSS properties

25 Incredibly Useful CSS Tricks You Should Know
This article describes 25 useful CSS tips and techniques to help you design great web interfaces.

11 Classic CSS Techniques Made Simple with CSS3
You shouldn't limit yourself to old techniques when there's a new age coming. This new age includes the use of CSS3. In this tutorial, you’ll learn eleven different effects that can be achieved quite easily with CSS3 but would normally be quite time-consuming with standard CSS methods.

5 Rules To Write More Readable CSS Files
This article describes five practical rules that can help you write well-structured and more readable CSS files.

Text and Typography

6 Ways To Improve Your Web Typography
Because of the many options available, not to mention cross-browser differences, improving typography on the web is not always simple. In this post you’ll learn six different ways to improve typography on your web projects.

Create a Letterpress Effect with CSS Text-Shadow
The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS.

Images, Galleries and Sprites

3 Easy and Fast CSS Techniques for Faux Image Cropping
This article is a summary of 3 fast and easy CSS techniques you can use to display only a portion of an image in your content. Because the images aren’t literally cropped, the method is termed “Faux Image Cropping”.

Use CSS to build a map with hoverable regions
In this article you will learn how to how to build a map with hoverable regions, using CSS and a single image.

Date Display Technique with Sprites
This article on CSS-Tricks demonstrates how to display the date on WordPress blog posts using image sprites — the same method that’s used on the Learning jQuery website.

Building Faster Websites with CSS Sprites
In this tutorial you’ll learn how to take advantage of CSS sprites to greatly increase your website’s speed.

Perfect Full Page Background Image
Another technique from CSS-Tricks, this time demonstrating how to implement a full-page background image that fills the entire page, will scale the image as needed, retain image proportions, does not cause scrollbars, and is cross-browser compatible.

A Beautiful Apple-style Slideshow Gallery With CSS & jQuery
Learn how to build an Apple-like slideshow gallery, similar to what Apple uses to showcase their products.

How To Create a Pure CSS Polaroid Photo Gallery
Magical things can be created by combining various CSS properties, especially when some of the new CSS3 tricks are thrown into the mix. In this tutorial you’ll learn how to build a Polaroid photo gallery with a re-stacking hover effect using pure CSS.

Editable CSS3 Image Gallery
A screencast from CSS-Tricks that demonstrates how to create a fancy image gallery with some HTML5, CSS3, and jQuery. Works best in a WebKit browser.

Turn Your Images Into Polaroids with CSS3
In the first part of this tutorial you’ll create a grid of images that’s linked to a Flickr account. In the second part, you’ll spice it up by giving the images a pure CSS Polaroid effect.

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
This is a comprehensive discussion of the technique of CSS image sprites, by Chris Coyier. The article has been recently updated to include more up-to-date information and methods.

Fresh CSS Frameworks

CSScaffold Framework
CSScaffold is a a new type of CSS Framework, built with PHP, that helps speed up your development time by doing the hard work for you. Its power lies in its ability to extend CSS and generate CSS found in other CSS frameworks.

xCSS – Object Oriented CSS Framework
xCSS is a lightweight framework, still in beta, that allows you to take advantage of an object-oriented workflow, which means a dramatic cut-down in development time through the use of variables and other handy features.

eCSStender.org
eCSStender is a JavaScript library that lets you write CSS without having to use browser-specific properties and hacks. Extensions built with eCSStender greatly simplify the design process because you can author modern CSS using advanced selectors, properties such as border-radius, and custom font faces, all of which work in IE6.

Cross Browser Hacks, Fixes and Guides

Render alternate layouts in IE6 with only CSS
Although this may not be something you would do on a client project, this article shows you how to create an alternate layout IE6 users using CSS and a conditional comment.

Definitive Guide to Taming the IE6 Beast
A useful collection of IE6 hacks and fixes that will, as the title implies, help you tame the beast that is IE6.

Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs
The author of this article 'has scoured the web' for resources and fixes for IE6 and put them all together in this cheatsheet/reference manual as a resource for anyone who has to deal with Internet Explorer 6 on a regular basis.

ie6fixer
ie6fixer is a tool specifically designed to ease the pain of the IE6 CSS debugger. The tool was conceived to decrease the monkey work when starting an ie6 CSS fix file by applying a series of basic fixes that are known to conquer many problems and cause as little harm as possible. It should fix 40-60% of all IE6 issues and problems, with just one click, outputting rough CSS that can be placed in a separate section and can be used as a solid start for debugging IE6 issues.

Useful CSS Resources

CSSG Collection: Free Comment Styles
Designing the dreaded comments section of a web page can be a pain. To help you with this, CSS Globe is giving away a collection of comment styles that you can use on your own projects to save you a lot of time and agony.

CSS 3 Cheat Sheet (PDF)
This printable CSS 3 Cheat Sheet (PDF), first published on SM in July 2009, offers a complete listing of all the properties, selector types, and allowed values in the current CSS 3 specification from the W3C. Each property is provided in a section that attempts to match it with the section (module) that it is most actively associated within the W3C specification. Next to each property is a listing of the expected values that that property takes.

Cascading Style Sheet Level 2 Visual Cheat Sheet
This cheat sheet (3 pages) contains an essential reference to CSS2 properties with detailed descriptions and some sample code. The simple visual style used to design this sheet allows you to find, at a glance, everything you’re looking for.

CSS Specificity – Cheat Sheet
A common difficulty with CSS is determining what CSS rule will be applied on the page. This cheat sheet can help you better understand CSS specificity.

Best Web-Frameworks – Find and compare PHP, Ruby, Python, Java, JS and CSS Frameworks
This useful resource helps you compare almost all CSS, PHP, Ruby, Python, Java and JavaScript frameworks, so you can make the right choice for your project.

Visual Cheat Sheet: CSS Compatibility with Internet Explorer 6, 7 and 8
This Visual Cheat Sheet will help you understand CSS behavior in the three commonly-used versions of Internet Explorer. It includes information on @rules, element selectors, attribute selectors, pseudo-classes, border and layout properties, and more.

SlickMap CSS – A Visual Sitemapping Tool for Web Developers
SlickMap CSS is a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences.

CSS Basics
CSS Basics is divided into 18 chapters, covering all aspects of CSS, from CSS classes and IDs to the more difficult pseudo elements and positioning. CSS basics covers a wide range of information so it’s valuable for those learning the basics of CSS as well as experienced CSS developers. Each chapter is downloadable and printable and you also have the option to download the entire series in a single PDF file.

Further Reading

HTML, CSS, and Web Development Practices: Past, Present, and Future

CSS Best Practices for Modern Designs

Guidelines for Writing Accessible CSS

CSS Selectors – A Guide To The Common & The Rare

5 CSS3 Design Enhancements That You Can Use Today

Trick Out Your CSS With Server Side Code

About the author

Paul Andrew is a freelance web designer. He is chief admin for Speckyboy – Design Magazine, a web design, web development and graphic design resource blog. Follow him on Twitter here: twitter.com/speckyboy.

(ll)

Go to Source

“Written by WordPress veterans Chris Coyier and Jeff Starr, Digging into WordPress is 400+ jam-packed pages of everything you need to get the most out of WordPress. WordPress is great right out of the box, but unless you want an ordinary vanilla blog, it is essential to understand the full potential of WordPress and have the right tools to get the job done.”

Those of you who read CSS-Tricks will be well aware that Chris writes in a very easy-to-understand fashion. Rather than flooding each article with high-level jargon that only the most knowledgeable of us can understand, he instead dumbs each article down to the fundamentals – even to the point of being honest enough to convey when he doesn’t quite understand the reasoning behind some line of code.

As a result, he’s built a wonderful community, and has built a great reputation for himself in the last few years. This book, co-written with Jeff Star, is no different: straight-forward, easy-to-understand, and simple.

Simple Learning

Thanks to the use of fun, and helpful illustrations, even those who are brand new to WordPress will be able to dig their heals in — with minimal confusion.

The 400 page ebook covers everything from navigating the admin panel, to creating a comments form, to even more advanced topics like plugin development. And though it’s generally good practice to point out a few negatives in one’s review, it’s difficult to do so when a book is such a pleasure to read.

Heart of a Teacher

Chris and Jeff, in this book, have proven that they have the hearts of teachers. Even for intermediate to advanced WordPressers, there’s something to be learned — and at $27, the purchase is a no-brainer!

“Digging into WordPress is perfect for WordPress users in the beginner to intermediate range, but contains plenty of great information for the advanced user as well. If you have any level of experience working with web design or WordPress, this book is written to help you take WordPress to the next level.”

400 Pages of Practical Information

“There is much to learn about the World’s most popular publishing platform.
From your first steps of learning about WordPress all the way through
maintaining a site throughout the years, this book is packed with truly
practical information.”

Lots of Code Samples

“We go into depth about the anatomy of a WordPress theme. How they work, and how
to write the code you need to do the things you want. This means real code that
you can sink your teeth into, as well as copy and paste. Beyond theme
building, we introduce many tricks your functions.php file can pull off and show
you ways to increase performance and security through HTAccess.”

What About the Free Copies!?

Chris has generously offered to give away a few copies to our community. To enter, simply leave a comment, and be sure to check back on Friday to see if you were randomly chosen!

• Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.

Go to Source

How many times are you putting together a HTML navigation block or utility block of elements that you wish could be seen everywhere on a page? I’ve created a solution that will seamlessly allow you to do so: ScrollSidebar. ScrollSidebar allows you to attach an element to a place on the screen and animate the menu to the current scroll position.

The HTML

<div id="sidebar-menu">
	<ul>
		<li><a href="#pagetop" id="sidebar-menu-top" title="Top of Page" style="background:url(menu-up-arrow.png) center center no-repeat;">Top of Page</a></li>
		<li><a href="/" style="background:url(menu-home.png) center center no-repeat;" title="Go to the Homepage">Homepage</a></li>
		<li><a href="http://twitter.com/home?status=I love David Walsh's blog!  MooTools, CSS, jQuery, PHP...it has everything!" id="sidebar-menu-twitter" style="background:url(menu-twitter.png) center center no-repeat;" title="Share on Twitter">Post on Twitter</a></li>
		<li><a href="#pagebottom" id="sidebar-menu-bottom" style="background:url(menu-down-arrow.png) center center no-repeat;" title="Bottom of Page">Bottom of Page</a></li>
	</ul>
</div>

You may code the menu’s HTML any way you’d like. For the sake of accessibility and semantics (I literally just shivered at the thought of following semantics) I’ve used an HTML list.

The CSS

#sidebar-menu	{ display:none; width:48px; background:#333; border:1px solid #000; padding:10px; -webkit-border-radius:10px; -moz-border-radius:10px; }
#sidebar-menu ul{ padding:0; list-style-type:none; }
#sidebar-menu a	{ color:#fff; display:block; height:48px; width:48px; text-indent:-3000px; overflow:hidden; }

You may code the sidebar menu any way you’d like too. No need to worry about positioning the menu though — the plugin will override that anyway. I highly recommend addressing the menu’s width. I’m also defaulting the menu to display:none until the menu can be positioned.

The MooTools Javascript

var ScrollSidebar = new Class({

	Implements: [Options],

	options: {
		offsets: { x:0, y:0 },
		mode: 'vertical',
		positionVertical: 'top',
		positionHorizontal: 'right',
		speed: 400
	},

	initialize: function(menu,options) {
		/* initial options */
		this.setOptions(options);
		this.menu = $(menu);
		this.move = this.options.mode == 'vertical' ? 'y' : 'x';
		this.property = this.move == 'y' ? 'positionVertical' : 'positionHorizontal';
		/* ensure a few things */
		var css = { position: 'absolute', display:'block' };
		css[this.options.positionVertical] = this.options.offsets.y;
		css[this.options.positionHorizontal] = this.options.offsets.x;
		this.menu.setStyles(css).set('tween',{ duration: this.options.speed });
		/* start listening */
		this.startListeners();
	},

	startListeners: function() {
		var action = function() {
			this.setPosition($(document.body).getScroll()[this.move] + this.options.offsets[this.move]);
		}.bind(this);
		window.addEvent('scroll',action);
		window.addEvent('load',action);
	},

	setPosition: function(move) {
		this.menu.tween(this.options[this.property],move);
		return this;
	}
});

/* usage */
window.addEvent('domready',function() {
	$('sidebar-menu').set('opacity',0.8); //opacity effect for fun
	var sidebar = new ScrollSidebar('sidebar-menu',{
		offsets: {
			x: 20,
			y: 20
		}
	});
});

I wont bore you with the parameter/option descriptions as they’re self-explanatory. I’ve kept the class very simple. For those who care to see what the functionality looked like pre-Class, here you go:

//paired with smooooothscroll
new SmoothScroll({ duration:300 });
//vars
var menu = $('sidebar-menu'), offsetY = 20, offsetX = 20, speed = 450;
var setPosition = function(top) {
	var scroll = $(document.body).getScroll();
	menu.tween('top',scroll.y + offsetY);
};
//settings
menu.set('tween',{ duration: speed }).setStyles({
	position: 'absolute',
	right: offsetX,
	top: offsetY,
	opacity: 0.8
});
//events
window.addEvents({
	scroll: setPosition,
	load: setPosition
});

As you can probably tell, the functionality was begging to be placed into plugin format.

Have any feature suggestions? Share them. If you’re looking for a sweet jQuery version, please head over to CSS-Tricks to see Chris Coyier’s take!

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Introducing MooTools ScrollSidebar

Related posts:

1. Introducing MooTools LazyLoad
2. “Top” Watermark Using MooTools
3. Introducing MooTools ScrollSpy
4. Create a Sprited Navigation Menu Using CSS and MooTools
5. Editable Content Using MooTools 1.2, PHP, and MySQL

Go to Source

I’d like to take a moment this Thanksgiving to thank some people that deserved to be.

• I’d like to thank the MooTools team for all of the support and hard work. I feel truly honored to be around such intelligent, driven group of individuals. I’d like to specifically thank Aaron Newton and Valerio Proietti for being great leaders and advisers. MooTools FTW.
• I’d like to thank members of the MooTools community for all of their hard work. Sometimes I don’t think we all realize just how much we’re changing the web. Keep up the good work MooToolers!
• I’d like to thank friends like Chris Coyier and Eric Wendelin for letting me bounce ideas off of them, however rubbish they may be.
• I’d like to thank Babel Fish for allowing me to easily translate senseless phrases to other languages so that I may send said messages to foreign members of the MooTools team.
• I’d like to thank Rey Bango for being my whipping boy whenever I need to talk smack to someone.
• I’d like to thank Twitter for creating a service that allows me to be riveting in 140 characters or less.
• I’d like to thank DirecTv for allowing to purchase not one but two soccer packages. I get to see EPL, SPL, La Liga, Serie A, Bundesliga, Ligue, Russian League, and Champhions League. In turn I’d like to thank Darren Waddell for being patient with me as I ask questions and initially attempted to be a Chelsea fan. I’ve seen the errors of my ways: go Gunners!
• I’d like to thank Internet Explorer for continuing to encourage my creativity and making me think out each piece of my javascript code.
• I’d like to thank my advertisers who are unknowingly paying for the rock I just bought.
• I’d like to thank all of the crappy sites our there for giving me so many ideas for improvements.
• I’d like to thank the developers and designers that follow me here, provide encouragement and constructive criticism, and reach out to help with projects. You guys make all the time I spend on this blog worth it.

Thank you again!

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

What I’m Thankful For: 2009 Web Edition

Related posts:

1. Blog Goals for 2009
2. What I’m Thankful For: 2008 Edition
3. Web Predictions For 2009
4. Faces of Moo: Represent Your Framework!
5. 5 Simple Ways Programmers and Designers Should Give Back

Go to Source

Chris Coyier authored a post titled Better Pull Quotes: Don’t Repeat Markup a while back. In his post he created great-looking pull quotes without repeating any content — instead he uses jQuery to dynamically create the pull quotes. The following is the MooTools method for doing so.

The HTML

<p><span class="pull-me">As a MooTools "insider", however, I'm excited for what the MooTools team will bring to the table during 2010.</span> We'll be launching the Forge (our public plugin repository), releasing MooTools 2, continuing to grow MooTools More, featuring more community work, and much more. MooTools FTW!</p>

The HTML above features a paragraph of content with a SPAN tag wrapping what I’d like to be the pull quote.

The CSS

.quote { padding:20px; margin:0 0 20px 20px; font-size:20px; font-style:italic; background:#eee; color:#999; display:block; width:200px; float:right; }

You may style the quote any way you’d like. These elements are traditionally large in text with italicized text and a different background color.

The MooTools Javascript

window.addEvent('domready',function() {
	//grab all quotes
	$$('span.pull-me').each(function(span) {
		//inject styled quote into page
		new Element('span',{
			'class': 'quote',
			text: span.get('text')
		}).inject(span.getParent(),'top');
	});
});

We find each element with a “pull-me” CSS class and generate a new element with our “quote” class. We then inject the new element into the original element’s parent. That’s all!

Chris did a great job with the execution of his idea. This is a technique that will likely be used well into the future.

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Better Pull Quotes with MooTools

Related posts:

1. Highlight Table Rows, Columns, and Cells Using MooTools 1.2.3
2. Bold Web Predictions for 2010
3. MooTools HTML Police: dwMarkupMarine
4. Method Chaining in MooTools and PHP
5. dwImageProtector Plugin for jQuery

Go to Source

We return you now to a NaNoWriMo challenge already in progress. Chris of Fwis is still working hard to design 30 Cover in 30 Days. Below, his first 5 covers and Part Two of our ongoing interview.

Enjoy!

Could you give us a sentence or two about each cover you produced this week? What methods did you use? Are there any new styles or techniques that you experimented with? What ideas did you want to convey?

1: The Business by Tricialee Friedman (view full)

The first one is always the toughest, and I was a little fussy on this one. I still don’t like the type treatment. The image is from the Library of Congress. I wanted to convey something along the lines of a shattering injury.

2: Traffic Lights by Cynthia Dawn (view full)

Pen & ink. I need to do more like this, just simple, broad strokes. I wanted to convey precociousness but also something dramatic and a little insidious.

3: The Beauty of a Grid by Alexander Deluca (view full)

This is one of those covers that just sorta happened on the first pass – its my favorite one so far, though it might need a little more contrast.

4: Meet John Foe by Marcia Lee Metzger (view full)

More LoC images here – basically just an Action Comics cover.

5: King of the Food Court by Stacey Shackford (view full)

I had a really short description for this one, but I really like the idea of some mall-bound sage or poet. The type is sort of an embarrassing one amongst designers so I had to use it.

Chris Baty (founder of NaNoWriMo) has defined Week One as being full of energy and anticipation. Would you say that accurately describes your experience this week?

No, I am struggling trying to write, run a business, and finish these covers. My social life is in the pits!

Have you met your goals for this week?

No!!

How much time have you spent on covers? Your novel?

I’d say about an hour apiece on the covers. I am something like 10,000 words behind on my novel, but I’m taking a week off for Thanksgiving and expect to make it up then.

You’ve said you’re not using stock images for this project. Where are you getting images from, and how has this affected the final products?

As I mentioned, the Library of Congress Image Search is great; I’ll probably end up using some of my own photos, staying purely typographic, or illustrating by hand. I’m not exactly sure to what extent I’m willing to go fair-use on copyrighted images, but its an option.

On the third, you went outside the parameters and designed a cover of your choosing. The Nominations thread is now some 200 posts long. Are you browsing for more ideas that spark your interest, or leaving it up to the NaNoWriMo selection team?

Probably not; I need to get the covers done for the people the NaNoWriMo editors have chosen – they made some excellent choices and I need to nail those to the wall before I start tossing wrenches into their careful curation. Sorry Chris & TK!

You can always find Chris’ latest cover in this forum thread: http://www.nanowrimo.org/eng/node/3438529

Have a question for Chris? Leave it in the comments!

Related posts:

1. 30 Covers in 30 Days
2. Five CSS-Coding Steps from a Professional
3. Next Thursday Interview with Chris Coyier: The guy who showed us how Beautiful HTML Codes Looks like

Go to Source

When Webmasters Attack!

Also, what kind of web designer doesn’t already know this? It’s called being organized. However, all that white-space is going to add-up and waste bandwidth, which makes this “beautiful code” (a self-serving, inaccurate, subjective description) not-so-perfect.

What kind of web designer doesn’t know how easy it is to GZIP content which compresses/eliminates all of the extra whitespace that makes code more maintainable?

I don’t think <?php .. is valid HTML 5 either.

This isn’t a “Hello Kitty” picture, Webmaster, so please don’t comment. This will get parsed by PHP and output as HTML.

I link to one stylesheet. It works on firefox, safari and ie8.


If you can’t be bothered to upgrade your browser, I can’t be bothered with you.


None of this If IE>blabla shit.


Oh, and spare me the “but i need IE6 to use some of the software at my office”. I DONT CARE! Use a more recent browser to surf the internet, and stop spreading viruses because you’re too lazy.

I was going to ask you, Webmaster, about your clients’ web visitors and the money they’d be losing by turning away persons with IE6 and IE7 browsers but then I realized I took them all from you. Apparently the order of importance goes: you, client, visitors. That’s completely backward.

…The irony of this article is that it’s one giant PNG image. Further proof that the most beautiful HTML is the nonexistent kind.

Apparently Chris should have used a JPEG?

Why I am not surprised to see a MacOS window?

Because you’re a psychic? WTF is that supposed to mean?

PHP in a .HTML file?


change the title to “What Beautiful HTML Code Looks Like [infoFAIL]“

As long as you’re going to ignore the main point of the post and be a smart ass about the PHP/HTML, I’ll point out that Chris added a .htaccess directive to parse .html files as PHP. Ouch, sick burn!

No title attributes in the anchor tags. Since when does that make for beautiful HTML?

The article isn’t called “What Beautiful SEO Looks Like”.

This page has a story, a sidebar, and a footer. ‘Real’ websites are far more dynamic than this, and by ‘real’ I mean ones that people will go to. Complex websites have complex markup. You shouldn’t be bragging just because you’ve passed your w3schools tests.

You’re right. What he should really brag about are the dozens of thousands of RSS followers and his status within the community.

I get it but to some point it gets stupid. Stop accommodating specific browsers. If the web page loads properly then good but if it doesnt and looks broken then that tells he consumer to upgrade their fucking browser! It should be that simple.

Another lazy, ignorant idiot that doesn’t understand that he isn’t important — his clients and their visitors are. This person clearly doesn’t get it.

In the end…

Thank you again, Webmaster, for reminding me why I should be so proud of the work I do. Without you I couldn’t pay for house, cars, and fine wine. Keep up the good work so I can keep up my fine life!

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

When Webmasters Attack!

Related posts:

1. Create Digg URLs Using PHP
2. Advanced .htaccess Security – Block Unwanted Referrers
3. 6 Reason Why Digg Is Losing Me
4. MSN Live Search Result Grabber
5. Google Grabber — Using PHP to Find Out How Many Pages Your Domain Has Listed in Google

Go to Source

DIRECT LINK »
Go to Source

#centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -75px;
  margin-left: -150px;
}

Go to Source

I’ve had some great experiences on the #mootools and #cakephp IRC chat rooms. I’ve gotten help when I’ve desperately needed it and have been able to return the favor by giving tips to others. With that spirit in mind, I’ve created the #davidwalshblog IRC chat room.

My audience is very diverse so expect to see topics in #davidwalshblog ranging from MooTools to jQuery to PHP to CSS and so on. Please sign on any time you’d like! If you need help or feel like helping others, #davidwalshblog will be a great place to do so. Of course you’ll see me quite a bit, but you may even see special guest drop-ins like CSS-Tricks’ Chris Coyier, Eric Wendelin, Christoph Pojer, and other Moo devs.

I will act as moderator along with super-helpful #mootools room members Garrick Cheung and Jabis. A special thanks to both of them. Remember, however, that when you need help with difficult MooTools issues, be sure to hit #mootools as well!

So why wait? Join the fun now! And if you don’t have an IRC client, please support Pidgin!

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Also, check out Matt’s write up on the site.