15 jQuery CSS Plugins to Speed Up Your Coding

1. Stickup

Stickup is a simple jQuery plugin that “sticks” an element to the top of the browser window while scrolling past it, always keeping it in view. This plugin works on multi-page sites, but has additional features for one-pager layouts.
Although stickUp was made to work on any kind of website, it was originally designed for the “one-pager” style of websites. By using CSS the sticky navigation menu item will be highlighted as it’s correlating content is scrolled in and out of view.

Source

2. CircleType.js

Circletype.js is a lightweight , tiny jquery plugins that helps you to set type on a circle. Its quite useful and only 2.7 kb jquery plugin. It has numerous features such as it uses any font, adjust letter spacing as usual with CSS, flip it around so it reads counter-clockwise instead, set the radius manually or let CircleType.js figure it out for you, work in fluid and responsive layouts and plays well with FitText.js.

Source

3. Glide.js

Glide.js is a lightweight (4.5kb minified) jQuery plugin for creating sliders. It has completely customizable OOCSS markup and uses CSS3 transitions but has fallback to JavaScript. The slider is responsive; it’ll adapt well to all devices and comes with touch support.

Source

4. Animo.js

Animo.js is a powerful little tool for managing CSS animations. It includes features like Stack animations, create cross-browser blurring, set callbacks on animation completion. Animo includes the amazing animate.css library by Dan Eden which provides you with nearly 60 beautiful animations from attention seekers to entrances and exits. He has also added a few helper animations to the library.
Animo’s only dependency is jQuery 2 or later. The source includes animate.css plus the helper animations made specifically for animo but you can use whatever stylesheet of animations you’d like.

Source

5. Salvattore

Salvattore is a jQuery Masonry alternative with CSS-driven configuration. Salvattore organizes your HTML elements according to the number of columns you specify. Each of the items in your container is placed within these columns, one by one. To get started simply add a data-columns attribute to the container.
In your CSS file you can set the number of columns you want to be created inside that element. To create a responsive columnar design, just use media queries. Items are appended and prepended on the same container without conflicts. You can combine this API with your XHR functions to have a dynamic layout with live content.

Source

6. Mixit Up

MixItUp is a light-weight but powerful jQuery plugin that provides beautiful animated filtering and sorting of categorized and ordered content. It plays nice with your existing HTML and CSS, making it a great choice for fluid, responsive layouts. It’s perfect for portfolios, galleries, blogs, or any categorized or ordered content.
MixItUp uses jQuery to decide which elements to hide, show or re-position based on your filters, and then applies the power of CSS3 transitions to smoothly animate these elements to their new locations. MixItUp is optimized for the current generation of modern, CSS3-ready browsers. Due to its light-weight and efficient approach, It works beautifully and smoothly on all modern devices including smartphones and tablets.

Source

7. Fancy Input

Fancy Input, a jQuery plugin, doesn’t focus on the styling part but makes the fields attractive (and fun-to-use) by adding CSS3-powered effects. The plugin hides the input field, places a span element containing the character pressed and applies CSS3 transitions to each element (letter). There are multiple built-in effects and it works with both input + textarea fields.

Source

8. Transit

Transit is a super-smooth CSS transitions & transformations for jQuery. You can make transition on any CSS property. They will happen much smoother than if you were to use jQuery’s default .animate(). You can easily translate, rotate, scale, skew and etc.
Transit degrades older browsers by simply not doing the transformations (rotate, scale, etc) while still doing standard CSS (opacity, marginLeft, etc) without any animation. Delays and durations will be ignored. It is released under MIT License.

Source

9. CSS Emoticons

The CSS Emoticons plugin is a simple jQuery plugin (and stylesheet) that allows you to turn any text emoticons on the page into cute little smiling faces with pure CSS3 styling (no images whatsoever). The result is great-looking emoticons that leave the text exactly as written (so that the text emoticons actually get copied and pasted with the text if you select a block of text from the page). This uses the CSS3 properties, transform, border-radius, box-shadow, gradient, and transition (when supported).

