Now days CSS3 and HTML5 have trendy way of development and useful combination of modernizing the way we design websites. We’ve seen most of web designers and developers creating and presenting a notable Cascading Stylesheet technique and helping tools. Some time we paid lot of time into search a useful tutorial for learn about CSS3, we arrange a ultimate list of free CSS3 tutorials and techniques to get maximum advantages in their designing and development needs.

We listing certain useful categories as: top navigation’s, link menus, latest css3 buttons, text effects using css3, image galleries over and done with css3 and alternate animation effects of css3.

 Subtle CSS3 Typography That You’d Swear was Made in Photoshop

Thanks to text shadows, outlines, transitions, and even text gradients, we can now create cool typography that you’d swear had to be made with a program like Photoshop. Nope, all CSS3 baby! Let’s take a look in this video quick tip.

CSS3 Loading Spinner

I made a little CSS3 rotate-y loading graphic thing just for kicks. Here’s an animated GIF of the glory as it appears in WebKit.

Slide Down Box Menu with jQuery and CSS3

In this tutorial we will create a unique sliding box navigation. The idea is to make a box with the menu item slide out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left or to the right depending on which menu item we are hovering.

Create a Multi Color and Size CSS3 Buttons

Today we are going to create some CSS3 Buttons which are available in multi color and size.  There are lots of tutorials on creating css3 buttons over internet, But we have created our own css3 buttons for our various wordpress themes which we sold on wordpress marketplaces, so we thought why not to share that buttons with you guyz. So lets follow the steps for creating css3 buttons.

First of all we need to have a simple HTML mark up for our button, here we need to define the class for our link.. like the main class as button then the size class as small, medium or large and then the color class as red, blue, green etc etc.

CSS3 Minimalistic Navigation Menu

As you have probably heard by now, CSS3 animations are a powerful tool, which enables you to create animations which run without the need of applying additional scripting to the page. What is even better, in the next generation of browsers we will have even more powerful tools, including 3D transformations (already present in Safari).

But what difference does it make for us today? At the moment only three browsers give you the ability to animate CSS properties – Chrome, Safari and Opera, which together take up only a small part of the browser market. Firefox is expected to soon join the club, and with the impending release of IE9, it suddenly makes sense to start leveraging this technique.

So today we are making something practical – a simple CSS3 animated navigation menu, which degrades gracefully in older browsers and is future-proofed to work with the next generation of browsers.

Having Fun With CSS3: Spinning Newspapers

Imagine a cop drama taking place in the 1930s. After a streak of bank heists, a young detective is given the case of his life. He accepts the challenge, and after grueling months of hard work and life-threatening situations, he manages to bring the bad guys to justice.

What follows is a classical device used by film makers of the period – newspapers flashing and spinning towards the camera, praising the heroic feats of our protagonist. So lets have some fun and build this classical scene using the CSS3 animations capabilities of the new versions of Firefox, Chrome and Safari, picking useful techniques along the way.

Creating a PHP and CSS3 Powered About Page

In this tutorial, we will be creating a simple about page that is powered by PHP, HTML5 and CSS3. It will present your contact information to your visitors, with an option for downloading it as a vCard (useful for importing it in third party applications).

You can use today’s example as a placeholder for your upcoming personal website, or as an actual about page.

Create Animated Landscape using Pure CSS3

Some months ago we have created an animated landscape using Photoshop and jQuery. So today we just decided to create some what same effect with pure CSS3 technology. Below is the stepwise instruction to create animated landscape with css3.

How to Create a CSS3 Tabbed Navigation

Hiya folks! Today we’re going to have fun creating a CSS3 Tabbed Navigation. In this tut we’re going to be creating the darkwash jean version out of the many different themes available for these awesome tabs just because… #1 we can and #2, there is more styling involved and I can show you more neat tricks with CSS3 than with the other styles. If you prefer, there are much simpler themes in the source files so feel free to follow along with those as the structure is pretty much the same.

Note: Support for IE7 & 8 is there but limited in that the functionality works perfectly but some of the overlay styles aren’t treated properly. If not for the wonderful and awesome CSSPIE and Dean Edwards fix, there would be no support for any version other than IE9.

Ok, now that that’s out of the way, I think it’s time we got started!

Create Animated Price Grid Using CSS3

So here today we will create a animated Price grid using css3 only. No Jquery No Images No flash at all.

How to Create a CSS3 Wheel Menu

There’s no better way to learn CSS3 than to get your hands dirty on an actual project and that’s exactly what we’re going to do. I’m going to teach you how to create an awesome, layered CSS3 wheel menu using a few beginner to advanced CSS techniques. So break out your favorite text editor or IDE and let’s get started on some CSS3 magic!

Today you’ll be learning how to create the candy cane teardrop out of the many different styles and color variations available. You will receive all variations in the source files. Also as an added bonus I’ve added a little bit of optional Javascript so that you can rotate your images depending on the hovered menu item. The source file even comes with its own documentation!

Note: Support for IE is limited at the moment. We’ll mostly be going through this for the purpose of pushing the envelope with what we can do in CSS3… but as with all things on the edge of practicality, it means sacrificing a bit of stability. We will address the IE topic at the end of the tutorial though!

Fancy Image Hover Using CSS3

So here we will try to create fancy image hover with css3 as you all know we can have cool image hover effect using jquery but now using transform and transition properties of css3 we can have the same cooler effect with css3 only.

