Noupe http://www.noupe.com Web Designer's Online Resource Tue, 13 May 2008 23:47:50 +0000 http://wordpress.org/?v=2.5.1 en Welcome Our New Advertisers http://www.noupe.com/sponsors/welcome-our-new-advertisers.html http://www.noupe.com/sponsors/welcome-our-new-advertisers.html#comments Tue, 13 May 2008 15:09:11 +0000 Noupe http://www.noupe.com/?p=301 We would like to say thank you to all our great sponsors for supporting NOUPE. Please take a moment to check out our 3 new sponsors … and hey, be sure to say, hi!.

A special thank you to:

DesignFloat

If you are a web designer looking for niche social sites, then you’ve already came across Design Float.

Design Float is a social media site dedicated to the design industry, categorizing the huge amount of design-related content available on the web into neat and easy to navigate pages of articles in order of importance/relevance as decided by the community. Design Float sends a significant amount of traffic to popular submissions, this month Noupe.com received over 5,400 visitors from Design Float.

Design Float

DMXReady

DMXReady applications provide a fast and easy way to create dynamic website functionality without the time and/or expense of coding. All applications are ready to go “right out of the box,” though the real power of DMXReady comes from its flexibility. Open source and fully skinnable, you can change the ASP code, the CSS and HTML design, and the database to customize to your specific needs.

This means that any CSS designer can provide clients with powerful, database-driven websites wrapped within their own designs.

DMXReady

FlashSources

FlashSources specialize in creating the visual tools companies need to achieve their marketing objectives. Offering High Quality FLASH FLA Sources: editable Flash Navigation, Components, Effects and Photo Gallery to make your web site fancy and interactive. So Whether you’re interested in designing a website, developing a sales brochure, or establishing a new corporate identity, they can help you create the professional image you need to take your business to the next level.

So if you’re a web designer and these services interest you, we hope you’ll give them serious consideration and and let them know that Noupe sent you!

]]> http://www.noupe.com/sponsors/welcome-our-new-advertisers.html/feed Exceptional Ajax/javascript Techniques (Recently Created) http://www.noupe.com/css/30-exceptional-ajaxjavascript-techniques-recently-created.html http://www.noupe.com/css/30-exceptional-ajaxjavascript-techniques-recently-created.html#comments Mon, 12 May 2008 05:48:00 +0000 Noupe http://www.noupe.com/?p=288

In this article we’d like to present a list of over 30 hand-picked Ajax and javascript techniques you can use to achieve some special visual effects in your designs. The best thing about this list is how fresh it is, you might have seen some of it but we guarantee not all.

jQuery, Mootools, Prototype and script.aculo.us are used in these examples, so every taste has its demos served.

You might be interested to check some of the designs that was mentioned in the posts below:

1) Growl 2.0 with Mootools- Daniel Mota has created Growl 2.0 with Mootools, that is easily integrated into our web applications.

2) Easiest Tooltip and Image Preview Using jQuery- An incredibly easy way of achieving tooltip like bubble popups that appears when you roll over link or a thumbnail.

3) Sliding top panel using mootools- Antonio Lupetti explains how to release a simple sliding top panel (top/down) using mootools, some line of css code and JavaScript.

  • Download tutorial from Here

4) Sliding top panel using mootools- How to recreate the menu on MooTools with the same effect … but in jQuery!

5) Create a Slick Tabbed Content Area using CSS & jQuery- How to build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally doing the same thing using the jQuery library.

6) Custom JavaScript Dialog Boxes- Leigeber has put together a lightweight (~4.5kb) JavaScript dialog box library. The script currently offers four dialog styles: alerts, warnings, prompts and success.

7) Facebook Sliders With Mootools and CSS - A very simple 3-slider system that allows a user to modify the height, width, and opacity of an image using just sliders!

8 ) Making a Javascript Video Player- How to create a pure (non-flash) JavaScript video player.

9) Ajax mosaic builder- The function will load multiple images as a color pallet using BinFileReader and then arranged them in such an order that those images would look like one of the images in the pallet.

10) jQuery flipv()- Accessible way to display vertical text line.

11) Drag. Drop. Lock.- A nice tutorial for making quick drag and drop features in PHP.

12) WebAppers Simple Javascript Progress Bar with CSS- WebAppers has created a simple and brilliant Javascript based Percentage Bar / Progress Bar which is inspired by Bare Naked App

13) moowheel- The purpose of this script is to provide a unique and elegant way to visualize data using Javascript and the <canvas> object.

14) noobSlide- A Smooth Mootools Slide Show Image Galleries.

15) Mocha UI- Mocha is a web applications user interface library built on the Mootools javascript framework. The Mocha GUI components are made with canvas tag graphics.

16) ddMenu- ddMenu is a simple MooTools-based script to create you’re own context menus.

17) googleDrive- googleDrive is a little google maps mash up that allows you to drive a little car around on the maps.

18) GlassBox- GlassBox is a compact Javascript User Interface (UI) library, which use Prototype and Script.aculo.us for some effects. With GlassBox you can build transparent border, colorful layouts and “Flash-like” effects.

