• HTML/CSS
  • jQuery
  • PHP
  • JS
  • AJAX
  • MySQL
  • Res
  • XSLT
  • Contact Us
  • HTML/CSS
    • Game Development →
      • HTML5 Game Development - Lesson 1
      • HTML5 Game Development - Lesson 2
      • HTML5 Game Development - Lesson 3
      • HTML5 Game Development - Lesson 4
      • HTML5 Game Development - Lesson 5
      • HTML5 Game Development - Lesson 6
      • HTML5 Game Development - Lesson 7
    • Menus →
      • CSS3 multilevel menu with transition and animation
      • Marble Style CSS3 Navigation Menu
      • Toggle CSS3 Bottom Navigation Bar
      • Accordian like CSS3 Onclick Vertical Navigation
      • Multilevel CSS3 Metal Navigation with icons
      • Click-action CSS3 Dropdown Menu with jQuery
      • Click action Multi-level CSS3 Dropdown Menu
      • CSS3 Animated Menu
      • CSS3/jQuery crossbrowser Drop-down menu with tabs
      • CSS3 Drop sliding list Menu #6
      • CSS3 Slideout Menu #5
      • CSS3 Dropdown Menu #4
      • CSS3 Dropdown Menu #3
      • CSS3 Dropdown Menu #2
      • Cool CSS3 Dropdown Menu
    • Templates →
      • Robo Splash Page Layout
      • 'Mono' HTML5 CSS3 Single Page Layout
      • HTML5/CSS3 single page layout - Art theme
      • Attractive HTML CSS Anime Theme Website Layout
      • HTML CSS website layout #4 - Gray theme
      • Dark and clean HTML CSS website layout
      • HTML5&CSS3 single page layout - Rock portal
      • E-Store HTML5 CSS3 Single Page Layout
      • Under Water Themed HTML5 & CSS3 single page Layout
      • HTML5 & CSS3 Single Page Web Layout
    • HTML5 tutorials →
      • HTML5 Canvas Slideshow
      • HTML5 canvas - Custom brush #2 (Bubble brush)
      • HTML5 canvas - Custom brush (BezierCurveBrush)
      • HTML5 Face Builder
      • Pure HTML5 file upload
      • HTML5 image crop tool
      • HTML5 animation - patterns with loops
      • HTML5 3D circle text with shadows
      • HTML5 canvas pixelate effect
      • Animated Moving Clouds using HTML5
      • Animated Fireplace in HTML5
      • 3D Animated Box HTML5 WebGL Photo Slideshow
      • Your Own Paint Program
      • Image Zoomer in HTML5 Canvas
      • Photo Array in WebGL
      • HTML5 Canvas Image Color Picker
      • HTML5 Image Effects App - Adding Horizontal Flip
      • Keyboard Sensitive 3D Twisted Images in WebGl
      • Animated 3D WebGL Demonstration
      • HTML5 Image Effects App - Adding Noise and Invert
      • HTML5 Canvas Image Effects App - Adding Blur
      • Attractive Presentation with HTML5
      • HTML5 Canvas App for Online Image Enhancements
      • Water Ripple effect using HTML5 canvas
      • Animated 3D canvas object in HTML5
    • CSS3 tutorials →
      • CSS3 Image Hover Effects
      • CSS3 Modal Popups
      • Isometric interactive interior guide
      • Analog Clock with Pure CSS3
      • CSS3 Optical Illusions
      • CSS3 Animated Photo Slider
      • CSS3 Christmas Tree with Snow
      • How to Create a Pure CSS3 Slideshow
      • CSS3 Drop Caps
      • Pure CSS3 Slider
      • Fantastic Animated Buttons using CSS3
      • How to Create a Pure CSS3 Animated Photo Gallery
      • Toggle CSS3 Bottom Navigation Bar
      • How to Generate Runtime Multi-columns with CSS3
      • Multiple backgrounds and Animation with CSS3
  • jQuery
    • Photo album with jQuery Fotorama
    • Photo album with jQuery Chop Slider
    • Cool Background Image Sliding effect with jQuery
    • jQuery Templates - Usage Practice
    • Photo Album with Galleriffic jQuery plugin
    • Fantastic Photo Album with TN3
    • Ajaxy Photo Gallery (jQuery) with Custom Images Sets
    • Rotating Slider with Easing Effects in jQuery
    • Animated jQuery Progressbar Plugin
    • Nice CSS3 Lightbox Gallery
    • Photo Album with Highslide
    • Using Flux Slider jQuery plugin
    • Ajaxy Chained Selects
    • Modern jQuery Pagination for Content
    • Your own jQuery Slider Plugin
    • Attractive Photo Gallery using SmartGallery
    • Animated Photo Gallery using jQuery (Slider Kit)
  • PHP
    • Powerful Chat System - Lesson 3
    • Powerful Chat System - Lesson 2
    • Powerful Chat System
    • Access Control with Bit Masks
    • Own XML/JSON/HTML API with PHP
    • Your Own Ajax Poll System
    • Diary style PHP Guestbook
    • Smooth Curve Graphs with PHP and GD
    • Your Own Commenting System from Scratch
    • Autocomplete with PHP, jQuery, MySQL and XML
    • Your Own 5 Stars Voting System
    • How to use Memcache with PHP
    • How to install APC on Linux
    • How to Use APC Caching with PHP
    • Watermark processing on images using PHP and GD
    • ID3 Tags Reader with PHP
    • Advance Level Login system with Logic captcha
    • Protection and Methodologies of Security Vulnerabilities
    • How to Resize images on Server Side
    • How to Protect any Site from Spam using Akismet
    • Phar - PHP archiving practice
  • JS
    • Form Validation with Javascript and PHP
    • Fullscreen Javascript Slide navigation
    • Photo Scrambler grid in javascript
    • Photo Slideshow (zoom fading) effect
    • Custom scrollbars - cross-browser solution
    • Flare Lens Effect
    • Own RSS Reader Using Google Feed API
    • Cross-browser Wave Effects
    • Cross-browser Supported Image Skew effect
  • Res
    • ← Infographic
      • The Evolution of Languages
    • ← jQuery plugin roundups
      • December 2011
      • November 2011
      • 10 fresh jQuery Tutorials
      • October 2011
      • September 2011
      • 10 fresh Ajax related jQuery plugins
      • August 2011
      • 10 Oven Fresh jQuery Plugins for UI
      • 10 Most creative jQuery plugins for tables
      • 10 Most Creative jQuery Navigation Plugins
      • 10 fresh jQuery plugins for working with forms and UI
      • 10 superb jQuery plugins for working with images
    • ← HTML5 stuff
      • HTML5 and Games
      • 10 Fresh HTML5 Tutorials
      • Fresh impressing WebGL demonstrations
      • Most impressing HTML5 with WebGL demonstrations
      • 10 Fresh & Impressive HTML5 Canvas (and WebGL) Examples
      • 10 Exceptional Examples of HTML5 Canvas and Applications
    • ← Mobile
      • How to start developing own applications for Android
      • 10 Fresh Android tutorials
      • 10 Attractive Tutorials for Developing iPhone Applications
      • 10 Attractive android tutorials for developers
      • 10 Fresh iPad Apps for Web Designers & Developers
      • 10 Fresh Android Apps for Web Designers & Developers
      • 10 Fresh iPhone Apps for Web Designers & Developers
      • Top 10 iPhone apps for working with graphics
    • 12 Unique Navigation Menu Designs For Your Inspiration
    • 15 Unique and Creative Layouts 2011
    • 12 Beautifully Creative Flash Websites of 2011
    • Fresh collection of Original Captchas
  • XSLT
    • Animated forums using XSLT and Ajaxy
    • Multilevel Menu using XSLT
    • Delicious bookmarks using XSLT transformation
    • XPath visually
    • Tags cloud using XSLT transformation
    • Youtube videos using XSLT transformation
  • Contact Us