Source

10. Minimit Anima

Minimit Anima is a jQuery plugin to animate with transforms and transitions. It’s hardware accelerated css3 animations which is built to have fast animation execution, and it has an api similar to jquery animate, with animations queuing.
By default the anima method do automatic fallback animation on browsers not supporting transitions or transformed. It also does scale, rotate and skew animations on browsers without transitions from jquery.transform.js already included in the plugin.

Source

11. Tooltipster

Tooltipster is a powerful, flexible jQuery plugin enabling you to easily create semantic, modern tooltips enhanced with the power of CSS. Tooltipster allows you to use any HTML tag you can think of inside your tooltips. This means you can insert things like images and text formatting tags.

Source

12. ScrollUp

ScrollUp is a lightweight jQuery plugin to create a customisable “Scroll to top” feature that will work with any website, with ease. To create a visible line to help determine an ideal scroll distance from the top, assign a valid CSS color to the activeOverlay setting.

Source

13. Textillate.js

Textillate.js is a simple plugin for CSS3 text animations. Textillate.js combines some awesome libraries to provide an ease-to-use plugin for applying CSS3 animations to any text. Simply include textillate.js and it’s dependencies in your project to start creating unique effects. Textillate.js is built on top of the simple, yet amazingly powerful animate.css and lettering.js libraries.

Source

14. Motio

Motio is a jQuery plugin for simple but powerful sprite based animations and panning. Motio is called on an element representing animation container, where animation is delivered as a CSS background image.
In sprite based animations, container should have the dimensions of one sprite frame. E.g, if you have 10 frames in a horizontal sprite that is 1000 x 100 pixels big, the container should be 100 x 100 pixels big. In panning, container size doesn’t play any role, just the background image should be seamless.

Source

15. Photobox

Photobox is a CSS3 Image Gallery JQuery Plugin. It is beautiful and posses a great look & feel. Both the script & CSS are only 7k each. It uses silky-smooth, hardware accelerated, CSS3 transitions and animations for better performance.
It works also on IE9 and above, but clearly not as nice as in normal browsers. Image can be zoomed in and out with mousewheel and navigated using mousemove to move around. The bottom row of thumbnails can be navigated by mouse movement. It supports keyboard keys for navigation and closing the gallery view.

Source

For the best info on Ionic, check out our great documentation page!

Note: Ionic currently best supports iOS 6+. Android support is okay but not great, but we are working to make Android kick ass in the coming weeks, so please let us know if you run into Android issues!

What is Ionic?

Ionic is the open source HTML5 Mobile Framework for building amazing, cross-platform native apps with HTML, JavaScript, and CSS.

We built Ionic because we wanted a framework that focused on building hybrid native apps, rather than mobile websites. We wanted this framework to be obsessive about great design and performance. A framework that left the past behind and focused on the future where mobile devices could make HTML5 feel native.

It's important to realize that Ionic is not a replacement for frameworks used for building mobile web apps. There are a lot of great solutions that work well for websites, like jQuery Mobile.

Ionic is also not a good solution if you need to support older generation devices. Our compatibility starts at iOS 6 and Android 4.1. We will never support versions earlier than those. This is a framework for the future.

Ionic: A hybrid mobile app framework

Ionic is a front-end framework for developing hybrid mobile apps with HTML5, CSS, and JavaScript. It’s fast, uses AngularJS, and it’s beautifully designed with a focus on Native features.

Animo.js: CSS animation management with JavaScript

animo.js

A powerful little tool for managing CSS animations. Stack animations, create cross-browser blurring, set callbacks on animation completion, make magic.

Full article and demos - http://labs.bigroomstudios.com/libraries/animo-js

Animo.js: CSS animation management with JavaScript

Animo.js is a powerful tool for managing CSS animations. It makes it possible to stack animations and trigger one right after another.

 file 첨부 스타일 변경하기

http://www.quirksmode.org/dom/inputfile.html