Apple Navigation with CSS3

Apple is known for very clean design and if you have been to their website in the last few years you’ve seen their primary navigation. It’s a staple of the apple website and today I wanted to take a crack at recreating the Apple navigation using CSS3 techniques.

How to Build a Kick-Butt CSS3 Mega Drop-Down Menu

Often used on e-commerce or large scale websites, mega menus are becoming more and more popular, as they offer an effective solution to displaying a lot of content while keeping a clean layout. In this tutorial, we’ll learn how to build a cross-browser, awesome CSS-only drop-down mega menu, using nice CSS3 features.

Build Awesome Practical CSS3 Buttons

What once required background images and icons can now be created with plain-old CSS. Because modern browsers have access to things like box shadow, gradients, rounded corners, text-shadows, and font-face, we can finally take advantage of this and remove any need for images, when creating visual elements, such as buttons! I’ll show you how in today’s video tutorial.

Animated Navigation Menu with CSS3

Since Last some days we are writing articles on CSS3. And today we will learn here to create animated navigation menu with css3. Here will try to create animated menu with css3 and also will create the same animation using jQuery. So lets start..

Grooveshark Search with CSS3

I am a huge fan of the Grooveshark interface. Every time I look at the site I start to dissect the UI and turn it into code in my head. I wanted to see if I could create the search box only using HTML and CSS. Sadly there is one image and it’s the search icon in the button.  I recently read a tutorial that shows you how to create a custom font and use the font-face property for icons, but they didn’t have the search icon I needed.

CSS3 Chess Board

I was browsing the web today and found something exciting.  I noticed that there are unicode characters for chess pieces.  Always looking for ways to play with CSS3 I decided to try and build a chess board using my new best friend :nth-child and some unicode characters.

Create a Vibrant Digital Poster Design with CSS3

CSS has come a long way in recent years, and with new browser support for a hand full of CSS3 properties we can begin to replicate design styles directly in the browser that beforehand were recently only possible in our design applications. Follow this walkthrough of the making of Circlicious, a vibrant and abstract digital poster design made purely of HTML and CSS.

How to create a kick-ass CSS3 progress bar

As I’ve shown you in some of my recent posts, the new features introduced in CSS3 allows developers to create stunning visual effects. Today, let’s create a fancy progress bar using CSS3 and jQuery, but no Flash or even images.

Impossible Things With CSS Now Possible With CSS3

Today will discuss about some basic properties of css3. Last week one of our reader asked me to post an article based on css3 basic and advanced properties so today we come up with some css3 basic properties.

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

As CSS3 becomes more robust and is more widely supported, the options for fun modern design elements that can be created without graphics are virtually limitless! For a recent project, I decided to see if I could create a centered ribbon banner with pure CSS3. This tutorial will walk you through how it was done.

As it turns out, it’s actually quite easy, using only simple, semantic HTML and some CSS3 trickery thanks to the magic of the the border-width property. The only caveat: As with all new CSS3 techniques, it can act a bit wonky in some IE browsers… we’ll address that at the end of the tutorial.

Animated Wicked CSS3 3D Bar Chart

Do you remember the Wicked CSS3 3d bar chart that I placed online a couple of weeks ago? Paul Irish left a comment, requesting for an example with transitions. My reply was that I was already working on that, and today I’m proud to release the animated wicked CSS3 3d bar chart.

The principle is the same as the previous version: Create a beautiful 3d bar chart. But this time, we don’t create a “stacked” one (since animation would be hard), but several bars placed under each other. When hovering, the animation shows and the bar will grow to the appropriate size.

Create dropdown menus with CSS only

I rarely see drop down menus that behave like drop down lists, but I really like them. I noticed, however, that people often use JavaScript to achieve this effect. Actually, there is a simple way to do it only with CSS.

jQuery quickie: Colourful rating system with CSS3

Today, we’re going to do a relatively simple jQuery tutorial. Rating systems are used a lot on websites, for example to rate how good a certain product, article or comment is. I slightly wanted to improve this idea, by making it more visually attractive.

By using the jQuery Color plugin, we can animate colours. Simply use the animate() function from jQuery to have colours fade to another colour. When using this technique, combined with some CSS3 feautures (rounded corners and drop shadow), we can create a Colourful rating system.

Photobooth with PHP, jQuery and CSS3

In this tutorial, we will be building a jQuery and PHP powered photobooth. It will allow your website visitors to take a snapshot with their web camera and upload it from a neat CSS3 interface.

As you might know, it is not possible to access web cameras and other peripheral devices directly from JavaScript (and it won’t be for some time). However there is a solution to our problem – we can use a flash movie. Flash has perfect web camera support, and is installed on nearly all internet – enabled computers.

The solution we are going to use for this app is webcam.js. It is a JavaScript wrapper around flash’s API that gives us control over the user’s webcam.

Better Check Boxes with jQuery and CSS

In this short tutorial, we will be creating a replacement for the default browser checkboxes in the form of a simple jQuery plugin. It will progressively enhance your forms but at the same time fall back to the default controls if JavaScript is unavailable.

Dark Menu: Pure Css3 Two Level Menu [Tutorial]

Some days ago we released a Freebie called Dark Menu in Free PSD and in this easy to follow tutorial you will learn how to create this two level Dark Menu in HTML and Pure CSS3. No Javascript or Images has been used in the creation of this menu and I hope that you can learn a few techniques that will help you in future projects.

