Create an Advanced CSS3 Menu

jQuery Style Vertical Menu with CSS3 – No Javascript

Sweet tabbed navigation using CSS3

Drop down menu with nested submenus using CSS and a little JavaScript

How to Create a CSS3 Wheel Menu

How to Create a Modern Ribbon Banner Navigation Bar with Pure HTML/CSS3

Create a Slick Menu using CSS3

Recreating the OS X Dock with CSS

CSS3 Mega Drop-Down Menu

Making a CSS3 Animated Menu

Apple’s Navigation Bar Using only CSS

Sexy Drop Down Menu w/ jQuery & CSS

Dark Navigation Buttons

CSS3-Only Horizontal Drop Line Tab Menu

CSS3 Minimalistic Navigation Menu

Use CSS3 to Create a Dynamic Stack of Index Cards

1. Awwwards

2. Webcreme

3. Unmatched Style

4. Best Web Gallery

5. CSS Design Awards

6. Css Cake

7. Css-Showcase

8. The Design Inspiration

9. Moluv

10. CSS Winner

11. CSS Heaven

1. Sexy Drop Down Menu w/ jQuery & CSS

Preview Demo

2. Create The Fanciest Dropdown Menu You Ever Saw

Preview Demo

3. CSS3 Mega Drop Down Menu

4. Sliding Jquery Menu Tutorial

Preview Demo

5. Create Vimeo-Like Top Navigation

Preview Demo

6. Creating an Outlook Navigation Bar using the ListView and Accordion Controls

Preview Demo

7. Drop Menu

Preview Demo

8. A Cross-Browser Drop-Down Cascading Validating Menu

Preview Demo

9. Superfish v1.4.8 – jQuery Menu Plugin By Joel Birch

Preview Demo

10. jQuery (mb)Menu 2.7

Preview Demo

11. Smooth Navigational Menu (v1.31)

Preview Demo

12. Longed-For Multi-Level Drop-Down Menu Script

Preview Demo

13. Reinventing a Drop Down with CSS and jQuery

Preview Demo

14. Styling Drop Down Boxes with jQuery

Preview Demo

14. Designing the Digg Header: How To & Download

Preview Demo

15. A Circular Menu With Sub Menus

Preview Demo

16. Perfect Signin Dropdown Box Likes Twitter with jQuery

Preview Demo

17. Fancy Sliding Menu for Mootools

Preview Demo

You may also be interested in one of these older posts
20 Awesome Firefox Add-ons For Web Developers
12 Indispensable Adobe AIR Apps for Web Developers
130+ Free SEO Web Tools and Search Engine Optimization Software
List Of Essential PHP Quick References And CheatSheets
10+ Rare WordPress Theme Options Page Tutorials To Get You Started

1. Coderun

CodeRun Studio is a cross-platform Integrated Development Environment (IDE), designed for the cloud. It enables you to easily develop, debug and deploy web applications using your browser.CodeRun Studio can be used instead or alongside your existing desktop IDE

Try Coderun

2. Kodingen

Kodingen started with two brothers (Devrim & Sinan) coming together to give something back to developers community.It is an Online Development Environment, Online Code Editor,cloud coding and Web-based code editor.

Try Kodigen

3. Cloud9ide

Cloud9 is a state-of-the-art IDE that runs in your browser and lives in the cloud, allowing you to run, debug and deploy applications from anywhere, anytime. A complete game-changer that will change the way we develop applications forever.

Try Cloud9ide

4. Amy Editor

Created in 2007 by Petr Krontorád, Amy Editor is an advanced editor with a look and feel of a Mac. Amy Editor features lots of useful options, such as line numbers, syntax highlighting, snippets for more than 20 languages, collaboration, and more.Amy can edit, save and export files. It can also manage projects.

Try Army Editor

5. JSBin

As you can guess, JSBin is an online text editor primarily focused on Javascript. I really love the clean and simple interface. Each code can be tested using a powerful “Preview” feature, and then exported into a text file.Another good thing to note is that JSBin can import popular Javascript frameworks such as jQuery or Mootools, so you can test your js plugins as well.

Try JSBin

6. Bespin

Using HTML5 quite intensively, Bespin is a new project from Mozilla Labs. This online editor is very powerful and has lots of cool options. In order to use Bespin, you have to create an account. Note that Bespin can be downloaded and then embedded in any kind of web project, only by adding two files in your header!

Try Bespin

7. Codeita

Codeita is a powerful, easy to use, cloud-based, web development environment.  It’s a powerful code editor, an advanced svg image editor, and an out of this world project management and collaboration tool. It allows users to code, develop, brainstorm, communicate and then publish projects and files to your web server.