19) ProtoFlow- ProtoFlow is a coverflow effect written in Javascript. It uses Prototype, Scriptaculous and also uses Reflection.js to do bulk of the work and it uses Reflection.js to do all the image reflections stuff!

20) ASP.NET AJAX AutoComplete Control (Facebook look)- An ASP.NET AJAX extender that can be attached to any TextBox control.

21) ADamnIT - JS error notification- A free reporting service that emails you when a JS error occurs in your webpages.

22) Flexigrid- 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 using Ajax to load the content.

23) prettyPhoto a jQuery lightbox clone- A jQuery lightbox clone with tons of features you would love to have.

24) JavaScript Color Fading Script- This lightweight JavaScript allows for easy color transitions. Add fading effects to tables, divs and more. You can target an elements background, border or text color.

25) Rotator- This small Javascript class, serves as a generic rotator for different kind of collections.

26) Kotatsu - a simple html table generator- A nice tool to help create a table and throw in column classes quickly.

27) jQuery virtual tour- This virtual tour plugin has the particularity to be accessible and can run even if javascript has not been activated.

28) Usable directory listings with a little Dojo- A tutorial by Sam Foster to create directory listings with keyboard shortcuts. Just tab over to the box on the top right, and filter your selections.

  • Checkout the Demo here.
  • Download a zip of the header and .htaccess files here.

29) Cuzillion’- The tool lets you test out different techniques for optimizing performance in browsers, and these tests can be saved and shared by the community.

30) The Sliding date-picker- GlassBox is a compact Javascript User Interface (UI) library, which use Prototype and Script.aculo.us for some effects. With GlassBox you can build transparent border, colorful layouts and “Flash-like” effects.

]]> http://www.noupe.com/css/30-exceptional-ajaxjavascript-techniques-recently-created.html/feed 30+ Javascript/Ajax Techniques for Sliders, Scrollers and Scrollbars http://www.noupe.com/javascript/30-javascriptajax-techniques-for-sliders-scrollers-and-scrollbars.html http://www.noupe.com/javascript/30-javascriptajax-techniques-for-sliders-scrollers-and-scrollbars.html#comments Wed, 07 May 2008 23:34:24 +0000 Noupe http://www.noupe.com/?p=283

Every once in a while we like to focus on different design elements and how to use javascript and ajax to make them more interactive and more flexible to the user. In this article we’d like to present a list of over 30 hand-picked Sliders, Scrollers and scrollbar techniques you can use to achieve some special visual effects in your designs.

jQuery, Mootools, Prototype and script.aculo.us are used in these examples, so every taste has its demos served.

You might be interested to check some of the designs that was mentioned in the posts below:

Slider

1) Slider- Horizontal or Vertical bar and slider.

2) Simple images slider to create Flickr-like slideshows- This step-by-step tutorial explains how to customize slideshow and use it in your web projects.

  • Download Tutorialfrom Here

3) Accessible slider- Illustrations and code samples showing how to make a slider UI control accessible to those who aren’t running JavaScript or CSS.

4) Accessible Unobtrusive Slider Demo- This method offer full keyboard capabilities as using unobtrusive JavaScript which is a method that separates the JavaScript behavior from the page markup.

5) Slider- Degrade gracefully for browser without the needed DOM support with full mouse and keyboard support. Skinable using different CSS files.

6) Photo Slider Tutorial- Simple to use JavaScript slide show that scrolls thumbnails as smooth as Flash. Tutorial shows how to install and configure the code. The included example uses less than 10 lines of code.

7) Accessible News Slider- Accessible News Slider is a JavaScript plugin built for the jQuery library.

8 ) Yahoo! UI Library: Slider- The Slider component is a UI control that enables the user to adjust values in a finite range along one or two axes.

9) Fireworks.js- Fireworks.js is a bit of Javascript that creates starburst-type explosions in a web document; in short, it’s a fireworks effect someone could theoretically use on their site.

10) Slider Gallery- A similar effect used to showcase the products on the Apple web site. This ‘product slider’ is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items. Simple stuff.

11) 2J News Slider - Joomla Ajax Slider- This is an eye-catching news slider that bring in evidence your content.

12) Inline Range Slider

13) Ajax Image Sliders Part 2: Intervals with On Demand

14) Multiple Sliders in one page

15) Slider Using PHP, Ajax And Javascript- A slider script implemened in Ajax with PHP.

16) Coda-Slider- Amazing jQuery Coda-Slider can be used for Nice, slick content presentation.

17) jQuery Multimedia Portfolio- This plugin for jQuery will automatically detect the extension of each media and apply the adapted player. with a nice slider to move through the files.

Scrollers

18)Ultimate JavaScript Scroller and Slider- This versatile and lightweight JavaScript makes it easy to scroll text blocks, create slideshows, slide between content, create tickers and more.

19) df Javascript Smooth Scroll- A super small Smooth Scrolling Javascript. This script is too simple to understand and use. Nothing but playing with Anchor Tags. Include the Javascript and you are set to smoooooooooth scroll.