Now, if you aren’t so familiar with CSS3 you can either learn about it at CSS3.info or at W3Schools. You can also use this online CSS3 generator to help you create these styles easily. Off course you need to put all HTML code inside an HTML document and all the CSS styles either in the HTML document header or in a separate CSS file. All colors, effects, shadows are taken from the Dark Menu PSD file. Now let’s start our tutorial.

jSlickmenu: A jQuery plugin for slick CSS3 menus

After releasing several jQuery scripts, I wanted to take the whole jQuery programming to another level. For that reason, I’m proud to release my first jQuery plugin for everyone to use.

The plugin called jSlickmenu, creates, well, slick menus with jQuery. Combined with some great CSS3 features likes rotation and shadows, this plugin can really lift up your design. It’s fairly easy to use, highly customizable and pretty cool (and fun!) to see.

Getting Clever with CSS3 Shadows

HTML5 logo using CSS3

As you probably found out, yesterday, the The World-Wide Web Consortium (W3C) has unveiled the HTML5 Logo. They launched more than a logo as they got also a full branding, including badges, t-shirts and stickers.

So, I suppose that’s a good thing, that HTML5 got some branding, sounds very interesting!
While looking at it and admiring it, as I find it very nice, I thought about how can I do it with CSS3 (typically for me).

Cool notification messages with CSS3 & Jquery

Nowadays, UX is a key factor when it comes about creating/designing a product or system. To keep users happy, developers struggle to create a good experience and a better interactivity.

UX is a term used to describe the overall experience and satisfaction a user has when using a product or system. So, a good UX will always make users happy and businesses more successful. Notification messages are an important part of the user experience and you can’t afford to omit them. A notification alert message should appear every time the user perform important tasks.

In this article, you’ll learn how to create some alert messages with CSS3 and Jquery.

Sexy CSS3 menu

One of the most common elements when talking about a website or an application design is definitely the menu navigation. No matter if vertical or horizontal, simple or complex, a menu is essential and it has to look that way.

In today’s article, you’ll learn how to create a good looking menu using some CSS3 magic.

Pure CSS3 accordion

A while ago, I wrote about the CSS3 :target pseudo-class and how can that help you achieve cool results. Today you’ll learn how to create a pretty simple animated accordion with its help.

Rotating billboard using only CSS3

When I just finished creating the animated 3d helix, I came up with an idea that would look a lot like that one. Instead of having the flip animation on top of each other, I wanted to have them placed next to each other. This looks a lot like an animation most of you will know; a rotating billboard.

When you only show two images, it would be pretty simple since the CSS would look a lot like the CSS from my previous demo. That’s why I wanted to take it just a little step further and let the billboard show three images.

Making a CSS3 Animated Menu

In this short tutorial, we will be using the power of CSS3 effects and transitions, to build a JavaScript-free animated navigation menu which you can use to add a polished look to your website or template. We will be using some neat features such as the :target pseudo selector and :after elements.

Related Posts Slide Out Boxes with jQuery and CSS3

The other day we were wondering how we could show our visitors more of our works. It’s normal that in a blog older posts get forgotten and even if something might still be very interesting and relevant, it get’s lost under the pile of new stuff. So we decided to create something like a little widget that can be used to show related posts in any page. The main idea is to show a fixed list at the right side of the screen with some thumbnails sticking out. When the user hovers over the items, they slide out, revealing the title and two links, one for the related article itself and one for the demo. Additionally, we will have a shuffle button under the list. When pressed, the list gets randomly refreshed with related posts.

Before we use this, we of course, want to share it with you

So, let’s get started!

CSS3 Dropdown Menu

While I was coding the Notepad theme, I’ve learned some new CSS3 features and now I would like to share it with you. View the demo to see a Mac-like multi-level dropdown menu that I’ve created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow will not be rendered.

How to Create A Multi-Step Signup Form With CSS3 and jQuery

In this tutorial we will see how to create a simple multi-step signup form using CSS3 and jQuery. To spice up things a bit, we will include progress bar with the form, so the users will be able to see the percentage of form completion.

Take Your Design To The Next Level With CSS3

Cascading Style Sheets were introduced 13 years ago, and the widely adopted CSS 2.1 standard has existed for 11 years now. When we look at websites that were created 11 years ago, it’s clear that we are a thousand miles away from that era. It is quite remarkable how much Web development has evolved over the years, in a way we would never have imagined then.

So why is it that, when it comes to CSS, we’re stuck in the past and so afraid of experimenting? Why is it that we still use inconvenient CSS hacks and JavaScript-dependent techniques for styling? Why can’t we make use of the rich CSS3 features and tools available in modern Web browsers and take the quality of our designs to the next level?

It’s time to introduce CSS3 features into our projects and not be afraid to gradually incorporate CSS3 properties and selectors in our style sheets. Making our clients aware of the advantages of CSS3 (and letting older deprecated browsers fade away) is in our power, and we should act on it, especially if it means making websites more flexible and reducing development and maintenance costs.

In this article, we’ll look at the advantages of CSS3 and some examples of how Web designers are already using it. By the end, we’ll know a bit of what to expect from CSS3 and how we can use its new features in our projects.

Related posts:

1. The Ultimate HTML5 Tutorials and Useful Techniques We always prefer new technology and techniques for make better...

Related posts brought to you by Yet Another Related Posts Plugin.