Try Codeita

8. ecoder

ecoder is a simple, web-based code editor, which includes a file browser, file uploader, and tabbed system to allow multiple files to be edited at the same time. using this web-application developers can edit code directly online, real-time syntax highlighting is handled by textarea and keyboard short-cuts lend it the feel of a locally installed application.

Try Ecoder

9. Workspace

Workspace is a online development environment that facilitates the complete management of your Web-based projects. With a syntax highlighting editor built right in, it provides the ability to edit text, PHP, JavaScript, HTML, Java, Perl, SQL and other types of files directly on a remote server. Finding and managing those files is made easy with a cutting-edge file management utility embedded right in the app. With this utility, users can connect to, and manage the files on an arbitrary number of ftp sites simultaneously.

Try Workspace

10. EditPad

Unlike the first few editors featured in this post, EditPad is simple and minimal. No syntax highlighting, no project management…Just a plain page to type your text without any distractions. I’m not a big fan, but this “online notepad” can be a life saver on a particularly slow machine.

Try Editpad

11. 9ne

9ne (Pronounced Nine) is a nice online text editor, based on the well known GNU Emacs. 9ne provides most of the basic Emacs functionalities and currently supports XML and Javascript syntax highlighting modes.

Try 9ne

12. jsvi

JSVi has always been one of my favorite text editors of all times. Why? Because it is powerful, fast, and you’ll find it everywhere: GNU/linux distros, Mac, web servers… Now, you’ll also find Vi online with this implementation called JSVI. Most Vi functions have been implemented into this web-based version.

Try Jsvi

13. Squad

Squad is a web-based collaborative code editor which means you can access it from anywhere and your settings are always with you. No need to install a clunky desktop application.

Try Squad

14. DarkCopy

Have you ever felt distracted when working on a buggy piece of code? If yes, there’s no doubt that you will enjoy DarkCopy. This simple online text editor has limited functions but it provides a dark, clutter-free environment so you can concentrate on the most important: getting things done.

Try Darkcopy

15. ShifEdit

Try Shifedit

There are several things to look at when your website has bad latency.  Slow loading pages can be frustrating for viewers and can be loss of business for you.  There are several things that cause latency issues on websites.  This article will review examples from popular websites and examine the tools they use to help ensure that a website loads quickly and efficiently for viewers.

You may also be interested in one of these older posts
List Of Essential PHP Quick References And CheatSheets
5 Essential Google Cheat Sheets Which Surely Will Come in Handy
TOP CSS Cheatsheets
25 Essential Tutorials And Resources For Learning CSS3

1. Do Not Allow Hotlinking - Hotlinking refers to the use of files, hosted on your website, on someone else’s blog or website.  These files use your bandwidth when displayed through a hotlink.  Referrer logs will show unknown websites sites such as social networking websites or message forums and are one way to tell if someone is hotlinking to your server.  Comparing the number of times a file is viewed as opposed to the web page where it resides is another.  Clues such as high views for a file and low views for the web page is a tip that the file is hotlinked.

Eliminating hotlinking is easy.  Hotlinking protection should be turned on in your control panel.  Also, for more advanced users, it is effective to block hotlinking by creating an .htaccess file.  This allows you to set a filter for requests from other websites to view various files on yours.

2. Enable Caching – A server side feature you can use to decrease load times for your website is PHP caching.  WordPress is a resource intensive application, yet maintains fast load times due to this tool.  Most web hosting companies offer an application like Zend Optimizer, effectively boosting the power of anything written in PHP.  With cashing enabled, servers compile the page once, then the plugin saves the page image as a static HTML file.  The next time that WordPress tries to open the page, the  HTML file will be opened, saving the work for the server.

3. Code & JavaScript Compression – A careful review of the source code and removal of unnecessary characters is another way to increase load times for a websites.  Comments left in the coding are one form of unnecessary character usage.  It is important to remember that not only can compressed code can be very difficult to read, but deleting the wrong characters can be devastating.  It is wise to only do this if you are experienced with code.  Software programs, such as Gzip, accomplishes the same end result but with much less risk to users.

4. Poorly Optimized Databases – Google uses thousands of engineers to keep their websites adjusted as needed, ensuring load times are optimized.  Without extra manpower, there are several things you can tweak to help your own database load faster.  Using phpMyAdmin to optimize the database, as well as optimizing Joomla, Mambo, and WordPress will increase load times.  Checking and adjusting the back end software for your site also helps.

