Posts

create geolocation in html

-
<!DOCTYPE html> <html>     <head>     <title>geolocation</title>     </head>         <body>     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var x=document.getElementById("mapp"); function getLocation()   {   if (navigator.geolocation)     {     navigator.geolocation.getCurrentPosition(showPosition,showError);     }   else { x.innerHTML="Geolocation is not supported by this browser."; }   } function showPosition(position)   {   lat=position.coords.latitude;   lon=position.coords.longitude;   latlon=new google.maps.LatLng(lat, lon)   display=document.getElementById('display')   displa...
Post a Comment
Read more

animated progress bar

-
Image
            ---------- Index.html ---------- <!DOCTYPE html> <html> <head> <title>Animated Progress Bar</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="percentcount" class="percent-count"> </div> <div class="progress-bar"> <div class="progress" id="progress"> </div> </div> </body> <script type="text/javascript" src="script.js"></script> </html>             ---------- style.css ---------- *{ box-sizing: border-box; } body{ margin: 0; padding: 0; background: black; } .percent-count{ width: 450px; height: 50px; margin: 100px auto; font-size: 50px; text-align: center; color: white; } .percent-bar{ width: 506px; height: 26px; background-color: #bbb; border-radius: 13px; ...
Post a Comment
Read more

Image Hover WIth style effect

-
Image
     In this tutorials i am create image hover effect to black to original effect turn . You can add this code from your website to effect from the image into your listed company and partner name and their images . Try your code and enjoy . learn something new. <!DOCTYPE html> <html> <head> <title>Image hover effect</title> <style type="text/css"> img {   -webkit-filter: grayscale(100%);   filter: grayscale(100%); } img:hover {   transition: filter .5s ease-in-out;   -webkit-filter: grayscale(0%);   filter: grayscale(0%); } </style> </head> <body> <img src="1.jpg"> </body> </html>
Post a Comment
Read more

amazing website

-
Image
Hi friends , In this post I am find 5 interesting websites in google . I am share with you from this website you should check this website . this website is very interesting and amazing . 1-      Internet Map :   http://internet-map.net/ 2-      Scale of the Universe :    http://htwins.net/scale2/               this website is work inly your browser is supported from the adobe flash. 3-      Pointer Pointer : http://www.pointerpointer.com/ 4-      Infinite Zoom : http://zoomquilt.org/ 5-      Quick Essay : http://www.essaytyper.com/
Post a Comment
Read more

trace email

-
Image
How to trace an Email : Tracing an Email means locating the Original Sender and Getting to know the IP address of the network from which the Email was actually generated.  To get the information about the sender of the Email we first must know the structure of the Email. As we all know the travelling of the Email. Each message has exactly one header, which is structured into fields. Each field has a name and a value. Header of the Email contains all the valuable information about the path and the original sender of the Email. For tracing an email Address You need to go to your email account and log into the email which you want to trace after that you have to find the header file of the email which is received by you. Gmail Now see from bottom to top and the first IP address you find is the IP address of the sender. Once you have the IP Address of the sender, go to the any ip location website and enter this ip address . I am...
Post a Comment
Read more

Border Radius in CSS3

-
Image
<!DOCTYPE html> <html> <head> <title>CSS3 Border Radius Examples</title> <style> .box { margin-bottom:10px; font-family :'Courier New', monospace; font-size :12pt; text-align :center; padding :10px; width :380px; height :75px; border :10px solid #006; } .b1 { -moz-border-radius :40px; -webkit-border-radius:40px; border-radius :40px; } .b2 { -moz-border-radius :40px 40px 20px 20px; -webkit-border-radius:40px 40px 20px 20px; border-radius :40px 40px 20px 20px; } .b3 { -moz-border-radius-topleft :20px; -moz-border-radius-topright :40px; -moz-border-radius-bottomleft :60px; -moz-border-radius-bottomright :80px; -webkit-border-top-left-radius :20px; -webkit-border-top-right-radius :40px; -webkit-border-bottom-left-radius :60px; -webkit-border-bottom-right-radius:80px; border-top-left-radius :20px...
Post a Comment
Read more

Animated Search Box in CSS3

-
Image
--------- Index.html ---------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="style.css" type="text/css" /> <title>Untitled Document</title> </head> <body> <div class="searchBox">     <div class="searchForm">         <input id="searchField" type="text" placeholder="Search Here" />          <div class="close">             <span class="front"></span>             <span class="back"></span>         </div>      </div> </div> </body> </html> ------- style.css -------- body{     margin: 0;     padding: 0;     background:#111; } .searchBox{     position: absolute;     top: 50...
Post a Comment
Read more