If you getting serious to start your online business, it’s high time to make your website and give it a professional look. Although the website’s contents stills number has its significance, but first impression is always carried out by an impressive web design. A profession look of your website will not only please your visitor but will also add to their trust in your products or services. Nowadays, businesses owners lay more focus on the growing competition in the market, and so the business websites gets absolutely ignored. Also, there are many webmaster do not have either the ability or proper time to make their own quality web design, moreover some of them have many websites at hand, and need a lot of time to make a quality website for their selves.

For such businessmen and busy-bodied webmasters, website templates are the easiest way to have a satisfactory and effective design for your website in the most cost-effective manner. Website templates are basically pre-designed website templates available on the Internet. When you have a web template at hand, all you need to do is add your own personal content and you are ready to jump start your own website. Best thing about ready-made website templates is that you can customize the website templates according to your requirements.

There is no such a thing as a fresh and free CSS template to compliment your website. Especially when you have such a wide variety of interesting CSS templates at your disposal. Here is where Templatemo.com comes in, your gateway to the incredible realm of best web templates. No matter its a CSS web template or a Flash web template, Templatemo.com has a spectrum of website templates to cater to your every need. Templatemo.com also features Best Flash Websites so that the visitors may have a clear idea of the website’s services. So pour into Templatemo.com yourself, but first have a look at this interesting round up of web templates from Templatemo.com!

Active

Cafe Bakery

Fruit Art

Garden

Light House

Liquid

Red Blog

Red Top

Tempmo

Wall Shelf

Flash Templates

3d Carousel

3D Curve Photo Gallery

Artistic Company

Cateye

Color Company

Design Studio

Gift Shop

Mini Tour

Nature

Old Age Company

Premium Flash Templates

Children Photography

Concord

Interior Deluxe

iPhone Apps Web

Tropical Photo Studio

Photo Wizard

Subtle Black and Red

Best Flash Templates

Salazar

Silver Pistol

Thierry Mugler

Thingdom

Related posts:

1. LogoBee – A Complete Website to Get the Best Logo for Your Company There is nothing more magical than a logo when it...
2. 8 Factors that can Improve the User Experience of Your Website I have seen a lot of people focusing more and...
3. Why and How to Make Your Website Mobile Phone Compatible (Powered by LaunchBit) Internet and mobile, two amazing inventions of...

Related posts brought to you by Yet Another Related Posts Plugin.

We presenting something special for Web Designers and developers even this useful roundup can help software developers too in their modern techniques based projects, Today we’re sharing Most Useful Cheat Sheets, most of the time we need some rapid solution as we listing in this beautiful article fact whether you want to learn something quickly or don’t want to get stuck on some petty nuances while working on an important project, you have to use some handy cheat sheets.

Cheat Sheets are useful because Web Developers today need to remember more things to be effective doing their job than most people can manage. Most cheat sheets are designed to be printer friendly, so you can have them laying around on your desk as quick reference cards. Here is a collection of useful cheat sheets specifically for front end web development that will help you with HTML, JavaScript, Python, Ruby-on-Rails, ajax, Adobe Photoshop, Adobe Illustrator, CSS3, HTML5, XHTML, XML, MooTools, ASP, VB Script, Prototype, MySQL, jQuery, SEO, htaccess, mod_rewrite, 3D Max, Cinema 4D R8, PHP and CSS.

Disable right-click

Disable right-click contextual menu.

$(document).ready(function(){
$(document).bind(“contextmenu”,function(e){
return false;
});
});

Disappearing search field text

Hide when clicked in the search field, the value.(example can be found below in the comment fields)

$(document).ready(function() {
$(“input.text1″).val(“Enter your search text here”);
textFill($(‘input.text1′));
});

function textFill(input){ //input focus text function
var originalvalue = input.val();
input.focus( function(){
if( $.trim(input.val()) == originalvalue ){ input.val(”); }
});
input.blur( function(){
if( $.trim(input.val()) == ” ){ input.val(originalvalue); }
});
}

Cascading Style Sheet Level 2 Visual Cheat Sheet

CSS Cheat Sheet (V2)

HTML Cheat Sheet

jQuery 1.3.2 and 1.1.3 Cheat Sheets

jQuery 1.3 Cheat Sheet

Ruby on Rails Cheat Sheet

jQuery Cheat Sheet 1.2

Opening links in a new window

XHTML 1.0 Strict doesn’t allow this attribute in the code, so use this to keep the code valid.

$(document).ready(function() {
//Example 1: Every link will open in a new window
$(‘a[href^="http://"]‘).attr(“target”, “_blank”);
//Example 2: Links with the rel=”external” attribute will only open in a new window
$(‘a[@rel$='external']‘).click(function(){
this.target = “_blank”;
});
});
// how to use
<a href=”http://www.opensourcehunter.com” rel=”external”>open link</a>

HTML 5 Cheat Sheet

HTML5 Visual Cheat Sheet (Reloaded)

(X)HTML Elements and Attributes

HTML5 Canvas Cheat Sheet

Detect browser

Change/add something for a certain browser.

$(document).ready(function() {
// Target Firefox 2 and above
if ($.browser.mozilla && $.browser.version >= “1.8″ ){
// do something
}

// Target Safari
if( $.browser.safari ){
// do something
}

// Target Chrome
if( $.browser.chrome){
// do something
}

// Target Camino
if( $.browser.camino){
// do something
}

// Target Opera
if( $.browser.opera){
// do something
}

// Target IE6 and below
if ($.browser.msie && $.browser.version <= 6 ){
// do something
}

// Target anything above IE6
if ($.browser.msie && $.browser.version > 6){
// do something
}
});