5. Location of Server - The location of the server in use is important.  Quite simply, closer is faster.  The use of a simple ping test will determine how far the server is from you.  You may wish to choose a new web hosting company if their location is more than 40 miles away.  It is possible that the company be willing to move you to a closer data center in an effort to retain clients.

6. CSS Files Over 75KB – CSS files are always recommended between 15-30kb.  Larger websites however, may need to use larger files.  Other quick fixes are basic color expression in four letter hex codes, and CSS class consolidation will also help the problem.  Of course, regular maintenance of the website, including removal of old items no longer used, will also help speed up load times.

7. Image Optimization - The use of images is important but choosing the best image format and size results in a website that loads quickly.  GIF images simply load faster, and JPEG images should be reserved for photographs needing to maintain quality when the image is compressed in size.

Depending on the number of images displayed on a website, it can be very important to choose the correct scale for images on it.  The decision to display one larger or several smaller images is dependent on the type of page displayed, and the information the builder wishes to convey.  Popular websites like Yahoo! and Facebook each display images and both load quickly, but their method of image display differs in the size and number of images shown at any one time.

Thanks to CSS, we can now define a website’s appearance in a fraction of the time we used to, but why stop there? A good CSS editor can make the entire CSS process even faster, more accurate and…well… just more enjoyable. Most of us use Dreamweaver for all of our CSS editing needs, but it’s expensive and doesn’t offer some of the features you get from cheaper, often free alternatives.

First-rate CSS editors make writing CSS much easier, but that’s not all they’re good for. The vast majority will check your CSS for errors and let you delve into the code associated with your sites and the sites of others. With so many people now using these CSS editors, support it very easy to get hold of. There are loads of inexpensive editors available, so why not give a couple a try? You’ll find a review of the 10 best below.

You may also be interested in one of these older posts
20 Awesome Firefox Add-ons For Web Developers
12 Indispensable Adobe AIR Apps for Web Developers
130+ Free SEO Web Tools and Search Engine Optimization Software
List Of Essential PHP Quick References And CheatSheets
10+ Rare WordPress Theme Options Page Tutorials To Get You Started

1. Notepad++ (free)

Windows users can’t do much better than the free source code editor, Notepad++. Besides a long list of features, which includes auto-completion, syntax highlighting, bookmarking, drag and drop and regular expression search/replace, Notepad++ has been designed to be good to the environment, using as little CPU power as possible. Users can feel smug in the knowledge that their editor is actively reducing their greenhouse gas emissions!

Notepad++ is not just for editing CSS. You can use it for editing C, C++, Java, PHP and a whole host of other programming languages. Its tabbed interface is great, letting you work on several projects simultaneously, and all icons used are instantly recognisable. Furthermore, Notepad++ has been around for a while now, so does not suffer from the bugs which afflict many newer editors.

2. Style Master ($59.99)

Style Master, for Mac and Windows, is an editor suitable for beginners and experts alike. Newcomers to coding will find its in-depth tutorials easy to follow and old hands will be impressed with the number of features on offer for analysing and debugging sites.

Such features include MRI, which suggests selectors for any element you click on, and X-ray, which reveals the dimensions, padding, margins and position of any element and works in Safari, Firefox and Internet Explorer. Style Master comes with 20 handy CSS templates for you to use, all of which are perfectly clean and well laid out.

3. Stylizer (free version)

Available for Mac and Windows, Stylizer, from Canadian company Skybound, helps you to create and edit CSS fast. It places a website and stylesheet side-by-side, so that you can see every change you make in real time. No longer, therefore, will you have to rely on writing in a text editor and constantly refreshing a browser window. Its grid-like interface looks superb, is extremely user-friendly and makes CSS errors a thing of the past. Image replacement, clear fixes, positioning and other complex techniques are made much easier for CSS novices.

Stylizer’s strongest features include Bullseye, an inspector which uncovers all the CSS rules affecting any element you click on; Cleanser, which parses and validates any CSS you import; and Two Click Colouring, which helps to simplify the colour picking process. Stylizer is ideal for beginners who want to be able to code without learning the boring basics.

4. PSPad (free)

PSPad is a versatile editor for Windows. It’s a small programme, just 3.1MB to download, but carries real weight with many developers. It specialises in syntax highlighting and can deal with a large number of file types. Standard features include templates, search and replace in files, a HEX editor and an integrated free version of the superb CSS Editor, TopStyle Lite, which must be downloaded separately. Even if you’re just looking for a standard text editor, PSPad could be the one for you- its character and word frequency checker is ideal for those writing keyword-based articles.

