Friday, January 11, 2013

CSS3 Minimalistic Menu For Blogger Blogger For Free





Unknown | 10:57 PM | In | 0 Comments

A simple CSS3 animated navigation menu, which degrades gracefully in older browsers and is future-proofed to work with the next generation of browsers.
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

Step 1:

Goto: Blog Dashboard >Layout > Add a Widget > Add HTML or JavaScript
and then Add the Following Code:
Inside each li we have a hyperlink with a span inside it. By default these spans are hidden, and are only shown when you hover over the link. Each link has a unique class name, which is used to give it a unique background and style the inner span, as you will see in a moment.
Read more ...
0 comments

CSS3 Colorful Drop down Menu for Blogger in 7 Colors





Unknown | 10:41 PM | In | 0 Comments

A free Colorful Drop Down Menu for Blogger and make your blog cool and beautiful this is adopeted from website template for blogger.
Just made few menus really quick. You can reuse them. Just need to change the color of the header. The active and hover states of the navigation links use rgb for their background colors.
Lets Start!
Colorful-Drop-down-Menu-for-blogger

The CSS:

Step 1:

Goto: Blog Dashboard >Layout > Add a Widget > Add HTML or JavaScript
and then Add the Following Code:

Click Save and Save Arrangement

Read more ...
0 comments

Beautiful Colorful CSS3 Labels Widget For Blogger





Unknown | 3:42 AM | In | 6 Comments

Customize Labels Cloud in BloggerA CSS3 Tag Widget for Blogger Blog for free with Tutorial how to install it on your blog easyliy and this widget will make your blogger blog totally fancy and stylish get the source file here you will never see these before today on any other website so what are you waiting for lets go the mess with it.

Tested in Firefox 4, Safari 4, Chrome 13, Opera 10, IE 8 (and newer)

CSS3 Fancy and Stylish Tags Widget For Blogger:

Here How to Install CSS3 Tag Widget for your Blogger Blog and Make your blog very stylish:

Step:1 

Got to Blog Dashboard > Layout > Add HTML/JavaScript - Where you Want to Place on your Blog

Step: 2

Past the Following Code in it!

Step:3

Congratulations you are done!
Read more ...
6 comments

Removed Elements From Old HTML 4.01





Unknown | 1:36 AM | In | 0 Comments

As you Know that html5 has been arrived a new and better from old where new tags are added on the other hand some old html 4.01 are being removed from the new html5 which are listed below

The following HTML 4.01 elements are removed from HTML 5:

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>
Read more ...
0 comments

Thursday, January 10, 2013

JQuery Plugins The Top 30+ Plugins of 2013 For Free





Unknown | 8:26 AM | In | 0 Comments


JQuery Plugins

It is never too late to put together a list of the most popular j Query plugins of October. Check out these plugins, they could be very useful in your next web project.

1. Makisu


An experimental CSS 3D dropdown concept, wrapped up in a jQuery plugin. You'll need a CSS 3D capable browser like Chrome.

2. Responsive-content

Responsive Content is used to load content that is appropriate to the current device's screen size. It is typically used alongside Responsive Design techniques.

3. Windy

Windy is a jQuery plugin that allows a rapid navigation through a pile of items using some CSS 3D transforms and transitions. The effect of a continuous navigation flow reminds of a deck of cards or sheets flying away, hence the name.

4. PFold


PFold is a very experimental jQuery plugin that makes it possible to open elements in a paper-like unfolding effect. An element can be unfolded in 3D in order to reveal some other content. The idea is to have several levels of folding, where each step of opening will double the element size, hence imitating a folded paper being opened.

5. url()

A simple, lightweight url parser for JavaScript. It also includes a jQuery version of the plugin that can be called via $.url() with all the same options.

6. Sly

jQuery plugin for one-directional scrolling with item based navigation support

7. ToolTip


A tutorial to teach you how to create a basic jQuery Tool Tip Plugin.

8. uiji.js


uiji is jQuery in reverse. Instead of using CSS selectors to find elements, you use the same syntax to create elements.

9. Jarallax


Jarallax is an open-source javascript library which makes adjusting css based on interaction easy. With Jarallax it's easy to create a parallax scrolling website.

10. Tweet to Map


This plugin gives you the power to create Google Maps, showing location based Tweets.

11. Kwicks v2.0


Kwicks provides sliding panels with an emphasis on navigational interaction.

12. breakpoint


A simple way to use media queries in your jQuery javascripts.

13. slideControl.js


A plugin for creating sliders for range inputs.= allows you to easily make sliders for range inputs

14. Product Colorizer


A light-weight solution for users to quickly preview a product in different colors. The plugin uses only two images per product to create the effect

15. Motio


A plugin for simple but powerful sprite based animations and panning.

16. prettyCheckable

prettyCheckable replaces the default checkboxes and radio inputs for better looking ones.

17. jResize


A responsive web development tool, built in jQuery to assist the workflow of developers on responsive projects.
18. Allofthelights.js
A plugin to help you switch off the light, for your videos to stand out.
It is time we go through our monthly roundup of jQuery plugins that have been published in the past month, these plugins are really worth checking out.