20) jQuery.SerialScroll- This plugin allows you to easily animate any series of elements, by sequentially scrolling them. You can use it as a section slider, text scroller, slideshows, and news ticker.

22) Easy Scroll: Accessible Content Scroller- Easy Scroll is standalone, lightweight script that is very easily applicable developed by Alen Grakalic.

21) Scrolling Div Content with Graphical Scrollbars- Scroll div content vertically or horizontally, onmouseover, onmousedown, onmousewheel or with a gliding motion onclick. Graphical scrollbars and multiple instances supported. Scroll areas can be positioned absolute or relative. New content can be swapped in and updated via ajax. Many more features and extras.

22) Scrollable content - Display content in a confined area. Users can view the entire content via the custom scroll up/down images.

23) Pamoorama- Basically what it does is to show only a part of your fullsize image. The image can then be scrolled by moving the mouse over it. Pamoorama will also display a small thumbnail of your panorama with a small window/frame so you can see which part of the image is visible right now. Dragging this little window is also possible!

24) How To Unobtrusively Scroll A Div With Prototype & Scriptaculous- The goal of this example is to see if scrolling effects can be possible while retaining legacy compliance and insuring “bookmarkability”.

25) mooSlideBox 3- mooSlideBox v3 is a small and slim ajax based extension or replacement of the common “lightbox” that can be found on nearly every page. This lightbox clone works in IE 6/7, Opera and Firefox.

26) jqGalScroll v2.1 (Photo Gallery)- jQuery Gallery Scroller (jqGalScroll) takes list of images and creates a smooth scrolling photo gallery scrolling vertically, horizontally, or diagonally. The plugin will also create pagination to allow you to flow through your photos.

27) DHTML Scroller- This script can load a file into a div, and scroll it via simple function calls and a fully draggable and sizeable scrollbar. It’s small and quite fast to load its content.

Stunning Custom Scroll Bars

28)Mootools Styled Scrollbar- This is an example how to make your own styled scrollbar using Mootools

29) FleXcroll- Flexible and Accessible Custom Scroll Bars. A Cross Browser* and Standards Compliant Custom ScrollBar Script by Hesido.

30)Slider Demos- An extensive set of slider demos.

31)jsScrollbar- It’s hard to find a good javascript scroller, check this demos and your scrollbar issues will be solved.

]]> http://www.noupe.com/javascript/30-javascriptajax-techniques-for-sliders-scrollers-and-scrollbars.html/feed 53 Killer Photoshop Illustrator Effects and Tutorials http://www.noupe.com/tutorial/53-killer-photoshop-illustrator-effects-and-tutorials.html http://www.noupe.com/tutorial/53-killer-photoshop-illustrator-effects-and-tutorials.html#comments Sun, 04 May 2008 22:18:58 +0000 Noupe http://www.noupe.com/?p=275

It’s always fun to experiment different techniques and learn how to work with various aspects of Adobe Photoshop to spice up boring pictures and make them into works of arts and masterpieces. So, if you’re interested in learning some new skills, whether you’re a beginner, intermediate or advanced user, these Photoshop and Illustrator tutorials are for you.

Below you will find an incredible amount of amazing colorful artwork to inspire any designer, also we’ve selected some of the best adobe tutorials hand picked to enhance or highlight whatever action is going on in the photo.

Neon and Glow Effects Tutorials

Create cool neon effects- Tony Ariawan shows you how to use warping, layer masks and simple colour tweaking for a high-tech look that’s out of this world.

Creating a Glowing Neon Effect in Illustrator- Create a glowing neon effect in your illustration that can grab an audience’s attention with its beauty and uniqueness.

More Neon and Glow Effects

All things Beautiful

Smoke Effects Tutorials

Creating a Stunning Digital Smoke Effect- How to easily create digital abstract smoke using both Illustrator and Photoshop. One of the best things about this technique is that it’s very customizable and you can do it pretty quickly.

Smoke Effect

Creating Smoke- How to create smoke in photoshop, from Abduzeedo.

More Smoke Effects

Pakarabanu

Jessica Rabbit

Silver White Fractal- The great smoke-like wispy effect in this fractal is accentuated by the color and lighting effects.

Creating Swirls Tutorials

Swirl Mania in Illustrator & Photoshop- This tutorial will show 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.

How to draw swirls illustrations in Adobe Illustrator

Swirly curls in Adobe Illustrator

Lighting Effects Tutorials

Create a Glowing Light Painting Effect- Fabio is showing us in this tutorial how in an easy, and very fast way, to create a light painting in Photoshop.

Creating the Windows Vista Lighting Effect- How to create the eye catching graphics shown off on the box of windows vista, and in some of their wallpapers/screensavers.

More Lighting Effects

Rainy Day Rainbows

Text Effects Tutorials

Apple Leopard text effects- A nice tutorial by Veerle on how to create Apple’s new system GUI in Leopard with the “inset effect” on the text.

