blogfreakz.com » HTML5

Create A Grayscale Image Hover In HTML5

Keith@Blogfreakz — Wed, 25 Jan 2012 10:08:26 +0000

It used to be that shifting an image from grayscale to colored and vice-versa as you hover over it required 2 copies of the said image — one in grayscale and the other in color. But thanks to Darcy Clarke for the JavaScript & HTML 5 grayscale in this tutorial, this feat is easier and faster because the grayscale image is generated from the original source.

Click on the above image for the demo.

Steps:

Get a copy of jquery.js
Paste the code below onto your web page. What the code will do is look for the target images (.item img) and then generate a grayscale version.

Be sure to set your target image (eg: .post-img, img, .gallery img, etc.)

TIP: You may change the transition speed by adjusting the highlighted number in the code (ie. 1000 = 1 second)

Provided that JavaScript is enabled, this will work on any browser that supports HTML5 such as Safari, Chrome, and Firefox. Otherwise, the image will revert to its original colored state.

Developer’s Note: if it doesn’t work with Firefox and Chrome locally, you need to put the HTML file on a web server.

Incoming search terms for the article:

21 Free HTML5 and CSS3 Corporate & Folio Templates

Marvin@Blogfreakz — Wed, 11 Jan 2012 05:00:48 +0000

One of the latest languages in web development that has created a buzz among users is HTML5. Combined with CSS3, it produces web design tools that are innovative, useful, user-friendly, and even fun.

I’ve gathered a list of free templates below which use HTML5 and CSS3 supplemented with other features like jQuery. These templates have clean and sleek designs, perfect for corporate, product, portfolio and service websites. Just click on the names and thumbnails to view their respective sites and demos.

Nova

One-Page Template

Kroft

Free HTML5 Template

Flip Thru

Earthday

HTML5 Template for Design Company Website

HTML5 Admin Template

RedX

Ost Magazine

Art of Your Business

Vivid Photo

Communications

Technicalline

Incoming search terms for the article:

Cuepoint.js – Adding Cue-Points & Subtitles To HTML5 Video

Mufti Ali — Sun, 10 Jul 2011 15:45:36 +0000

Cuepoint.js is an open source jQuery plugin for adding subtitles to your HTML5 video. To implement this plugin is pretty simple. Simply pass in an object containing your slides to the cuepoint.init method.

The time is in seconds.

$(document).ready(function(){
  var slides = {5:"Hello World"}
  cuepoint.init(slides);
  cuepoint.play();
});

If you want to create skip to links you can use the setTime(seconds) method and bind it to a jQuery click event.

Requirements: jQuery Framework
Demo: http://cuepoint.org
License: Other License

Incoming search terms for the article:

HTML5 Music Player Plugin For jQuery

Mufti Ali — Thu, 16 Jun 2011 14:52:23 +0000