KEEP IN TOUCH

Posts tagged html5

HTML5 Video player jQuery plugin

By admin on Feb 22nd, 2012 | Posted in HTML/CSS, HTML5, jQuery | Leave a Comment

Tags: html5 video, jquery plugin, video player

HTML5 Video player jQuery plugin

HTML5 Video player jQuery plugin

As you know – HTML5 <video> element is already supported by most of browsers (by modern browsers). Its initialization is very easy. During today’s investigation I have understood few things: that each browser supports only few of video formats, and each browser has own native video controls (and all of them are different). But fortunately, html5 can give us all necessary possibilities to make own interface to control our video element. Today I will show you process of building own html5 player (quite crossbrowser), more, it will be new jquery plugin.
READ MORE »

HTML5 charts and graphs

By admin on Feb 20th, 2012 | Posted in HTML5 | Leave a Comment

Tags: charts, graphs

HTML5 charts and graphs

HTML5 charts and graphs

Today I have found one interesting library – flotr2. This is opensource library for drawing HTML5 charts and graphs. It allow to draw charts in different modes like: lines, bars, candles, pies, bubbles. More – it don’t require any extra libraries like jQuery or Prototype. And finally – it has good compatibility with different browsers. I have prepared our own demo for today’s lesson (using that library).

READ MORE »

HTML5 canvas – Custom brush #2 (Bubble brush) for your paing program

By admin on Jan 12th, 2012 | Posted in HTML5 | 2 Comments

Tags: brush, canvas paint

HTML5 canvas - Custom brush #2 (Bubble brush)

HTML5 canvas – Custom brush #2 (Bubble brush) for your paing program

In our previous tutorial we made BezierCurveBrush. Today I have decided to create new brush for same script. This brush will use ‘arc’ function. In result we will have interesting effect, just check out it!
READ MORE »

HTML5 canvas – Custom brush (BezierCurveBrush)

