Gradient in CSS3

Check out my previous post about text-shadow ,  box-shadow  and Draw simple drawing board application using HTML5 Canvas.

This post is about how to use gradient background or gradient color without using any image which is purely using HTML5
CSS3 style sheet.

let’s look at the syntax:

background: linear-gradient([Direction] [color] [percentage]);

Direction: (Top/45 deg/Left/Radial) in which direction you need to spread color

Color: which color to fill

Percentage: what percentage of the areal to be filled with Color.

there are multiple syntax supported by different browser.

check out the following CSS3 syntax for different browser.

background: #b3dced; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -moz-linear-gradient(-45deg, #b3dced 0%, #29b8e5 50%, #bce0ee 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#b3dced), color-stop(50%,#29b8e5), color-stop(100%,#bce0ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* IE10+ */
background: linear-gradient(135deg, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#bce0ee',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */

check out the following ultimage css3 gradient generators from others:

http://www.colorzilla.com/gradient-editor/

http://gradients.glrzad.com/

and one more

Advertisements

html5 simple drawing board using canvas for touch devices


HTML
Add html tag and add canvas element.
<canvas id=”pad” width=”1366″ height=”271″>
<p>Not Supported</p>
</canvas>

CSS

html, body {
	width:  100%;
	height: 100%;
	margin: 0px;
}

Javascript

isMobile: variable detects the current browser is support touch events or not because when we want the current position of browser in touch screen devices we can get it from event.targetTouches[0].pageX and event.targetTouches[0].pageY. However in normal browsers we can calculate by event.pageX – this.offsetLeft and event.pageY – this.offsetRight.

There is also different events on touch enabled devices, when you start drawing on browser it fires touchStart event where as the browser fire mouseDown  event.

please follow the table for equivalent event on browser and touch enable browser.

Browser: mouseDown, mouseMove, mouseUp

Mobile devices: touchStart, touchMove, touchEnd

click here for Demo

var isMobile;
	function isTouchDevice() {
	   var el = document.createElement('div');
	   el.setAttribute('ongesturestart', 'return;');
	   return typeof el.ongesturestart === "function";
	}

	isMobile = isTouchDevice();

	if(window.addEventListener) {
		window.addEventListener('load', function () {
			var canvas, context, draw;

			// Touch Events handlers
			draw = {
				started: false,
				start: function(event) {

					context.beginPath();
					if (isMobile){
						context.moveTo(
							event.targetTouches[0].pageX,
							event.targetTouches[0].pageY
						);
					}else{
						context.moveTo(
							event.pageX - this.offsetLeft, 
							event.pageY - this.offsetTop
						);
					}
					this.started = true;

				},
				move: function(event) {

					if (this.started) {
						if(isMobile){
							context.lineTo(
								event.targetTouches[0].pageX,
								event.targetTouches[0].pageY
							);
						}else{

							context.lineTo(
								event.pageX - this.offsetLeft, 
								event.pageY - this.offsetTop
							);
						}
						context.stroke();
					}

				},
				end: function(event) {
					this.started = false;
				}
			};

			// Canvas & Context
			canvas = document.getElementById('pad');
			context = canvas.getContext('2d');

			// Full Window Size Canvas
			context.canvas.width = window.innerWidth;
			context.canvas.height = window.innerHeight;

			// Events
			canvas.addEventListener('touchstart', draw.start, false);
			canvas.addEventListener('touchend', draw.end, false);
			canvas.addEventListener('touchmove', draw.move, false);
			canvas.addEventListener('mousedown', draw.start, false);
			canvas.addEventListener('mousemove', draw.move, false);
			canvas.addEventListener('mouseup', draw.end, false);

		});		// Disable Page Move
		document.body.addEventListener('touchmove',function(event){
		  event.preventDefault();
		},false);
	}

There is also another way to create drawing board on canvas, by printing images on the mouse movement.

check out this example Click here for Demo

Debuggin html5 offline application

There are amazing features of html5 and one of them is offline application using creating manifest file.
using manifest attribute in html tag makes your web page accessible offline.

 <html manifest="cache.manifest">
 </html>

content of cache.manfiest file looks like

CACHE MANIFEST
# rev 2.0

CACHE:
html5_appcache.html
image.jpg

NETWORK:
*

FALLBACK
/index.html /offline.html

where all resource under cache will get cache locally and served locally when application is offline and all resources under network will require internet connection when they requested by browser.
According to above example the resource html file and jpg file will get cached and served offline.This is great feature however the pain is to debug the offline application.

I have found one article from here http://jonathanstark.com/blog/debugging-html-5-offline-application-cache?filename=2009/09/27/debugging-html-5-offline-application-cache/

which create and binds events on each applicationCache object and writing in log file which goes like as below.
By putting following code in debugging mode you can easily find out what is going on with offline resource and how they get requested on offline mode.

var cacheStatusValues = [];
cacheStatusValues[0] = 'uncached';
cacheStatusValues[1] = 'idle';
cacheStatusValues[2] = 'checking';
cacheStatusValues[3] = 'downloading';
cacheStatusValues[4] = 'updateready';
cacheStatusValues[5] = 'obsolete';

var cache = window.applicationCache;
cache.addEventListener('cached', logEvent, false);
cache.addEventListener('checking', logEvent, false);
cache.addEventListener('downloading', logEvent, false);
cache.addEventListener('error', logEvent, false);
cache.addEventListener('noupdate', logEvent, false);
cache.addEventListener('obsolete', logEvent, false);
cache.addEventListener('progress', logEvent, false);
cache.addEventListener('updateready', logEvent, false);

function logEvent(e) {
    var online, status, type, message;
    online = (navigator.onLine) ? 'yes' : 'no';
    status = cacheStatusValues[cache.status];
    type = e.type;
    message = 'online: ' + online;
    message+= ', event: ' + type;
    message+= ', status: ' + status;
    if (type == 'error' && navigator.onLine) {
        message+= ' (prolly a syntax error in manifest)';
    }
    console.log(message);
}

window.applicationCache.addEventListener(
    'updateready', 
    function(){
        window.applicationCache.swapCache();
        console.log('swap cache has been called');
    }, 
    false
);setInterval(function(){cache.update()}, 10000);

there are other resource you can follow to gain more understanding about accessing html5 website offline
here are:
http://diveintohtml5.info/offline.html
http://www.w3schools.com/html/html5_app_cache.asp
Manifest file validator
Manifest file validator
Hope you find this post useful. Happy blogging.