Line Gradients- This tutorial will teach you how to use Photoshop and Illustrator to create cool looking “Vector Line Gradients” to give your text a vintage “old-school” feel.

Melting Ice Text Effect

A Slick Supernatural Text Effect- Learn how to create a smokey night effect on text to give it an eerie supernatural sort of feel. It’s a good exercise in using the Wave distortion filter.

50 Essential Photoshop Text Tutorials- Here are 50 of the best tutorials for working with text.

More Text Effect

Smoke + Type

Vintage Effects Tutorials

Vintage collages in Photoshop- If you want to provide an instant flashback to a bygone era while letting your creativity shine through, few techniques are as versatile as a collage made up of vintage elements.

Photoshop vintage effect- Fantastic method of creating a vintage photo effect in Photoshop.

More Vintage Effects

Crooked Mushroom

Various Image Effects Tutorials

Create amazing photomontages- Nik Ainley shows you how to make a splash, blending two very different images to create this amazing underwater effect, complete with a dissolving figure of a man.

Creating a Vector Composite Effect from a Photo- This tutorial will demonstrate how to take an image, in this case a woman’s face, and give the appearance that it is entirely composed of vector shapes.

More Image Effects

Lamborghini

Cosmo Girl

Water Color Effects Tutorials

Design Watercolor Effect Menu- How to design a watercolor effect menu in Photoshop.

How to Add a WaterColor Effect to Your Photos- How to create a hand-painted and water color effect.

Miscellaneous Tutorials and Effects

illustrator Pucker and Bloat Effect and more- How to use the Pucker & Bloat Effect

Using the Blend tool and Distort Zig Zag Effect in Illustrator- How to create the blending wave lines using the Blend tool in illustrator.

Tropical Transparency Effect- Learn how to create a bouquet of Tropical Flowers.

Gigposter Design- An impressing tutorial on hot to make a gig poster.

Badass Bling Effect in Photoshop- How to create a “Bling Effect” using layer styles in Photoshop. Once you create the layer style, you can easily “blingify” any layer. There is also a video tutorial as well.

Complex Circular Design Techniques- Some neat tricks, tools, techniques, and settings that will have you pumping out perfect circular designs in no time using Illustrator.

Abstract poster effects- Make your mark with strong but simple shapes and bold, read-my-lips colours: Danilo Rodrigues shows you how.

Trendy circles- Learn how to draw “trendy circles” and simply apply a color to it.

The Dream In A Puddle

Lines Tutorial- How to create rainbow colored lines.

Creating a film grain effect- How to create or simulate a natural film grain effect on photos in Photoshop CS3.

How to Make the “Flare” Effect As Seen On WPCustomization.com- Here is a step-by-step tutorial on how to re-create this effect.

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.

Positive Hype

Portfolios for inspiration

Looking for some inspiration, search for talented and creative designers who mastered these techniques and learn from them. Below you will find amazing portfolios for artists who know how to just be creative.

NoPattern

Mosk

GdsWork

Nietylko

Lauraalejo

K4lab

Sugarrhyme

]]> http://www.noupe.com/tutorial/53-killer-photoshop-illustrator-effects-and-tutorials.html/feed 30+ Unusually Awesome Freshly Created Designs http://www.noupe.com/design/30-unusually-awesome-freshly-created-designs.html http://www.noupe.com/design/30-unusually-awesome-freshly-created-designs.html#comments Wed, 30 Apr 2008 22:34:20 +0000 Noupe http://www.noupe.com/?p=272 We enjoy observing fresh ideas and creative design solutions, thats why we wanted to start this month with some inspiration. Today we got you some incredibly awesome website designs that is freshly created with unique ideas, graphics and layouts.

You might be interested to check some of the designs that was mentioned in the posts below:

1) Pixel Criminals

2) Monstera Design Code

3) Monk Development

4) C-Burrows

2) Positivespaceblog

6) Olliekav

7) Fixie Consulting

8) Larva Labs

9) 10Volt Media

10) Skytz

11) Homedesignfind

12) Side Bar Creative

13) Job Site

14) Avalonstar

15) Pikaboo

16) Jahadesign

17) Starbucks Coffee At Home

18) Mitch’s World

19) The things we make

20) Viget : Inspire

21) Deadmetropolis

22) Iwit

23) Sympowercocorp

24) Coda Coza

25) Oypro

26) Edge3sixty

27) Du Bout Des Yeux

28) Diaframma

29) Abduzeedo

30) Nike 1/1

]]> http://www.noupe.com/design/30-unusually-awesome-freshly-created-designs.html/feed 3D Wall Flash Component: A Must See http://www.noupe.com/sponsored-review/3d-wall-flash-component-must-see.html http://www.noupe.com/sponsored-review/3d-wall-flash-component-must-see.html#comments Wed, 30 Apr 2008 00:12:08 +0000 Noupe http://www.noupe.com/?p=266

