10 Handy HTML5 / CSS3 Frameworks

Calling all web developers! You should certainly look through this roundup of Easy HTML5/CSS3 Frameworks. We have posted some frameworks in our recent posts but you might want to take a look on this collection because you may have not used most of these before. Stay in date with the latest handy HTML5 & CSS3 technologies! Enjoy!

Related posts:

• 10 Lightweight and Minimal CSS Frameworks
• 10 New Frameworks for Mobile Web App Developers

H5BP brings you delicious documentation, a site optimizing build script, and a custom boilerplate builder. In addition to this, we now support lighttpd, Google App Engine, and NodeJS with optimized server configurations (along with Apache, Nginx, and IIS) and we’ve reduced the overall size of the published boilerplate by 50%.

Source
Demo

HTML5 JavaScript framework for cross-platform mobile apps. Some features: MVC HTML5, JavaScript- all development cycle, offline support (automatic cache manifest generation), rich user interfaces, DataProvider for local and remote storage persistence, internationalization (i18n), open source (MIT License), NodeJS based build tools (called Espresso).

Source
Demo

a SASS based framework for making powerful, easily maintainable HTML5 websites. It helps you rapidly prototype your ideas and will generally make your life much easier.

Source
Demo

Is an event framework for HTML5 video that provides a simple API for synchronizing interactive and immersive content. Popcorn.js utilizes the native HTMLMediaElement properties, methods and events, normalizes them into an easy to learn API, and provides a plugin system for community contributed interactions.

Source
Demo

Is a starting WordPress theme made for developers that’s based on HTML5 Boilerplate, Blueprint CSS (or 960.gs) and Starkers that will help you rapidly create brochure sites and blogs.

Source
Demo

Is an HTML5 ebook framework to publish on the iPad & iPhone using open web standards.

Source
Demo

CSS3 Action Library aims to gather all the best CSS3 effects in one place. Today the number of browsers who supports CSS3 is growing; CSS3 in many cases can be used like Java Script replacement and can contribute to better browsing experience.

Source
Demo

First HTML5/CSS3 framework created by enavu network.

Source
Demo

Based on F Layout. Some features: base CSS & SEO, PHP active class, HTML5 placeholder fallback, sticky footer, HTML5 baseline, smooth scroll to top and very clean organization.

Source
Demo

created by Harry Roberts. This framework built to work on smaller screens straight out of the box with minimal effort. Inuit.css’ main features are fully supported even in IE6 + basic support for new HTML5 elements.

Source
Demo

Read more

Using jQuery to Test New Website Fonts

This is a neat little script I found which lets you preview live new font’s for your website using jQuery Font Dragr. Could be useful if your showing a client what various fonts look like, or for just everyday font test for website. Enjoy.

Instructions

1. Copy and paste into a new bookmark (right click paste on the bookmark toolbar)
2. Visit the website you want to font preview
3. Click the bookmark
4. Populate the font list by dragging fonts into the bar
5. Instant preview on with jQuery selector to target specific elements

The Code

javascript: (function (d) {
    var s = d.createElement('script'),
        h = d.head || d.getElementsByTagName('head')[0];
    s.src = 'http://fontdragr.com/bookmarklet/fd-script.js';
    h.appendChild(s);
})(document);

View the code: http://fontdragr.com/bookmarklet/fd-script.js

Obfuscated Version

javascript:var _0x5a5b=["\x73\x63\x72\x69\x70\x74","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x68\x65\x61\x64","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x73\x42\x79\x54\x61\x67\x4E\x61\x6D\x65","\x73\x72\x63","\x68\x74\x74\x70\x3A\x2F\x2F\x66\x6F\x6E\x74\x64\x72\x61\x67\x72\x2E\x63\x6F\x6D\x2F\x62\x6F\x6F\x6B\x6D\x61\x72\x6B\x6C\x65\x74\x2F\x66\x64\x2D\x73\x63\x72\x69\x70\x74\x2E\x6A\x73","\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64"];(function (_0xf8bcx1){var _0xf8bcx2=_0xf8bcx1[_0x5a5b[1]](_0x5a5b[0]),_0xf8bcx3=_0xf8bcx1[_0x5a5b[2]]||_0xf8bcx1[_0x5a5b[3]](_0x5a5b[2])[0];_0xf8bcx2[_0x5a5b[4]]=_0x5a5b[5];_0xf8bcx3[_0x5a5b[6]](_0xf8bcx2);} )(document);

Read more

10 Web Combi jQuery Plugins