5. Xyle Scope (free)

Cultured Code’s free CSS suite for Mac, Xyle Scope, is a very accomplished and highly recommended programme. Users can run it in Browser Mode, which lets you surf the web in Safari, or Selection Mode, which brings up the HTML and CSS associated with any part of a displayed web page you click on, allowing you to correct annoying CSS errors.

Although primarily designed to let you uncover and investigate code, Xyle Scope can also be used as a CSS editor. It also integrates well with superior, external text editors like BBEdit, TextMate and TextEdit. You can enter CSS yourself or let Xyle Scope help you if you’re a beginner.

6. Stylesheet Maker ($34)

CoffeeCup’s Stylesheet Maker, Windows only, is a nice and simple CSS editor which lacks some features of more technical rival software, but makes up for it with straightforward design. You can use it to open, edit and save in CSS, HTML and .txt formats, and create CSS for Netscape and Internet Explorer, testing it in multiple browsers. This is really one for beginners only. They’ll love the class and ID wizards which greatly help in creating full-featured CSS with control over text placement, fonts and backgrounds.

7. CSSEdit ($30)

CSSEdit, by Mac Rabbit, is a highly effective, well structured and pretty cheap CSS editor which you’re bound to enjoy using. Available for Mac only, it’s been designed solely with CSS in mind, unlike some of the other editors in this list. It works perfectly with TextMate (which is a very cost effective combo, by the way) and in harmony with other external programs, like Transmit.

CSSEdit’s packed full of great features, which include Preview, which makes changes to your website in real time (no refreshing) and X-Ray, which shows you exactly where an element is on your page. My favourite feature, however, is Milestones, which lets you fix bugs without the fear of losing work. I recommend you heed the CSSEdit warning: “May cause extremely attractive websites and bouts of validating code. Use with care.”

8. JEdit (free)

While novices will find Stylizer and CSSEdit much easier to get to grips with, JEdit, for Windows, Mac and Unix, is one for the experts. Developers can use it to edit, auto indent and syntax highlight over 130 languages.

What separates JEdit from other editors is the 150 or so plugins available, which have been released over the past 12 years since it was first created. These include spell checker using Aspell, text auto-complete and the XML plugin that’s needed for editing CSS, as well as XML, HTML and JavaScript. Besides plugins, you can customise with macros to create your ideal editing environment.

9. Style Studio ($49.99)

Style Studio CSS Editor, for Windows, has been designed to make CSS quick and easy to write and implement. Drag and drop, auto-replace and custom hotkeys for code snippets reduce your CSS struggle. Its inbuilt CSS validator makes sure that your CSS is clean and error-free every time as it automatically pinpoints problems. Its Browser Filter detects the browser your visitors are using, adjusting the CSS accordingly so your site’s always looking at its best. Windows users will feel instantly at home using Style Studio as it has been closely modelled on MS Office 2000 and XP.

10. Rapid CSS 2010 (€ 29.85)

Rapid CSS 2010, from Blumentals Software, is a popular CSS editor which can save you lots of time and effort. Beginners will appreciate the fact that they can get Rapid CSS to write CSS for them, rather than inputting it manually, and everyone will love its CSS Checker and Validator, similar to that of Style Studio, which allows you to instantly target and fix problems. Rapid CSS is also integrated with CSE HTML Validator for extra safety.

Besides the CSS Checker, other extremely handy features in this Windows only editor include the multi item clipboard, X-Ray (similar to CSS Edit), search and replace in files, CSS code compressor, built-in CSS reference and CSS inspector, which adds, removes and modifies CSS properties without the need for property names.

You may also be interested in one of these older posts
Awesome And Free Fonts For Web Designers
13 Magnificent Free WordPress Portfolio Themes
13 Free Professional Looking WordPress Magazine Style/CMS Themes You Wish You Knew Earlier

1. 5 Techniques to Acquaint You With CSS 3

2. Get Started with CSS 3

3. Six Questions: Eric Meyer on CSS3

4. Take Your Design To The Next Level With CSS3

5. HTML 5 And CSS3 The Techniques You’ll Soon Be Using

6. Introduction To CSS3: Part 1 What is it?

7. CSS3 Selectors Explained

8. Progeressive Enhancement With Css3

9. Liquid Faux With Background Size

10. Structural CSS

11. CSS3 Borders

12. 11 Classic CSS Techniques Made Simple With CSS3

13. CSS @ Ten: The Next Big Thing

14. Introduction to CSS3 By W3C

15. The CSS3 ‘box-sizing’ concept