jQuery 1.4 API Cheat Sheet

jQuery 1.4 Cheat Sheet

Oscarotero jQuery 1.3 (as wallpaper)

jQuery Selectors

MooTools Cheat Sheet

A quick reference guide for MooTools, a super lightweight web2.0 javascript framework.

Adobe Illustrator Shortcuts

Preloading images

This piece of code will prevent the loading of all images, which can be useful if you have a site with lots of images.

$(document).ready(function() {
jQuery.preloadImages = function()
{
for(var i = 0; i<arguments.length; i++)=”" {=”" jquery(=”"><img>”).attr(“src”, arguments[i]);
}
}
// how to use
$.preloadImages(“image1.jpg”);
});
</arguments.length;>

HTML Color Codes Matching Chart

Another must have for designers. Matching color codes in CMYK, RGB and Hex was never this easy.

ASP/VB Script Cheat Sheet

The ASP cheat sheet is designed to act as a reminder and reference sheet, listing various of the oft-forgotten parts of ASP / VBScript. I no longer work full-time with ASP, so to ensure the cheat sheet was as helpful as possible, I roped in one Allan Wenham, an excellent ASP / .NET developer, to assist.

HTML Character Entities Cheat Sheet

This contains a list of the assigned character codes in HTML, with an example of how they are displayed, and description.

Prototype Cheat Sheet

A handy reference guide for Prototype, a JavaScript framework for easy Ajax and DOM manipulation.

MySQL Cheat Sheet

A quick reference guide for MySQL, including functions (both in MySQL and PHP), data types, and sample queries. Available in PDF and PNG formats.

CSS Styleswitcher

Switch between different styles?

$(document).ready(function() {
$(“a.Styleswitcher”).click(function() {
//swicth the LINK REL attribute with the value in A REL attribute
$(‘link[rel=stylesheet]‘).attr(‘href’ , $(this).attr(‘rel’));
});
// how to use
// place this in your header
<link rel=”stylesheet” href=”default.css” type=”text/css”>
// the links
<a href=”#” class=”Styleswitcher” rel=”default.css”>Default Theme</a>
<a href=”#” class=”Styleswitcher” rel=”red.css”>Red Theme</a>
<a href=”#” class=”Styleswitcher” rel=”blue.css”>Blue Theme</a>
});

JavaScript Cheat Sheet

Megapixels and Maximum Print Size Chart

The Web Developer’s SEO Cheat Sheet

htaccess Cheat Sheet

Handy Cheat Sheet of MySQL Commands

mod_rewrite Cheat Sheet

Columns of equal height

If you are using two CSS columns, use this to make them exactly the same height.

$(document).ready(function() {
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
// how to use
$(document).ready(function() {
equalHeight($(“.left”));
equalHeight($(“.right”));
});
});

mod_rewrite Cheat Sheet

A quick reference guide for mod_rewrite, including server variables, flags and regular expression syntax. Also includes examples of commonly-used rules.

Computer Arts Keyboard Shortcuts

An essential shortcut guide from the world’s best-selling creative magazine.

Gosquared CSS help sheets

CSS Shorthand Cheat Sheet

W3C – Cascading Style Sheets, Current Work

CSS support in Opera 9.5

RGB Hex Colour Chart

XML (eXtensible Markup Language) in one page

Script.aculo.us Cheat Sheet

A field guide to Scriptaculous.

PHP Cheat Sheet

Font resizing

Want to let the users change there font size?

$(document).ready(function() {
// Reset the font size(back to default)
var originalFontSize = $(‘html’).css(‘font-size’);
$(“.resetFont”).click(function(){
$(‘html’).css(‘font-size’, originalFontSize);
});
// Increase the font size(bigger font0
$(“.increaseFont”).click(function(){
var currentFontSize = $(‘html’).css(‘font-size’);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$(‘html’).css(‘font-size’, newFontSize);
return false;
});
// Decrease the font size(smaller font)
$(“.decreaseFont”).click(function(){
var currentFontSize = $(‘html’).css(‘font-size’);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$(‘html’).css(‘font-size’, newFontSize);
return false;
});
});

Smooth(animated) page scroll

For a smooth(animated) ride back to the top(or any location).