Flashloaded.com have just released an outstanding fully customizable 3D Wall component for CS3 to showcase your photos and or designs in a brilliant way. This easy to use component will allow you to create custom galleries with more than 60 adjustable parameters, a built-in preloader for seamless transitions between thumbs and large images, viewers can scroll, tilt and zoom in, ensuring unlimited number of looks and an enticing viewer experience.

Key Features
  • Flat or curved wall: Displays flat or curved walls at any angle between -360° (convex) and +360° (concave).

  • Interactive wall tilting: Option to tilt the wall up or down by clicking and dragging the mouse or using custom buttons.
  • Customizable animation settings: Option for opening thumbnails to appear from behind the camera or behind the wall with adjustable speed and easing styles. The large image zoom in/zoom out speed and easing styles are also adjustable.
  • External XML file:
    Loads images through an external XML file so there’s no need to republish the SWF.
  • Depth of field:
    Thumbnails viewed from the back of a curved wall can be displayed with an adjustable amount of blur and brightness to change the depth of field.

  • Mouse events:
    Includes ActionScript events for mouse over, out and click. An optional additional value can be specified for each image in the XML.
  • Built-in skinnable scrollbar and preloader:
    The optional scrollbar is skinnable. The preloader, font and text are fully customizable.

There are a lot of parameters that can be easily customized to start building a portfolio site or client’s image gallery. Checkout the user guide to know how it works. For more information visit Flashloaded.com and let us know what do you think.

]]> http://www.noupe.com/sponsored-review/3d-wall-flash-component-must-see.html/feed Websites you shouldn’t have missed in April 2008 http://www.noupe.com/best-of/websites-you-shouldn%e2%80%99t-have-missed-in-april-2008.html http://www.noupe.com/best-of/websites-you-shouldn%e2%80%99t-have-missed-in-april-2008.html#comments Tue, 29 Apr 2008 00:05:35 +0000 Noupe http://www.noupe.com/?p=263 April was a busy month, we have been watching great news, articles, tutorials, scripts, tips and lot of inspiration for web designers popping up everyday so we thought it would be a great idea to wrap all those resources in one package where you can check to fuel your energy for creativity.

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

Tutorials

1) Build a Sleek Portfolio Site from Scratch- There’s nothing like building an entire site to show you a good overview of how a CSS layout should work. This tutorial will take you through steps to convert a PSD file and build it with some nice clean HTML and CSS.

2) This is How You Get sIFR to Work- Follow this tutorial to get a basic understanding of how sIFR works. Afterwards you’ll be able to expand into more advanced areas.

3)Create a Powerful Mental Wave Explosion Effect- How to create a crazy explosion, like a mix of Magneto’s ability with Peter Petrelli’s power.

4)50 Essential Photoshop Text Tutorials- 50 of the best Photoshop tutorials for working with text.

5)Create Abstract Backgrounds- Using Gradient Meshes, Steps Blends and Opacity Masks you can quickly create an abstract background.

6)Lighting effects Photoshop Tutorial- How to create a beautiful lighting effect using Photoshop.

7)Relflections, a Web 2.0 Staple

Ajax

8 ) Custom JavaScript Dialog Boxes- A lightweight (~4.5kb) JavaScript dialog box library. The script currently offers four dialog styles: alerts, warnings, prompts and success.

9) Ajax Image Sliders Part 2: Intervals with On Demand

10) 41 of the Best MooTools Ajax Examples and Downloads- 41 MooTools examples that you can freely download and learn or use from.

11) 10 things IT needs to know about AJAX- 10 things you should take to heart about Ajax.

12) Assign Anchor IDs Using MooTools 1.2- Looking to use the MooTools SmoothScroll plugin but don’t want to go through hundreds of HTML pages to add “ID” attributes to your anchors? You don’t have to — simply assign anchors with Moo!

13) jQuery Examples - Horizontal Accordion- An accordion effect that reveals a caption for each thumbnail.

14) jQuery.ui Sortable- jQuery’s Sortable is a cool client side jQuery plugin that lets lets you create sortable unordered/ordered lists or a plain group of contained DIV tags.

15) Getting Started with Ruby on Rails- Great overview on getting started with Ruby on Rails by Dan Benjamin.

CSS

16) The Highly Extensible CSS Interface- The Highly Extensible CSS Interface is an excellent 4-part series of articles, now gathered together on one page for easy reference.

17) Hartija - CSS Print Framework- Hartija is “mini” CSS Framework for web printing. The goal of this framework is to improve and ease the creation of “printer friendly” pages with minimum effort.

18) CSS Gradients, Transforms, Animations, and Masks- Safari / Webkit shows the future of CSS! Gradients wirh CSS and without any image.

19) Combine Your CSS Media Styles Into One File- Using some easy CSS, you can combine your CSS medias into one file!

20) CSS do’s and dont’s Part 1: CSS Selecting- Css Globe is starting a series of lightweight articles named “CSS do’s and don’ts”. This series is aimed at pointing out some of the bad habits when it comes to css and web standards in general.

21) Date Stamps- A list of all six styles, each with an example of the timestamp and the code you can use to create it.

22) Simplifying and Demystifying CSS Backgrounds- A great article to show how to use background images with CSS.