16. Tooltips with CSS3

17. CSS3 Links Creation and Usage

18. CSS3 Visual Cheat Sheet

19. Multiple Backgrounds (CSS3)

20. CSS3 Multiple Columns

21. Semantic Code: Put More In Get More Out

22. Stay on: target

23. CSS Text Shadows And Background Sizing

24. A Mock-up Interface Using CSS3 Colour

25. The fundamental problems with CSS3

I hope you find these resources valuable. If I’ve missed any of the links, please don’t hesitate to comment.

Hello, in this post i’m gonna show you how to implement the page peel effect for blogger. This was origianlly done by Sohtanaka.

How to Use

Simply copy all of the code on this page to your clipboard (you can do this easily using the keyboard shortcuts CTRL+A followed by CTRL+C).

Next, locate this line in your blog template:

</head>

Paste the code from your clipboard directly before this line.

Now add the following code just after<body>

<div id='pageflip'>
<a href='http://feeds.feedburner.com/naeemnur'><img alt='' src='http://www.wallheaven.com/page_flip.png'/></a>
<div class='msg_block'></div>
</div>


View Demo

Understanding Divs, Css, and How They Work Together by Ethan and Adam

If you are new to XHTML, you should not miss this video. This video will help you understand how DIVs and CSS work together. The tutorial work on Dreamweaver and with this, it’s more easier to follow what the author was doing. In this website, you can find other videos, maybe useful for anyone who is beginner with CSS, Web layout in PTS…
Watch the Video

Create a Fully CSS Website Layout by Nathaniel

The most famous people in Youtube about posting Design Tutorial Videos. In this video, you will see how to design a complete basic website layout with css, learn all about using divs, creating CSS rules, targeting divs, creating a background, and so much more! And there are other videos in his website helpful for designer. Check it all!
Watch the Video

CSS Tips & Tricks series by Stephen Korecky

Not a big collection but this series is helpful for you, who want to learn CSS  Tips and Tricks that users on over the internet are doing. This series contains 8 episodes and maybe continue to update.
Watch the Video Series

How to Convert a PSD to XHTML by Jeffrey Way

This video is a complete tutorial from PSD slicing and CSS styling… You can see how he did this video with PST, Visual Studio … He said this movie will shows you exactly how to convert a PSD into perfect XHTML/CSS. Yes, i think so.

Watch the Video

Converting a Photoshop Mockup by Chris Coyier

The video below is a part two of series made by Chris Coyier after lots of great feedbacks he received with part one right here. Because of part one is just 10 minutes lenght, he did the part two and in the great video he did, he show you everything, exactly how he created the CSS-Trick layout, but it’s just a mini-version of the current version of CSS-Tricks.
Watch the Video

Below is a roundup of the various CSS frameworks out there and a short description from the authors of each framework.

960 Framework
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

Blueprint CSS Framework (My Favorite)
Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.

Elements CSS Frameworks
Elements is a down to earth CSS framework. It was built to help designers write CSS faster and more efficient. Elements goes beyond being just a framework, it’s its own project workflow.It has everything you need to complete your project, which makes you and your clients happy.

CwS CSS Framework
If you’ve been creating sites with CSS for a while you may be getting frustrated with having to recreate and retest basic layouts on a regular basis. In this article I’m trying to illustrate a simple way of skipping the tedious startup on your average project, letting you get to the interesting stuff as quickly and efficiently as possible. I’ve not attempted to explain the layouts included here so it may not be suitable if you’re a CSS beginner. Sorry about that… Feel free to dissect them yourself if you’re interested; I’ve kept them as simple as possible.

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

YUI Grids CSS (i like this too)
The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations.

Boilerplate CSS Framework
As one of the original authors of Blueprint CSS I’ve decided to re-factor my ideas into a stripped down framework which provides the bare essentials to begin any project. This framework will be lite and strive not to suggest un-semantic naming conventions. You’re the designer and your craft is important.

CleverCSS
CleverCSS is a small markup language for CSS inspired by Python that can be used to build a style sheet in a clean and structured way. In many ways it’s cleaner and more powerful than CSS2 is. The most obvious difference to CSS is the syntax: it is indentation based and not flat. While this is obviously against the Python Zen, it’s nonetheless a good idea for structural styles.

WYMstyle: a CSS framework
Description from WYMstyle: WYMstyle is a set of CSS files, that you can easily combine to very quickly create the layout of your web sites. WYMstyle aims to suppress the tedious compatibility testing across browsers for each created website, by providing CSS modules which are reliable and well-tested.