By admin on Dec 22nd, 2011 | Posted in HTML5 | Leave a Comment

Tags: brush, canvas paint

HTML5 canvas - Custom brush (BezierCurveBrush)

HTML5 canvas – Custom brush (BezierCurveBrush) for your paing program

I hope that you still remember when we did our first Paint program with HTML5. Today I have decided to enhance it with adding new additional brush to it. This brush will use ‘bezierCurveTo’ function. In result we will have interesting effect, just check out it!
READ MORE »

HTML5 and Games

By admin on Dec 16th, 2011 | Posted in HTML5, resources, Uncategorized | 5 Comments

Tags: advantages, examples, games

HTML5 and Games

Today we will talk a little about future of HTML5 in the gaming industry. As you know, HTML5 continues to have a dramatic impact on the web world during few last years. At current time, HTML5 still under development, but I sure that you have already seen many really great examples of it. Many people and companies (like Spil Games, Mochimedia) have already started learn and use html5.
READ MORE »

HTML5 Face Builder

By admin on Dec 12th, 2011 | Posted in HTML5, JavaScript | Leave a Comment

Tags: canvas, face builder, toy

HTML5 Face Builder

HTML5 Face Builder

This is another interesting application of HTML5. Today I have developed a little ‘toy’. This little toy can be enhanced into something big. Welcome to test new HTML5 tool – Face Builder (canvas). This tool will allow your members (visitors) to compose their faces, you can select through predefined elements (face, eyes, nose, mouth), and in end – you can ‘export’ result into image (like crop tool).
READ MORE »

Pure HTML5 file upload

By admin on Dec 09th, 2011 | Posted in AJAX, HTML5, JavaScript | 8 Comments

Tags: ajaxy, photo upload, preview, upload

Pure HTML5 file upload

Pure HTML5 file upload

Today we will be developing a great HTML5 file upload form with progress bar and preview (at client-side). We have already gave you jQuery based solution, but today’s application don’t require jQuery at all. All made in pure HTML5 Javascript. I’m going to use FileReader (html5) to implement live preview (without uploading to server), and, going to use XMLHttpRequest to send data to server.
READ MORE »

HTML5 image crop tool

By admin on Dec 07th, 2011 | Posted in HTML5 | 2 Comments

Tags: crop, crop images, tool

HTML5 image crop tool

HTML5 image crop tool

I have prepared new great HTML5 tool for you (with tutorial). I have made ‘Crop tool’ in html5 (canvas). Now we can crop images at client side too. Now we don`t need to send data (with crop coordinates) back to server as we did in our previous article: ‘Image Crop Plugin – using Jcrop’.
READ MORE »

HTML5 animation – patterns with loops

By admin on Dec 03rd, 2011 | Posted in HTML5, JavaScript | Leave a Comment

Tags: canvas, coding, HTML5 animation, tutorial

HTML5 animation - patterns with loops

HTML5 animation – patterns with loops

I have prepared new HTML5 tutorial for you. This is not quite regular ‘html5 game development’ tutorial, but I like to show you another demonstration of html5 canvas animation. We will create patterns with loops and animate it. Today I have prepared nice demo with the sun and with three cars.
READ MORE »

Creating HTML5 3D circle text with shadows

By admin on Nov 30th, 2011 | Posted in HTML5 | 1 Comment

Tags: 3d, circle, css3, how-to, text, tutorial

HTML5 3D circle text with shadows

HTML5 3D circle text with shadows

Another one great HTML5 tutorial. It tells us how to draw 3D text and display it in a circle. Also it tells us about applying shadow and 3D effect to text. Plus I am going to rotate text in a circle.
READ MORE »

Page 1 of 41234

Popular Tutorials

  • How to create easy pagination with jQuery
  • Animated jQuery Progressbar Plugin
  • Pure HTML5 file upload
  • How to Create Animated Photo Gallery using jQuery (Slider Kit)
  • CSS3 Image Hover Effects
  • Creating a HTML5 & CSS3 Single Page Web Layout
  • How to Easily Make a PHP Chat Application
  • Autocomplete with PHP, jQuery, MySQL and XML

Tags

3d AJAX android animated animation app application applications apps canvas captcha chat system coding creating css css3 developers dropdown effect flash fresh gallery how-to html html5 image images iphone javascript jQuery layout menu navigation new photo PHP plugin plugins slideshow system tutorial tutorials webgl website xslt

Recent Tutorials

  • HTML5 Video player jQuery plugin
  • Pure CSS3 Accordion
  • HTML5 charts and graphs
  • Infographic: CSS3 Properties
  • 10 HTML5 canvas examples for Valentine’s Day
  • Powerful Chat System – Lesson 4
  • CSS3 multicolor menu
  • New HTML5&CSS3 single page layout – Fashion

Friends

  • X-Musics

Tutorials for Web Developers Copyright © 2009-2011 Script tutorials · All rights reserved