23) Web to Print: Restyling Pages on the Fly with CSS- Matthew is sharing the experience he gained while writing a print stylesheet for Bits O’ NewMedia.

Freelance

24) Deciding When to Use Project Pricing - Billing by the hour is the most common way to make money in the freelance world, and it can be both safe and profitable. But it does have a few drawbacks. First, potential clients tend to balk at higher hourly rates.

25) Why Giving Clients What They Want is a Bad Idea- Why giving client’s exactly what they expect is a way to ensure that your work is complacent and how it avoids creativity.

26) 12 Practical Ways for Freelance Designers to Increase Leads- There are plenty of different ways to find potential clients, Steven Snell is writing a very useful post on Freelanceswitch taking look at 12 things you can do to increase the number of leads you receive.

Web and Graphic Design

27) How to Blog Design Style Guide- Different design elements affects a website design’s look and feel, Blogdesignblog have broken these different design elements into nine different parts. The more attention you give to each part, the better your overall blog design will be.

28) Awesome HOT TIPS for YOUR WEBSITE in 2008- Fadtastic, have secretly been trawling the best websites and breaking down what’s good about them all. They’ve conveniently made a list of these unmissable golden nuggets of advice below. Use with caution - you don’t want to be too hard on your competition!

29) 70 Excellent Vintage and Retro Graphic Works- A celebration of retro and vintage design — ads, illustrations, book covers, pins and posters from 1920-1980s.

30) Logo Design Process for Just Creative Design’s Award Winning Logo- Jacob Case is talking about how he came to the name for his freelancing business ‘Just Creative Design’ and also the logo design process that is used to design the logo of his website.

31) How to switch the “on” state of navigation links for dynamic pages- From Askthecssguy.

32) How to Use Adobe Illustrator to Create a Unique Distressed Text Effect

33) IE CSS Bugs That’ll Get You Every Time- Here are the major bugs in IE that’ll get you every time.

Freebies

34) BB Petie Boy Original Font from Bittbox- Website Bittbox has released it’s very first original free font. BB Petie Boy is available in four weights, one of which is a grunge style.

35) Free PSD Icons (24 icon sets)- Free icons for any use.

36) Exclusive You The Designer Free Vector Graphics- Free computer icons to enhance your website design.

Tools and Online Generators

37) IETester- IETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE8 beta 1, IE7 IE 6 and IE5.5 on Vista and XP.

38) Mutapic -Mutapic is an online picture generator. It is a free tool you can use to rapidly create original art.

39) 7 Incredibly Useful Tools for Evaluating a Web Design- Some useful tools that you can use to ivaluate a Web design

40) 10 Website Statistic Tools- Keeping track of visitors to your website is vital, and these tools allow you to monitor and review traffic in different ways. Some are free, some require a small charge - all of them will help you know exactly who is passing eyes over your design.

WordPress

41) 10+ Free Magazine Style WordPress Themes to Choose From- A list of free magazine–style themes.

42) WordPress Security Prevention, Reactions, and Scares

43) Custom Digg Counter in WordPress with PHP- A PHP function to grab the number of Diggs from the Digg API and display it in the WordPress post.

Typography

44) On Choosing Type- Choosing type can be sticky business and often result in going back and forth. Check out these guidelines to keep you safe.

45) 5 Principles and Ideas of Setting Type on the Web- Principles, rules and ideas for approaching Web typography decisions in this useful post.

46) 101 Awesome Downloadable Fonts for Designers- PWebsite Free Geekery has a nice list of free fonts all nicely categorized by font style.

Inspiration

47) 49 Professional and Innovative Websites- This is a solid collection of professional websites for inspiration.

48) 20 Blinding White Portfolios- Designflavr has collected a great set of Portfolios, Light or simple White portfolios.

49) Awesome Light Graffiti Pictures- Long Exposure pictures can get pretty awesome if you have the right ideas. Here are some nice collection of Light Graffiti Pictures.

New Lanuches

50) DD Whois-A new Ajax tool that lets you painlessly look up the availability of a domain name, or for registered domains, its whois records.

51) NETTUTS launched!- Collis Ta’eed, the creator of the very successful PSDTUTS, has launched a sister blog about web development titled: NETTUTS - Spoonfed Web Skills.

52) CSS Blogger- A new showcase website featuring some of the best designs.

]]> http://www.noupe.com/best-of/websites-you-shouldn%e2%80%99t-have-missed-in-april-2008.html/feed Incredibly Useful Tool for Collaborating online with your Team http://www.noupe.com/sponsored-review/incredibly-useful-tool-for-collaborating-online-with-your-team.html http://www.noupe.com/sponsored-review/incredibly-useful-tool-for-collaborating-online-with-your-team.html#comments Fri, 25 Apr 2008 13:46:35 +0000 Noupe http://www.noupe.com/?p=261

Springloops.com is a nice Subversion hosting with code deployment and server management features connected with Bascecamp. Allows you to code in parallel and share your code safely along with other great features that become indispensable for everyone in your web development team.

