mask-click in html

MASK This property defines a mask to be used as a box’s overlay in order to clip the box to a complex shape. This is a shorthand property for the more specific mask properties . Syntax mask: mask-attachment, mask-clip, mask-image, mask-repeat, mask-composite, mask-box-image; where each value corresponds to the more specific property.   mask-clip : This

3D Cube Animation in html and css

<!DOCTYPE html> <html> <head> <title>3D cube animation</title> <style type=”text/css”> .rotating-box { width: 400px; height: 400px; margin: 10px auto; perspective: 800px; } .single-rb { width: 400px; animation: rotate 15s linear infinite; transform-style: preserve-3d; margin-top: 120px; } .single-rb img { height: 400px; width: 400px; } .single-rb div { position: absolute; width: 400px; height: 400px; } .front-side {

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’) display.style.height=’250px’; display.style.width=’525px’; var myOptions={ center:latlon,zoom:14, mapTypeId:google.maps.MapTypeId.ROADMAP, mapTypeControl:false, navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}}; var map=new google.maps.Map(document.getElementById(“display”),myOptions); var marker=new

Create Bubble Type Box in css and html

<!DOCTYPE html> <html> <head> <style type=’text/css’> /* Center content in the middle of the screen */ html, body, div { height: 100%; width: 100%; margin: 0px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; -webkit-box-align: center; } /* Make a box that fills 50% of screen */ .box { background-color: yellow; width: 50%; height: 50%; border-radius: 25px;

Create pyramid in css and html

<!DOCTYPE html> <html> <head> <style type=’text/css’> .shape { margin: auto; } #top { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 60px solid red; } #top:hover { border-bottom: 60px solid yellow; } #center { border-bottom: 75px solid blue; border-left: 60px solid transparent; border-right: 60px solid transparent; height: 0; width: 100px;

Create transparent navbar in html and css

<!DOCTYPE html> <html> <head> <title> Simple Page </title> <link rel=”stylesheet” type=”text/css” href=”style.css”> </head> <body> <ul> <li> <a href=”#”> Menu 1 </a> <ul> <li> <a href=”#”> Menu 1.1 </a> </li> <li> <a href=”#”> Menu 1.2 </a> </li> <li> <a href=”#”> Menu 1.3 </a> </li> </ul> </li> <li> <a href=”#”> Menu 2 </a> <ul> <li> <a href=”#”>