Saturday, November 15, 2014

Best ways to make internet explorer like modern browsers

0 comments
I also hate internet explorer like other many web designers. In this blog post i will give some techniques to support HTML5 and css3 in internet explorer.

Supporting HTML5 in internet explorer



html5.js is the best javascript file for enabling html5 in internet explorer. The only thing you do is the embed the javascript file in your document. The below code will help you to embed the html5.js in your website.



Supporting CSS Box shadow in internet explorer



CSS3 box shadow is the beautiful thing in css3. But the older version of internet explorer is not support this. The below code is for creating box shadow in other browsers.


.msshadow {
  box-shadow: 15px 15px 5px #ccc;
}
But in you should add the following code for supporting the same in internet explorer.
.msshadow {
   filter:
        progid:DXImageTransform.Microsoft.DropShadow(color=#969696, offx=1, offy=1)
        progid:DXImageTransform.Microsoft.DropShadow(color=#C2C2C2, offx=1, offy=1)
        progid:DXImageTransform.Microsoft.DropShadow(color=#EFEFEF, offx=1, offy=1);
}

CSS Text-shadow property on internet explorer. 



If you want to support text shadow in internet explorer use the following code.
p.myshadow{
  text-shadow: #0000ff 0px 0px 3px; /* Modern browsers */
  filter: glow(color=#0000ff,strength=3); /* IE */
}

Rounded corners using css 



Most of the designers using the following css for creating rounded corner. But it not support older versions of internet explorer.
.round_corner{
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
If you want to support rounded corner in internet explorer you should add a JavaScript file named DD_roundies.js in your document. Use the following code.


Multi column layout using css3 



 Using the following code we can create a multiple columns in web browsers like firefox and safari. It will create a column in div element
.my_column {
    -moz-column-width: 13em;
    -webkit-column-width: 13em;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
}
But its not work in internet explorer. But columnize.js plugin will help you to work in internet explorer. Use the following code for that. You can download the plugin from here
$('#mydiv').columnize();
$('#myotherdiv').columnize({ width: 200 });
$('#mythirddiv').columnize({ columns: 2 });
 

CSS3 pseudo-selector emulation



CSS3 gives us a lots of useful selectors. Among others, the :nth-child() pseudo sector is the useful for find a particular siblings in a given document tree.
p:nth-child(3) {
    color:#069;
} 
If you want to support these thing to your older internet explorer you should download and embed the following plugins in your document.


Download Robert Nyman’s DOMAssistant, Keith’sie-css3.js and link them in your HTML document header.

Opacity



The following filter to add opacity in internet explorer.
.mydiv{
    opacity:.7; /* Standard CSS */
    filter:alpha(opacity=70); /* IE patch */
}


Rotating elements



Rotating html element we can use transform property in css
.mydiv{
transform: rotate(240deg);
-webkit-transform: rotate(240deg);
-moz-transform: rotate(240deg);
}
The same thing you want to support internet explorer you should add the following filter in css
.mydiv{
filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.86602540, M12=0.50000000, M21=-0.50000000, M22=0.86602540);
}


Read more...

Thursday, October 23, 2014

Chat plugin created using jquery and web browser

0 comments
Using WebRTC plugin enables real-time streaming of video and/or audio between two web browsers(or peers).

Browser Support

Given the newness of WebRTC this jQuery plug-in has been created to support all major browsers that support the latest draft WebRTC specifications at the time of release. Below you will find a list & download links for the latest supported browsers:
  • Chrome
  • Chrome Beta for Android (for tablet & mobile phone support)
  • FireFox
  • Internet Explorer 10 (requires Google Chrome Frame plug-in)
  • Chromium
  • Chrome Canary
  • FireFox Aurora
  • FireFox Nightly



Readmore  
github  
Download

Read more...

Friday, July 25, 2014

iPhone App Design Cheat Sheet ( Resolutions , Display Specifications

0 comments
In this post i will give you the sizes of iphone devices and which resolutions we want to create the designs. In the following images you can see the screen sizes of different iphones

Different DevicesPixel/InchPortraitLandscape
iPhone 5 iPhone 5s, 5, 5C 326 640x1136 px 1136x640 px
iPhone 4/4S 326 640x960 px 960x640 px
iPhone & iPod Touch
 1st, 2nd and 3rd Generation
163 320x480 px 480x320 px
Retina iPad iPad 3, iPad 4, iPad Air 264 1536x2048 px 2048x1536 px
iPad Mini 163 768x1024 px 1024x768 px
iPad Mini Retina 326 1536x2048 px 2048x1536 px
iPad 1st and 2nd Generation 132 768x1024 px 1024x768 px

Read more...

Friday, July 11, 2014

CSS 3 Transitions: An introduction ...

0 comments
Using CSS3 we can create awesome transactions with out using JavaScript. If you want to have animate one of your element, add the following CSS:
.class_of_your_elemt {
  -webkit-transition: all 2s ease-in-out;
  -moz-transition: all 2s ease-in-out;
  -o-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
}
In CSS3 transitions there are different types of timings are there.
Different timing functions
Ease
Ease In
Ease Out
Ease In Out
Linear
Custom
The basic syntax for a CSS3 transition is of the form:
transition:  [  ||
                ||
                ||
                ]
Using this tool Ceaser CSS Easing Tool you can customize your timing transitions.
 An example of CSS3 Transistions
.example {
  transition-property: top, left, border-radius, background-color;
  transition-duration: 2s, 1s, 0.5s, 0.5s;
  transition-delay: 0s, 0.5s, 1s, 1.5s;
}

Read more...

Wednesday, July 9, 2014

Border-radius might seem superficially simple, but it can be very powerful..... check this video

0 comments

Read more...

Tuesday, July 8, 2014

Best way to create graphs using canvasjs

0 comments
CanvasJS the best way to create chart using HTML5 & JavaScript. Graphs are created using Canvas element. Canvasjs maded Graphs supports multiple platforms including iPhone, iPad, Android, Windows Phone, Desktops, etc. This allows you to create rich dashboards that work on all devices without compromising on maintainability or functionality of your web application. There are sevaral beautiful themes included. Using canvasjs you can make several types of charts for example line spline step line area spline area bar pie doughnut scatter/ point bubble dynamic chart Basic code for canvasjs


  
  


  
You can download canvasjs from here download

Read more...