Remember that awesome music player psd created by Orman Clark?, The guys from codebase is create html5 music player plugin for jQuery by using this psd file. This jQuery plugin allow you to build your own playlist. The playlist uses the same format with jPlayer (an array of objects. However, this plugin requires you to add some additional parameters.

You can also specify some options, such as currency symbol, buy text, number of tracks to show and auto play setting.

Requirements: jQuery Framework
Demo: http://www.codebasehero.com/files/music-player/demo/
License: Other License

Incoming search terms for the article:

Droparea – HTML5 Drag & Drop Image File Uploader

Mufti Ali — Wed, 15 Jun 2011 05:53:33 +0000

Droparea is a HTML5 drag and drop image file uploader jQuery plug-in and a php script for server-side. Simply drag the image file into the specified area, the image will be automatically uploaded to your server. You can also see the progress of the upload too. Droparea has been tested on Google Chrome and Mozilla Firefox.

Requirements: jQuery Framework
Demo: http://gokercebeci.com/dev/droparea
License: MIT License

Incoming search terms for the article:

Gridless – HTML5 & CSS3 Framework With Beautiful Typography

Mufti Ali — Mon, 13 Jun 2011 10:20:58 +0000

Gridless is an awesome HTML5 and CSS3 framework for making responsive, cross-browser websites with beautiful typography. Gridless has a simple approach on markup and styles. There aren’t any pre-made grid systems and the CSS isn’t littered with silly classes. Gridless is only a starting point, that should be edited to suit each project’s needs.

Features

Responsive (responds to the user’s device screen width with the adequated CSS)
Progressive enhancement and mobile first
Cross-browser compatible (even IE6 and 7)
CSS normalization instead of CSS reset
Beautiful typography with a vertical rhythm
Print styles optimized for performance
Optimal caching
HTML5 and CSS3 ready
Safe CSS hacks instead of conditional classnames/stylesheets
Micro clearfix hack
A well-organized folder structure

Requirements: -
Demo: http://thatcoolguy.github.com/gridless-boilerplate/demo/demo.html
License: MIT License, GPL License

Incoming search terms for the article:

jQuery HTML5 Uploader

Mufti Ali — Sun, 22 May 2011 11:48:05 +0000

jQuery HTML5 Uploader is a lightweight jQuery plugin that lets you to quickly add an upload system a-la-Gmail into your web app. You only need to create a dropbox element (i.e. a div) and jQuery HTML5 Uploader will do the rest. Then you can drag & drop one or more files on the element and the files will be uploaded. It also works with the multiple input file element.

The upload function is divided into two asynchronous operations: client side, the file is loaded in the browser memory with a FileReader object. Useful if you want, for example, to show the image preview while uploading a picture. The server side operation consists in sending the binary file string to the postUrl (see settings).
It has been tested and works on Firefox and Chrome.

Requirements: jQuery Framework
Demo: http://www.igloolab.com/jquery-html5-uploader/
License: Free License

Incoming search terms for the article:

G5 – HTML5, CSS3, PHP & jQuery Front End Framework

Mufti Ali — Tue, 03 May 2011 02:00:23 +0000

G5 Framework started as a personal project. In an attempt to speed up workflow, reuse the best coding practices & similar coding techniques, the framework serves as a starter file for new websites. G5 is a framework for building PHP-powered HTML5 websites which makes use of popular resources.

G5 Packed With:

Modernizr 1.6
Eric Meyer’s Reset Reloaded
jQuery 1.5.2 with fallback
CSS3 PIE
CSS3 Buttons
Easy Grid
IE6 PNG Fix + IE6 Update
Tipsy Tool Tips
Reveal Modals
Orbit Image Slider

Framework Features

HTML5 baseline
Base CSS
PHP Active Class
Smooth Scroll to Top
HTML5 Placeholder Fallback
Base SEO
Based on a F Layout
Sticky Footer
Clean Organization

G5 is free for personal & commercial use as long as humans.txt remains unchanged & in the index head.

Requirements:-
Demo: http://framework.gregbabula.info
License: Other license

Incoming search terms for the article:

Laker – Create Digital Publications With HTML5 And Convert To iOS Apps

Mufti Ali — Thu, 28 Apr 2011 01:25:09 +0000

Laker is a compendium of files, frameworks, styles and tips for designing digital publications in HTML5. Laker allow you to distribute our publication as an app for iPhone and iPad. The layout scales automatically depending on screen size and orientation.

You can swipe to change pages and show a table of contents by DoubleTap. Laker implement native looking slideshows. We can also Include sound, YouTube videos, images, multi-column layouts and more. The layout even adapts to a desktop browser.
With laker, we can build digital magazines, catalogues, slideshows, surveys, conference schedules and everything else you can imagine.

Requirements: A Mac and xCode (for exporting the app)
Demo: http://www.lakercompendium.com
License: Other License

Incoming search terms for the article:

Speakker – Crossbrowser HTML5 Audio Player

Mufti Ali — Sat, 16 Apr 2011 13:13:04 +0000

Speakker is a fully featured audio player based on projekktor featuring native audio with Flash fallback. Speakkercomes out of the box in two variations and with incredible options of customization: Flexible dimensions, unlimited colors
and two different button sets for light and dark themes.

Speakker is easy to set up. We can insert Speakker into any web page with just a few lines of Javascript and a quantum CSS. Featuring the technology of Projekktor it comes with cross-browser compability, Flash-fall back plus optional
social- and artists information links.

Requirements: -
Demo: http://www.speakker.com/demo/
License: GPL License