Give your web designs a better edge with the web combination of jQuery, CSS and HTML, the usual suspects. See the magic right on your screen! They make a great combination to deliver widgets, galleries, navigation and much more. Enjoy!

Related posts:

• Top 15 jQuery Scrolling Plugins
• 10 Awesome CSS/JS Plugins and Coding Techniques

Create a blogroll slider that shows the latest post of your favorite blogs using jQuery, PHP and XSL. The aim is to get a given RSS feed of a blog and parse the XML data with the help of PHP.

Source
Demo

Learn how PHP, CSS3 and HTML blend together with jQuery to create those attractive jQuery plugins. Dissect jQuery filters by taking a single chunk of the jQuery source at a time, break it down, and know what is happing on the process.

Source & Screencast

A stunning music portfolio template designed using jQuery and HTML5. This template gives an idea on how to blend HTML5 with jQuery to create stunning plugins and designs.

Source
Demo

Sooner or later, somebody is going to type in a wrong URL or follow a broken link to your site. This is when the notorious 404 page is displayed. Learn how to design a friendly error page which will encourage your user to stay at your web site.

Source
Demo

The interactive photoDesk plugin based on jQuery and CSS3 helps create interactive portfolios and galleries. Let the audience enjoy playing with the images on your site with this plugin.

Source
Demo

This tutorial is about how to create a simple overlay effect to display annotations in e.g. portfolio items of a web designer’s portfolio.

Source
Demo

In this tutorial we will create a content panel that slides out at a predefined scroll position. It will reveal a teaser with related content and it can be expanded to full page size to show more.

Source
Demo

This tutorial helps create a stunning full page photo wall gallery. The idea is to have a whole page full of thumbs with a nice light effect when we hover. When an image is clicked, a panel slides up from the bottom revealing the full picture.

Source
Demo

This tutorial explains how to create a nice and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, we show the images of that album as a beautiful photo stack.

Source
Demo

Create an extraordinary gallery with scrollable thumbnails that slide out from a navigation. We are going to use jQuery and some CSS3 properties for the style. The main idea is to have a menu of albums where each item will reveal a horizontal bar with thumbnails when clicked.

Source
Demo

Read more

10 Great 3D Effects using jQuery

3D is now a commodity with 3D TV’s being all the rage and the latest cinema flicks are nearly always in 3D. With this in mind we can use jQuery to bring amazing 3D effects to our websites! From galleries to menus & text, 3D can take the user experience to the next level. Here are 10 jQuery 3D effects/plugins. (8. and 10. are pretty good!) Enjoy!

Related posts:

• 10 Magicial jQuery Text Effect Plugins
• 10 IE CSS3 and HTML5 Modern Browser Mimics

A JavaScript class which will draw and animate a HTML5 canvas based tag cloud. In general tag clouds use the font size of the tag links to highlight their frequency or popularity, so TagCanvas uses the size of the tag text to determine the weight of each tag.

Source

A jQuery plugin that applies highlight and shadow effects to text in a control so as to create a 3d effect.

Source

Allows creating awesome 3D text effect with jQuery. Enjoy 3D effect in all your text with this easy to use plugin. It comes with the following options to customize the 3D Effect: Depth, Wrapper, Shade_Color, Gradient.

Source

A plugin for the jQuery JavaScript Framework, which converts text into 3D text that can be viewed with simple red/blue 3D glasses. The plugin uses CSS3, with a fall-back for older browsers to create the 3D effect.

Source

Ever wanted your tag cloud to resemble a ball? Of course you did. This tutorial will walk you through how to create a Sphere in jQuery.

Demo
Source

This plugin provides a lot of options to customize the behavior. It provides a set of interesting effects that can be used to design interactive websites. Use them on site headers to create appealing websites.

Source

This jQuery libraray helps you create attractive and lovely 3D shapes. Change the perspective, tilt, rotate and play with the shapes using the jQuery 3D ObjectVR plugin.

Source

There are some attractive Adobe Flash based solutions for this type of UI component, and while JavaScript versions exist (see this and this), the commercial Flash products tend to have better aesthetics and polish. This is cool!

Source

A 3d animated tag cloud generated from an array. You can easily customize it by tweaking the eide range of options provided by this plugin.

Source

This is a jQuery plugin to create a 3d tag cloud from an unordered list. Create tags that rotate with a 3d effect usig jQuery. This plugin provides a lot of options to customize the looks of the amazing jQuery 3d tag cloud. Scroll in and out with the mouse wheel!

Source

Read more

Inserting an Element then Cloning it using jQuery