This tool effectively coordinates joint workflows, allowing rapid coding by simultaneous users, while eliminating problems such as overwritten and lost files. Team members can easily commit changes, view logs, back-up to previous versions of code, and easily deploy changes to your servers.

Main Features of Springloops
  • Ultimate Workflow- Easily apply a professional workflow process for building your web applications.

  • Powerful Reviews- Review changes of a revision or of a whole day. Also compare days or revisions. Narrow your changes reviews to a desired path with An Ajax auto complete.

  • Basecamp Integration- Import projects and people. Show your progress. Stay in synch. And in such way that To-Do lists get second dimension - you can use them for bug tracking with approving and commenting or as a friendlily quality assurance tool.

  • Unique Ajax source code browser and nice changes views which is rich in information and simple to read.
  • Innovative Deployment features- Deploy sites and code changes to staging and production servers in safe and efficient way. Also you can get rid of uploading files via ftp and overwriting others files on the server.

Springloops provides a free plan as well. You can sign up and try it out yourself now.

]]> http://www.noupe.com/sponsored-review/incredibly-useful-tool-for-collaborating-online-with-your-team.html/feed 51+ Best of jQuery Tutorials and Examples http://www.noupe.com/tutorial/51-best-of-jquery-tutorials-and-examples.html http://www.noupe.com/tutorial/51-best-of-jquery-tutorials-and-examples.html#comments Thu, 24 Apr 2008 12:39:58 +0000 Noupe http://www.noupe.com/?p=254

There’s stuff all over the Web about jQuery, but finding the best tutorials to get you started can be tough. Here are Examples and tutorials from jQuery masters to keep you on the right track.

We will start with jQuery masters and feature some of their best tutorials, then we will move on to more categorized tutorials, cheat sheets and hacks.

You can also take a look at other 3 articles in this series :

So let’s get started and don’t forget to subscribe to our RSS-Feed to keep track on our next post in this series.

John Resig

John Resig, creator of the JQuery JavaScript library and author of Pro JavaScript Techniques, is a Mozilla technologist focused on the relationship between Mozilla and the world of JavaScript libraries.

Featured Tutorials of John Resig

15 Days Of jQuery

15 Days Of jQuery-Fantastic tutorials and example code that takes you from zero to hero in no time flat.

Featured Tutorials of 15 Days Of jQuery

Learning jQuery

Learning jQuery- Getting to know the library of choice for unobtrusive JavaScript.

Featured Tutorials on LearningjQuery.com

Bassistance

Bassistance- Goes through the basics of jQuery, all the way up to building plugins.

Featured Tutorials on Bassistance
  • Getting Started with jQuery- This guide is an introduction to the jQuery library. It starts from ground up and tries to explain details where necessary. It covers a simple hello world example, selector and event basics, AJAX, FX and usage and authoring of plugins.

Cody Lindley

Cody Lindley- Who created the ThickBox and jTip plugins.

Featured Tutorials on Cody Lindley

Remy sharp’s Blog

Remy sharp- Written many useful tutorials and plugins on his own blog, also he is the man behind the very useful jQueryForDesigners website which have many useful tutorials requested by his own readers.

Featured Tutorials on Remy sharp’s Blog
  • Text box hints- You will see a lot of web sites with search boxes have text already populated inside of the field and when you select the input text box it disappears and reappears when it’s not selected. This tutorial will show you how can add a small amount of jQuery to add this feature to any of your web sites.
  • Auto-populating Select Boxes using jQuery & AJAX- Allow the user to select a top level category from one select box and to automatically populate the sub-category using jQuery and Ajax.
Featured Tutorials on jQueryForDesigners
  • Using Ajax to Validate Forms- With this tutorial you will be able to have your first forms that do the following: 1) Live username checking, 2) Password confirmation and strength, 3) Checking if an email address is already registered, 4) URL validation
  • Image Cross Fade Transition- How to fade one image in to another?

Web Designer Wall

  • jQuery Tutorials for Designers- This article contains 10 visual tutorials intended for web designers and newbies on how to apply Javascript effects with jQuery. Effects include: Simple slide panel, Simple disappearing effect, Chain-able transition effects, Accordion, Animated hover effect, Entire block clickable, Collapsible panels.

CSS-Tricks

CSS-Tricks is a home for examples, tutorials, tips, tricks, and news regarding Cascading Style Sheets. Chris Coyer is getting into jQuery lately and posting interesting jQuery tutorials in his journey to learn jQuery.

Featured Tutorials on CSS-Tricks

Getting started with jQuery

  • The jSkinny on jQuery- A tutorial on the jQuery javascript library (from a Ruby/Rails perspective).
  • How to Get Anything You Want- An introduction to jQuery selectors and traversal methods, and their use in navigating the DOM.
  • It’s all about CSS- If you’ve got a good understand of CSS selectors, then you’re already familiar with how to query the DOM.
  • jQuery Crash Course- For those who’d like to learn more about jQuery, one of the more popular libraries, here’s a crash course written with code-savvy web designers in mind.

  • jQuery in 15 minutes- A short introduction to jQuery.
  • jQuery Basics- This section covers basic usage of jQuery from getting started to finding elements and working with CSS.
  • Easy JavaScript for Designers- A nice little writeup for the jQuery Java Script Library. Designers need all of the coding shortcuts they can and jQuery seems to deliver.

