Hi Guys, Here are some couple of logos that may come handy when you need them. Bookmark this page if you like because sometimes things become rather hard to find. CSS3 SVG Logo HTML5 SVG logo Share around so that others can benefit too. You can easily save them as JPG or PNG using a graphic tool such as inkscape. If you don't know how to do it let me know and I would gladly help. By the way try imgcake.com as well if you are interested in taking website screenshot. Its a free tool from me and I hope that you will like it. Cheers … [Read more...]
CSS3 Using attr() function with content property
by on May 26, 2013 Leave a Comment
Hi Guys, While working on css3 pseudo classes I came across this beauty, that could be handy just in few cases. You can read more about attr() specs here http://www.w3.org/TR/css3-values/#attr Anyway lets talk a little bit more about this function. Key things you should remember are In CSS3 attr() can return different types in contrast to CSS2 implementation where it would only return string Purpose of attr is data related not presentation related It must be used with attribute names such as data-* There is better way to understand other than when its shown implemented. Consider this example The Markup We will work with a basic markup and will only define a DIV as shown below [crayon-651e2d93e6e35226919755/] [crayon-651e2d93e6e3a386560687/] Nothing complicated in our DIV above. The only thing you should note is that I defined few custom attributes such as data-name, data-href, data-phone The CSS Now lets check the CSS side of things [crayon-651e2d93e6e3b926544142/] As you can see that we are using our attr() with content property and we are making use of our custom attributes and using them as fill values for blanks. Demo See above implementation in action by visiting the example page below http://jaspreetchahal.org/examples/html5/attr.html As you can see that CSS is becoming more powerful with every release with functions such as attr() being added/improved. I still sometimes wonder if that is actually an overhead when performance is something that you are looking for. I hope this helps … [Read more...]
How to disable Autocorrect, spellcheck and autocomplete HTML5 Tip
by on April 7, 2013 Leave a Comment
Hi Guys, There are time when you would like to disable AutoCorrection, Spell checking, Auto Completion for your form fields. This is true when a field takes in values like names, addresses, phone numbers etc Even though mobile browsers and desktop browsers offers these as features to help users to make less mistakes with their typing and all but as stated there are times when they MAY be less desirable. Browsers such as Chrome, Firefox, Opera or even Internet Explorer helps developers out with disable these features, at form level and or at field level. Oh and we can also add fourth attribute to equation called AutoCapitalize Let me show you with an example but let me tell you about the property names first autocomplete values: on|off autocorrect values: on|off autocapitalize values: on|off spellcheck values: true|false The Markup [crayon-651e2d93e73cc302789863/] So the above will give us much to test on you can also use these properties at form level as shown below [crayon-651e2d93e73ce795073362/] Here is a quick demo (Open this page in mobile browser and see if you can hit the nail with the demo provided) http://jaspreetchahal.org/examples/html5/disable_form_features.html I hope that this post was helpful. Just keep these properties in mind, at least if you know they exist you can use them at will and when most desired. You can prevent auto complete, auto correction, spell checking and auto capitalization just with ease. Cheers. … [Read more...]
Image blur using canvas html5
by on March 28, 2013 Leave a Comment
G'day, While I was looking around for something with my not so relevant queries, I found StackBlur which does pretty good Job to blur an Image by introducing a Canvas layer on top of the Image. I guess it make sense to do it that way. The results is something that took me by surprise. They are pretty close to what we are used to in Photoshop filter called Gaussian blur. Let me take you through this and we will also build a jQuery plugin to generalize few things in the end. A simple functional Image blur example can be reached from the link provided below Demo You can view the demo here http://jaspreetchahal.org/examples/jquery-examples/jblur/image_blur_example.html Now that you've seen the demo lets cover it in detail. First get hold of latest StackBlur from here Scripts and Styles Below are the scripts and stylesheet that you will need to recreate the example [crayon-651e2d93e74ea474921465/] [crayon-651e2d93e74ed853577561/] The HTML [crayon-651e2d93e74ee379877030/] [crayon-651e2d93e74ef611475779/] The above stuff can be reduced to just couple of lines of code, but I just copy pasted from my code when I was trying to do a few bits and pieces but you'll get the Idea. The CSS Beautify it a little bit, but thats just me, for others I am spoiling the look and feel :) The JavaScript Below is the Javascript that we need to introduce a slider and stuff [crayon-651e2d93e74f0498914187/] What above code does is, it is introducing a slider and binding the stackBlurImage() function to the slide event so that our slider value become the blur radius. Above works but what if we have something similar to this [crayon-651e2d93e74f1099319918/] Well thats exactly what we will be looking at next, New revised Markup [crayon-651e2d93e74f2189242522/] Our Little jQuery Plugin Code Please note that this plugin does not auto generate the slider control, slider control that is used in the example above, it from jQuery … [Read more...]
CSS3 form field highlight spotlight on focus HTML5
by on March 25, 2013 Leave a Comment
Hi Guys, Well there are times when you want to add some sort of interactivity to your webpage, one of those is when you introduce modal windows, where user fills up something and take any action "in form" of hitting a button or something. Long story cut short is that you just want to highlight an area which you think is most important to the user. We will do something cool with our form fields today, that will give you an idea what I am talking about. The Markup Below is the basic easy to understand markup that has nothing but form fields as shown below [crayon-651e2d93e7630314274584/] Nothing unusual that you couldn't understand above Now lets check out the CSS part and that is the most important one to introduce our so called dialog mask for textfields/textareas etc The CSS The only CSS bit or style that is required is listed below [crayon-651e2d93e7633638293140/] Result Demo Here is a quick demo to what I am talking about. http://jaspreetchahal.org/examples/html5/formfieldfocus.html Tested on All major Latest browsers I hope this little trick is anyhow useful to you :) Cheers, … [Read more...]
jcedit: A jQuery Plugin for contenteditable containers
by on December 28, 2012 2 Comments
Hi Guys, Here is a skeleton jQuery plugin that you can use on various pages to get people to send you corrections on the web pages of yours. Let me explain a bit more. So this plugin was written to help me with my work with a WordPress plugin of mine that allows in article editing and correction suggestion to be sent to the author/administrator. The WordPress plugin is called WP Errata and will be available from Wordpress.org But lets talk about this little jQuery plugin and I will take you though some key things that this plugin does. Example markup [crayon-651e2d93e786b821093911/] So the above markup is something that we will need. It doesn't matter if you include contenteditable="true" or not, as long as you are including class="jcedit" or your own within the div element, see the usage section Usage This plugin allow hook functions when user resets or hit save button and these actions can be overridden by following functions [crayon-651e2d93e786d205369025/] As you can see that by default the functions will have old and new content available through params. So a quick usage example will be [crayon-651e2d93e786e861336054/] .jcedit is the default class that we have applied jcedit to but you can have your own hook classes. It shouldn't matter. There is a good Stack print when you pass on debug: true some maybe useful info is printed out. Styling Here is the default stylesheet that you can edit if you are not happy with default styles. [crayon-651e2d93e786f366181525/] Above is pretty much very simple styles definitions that can be edited with ease Version Current version 1.0 Demo Ok here is a quick demo of this plugin http://jaspreetchahal.org/examples/jquery-examples/jcedit/jcedit.html If you have any question regarding this demo please let me know Compatibility This plugin should work if contenteditable is supported by your browser. This plugins has been tested on … [Read more...]
HTML5 vibration API with code examples
by on December 22, 2012 Leave a Comment
Hello, While reading more and more about HTML5 and working with it nearly everyday there is something new you end up doing everyday. Yesterday I was doing a bit of reading and came across the Vibration API so let me share you few things about the vibration API. Why would you use a vibration API Well I can think of a few usage scenarios and the one that is more obvious is to when you alert user about something in your mobile application it would be fun if you can add a little bit of shake so that an alert becomes a little bit more exciting. Or if you are a game developer then you can use it when a guy snaps a punch on other guys face. Think of anything that result in some sort of a shock you can use vibrations to make that shock more realistic Lets start looking more in depth of this API Detection With new APIs introduced not all browsers support it out of the box so it makes sense to detect the API support first and then do something cool with it. Firefox for Android as of writing support this API Here is how we can detect the vibration API supports [crayon-651e2d93e7a97930844246/] Usage Now that we have seen how to detect the support for lets now check out how to use the vibration function Here are couple of ways you can use the overloaded vibrate [crayon-651e2d93e7a99373927090/] so above is translated to following for real app situation [crayon-651e2d93e7a9a622822623/] Cancelling the vibration Cancelling the vibration is quite simple and here is an example to cancel the vibration [crayon-651e2d93e7a9b689426694/] Quite simple ehh! You can use Javascript method such as setTimeout()/clearTimeout() and setInterval()/clearInterval() to control the delay or repeats for vibrations. As web is moving more towards HTML5 now is the time to get used to new API. More browsers will be supporting these sort of new API. Browsers such as Chrome, Safari and Firefox and even Opera are pretty aggressive … [Read more...]
HTML5 File API – Part 1: FileList and File interface example
by on December 2, 2012 1 Comment
Hello, In this post I will be talking about new HTML5 file API. Please let me know if this post can be improved. File API will be touched on in 3 posts in HTML5 category. Introduction - this post File Reading Extended specification - creating a local file on clients machine Lets start knowing about File API. So up until now there have been no support for local file reading or writing but with HTML5 this is changing without compromising the security of course. The File API from my personal point of view is great addition and allows us to Read information about the selected files Read actual contents of the file. In this post I will concentrate on FileList and File interfaces. Let me first of all make a point clear about the security Security Now because File API works with files that are outside the working area of browser on client's machine, it is obvious to get concerned about security. Alright so from the specification it is understood that File API will only work with the user selected files. i.e. File API will not be able to provide you with a Directory structure or work on files on its own rather if will only work with user selected files or files that user is giving exclusive permission to be read. FileList and File interface Lets now check these two interfaces. I will give you a demo to work with and you can see yourself. Before we jump on that I would like to make this point clear that at the time of writing File API works on Chrome 9+, Firefox 3.6+, IE10+, Opera 11.1+ In this exercise we will create a File input box and once user select some files we will output key meta information of the selected files. The Code [crayon-651e2d93e7b9d786514322/] Demo Demo for the above listing can be found here http://jaspreetchahal.org/examples/html5/html5-file-api-intro.html We will look into a little bit more complex example in post 2 that will touch base on FileList and File interface again and also touch base on … [Read more...]
Recent Comments