$(document).ready(function() {
$(‘a[href*=#]‘).click(function() {
if (location.pathname.replace(/^\//,”) == this.pathname.replace(/^\//,”)
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target
|| $(‘[name=' + this.hash.slice(1) +']‘);
if ($target.length) {
var targetOffset = $target.offset().top;
$(‘html,body’)
.animate({scrollTop: targetOffset}, 900);
return false;
}
}
});
// how to use
// place this where you want to scroll to
<a name=”top”></a>
// the link
<a href=”#top”>go to top</a>
});

Get the mouse cursor x and y axis

$(document).ready(function() {
$().mousemove(function(e){
//display the x and y axis values inside the div with the id XY
$(‘#XY’).html(“X Axis : ” + e.pageX + ” | Y Axis ” + e.pageY);
});
// how to use
<div id=”XY”></div>

});

jQuery timer callback functions

$(document).ready(function() {
window.setTimeout(function() {
// do something
}, 1000);
});

Python Cheat Sheet

The Python Cheat Sheet, a quick reference guide for the Python programming language.

Remove a word

$(document).ready(function() {
var el = $(‘#id’);
el.html(el.html().replace(/word/ig, “”));
});

Verify that an element exists in jQuery

$(document).ready(function() {
if ($(‘#id’).length) {
// do something
}
});

Make the entire DIV clickable

$(document).ready(function() {
$(“div”).click(function(){
//get the url from href attribute and launch the url
window.location=$(this).find(“a”).attr(“href”); return false;
});
// how to use
<div><a href=”index.html”>home</a></div>

});

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

.animate() The funct

Over View:
is the function of jQuery that use for the animated effect of jQuery. This feature of jQuery makes thousands of things easy for developer( not written millions of line of code )and you can achieve the animated  high quality effect. This is compatible with all browser…

Parameter of .animate(properties,duration,easing,callback)

There are 3 parameter

• Properties (A map of CSS properties that the animation will move toward.)

• Duration (A string or number determining how long the animation will run.)

• Easing (A string indicating which easing function to use for the transition.)

• Callback (A function to call once the animation is complete.)

It perform a custom animation of a set of css properties

.animate( properties, options )

properties (A map of CSS properties that the animation will move toward.)

options: A map of additional options to pass to the method.

Supported keys:

Duration: A string or number determining how long the animation will run.
Easing: A string indicating which easing function to use for the transition.
Complete: A function to call once the animation is complete.
Step: A function to be called after each step of the animation.
Queue: A Boolean indicating whether to place the animation in the effects queue.  Iffalse, the animation will begin immediately.
specialEasing: A map of one or more of the CSS properties defined by the properties argument and their corresponding easing functions

Explanation

The .animate() method allows us to create animation effects on any numeric CSS property. The only required parameter is a map of CSS properties. This map is similar to the one that can be sent to the .css() method, except that the range of properties is more restrictive.
All animated properties should be numeric (except as noted below); properties that are non-numeric cannot be animated using basic jQuery functionality. (For example, width, height, or left can be animated but background-color cannot be.) Property values are treated as a number of pixels unless otherwise specified. The units em and % can be specified where applicable.
In addition to numeric values, each property can take the strings ‘show’, ‘hide’, and ‘toggle’. These shortcuts allow for custom hiding and showing animations that take into account the display type of the element.
Animated properties can also be relative. If a value is supplied with a leading += or -=sequence of characters, then the target value is computed by adding or subtracting the given number from the current value of the property.

Duration

Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings ‘fast’ and ‘slow’ can be supplied to indicate durations of 200 and 600milliseconds, respectively.

Callback Function

If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but this is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.

Example

<div  id=”div_ani”>
Click here to test animation
</div>
<img id=”img_ani” src=”b.jpg”  style=”position:relative; left:10px; width:100px;”>

We can animate the opacity, left offset, and height of the image simultaneously:

$(‘#div_ani’).click(function() {
$(‘#img_ani’).animate({
opacity: 0.25,
left: ‘+=50′,
height: ‘toggle’
}, 5000, function() {
// the animation is  complete.
});
});

Final Result

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Most of creative peoples love to see typography effects and now days this is implementing on websites too for give more professional and modern look, as you seen in our today roundup about “Websites Showcase Where Typography Influence” typography giving prominent position in overall design and simply ignoring all background and images.

Typography helping for web design, album art, advertisements, posters and all kind of graphic designs because typography giving amazing inspirations who can be great resource for web and graphic designers, we listing all latest designs for make more graphical attitude for your future designs.

xxico

21^st Century Odyssey, XXICO is an agile team of programmers, UI specialists, designers and content developers. We offer effective, intuitive and smart touch solutions. We create solutions that help users communicate with computing devices in simplified yet intelligent manner. Our motive is to bring an enriching day to day experience through our solutions.

ammarceker

Hey! I’m Ammar Çeker, living in istanbul, Turkey. I’m a website and web application interface designer at designfabrika. Meanwhile, I’m a student at Communication Design major of YTU.

I concentrate on simplified and comprehensible designs. I love the innovation of adding little navigations which would help the user. I also like to make the people feel even in the small details of my designs that I love my job.

patrickalgrim

User Experience & design go together like pippy-longstocking and her red hair. User Experience is the understanding of using design to appeal to the lack of technological skill-sets humans have yet to produce when technology moves faster than our public’s average learning curve.

time2project

Giuseppe Scappaticcio is an italian web strategist based in Tuscany, Italy. He has been working for over 10 years in the internet industry, producing a moltitude of professional, innovative, and creative projects for his clients, including corporate branding, website design and web promotions.

flipp

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

In this modern web world we offering CSS3 techniques in these really useful tutorials with many exciting features and latest practice, after an detail research session about CSS3 (Cascade Style Sheet) make an roundup where amazing ideas about Web Developments.

CSS3 have more exciting features which are most compatible for cross browser usability as we using famous internet browsers: Internet Explorer 7 & 8, Firefox, Safari and chrome, they all very supporting of new CSS3 properties.

In this emerging roundup we emphasis on some latest techniques which were not supporting before in older versions, but now in this latest language techniques CSS3 you can follow all of these following techniques: text-shadow, rounded box, box sizing, opacity handlers, multiple backgrounds, border images and also supporting for multi column web layouts.

Hope you all appreciate these helping list of best ever trainings about CSS3 and share your user experience for next version of CSS3.

This post is supported by: Virtual Cloud Hosting

Rounded Corner Boxes the CSS3 Way

Super Awesome Buttons with CSS3 and RGBA

Cascading Style Sheets Current Work

A Look at Some of the New Selectors Introduced in CSS3

Border-image: using images for your border

Create a Dynamic Stack of Index Cards using CSS3

Overview of CSS3 Structural pseudo-classes

Liquid faux columns with background-size the CSS3 way

CSS3 colors, today (MediaCampAthens session)

Gradient Borders

Multiple Backgrounds (CSS3)

CSS3 Analogue Clock

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

Design a Prettier Web Form with CSS 3

CSS Fundamentals: CSS 3 Transitions

Take Your Design To The Next Level With CSS3

Fun with CSS3 and mootools

Create A Sexy Vertical Sliding Panel Using jQuery And CSS3

Text-shadow, Photoshop like effects using CSS

Awesome Overlays with CSS3

CSS3 & Flexible UI: Avoid Recutting UI Graphics for Mobile

Get Started with CSS 3

Box-sizing and Box-model

Halftone Navigation Menu With jQuery & CSS3

Coding a CSS3 & HTML5 One-Page Website Template

Making a Sleek Feed Widget With YQL, jQuery & CSS3

Making a Photoshoot Effect With jQuery & CSS

Create a Letterpress Effect with CSS Text-Shadow

Css3 opacity: transparency of an element in css

Create Depth And Nice 3D Ribbons Only Using CSS3

Push Your Web Design Into The Future With CSS3

CSS text shadows and background sizing

Render User Interface Using CSS3

Making an image gallery with :target

Styling Forms with Attribute Selectors – Part 1

Zebra striping tables with CSS3

Styling Forms with Attribute Selectors – Part 2: adding in some CSS3

CSS3 transitions and 2D transforms

Sweet AJAX Tabs With jQuery 1.4 & CSS3

Dynamic PNG shadow position & opacity

Advanced Event Timeline With PHP, CSS & jQuery

Tooltips with CSS3

Sweet tabbed navigation bar using CSS3

Stay on :target

Sliding Vinyl with CSS3

Going Nuts with CSS Transitions

CSS Animations

Building Coverflow With CSS Transforms

CSS3 Embedding a Font Face

Working With RGBA Colour

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

As per latest trend of website designing and development we using JavaScript language which giving user friendly output, we always follow various web techniques and scripts for best user experience, we sharing most wanted JavaScript Tutorials as per modern web needs.

JavaScript lovers using major libraries as follow: jQuery, Prototype, mootools etc.. JavaScript is one of the most often used languages on the web and it seems to be gaining in popularity day by day.

jQuery Tutorial – Create a Sliding Menu Using jQuery

iPhoto-like image resizing using Javascript

Drag & Drop Sortable Lists with JavaScript and CSS

jqueryui

jQuery Tutorials for Designers

jQuery Tutorial – Simple Lava Lamp Menu Tutorial with jQuery

SocialHistory.js

SlideViewer

Textboxlist Auto-Completion

LavaLamp for jQuery lovers!

Lightbox 2

LightWindow

jQuery Tutorial – How to Make a Smooth Animated Menu with jQuery

Step by Step

Javascript Image Gallery Using Mootools

Learning Basic JavaScript Faster Than Ever!

jQuery Sliding Tab Menu for Sidebar Tutorial

Use jQuery To Submit Form To PHP/MySQL

Use Sprites to Create an Awesomeness-Filled Navigation Menu

Building an Image Gallery with Progressive Enhancement

Sorting Values with JavaScript

Build a Simple Password Strength Checker

jQuery Tutorial – Create a Horizontal Scrolling Menu made with CSS and jQuery

jQuery Tutorial – Create an attractive Slide and hide section with jquery

Facelift Image Replacement

How to Create an Image Gallery Powered by Picasa

CSS Sprites2

jQuery Tutorial – Create a smooth tabbed menu in jQuery

Checking Username Availability with Mootools and Request.JSON

How to create tab with javascript

Fancy Quotes With jQuery, AJAX & CSS

BarackSlideshow – An elegant, lightweight slideshow script

How to Create a Simple News Ticker

How to Create A Simple Web-based Chat Application

jQuery Tutorial – Create A State-Saving jQuery Accordion Menu Without Reloading the Page

Create a Twitter-Like “Load More” Widget

Creating Flash Charts From Google Spreadsheets

Creating a Keyboard with CSS and jQuery

Making a Content Slider with jQuery UI

“Outside the Box” Navigation with jQuery

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

PixelCrayons Offers 15% Christmas Discount

There may be few days left for Christmas to arrive, but celebrations at PixelCrayons have already started. With the start of the festive season, Pixelcrayons has announced a 15% discount on all its service packages to everyone.

This discount is open to all and any one can avail it by visiting to the website. Below is the set of instruction, which need to be followed to avail the discount:-

• Click on the ‘Christmas Offer Banner’ on the right corner of the website.

• Fill the offer form with all correct information.

• A mail with a Coupon Code will be sent to you to avail the 15% discount.

• Visit the site to avail the offer

* In case you do not receive the coupon code, we request you to check your spam box.
* Discount Coupons are available on the site until 25th  December 2009 and can be used till 5th January 2010.

About Company:-

XHTML.PixelCrayons.com is a PSD to HTML/XHTML/CSS conversion service providers. They also offer implementation into skins, themes, CMS, shopping carts and more. The turn around time promised by the company to deliver quality is 8hrs. To know more about them, visit at http://xhtml.pixelcrayons.com

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

I would like to present an well-aware language best tutorials, as you know jQuery is a lightweight JavaScript library that accentuate communication between JavaScript and HTML, there is advanced features and strong support are common influence for developers preferring jQuery then JavaScript.

Here are some greatest training and tutorials from jQuery to keep you on the right track, which is most required in web development area. hope you will give some positive comments and if there is more professional links you have share with us for next roundup.

Slider Gallery

A fancy Apple.com-style search suggestion

Moving Boxes Carousel with jQuery

jQuery Tutorials for Designers

Sliding Boxes and Captions with jQuery

Creating a “Filterable” Portfolio with jQuery

Accessible Charts & Graphs from Table Elements using HTML 5 Canvas and jQuery

Create a Ajax based Form Submission with jQuery

Make a Mega Drop-Down Menu with jQuery

Building a jQuery-Powered Tag-Cloud

Create a Photo Admin Site Using PHP and jQuery

Current Field Highlighting

Creating a Keyboard with CSS and jQuery

Create A Tabbed Interface Using jQuery

Animate Curtains Opening with jQuery

jQuery – PHP & Ajax with the Twitter API

Creating a Dynamic Poll with jQuery and PHP

Create an Amazon Books Widget with jQuery and XML

jQuery Sequential List

BBC Radio 1 Zoom Tabs

Simple Toggle with CSS & jQuery

Sexy Drop Down Menu w/ jQuery & CSS

jQuery Infinite Carousel

Learning jQuery: Fading Menu – Replacing Content

How to Make a Smooth Animated Menu with jQuery

De-Constructing Accordion and Hover Effects with jQuery

jquery Hover Sub Tag Cloud

JQZOOM updated to Evolution

Creating a unique Gallery by using z-index and jQuery

How to Make a Threadless Style T-Shirt Gallery

jQuery Demo: Creating A Sliding Image Puzzle Plug-In

Creating A Fading Header

Building the imgPreview jQuery Plugin

Riding carousels with jQuery

Reddit-style Voting With PHP, MySQL And jQuery

Simple jQuery Modal Window Tutorial

Sliding menu using jQuery

Farbtastic

Create a Cool Animated Navigation with CSS and jQuery

Jquery Fade In.Fade Out

Creating A Slick Ajaxed Add-To-Basket With jQuery And PHP

jQuery Sliding Panel

CSS Dock Menu

slideViewerPro: Flexible Gallery With jQuery

jQuery Virtual Tour

Create a Digg-style post sharing tool with jQuery

How to Load In and Animate Content with jQuery

jQuery ThickBox

Easy Retweet Button

Create an amazing music player using mouse gestures & hotkeys in jQuery

Creating accessible charts using canvas and jQuery

Nice & Clean Sliding Login Panel built with jQuery

Create an Amazon Books Widget with jQuery and XML

Adding to Our Leopard Desktop with jQuery

How To Build A Personal Mashup Page With jQuery

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

As we know most of the Web designers and developers only scratch the surface of the potent language that is CSS (cascade style sheet), like programming languages, CSS has a quite simple learning twister, normally being used more often in every web project.

CSS as language giving many advantages even working in table based design or table-less designs, most of the time our designed pages can easily change after replace a css file with another one. When we working on latest trends, Tab Navigation has been one of the essential element in any contemporary web layout. In order to make sure visitors can properly navigate through the website through our used techniques, here in listed CSS stuff we offering some best and most useful Cascade style sheets with source files which can help for more inspiring developments.

Focusing and Blurring Menu Items

Anchor tags for block elements

Illustrative Menu Rollovers

5 Techniques to Acquaint You With CSS 3

Advanced Typography Tweaks with CSS

Some styles for your pagination

CSS Based Navigation

Dynamically Highlighted Columns In Tables

Glowing Tabs Menu – Tabifier

Navigation Matrix Reloaded

jQuery Coda-Slider

Perspective Tabs

Dynamic Variables in CSS

Sliding Doors

“Sliding Doors” Box– Rounded Corners for All

Pull Quotes with CSS

Change CSS Styles Based on the Weather

CSS Tabs

Perfect Page-Printing with CSS

8 Techniques They Don’t Want You To Know

Advanced CSS Hover Effect

Creating a table with dynamically highlighted columns like Crazy Egg’s pricing table

CSS Bar Graphs

Tab Accordian

DHTML Goodies Tab Panes

Unobtrusive AJAX Star Rating Bar

A Stripe of List Style Inspiration

AJAX Tabs (Rails redux)

Rediscovering the Button Element

JQuery Nested Tab Set

Triadic Background Setting with CSS

Designing Forms in CSS

Image Text Wrap Technique

“Table of Contents” Navigation

CSS Browsers Compatibility Table

Creative Use of PNG Transparency in Web Design

CSS Drop Shadow

Turning a list into a navigation bar

Em Calculator

CSS Type Set

Speech Bubbles

Mike’s Experiments – CSS: Perspective Text

Adam’s Radio & Checkbox Customisation Method

14 Free Vertical CSS Menus

CSS Transparency – Partial Opacity

Menu Descriptions

DHTML Ajax Tabs Content Script

Tabtastic

Make the Footer Stick to the Bottom of a Page

dhtmlxTabber

CSS Image Map

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.