Saturday, October 5, 2013

Fontastic the best way to create "Font Icons "

0 comments
Using the tool Fontastic you can create icon fonts in online. In this site over 3000 icons from the most icon collections. If you want to add your own icon, there is a tool for upload your own icon. Using css you can modify the Color, Size, Shadow of the icon. The main good advantage is it...


gives you clear and sharp icons even on retina display. It works in all modern browsers. It will work on responsive sites also. So you no need to create separate icons for tabs and mobile devices.

Using 3 Steps you can create Icon font

1. Add icons to your font  

2. Customize your font by changing the character and CSS mapping making it easier to code.
  3.Download the package including all the fonts and Install it in your website.
 

You can copy the "fonts" folder into your website project. Then copy the following CSS Code to your website stylesheet Or add the CSS file “styles.css” to your project, and link to it from your HTML page.


/* Just click to select the code */
 
@charset "UTF-8";
 
@font-face {
  font-family: "untitled-font-1";
  src:url("fonts/untitled-font-1.eot");
  src:url("fonts/untitled-font-1.eot?#iefix") format("embedded-opentype"),
    url("fonts/untitled-font-1.ttf") format("truetype"),
    url("fonts/untitled-font-1.svg#untitled-font-1") format("svg"),
    url("fonts/untitled-font-1.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
 
[data-icon]:before {
  font-family: "untitled-font-1" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
 
[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "untitled-font-1" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
} 
 
.icon-dashboard-speed-streamline:before {
   content: "a"; 
} 
 
.icon-pen-streamline-2:before {
   content: "b"; 
}
Insert the "data-icon" attribute into any HTML tag to add the icon:

Time
Use the following link to see the site http://fontastic.me

Read more...

Tuesday, September 24, 2013

Free Jquery fancy timeline transitions

0 comments
Free Jquery fancy timeline transition This is a port of the Google+ iPad app timeline purely done with CSS3. Click the following link you can download the full code

Githumb link: https://github.com/9elements/fancy-timeline-transition

 Download Link: Click here to download

Read more...

Wednesday, June 5, 2013

Gmap3- Best solution for google map integration

0 comments
Gmap3 is the best solution for google map integration in your site. You can handle google map easily using this jQuery Plugin. Gmap3 have the following features
1. overlays
 2. clusters
3. callbacks
4. events etc. and can be used for many purposes like :



a. Managing markers in clusters on Google maps
b. Using a context menu on Google maps  
c. Searching an address on Google maps with auto-completion
4. Displaying a streetview in an antoher window  
5.Add more data in markers

Using Gmap3 you can understand the power of google maps.

You can download the Gmap3 from here

Website address : http://gmap3.net/en/

Read more...

How to open fancybox on page loading of a site and some other fancybox 2 techniques

0 comments
If you want to open a fancybox 2 on page loading of a site please add the following code in the document ready of jQuery.

Using the following codes you can prevents closing when clicking OUTSIDE fancybox 2.


If you want to remove the close button of fancybox 2 just copy the following code into the document ready function.

If you want to download the fancybox 2 from here

Read more...

Monday, June 3, 2013

Load iframe html content on page loading using light box

0 comments
Using the simple functions you can load iframe html content in lightbox.






Read more...

Tuesday, March 19, 2013

Using the .after pseudo-element clearfix a positioned div- css trick

0 comments
When you are using a div positioned content will not show outside the bounds of the container. using the following css we can clear this thing.
.container {
    display: inline-block;
}
.container:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;
}
.container {
    display: block;
}
for internet browser using the following code


Read more...

Thursday, January 17, 2013

How to use " :before " and ":after" sector in CSS2

0 comments
The ::after" selector is mainly used to inserts content after the selected element or elements.
p:after
{
content:"..readmore";
} 
same way The ":before" is used for inserts content before the content of the selected elements or element.
p:before
{
content:"read this... ";
} 

Read more...