19. tiltShift.js

A plugin to replicate the tilt-shift effect using CSS3 image filters. It is a proof of concept and currently only works in Chrome & Safari 6.

20. Responsive Measures

Responsive Measure allows you to pass in a selector to generate the ideal font size needed to produce the ideal measure for your text.

21. BookBlock

BookBlock is a plugin to create booklet-like component that allow a page-flip navigation. Any content can be used, such as images or text.

23. Fresco

Fresco is a beautiful responsive lightbox. It can be used to create stunning overlays that work great at any screen size, in all browsers on every device.

24. FoldScroll

An experimental CSS 3D scroll behavior jQuery plugin.

25. jQuery Stick'em

Make items sticky as you scroll, to a point.

26. Socialist

Socialist is a social plugin to create a social stream from multiple social media feeds in one place. Use it to pull content from Facebook pages, Twitter, LinkedIn, YouTube and other social networks...

27. Foggy

Foggy is a jQuery plugin for blurring page elements. It supports IE (8 and up), Firefox, Safari and Chrome.
28. equalize.js
A plugin for equalizing the height or width of elements.

29. Responsive IFrames

Turn Your Complex IFrames into Responsive Goodness NPR-style.

30. MagicNav.js

Generate links to all the articles on a page by linking to the article’s h1’s, and put them in a nav element on the page with an id of article-nav.


31. Dopeless Rotate

A plugin for 360 degree product visualization with support of touch screen devices.
Read more ...
0 comments

CSS3 Pure Animated Drop Down Menu - No Images





Unknown | 7:42 AM | In | 0 Comments

Animated drop down menu by Alex Penny. it have improved the code a lot from the original version for the better and more cross browser compatibility.


Coding:

  1. In the HTML box, you just need to write the code that belongs to your <body>
  2. If you want to put something that must go inside <head> then you can simply write full HTML that starts either with a doctype or with <html>.
  3. You can use tools like Prefixfree, Normalize, and other Preprocessors like Jade, HAML, Stylus, Less, SASS, Coffeescript and much more!
  4. Just take a look at the Preferences Pane on the left.
  5. Zen Coding in HTML and CSS is also supported
  6. Code font-size can be adjusted! Code box alignment can also be changed to horizontal or vertical positions.
  7. Need more JS resources ? Try cdnjs.com

THE CSS3:



/*---------- Wrapper --------------------*/

nav {
 width: 100%;
 height: 80px;
 background: #222;
}

ul {
 text-align: center;
}

ul li {
 font: 13px Verdana, 'Lucida Grande';
 cursor: pointer;
 -webkit-transition: padding .05s linear;
 -moz-transition: padding .05s linear;
 -ms-transition: padding .05s linear;
 -o-transition: padding .05s linear;
 transition: padding .05s linear;
}
ul li.drop {
 position: relative;
}
ul > li {
 display: inline-block;
}
ul li a {
 line-height: 80px;
 padding: 0 20px;
 height: 80px;
 color: #777;
 -webkit-transition: all .1s ease-out;
 -moz-transition: all .1s ease-out;
 -ms-transition: all .1s ease-out;
 -o-transition: all .1s ease-out;
 transition: all .1s ease-out;
}
ul li a:hover {
 color: #eee;
}

.dropOut .triangle {
 width: 0;
 height: 0;
 position: absolute;
 border-left: 8px solid transparent;
 border-right: 8px solid transparent;
 border-bottom: 8px solid white;
 top: -8px;
 left: 50%;
 margin-left: -8px;
}
.dropdownContain {
 width: 160px;
 position: absolute;
 z-index: 2;
 left: 50%;
 margin-left: -80px; /* half of width */
 top: -400px;
}
.dropOut {
 width: 160px;
 background: white;
 float: left;
 position: relative;
 margin-top: 0px;
 opacity: 0;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
 -moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
 box-shadow: 0 1px 6px rgba(0,0,0,.15);
 -webkit-transition: all .1s ease-out;
 -moz-transition: all .1s ease-out;
 -ms-transition: all .1s ease-out;
 -o-transition: all .1s ease-out;
 transition: all .1s ease-out;
}

.dropOut ul {
 float: left;
 padding: 10px 0;
}
.dropOut ul li {
 text-align: left;
 float: left;
 width: 125px;
 padding: 12px 0 10px 15px;
 margin: 0px 10px;
 color: #777;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 -webkit-transition: background .1s ease-out;
 -moz-transition: background .1s ease-out;
 -ms-transition: background .1s ease-out;
 -o-transition: background .1s ease-out;
 transition: background .1s ease-out;
}

.dropOut ul li:hover {
 background: #f6f6f6;
}

ul li:hover a { color: white; }
ul li:hover .dropdownContain { top: 65px; }
ul li:hover .underline { border-bottom-color: #777; }
ul li:hover .dropOut { opacity: 1; margin-top: 8px; }
The HTML5
Read more ...
0 comments