This is an example of using the jQuery.clone() function which some of you might not have heard of. It’s pretty simple to use and basically just copies the element you specify. In this example it creates 2 identical sidebars one on left and one on right saying “WEBPAGE-PREVIEW”. Which could be handy for showing clients that the webpage is only a preview. Changing CSS with jQuery is pretty easy to do!

Webpage Preview Example

The code

Just run the code in Firebug on jQuery4u homepage to see it in action.

(function ($) {
	var containerHTML = '<div class="preview">W E B P A G E - P R E V I E W</div>';
	$('body').prepend(containerHTML);
	$('.preview').css(
	{
		'background-color': '#DDDDDD','position': 'fixed','font-family': 'times new roman','text-wrap': 'suppress','padding': '10px','font-size': '20px','width': '20px','height': '100%','z-index': '1000','font-weight': 'bold','opacity': '0.7','vertical-align': 'middle','border': '5px solid red'
	});
	/* clone to right */
	$('.preview').clone().css({'position': 'fixed', 'right': '0'}).prependTo('body');
})(jQuery);

Read more

10 Awesome CSS/JS Plugins and Coding Techniques

You can create some impressive websites with very little CSS and JavaScript. In this post, we’ve collected 10 among hundreds (more to come on the next post) of awesome CSS and JavaScript plugins and coding techniques that should definitely be in your toolbox. Enjoy!

In this tutorial, you will learn how to create a dynamic stack of index cards solely with HTML and CSS3 and use such CSS3 features as transform and transition (for the dynamic effects) and @font-face, box-shadow and border-radius (for the styling).

Source

Learn how to create a movable object using JavaScript.

Source

Gradient border, going form from a lighter to darker as you go from top to bottom are the trick with these overlays. To create that effect we used to the border-image property, which is a tricky little addition to CSS.

Source

To create a drop-shadow with RGBa (a color model that allows an optimized contrast with any kind of background), we will use box-shadow. RGBa is the standard RGB model (0,0,0 – 255,255,255) and it adds the last option (a) for the opacity. We can use this model also for other properties and it works with the new browser.

Source

Learn to make a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.

Source

Learn how to create a coverflow effect that actually flows and animates in real-time, without using canvas or pre rendered graphics.

Source

You will learn how CSS 3 transforms and WebKit transitions can add zing to the way you present images on your site.

Source

To create a sliding vinyl effect for showing off the music you love, we take a standard album cover, a little HTML, and some CSS3 transitions and transforms.

Source

These examples came about when experimenting with the extend property in MooTools. By extending the styles class I could add CSS3 properties into the Core MooTools framework and do CSS3 animations.

Source

Zach Johnson has been having fun with 3D effects via CSS such as his isocube above, which is brought to you with simple HTML (including a video tag for a playing video on the surface!) and some CSS.

Source

Read more

Attempt at Animating Colour Transitions using jQuery

I have mentioned the .setInterval() function before. I used this function while creating a script which would (in theory) animates colour transition using jQuery. For example, go from white to light red to red to dark red such as a opacity transition would.

Initial Attempt at Animating Colour Transition

Here is my attempt. Note that the initial results were not very good so I didn’t waste anymore time coding it but posted here mainly for my reference.

$('#input-page-url').css('border-color','rgb(255, 255, 255)');

var r = 0, g = 0, b = 0;
var interval = 25;
var borderWidth = 0;

var animateLoop  = setInterval(function() {

/* exit loop if out of colour range */
if ((r+interval) > 255) { r = 255; clearInterval(animateLoop); }
else { i++; r += interval; borderWidth += 0.2; }

$('#input-page-url').css(
      {
         'border-color': 'rgb('+r+','+g+','+b+')',
         'border-width': borderWidth
      });

console.log('rgb('+r+','+g+','+b+')');

}, 100);

It’s a kind of .setinterval() loop example that uses the jQuery function .clearInterval() (clear setinterval) to reset the colour when it reaches 255 RGB. It then uses .CSS() to change the RGB colour of the element border.

This is also a cool plugin which does something similar: Highlight Fade which created a highlight background color fade for events.

Common error: ReferenceError: rgb is not defined

This occurs because you need to enclose the rgb in quotes (remember rgb is valid css! no need to convert to hex).

$('#input-page-url').css('border-color','rgb(redShade, 0, 0)');

Read more

10 Online Tools to Help Optimize and Format CSS