div.fakefile{position:absolute;top:85px;right:64px;z-index:1;}
div.fakefile .ff{position:relative;}
div.fakefile img{position:absolute;top:7px;right:0;vertical-align:bottom;}
input.file{position:absolute;top:82px;right:61px;-moz-opacity:0;filter:alpha(opacity:0);opacity:0;z-index:2;cursor:pointer;}

<!--div  class="fileinputs"-->
                <input type="file" name="첨부파일_file" style="display:;" class="file" value="찾기" />
                <div class="fakefile" >
                  <div class="ff">
                      <input type="text" name="sns_file2" class="ip_txt1 " readonly=readonly/>
                      <img src="버튼.jpg" alt="찾기" />
                  </div>
                </div>
            <!--/div-->

Styling an input type="file"

The problem

For a site I created I needed input fields like this one:

The designer wanted the same styles, plus a "Select" image, to apply to all file upload fields. When I applied the rules of normal input fields to file upload fields, though, it didn't really work. There were wild differences between the browsers, and styling the default button is totally impossible.

Ponder the differences.

Screenshot: File input fields in the various browsers

This is hardly what anyone would call a nicely designed form field. Until recently, though, it was the best we could do.

Also note Safari's fundamentally different approach. The Safari team has probably decided on this approach to disallow the manual entering of a file name and this avoid exploits like this one. The drawback is that the user can't decide not to upload a file after having selected one.

The solution

Fortunately, reader Michael McGrady invented a very neat trick that allows us to (more or less) style file upload fields. The credits for the solution presented on this page are wholly his, I only added the position: relative, a few notes and tests, and ported it entirely to JavaScript.

Without the technique your browser reacts like this:

Using McGrady's technique, I was able to produce this file upload field:

Now that looks much better, doesn't it? (Provided your browser supports opacity)

McGrady's technique is elegant in its simplicity:

1. Take a normal <input type="file"> and put it in an element with position: relative.
2. To this same parent element, add a normal <input> and an image, which have the correct styles. Position these elements absolutely, so that they occupy the same place as the <input type="file">.
3. Set the z-index of the <input type="file"> to 2 so that it lies on top of the styled input/image.
4. Finally, set the opacity of the <input type="file"> to 0. The <input type="file">now becomes effectively invisible, and the styles input/image shines through,but you can still click on the "Browse" button. If the button is positioned on top of the image, the user appears to click on the image and gets the normal file selection window.
   (Note that you can't use visibility: hidden, because a truly invisible element is unclickable, too, and we need the <input type="file"> to remain clickable)

Until here the effect can be achieved through pure CSS. However, one feature is still lacking.

5. When the user has selected a file, the visible, fake input field should show the correct path to this file, as a normal <input type="file"> would. It's simply a matter of copying the new value of the <input type="file"> to the fake input field, but we need JavaScript to do this.

Therefore this technique will not wholly work without JavaScript. For reasons I'll explain later, I decided to port the entire idea to JavaScript. If you're willing to do without the visible file name you can use the pure CSS solution. I'm not sure if this would be a good idea, though.

The HTML/CSS structure

I've decided on the following HTML/CSS approach:

div.fileinputs {
	position: relative;
}

div.fakefile {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
}

input.file {
	position: relative;
	text-align: right;
	-moz-opacity:0 ;
	filter:alpha(opacity: 0);
	opacity: 0;
	z-index: 2;
}

<div class="fileinputs">
	<input type="file" class="file" />
	<div class="fakefile">
		<input />
		<img src="search.gif" />
	</div>
</div>

Best Collection of Useful CSS Tools for Developers

Layouts

• CSS Layout GeneratorThis generator will create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages.
• Grid DesignerGenerates fixed and scalable grid layouts along with basic reset and typography.
• Layout GeneratorsGenerate multi-column and grid layouts with CSS techniques using %, px, or em.

CSS Frameworks

• BoksBoks is an Visual Editor for Blueprint CSS Framework; It allows you visually setup a grid and baseline rhythm, build and fill your layout and export all this to HTML and CSS. Boks is an Adobe AIR application, which means it will works on Windows, Mac and Linux.
• Useful Tools & Resources For Blueprint CSS Framework
• YAML BuilderYAML Builder is an online tool for visually creating YAML-based CSS layouts.
• YUI CSS Grid Builder
• 960 Grid System – Variable Grid SystemBased on the 960 Grid System; the variable grid system is a quick way to generate an underlying CSS grid for your site.
• Grid System GeneratorThe grid system generator will create fixed grid systems based on 960 Grid System in valid css / xhtml for rapid prototyping, development and production environments.
• Definitive List of CSS Frameworks

Fonts

• TypetesterThe Typetester is an online application for comparison of the fonts for the screen.
• @font-face GeneratorEasy to use CSS3 @font-face generator from Font Squirrel.
• CSS Type Set
• TypeChartLets you flip through, preview and compare web typography while retrieving the CSS
• CSS-Typoset Matrix and Code Generator
• CSStxtTool for generating CSS for web typography.
• EM Calculator AIR ApplicationCalculator for Vertical Rhythm in XHTML & CSS; easily convert px to em based on base font-size and line-height; Padding and margins automatically calculated
• Em CalculatorEm Calculator is a small JavaScript tool which helps making scalable and accessible CSS design. It converts size in pixels to relative em units, which are based on a text size.
• PXtoEM

Colors

• CSS Color EditorCSS Color Editor allows you to replace the color scheme of your website without going through the entire CSS file. You choose your local CSS file, select new colors and then download the new CSS file with new color codes automatically replaced for you.
• Color Palette GeneratorUpload an image to generate a color palette based on the image’s primary colors. Useful for quickly grabbing a particular color within an image for inspiration.
• Color Contrast CheckThe Color Contrast Check Tool allows to specify a foreground and a background color and determine if they provide enough of a contrast “when viewed by someone having color deficits or when viewed on a black and white screen”.
• ColorZillaColorZilla is an extension for Firefox offering advanced eyedropper, color picker, palette viewer and other colorful goodies like: DOM color analyzer, full page zoom, firebug support, etc.
• HSL to RGB Converter

Sprites

• CSS Sprite GeneratorCreates single sprite image and generate the appropriate CSS for you.
• CSS Sprite – Online CSS Sprite Builder / GeneratorAn online tool to help web designers and web developers to build CSS Sprites. All you need to do is upload multiple files and it will generate sprite image and relted CSS and HTML for you.
• CSS Sprite GeneratorCSS Sprite Generator will combine the uploaded images into a single sprite and generate the CSS for you.
• YASC (Yet Another Sprite Creator)This tools is useful when all your sprite images have been created in a single file. The process is fairly straight forward: you upload this file, then visually select each individual item and specify its CSS id; once you have selected all your sprites you can generate all the required CSS with a single click.
• Nav-o-MaticGenerates navigation markup and CSS for your sprite.
• SmartSpritesSmartSprites is Java command line utility that will let you easily introduce and maintain CSS sprites in your designs. SmartSprites parses special directives you can insert into your original CSS to mark individual images to be turned into sprites. It then builds sprite images from the collected images and automatically inserts the required CSS properties into your style sheet, so that the sprites are used instead of the individual images.

Forms

• Accessible Form BuilderCreate accessible form with CSS or table layout, including all label elements simply by typing a list of fields that you need.
• WufooWufoo is an online service that allows anybody to easily build great looking online forms. You can use Wufoo as an easy way to create good-looking, valid CSS/XHTML form markup. It allows you to use your account to design and download the markup and CSS for FREE.

UI Components

• List-o-MaticCreate CSS-styled navigation blocks based on unordered list <li> items. Get your semantics on!
• CSS Menu GeneratorGenerates horizontal, vertical & dropdown CSS menus
• ThemeRollerThemeRoller allows you to design custom jQuery UI themes for tight integration in your projects.

Text Wrappers

• CSS Text WrapperGenerates HTML/CSS to wrap content to any shape
• The Box OfficeThe Box Office lets you wrap/float/contour text around freeform images using CSS for usage in HTML pages.

Analysis & Debugging

• W3C CSS Validation Service
• CSS AnalyzerCSS Analyzer checks the validity of your CSS against the W3C’s validation service, along with a color contrast test, and a test to ensure that relevant sizes are specified in relative units of measurement.
• FirebugOne of the post popular web developer tool – Firebug is a Firefox add-on that allows you to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. You can use Firebug Lite in IE, Opera, and Safari.

Convertors

• Primer CSSPrimer undercoats your CSS by pulling out all of your classes and id’s and placing them into a starter stylesheet.
• Automatic CSS Inliner ToolTool that will automatically transform all of your local styles into inline styles. Useful for styling email news letters.
• DrawterOnline tool that literally lets you draw your website’s code.

Maintenance

• Dust-Me SelectorsDust-Me Selectors is a Firefox extension that finds unused CSS selectors
• CssCleanerWindows desktop application that removes unused CSS Classes from your web application
• CSS Redundancy CheckerUse this tool to find CSS selectors that aren’t used by any of your HTML files and may be redundant.
• CSS SuperScrubThis tool can significantly reduce the size and complexity of your CSS by programmatically stripping unneeded content, stripping redundant calls, and intelligently grouping the remaining element names.
• HeliumJavaScript tool to scan your site and show unused CSS

Optimization

• CSS Drive CSS CompressorNormal mode allows you to choose from three levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression. You can switch to Advanced mode for greater customization.
• Robson CSS CompressorA good CSS Compressor still in development.
• MinifyMe – AIR ApplicationAdobe AIR application that allows you pack multiple files together.

Formatting

• CSS SorterFree online tool for sorting CSS files. It organizes CSS rules alphabetically so that it will be easier for you to maintain your CSS files.
• CleanCSS – CSS Formatter and OptimizerThis tool comes with several options for formatting as well as optimization. It also provides ready made sets of options for various level of balances between optimization and readability. Important feature includes ability to automatically merged the same selectors and properties.
• StyleneatIt organizes and standardizes your CSS – selectors, sub-selectors and properties – in a structure that makes it easier to define page areas and see how they relate to each other.
• WordoffStrips the cruft that is pasted into WYSIWYG editors from Word
• CSS ToolboxFree CSS Validation, CSS Formatter, CSS Compressor

Browser Specific

• ModernizrA really useful JavaScript library that detects native availability of HTML5/CSS3 features and offers you a way to maintain a fine level of control over your site regardless of a browser’s capabilities. If you prefer using MooTools, you can use MooModernizr (MooTools port of Modernizr)
• Conditional-CSSConditional-CSS allows you to write maintainable CSS with conditional logic to target specific CSS statements at both individual browsers and groups of browsers. Compilers for Conditional-CSS are available in PHP, C# and C.
• LitmusLitmus shows you exactly how your designs look on various platform, across every popular web browser.
• Web Browser CSS SupportDetailed information about CSS support in major web browsers, allows you to pick which browser appear on the information tables.
• When Can I Use?Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies. Allows you to specify browsers, features, time period, status, search and sorting options.
• CSS3 support for Internet Explorer 6, 7, and 8IE-CSS3 is a script to provide Internet Explorer support for several of the popular new styles available in the upcoming CSS3 standard.
• IE7.jsIE7 is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.
• IE6 CSS FixerA tool specifically designed to ease the pain of the IE6 CSS debugger.

Selectors

• CSS3 pseudo-class Selector Emulationie-css3.js allows Internet Explorer to identify CSS3 pseudo-class selectors and render any style rules defined with them. Simply include the script in your pages, start using these selectors in your style sheets and they’ll work in IE.
• Dust-Me SelectorsA Firefox extension that finds unused CSS selectors.
• Sizzle JavaScript Selector LibraryA pure JavaScript CSS selector engine designed to be easily dropped in to a host library. Sizzle supports virtually all CSS3 selectors – this even includes some parts that are infrequently implemented such as escaped selectors (”.foo+bar”), Unicode selectors, and results returned in document order.
• SelectORacleOnline tool that provides explanation of CSS2 and CSS3 selectors. Simply provide it with some selectors and it will return descriptions of what the selectors will match.
• YUI Selector UtilityThe YUI Selector Utility brings CSS3 Selector syntax to JavaScript, providing a compact shorthand for collecting, filtering, and testing HTMLElements.
• YUI StyleSheet UtilityThe StyleSheet Utility allows you to create and modify CSS stylesheets on the fly.

CSS3 Generators

• CSS3 Please!Cross browser CSS3 rule generator, supports: border-radius, box-shadow, gradient(linear), rgba colors, transform (rotate), transition and @font-face.
• CSS3 GeneratorSupports border radius, box shadow, text shadow, RGBA, @font-face, multiple columns, box resize, box sizing and outline.
• CSS3 SandboxConsist of CSS3 generator tools for Linear Gradients, Radial Gradients, Text Shadows, Box Shadows, Transforms and Text Stroke.
• @font-face GeneratorEasy to use CSS3 @font-face generator from Font Squirrel.
• CSS3 Gradient GeneratorGenerates linear “gradient” property for Mozilla and WebKit browsers.
• CSS Border RadiusGenerates “border-radius” property in Mozilla, WebKit and standard CSS3 syntax.
• Webkit CSS3 GeneratorSimple CSS generator helps you to understand capabilities of CSS3 introduced by WebKit.
• CSS3 Learning ToolDynamically gets the vendor prefix for your browser and checks whether the property is supported with or without it.

Miscellaneous

• XRAYXRAY is a bookmarklet for Internet Explorer 6+, and Webkit and Mozilla based browsers (including Safari, Firefox, Camino or Mozilla). Use it to see the box model for any element on any web page.
• CSSUtilitiesA JavaScript library that provides unique and indispensible methods for querying CSS style sheets
• ReCSSThis little bookmarklet makes refreshing your CSS a breeze

Cheat Sheets

• CSS Cheat SheetThe CSS cheat sheet is a one-page reference sheet, listing all selectors and properties. It includes a visual example of the box model, unit reference for CSS units and the various media types CSS makes allowance for.
• CSS3 Cheat Sheet & Quick Reference GuideProvides listing of the current CSS3 specification, listing of the properties accepted values, common selector pattern reference, organized by type / module, selector Type reference and unit reference and information. (For PDF Version)
• CSS3 Cheat Sheetlisting of CSS3 properties, selectors types and allowed values in PDF format.
• CSS Shorthand Cheat Sheet
• YUI Library: CSS Reset, Base, Fonts, and Grids
• Blueprint CSS Cheat Sheet

Beyond CSS

• MoreCSSMoreCSS is a JavaScript library that can assist you with all the daily JavaScript things like pop-ups, tabs, tooltips, hyphenation, advanced list styling and more using CSS like syntax.
• LESS – Leaner CSSLess extends CSS by adding: variables, mixins, operations and nested rules. Less uses existing CSS syntax. This means you can migrate your current .css files to .less in seconds and there is virtually no learning curve. However you’ll need Ruby installed to use it.
• DtCSSDtCSS is a PHP script that preprocesses your CSS file. It speeds up CSS coding by extending the features to CSS. Such as nested selectors, color mixing and more. DtCSS reads the CSS file with special syntax written for DtCSS, and outputs the standard CSS. It also comes with a smart caching system.

HTML5 CSS3 Tutorial Videos

Responsive Web CSS: Layout responsive pages in minutes

Responsive Web CSS makes it simple to create responsive web layouts. Just add divs, set how big each should be for each device you want to target, and download your site’s skeleton.