jQuery Cheat Sheets

  • jQuery Cheatsheet- The cheat sheet comes in two flavors: 1) Made for iPhone and iPod Touch, and any other mobile device with internet access. 2) Old-school printable A4 cheat sheet


  • jQuery 1.2 Cheat Sheet

Building jQuery Plugins

jQuery Effects and Techniques

Ajax development with jQuery

  • Easy Ajax with jQuery- Akash Mehta will show us how to simplify the process of adding Ajax to the application even further with the help of jQuery, a popular JavaScript library.
  • Simplify Ajax development with jQuery- Discover how easy Ajax and DOM scripting can be
  • Quick and Dirty AJAX- A walk through tutorial showing some of the basic ways you could use jQuery to add AJAX functionality to your site.
  • A Quick Code Igniter and JQuery Ajax Tutorial- A step-by-step tutorial will show you how to combine the power of jQuery with Code Igniter (a PHP framework based on the MVC design pattern) to quickly and painlessly pass a record ID through the javascript and over to the server, where it will be passed to a mysql database, used to retrieve some data, and sent back to the page for display.

jQuery Fixing common Browser Issues

]]> http://www.noupe.com/tutorial/51-best-of-jquery-tutorials-and-examples.html/feed Using CSS to Do Anything: 50+ Creative Examples and Tutorials http://www.noupe.com/css/using-css-to-do-anything-50-creative-examples-and-tutorials.html http://www.noupe.com/css/using-css-to-do-anything-50-creative-examples-and-tutorials.html#comments Mon, 21 Apr 2008 13:15:04 +0000 Noupe http://www.noupe.com/?p=230

CSS can powerfully open the doors to a lot of rich and unique techniques. Today we are presenting a round-up of CSS coding, creative approaches and techniques. Definitely worth taking a very close look at! We also included some basic techniques you can probably use in every project you are developing. This is just the third article in this series , the forth part will be coming soon, stay tuned and Enjoy!

You can also take a look at other 2 articles in this series :

So let’s get started and don’t forget to subscribe to our RSS-Feed to keep track on our next post in this series.

Styling Lists

The Amazing <li>- With a little CSS, the <li> becomes one of the most powerful and versatile tags in a web designer's arsenal. This article is a tutorial and a tribute to the amazing <li>.

So let’s get started and don’t forget to subscribe to our RSS-Feed to keep track on our next post in this series.

Better Ordered Lists (Using Simple PHP and CSS)- Here is an example where you ditch the traditional ordered list and create your own!

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.

List Based Calendar- A simple way to add multiple views to a calendar, so you can view your events in a simple list, or in a month based calendar format.

Forms and Form Elements

Datasheet-style form using HTML and CSS- Make a datasheet-style web form using HTML, CSS and JavaScript with multiple similar records,

Styling File Inputs with CSS and the Dom - File inputs (<input type="file" />) are the bane of beautiful form design. No rendering engine provides the granular control over their presentation designers desire. This simple, three-part progressive enhancement provides the markup, CSS, and JavaScript to address the long-standing irritation.

Better Web Forms: Redesigning eBay’s Registration- Is a detailed walkthrough of simple changes that have a dramatic positive impact.

Uni-Form- Uni-Form is an attempt to standardize form markup (xhtml) and css, “modularize” it, so even people with only basic knowledge of these technologies can get nice looking, well structured, highly customizable, semantic, accessible and usable forms

Footers

A CSS sticky footer that just works- In just a few simple CSS classes with minimal extra HTML markup, you can get a sticky footer that even beginners can get a handle on. It’s been tested in IE 5 and up, Firefox, Safari and Opera.

MAKING YOUR FOOTER STAY PUT WITH CSS- How to make your footer dock to the bottom of the screen.

New ideas for Image Replacement

Create Custom Search Bars - With Image Replacement using CSS

HR Image Replacement with CSS- How to replace the HR tag with an image that works cross browser.

Image Sprite

Image Sprite Navigation With CSS- Creating a navigation using an image sprite, you can have a complete navigation, rollovers and all, by only using one image.

CSS image techniques

Create Resizable Images With CSS- A new technique to resize images when the user increases their browser’s text size. Images are resized along with the text rather than staying constant in size.

CSS Stamps- Using the CSS property border and outline to achieve the stamp look.

Image Captions Generated with CSS and JavaScript- The names are not part of the image - they are stored in the img’s title attribute.

Cross-browser semi-transparent backgrounds- Semi-transparent backgrounds are nice. They would be more popular, but Internet Explorer doesn’t support .png transparency. There are a few clunky workarounds. Here’s another that’s a little less clunky.

CSS Rollovers- Learn how to create a simple rollover image using CSS.