Optimizing your CSS will not only allow your web page to load quicker, it also increases the durability and resilience of your site when there is a spike in visitors (i.e. Digg effect) and for most of us, the most important part is that it gives you more readable code. For those coders with limited knowledge, here we’ve collected 10 fairly basic online tools that offer optimization and formatting without much effort at all. Have fun!

A web tool for reducing the file size of cascading style sheets. In order to save more space optimized files would be messy even so you may output it as a file. Non-valid or hacked (for certain browsers) CSS files may result in error.

Source

Use this utility to compress your CSS and increase the loading speed of a web page and save a little on bandwidth as well.

Source

A small utility that allows you to check 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.

Source

This feature rich tool takes your CSS file and parses and outputs a leaner version, removing any redundancies and attributes which are not needed. Here is a full list of what it can do:
> Removes comments
> Removes white space (such as excess spaces)
> Converts RGB values to Hex (they’re smaller)
> Converts Hex values in the format #RRBBGG to #RGB.
> Changes zero values with a size specified to 0. (0px would change to 0)
> Changes values such as border: 1px 2px 1px 2px; to border: 1px 2px;
> Converts multiple background, font, margin, padding, list attributes into a single attribute
> Converts multiple border values into single attributes
> Option to convert absolute values (PX & PT) into relative values (EM)
> Group style attributes and values which appear multiple times into a single style

This tool reads CSS just like a browser would. So using hacks which are browser specific will give random results, make sure any hacks are removed before use.

Source

Organizes and standardizes your CSS – selectors, sub-selectors and properties – in a structure that makes it easier to define page areas making it easier to see how they relate to each other.

Source

A CSS optimizer and formatter with a reasonable amount of options, which takes your CSS code and makes it cleaner and more concise.

Source

Obviously compresses the CSS to reduce the code size and make your web pages load faster. You can select from four levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression.

Source

This tool is based on the popular open-source CSS parser and optimizer, CSS Tidy. Code Beautifier offers the most options compared to all of the tools in this article.

Source

This can significantly reduce the size and complexity of your CSS by stripping out unneeded content, stripping redundant calls, and intelligently grouping the remaining element names.

Source

Open source software that you can use to optimize and compress your CSS file. It is available in .exe format (Windows only) and a zipped php script format (all platforms, for Web developers).

Source

Read more

Use CSS to Hide Content when JavaScript is Turned Off

Use CSS to Hide Content when JavaScript is Turned Off

This is a tip first seen by Karl Swedberg in one of this jQuery books where you can add a JS class to your HTML attribute when jQuery has loaded like so:

$('HTML').addClass('JS');

Then by using CSS to initially hide the elements, like this:

.JS #myDiv{display:none;}

They will only appear when JavaScript is enabled.

It is also worthy to note that altough JS can be turned off you will still be able to see the HTML markup(and search engine spiders also see this!). But nevertheless, a nifty little trick!

Read more

10 jQuery Enhanced CSS Buttons

Nothing’s more than appealing than to have an awesome web button appearance on your webpage. As such, we have collected 10 useful CSS buttons techniques that have all been improved and enhanced by the amazing power of jQuery. Check out our tutorials below.

The inspiration for this button comes from photoshop.com where Flash is used to create a nice slide out effect. This button does not behave exactly the same, but the effect is awesome. It does not use any images and uses the border radius property to make the rounded borders.

Source

A great interface for an administration panel, complete with great looking forms and buttons.

Source

This plugin is, by design, very basic. If you want to add lot of extra utility around getting and setting the hash as a state, and parsing and merging fragment params, check out the jQuery BBQ plugin. It includes this plugin at its core, plus a whole lot more, and has thorough documentation and examples as well.

Source

Learn how to make button hover fading transition with jQuery in this tutorial.

Source

The desired behavior:
> Clicking on a button opens its menu
> Clicking anywhere except inside the menu closes it

Source

When you mouse over the button, it glows as it comes into focus and of course when the mouse leaves the glow slowly fades away.

Source

In this tutorial you’re going to create an effective ‘call to action’ button with CSS and some jQuery to help grab the user’s attention and entice them to click.

Source

In this tutorial, you’ll find a walkthrough for creating a “Call to Action” button sprite in Photoshop as well as how to use jQuery to animate it. This tutorial is broken up into three sections: Photoshop, HTML/CSS, and JavaScript.

Source

This jQuery plugin is an attempt to recreate Google’s imageless buttons and prove that it doesn’t take a whole team of engineers and an endless cycle of code revision and quality control (their own words) to pull this off.

Source

Learn how to make a cross-browser rounded buttons with CSS3 and jQuery in this tutorial.

Source

Read more