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...