Create to Responds Drop Down menu in CSS and HTML

By Unknown   4:20 AM   No comments:

Create to Responds Drop Down menu in CSS and HTML

Hello Friends!!

In this source codes we were going to teach you how to make responsive drop down menu in HTML using CSS. Here I am create two page first is index.html and second is style If you want to create drop down menu copy this code and save on your computer or download source code click on download link given below.

Style.css

<html>
 <head>
  <title>
  Html Cursor Code
  </title>html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;

}

.menu
{
    margin: 0 auto; width: auto;float:left;
    position:relative;
    z-index:4;
    height: 36px;
    background: #F5F5F5;
    border: none;
    font-family: Arial, Helvetica, sans-serif;
    list-style: none;
    padding: 0;
}

.menu div {
    box-sizing:content-box;
}

.menu li
{
    padding: 0;
    float: left;
    height: 34px;
    position: relative;
    z-index:5;
    border-left:1px solid;
    border-right:1px solid;
    border-top:2px solid;
    border-color:transparent;
 
}

.menu li:hover, 
.menu li.onhover
{
    border-color:#DDD;
    border-top:2px solid #B00;
    border-bottom:1px solid #DDD;
}
.menu a
{
    padding: 0 30px;
    line-height: 34px;
    font-size: 12px;
    font-weight: normal;
    display: inline-block;
    outline: 0;
    text-decoration: none;
    color: #000;
    position: relative;
}


.menu li:hover a, 
.menu li.onhover a
{
    background-color: #EEE;
    color: #000;
    z-index: 9; 
}
.menu a.arrow
{
    background: url(arrow.gif) no-repeat right center;
}
 
        
    
.menu li.menuRight
{
    float: right;
    margin-right: 0px;
}
        
.menu li.separator
{
    display:none;
}
               
        
.menu .drop
{
    position: absolute;
    z-index:5;
    left: -9999px;
    border: 1px solid #DDD;
    border-bottom:2px solid #B00;
    background: #FFF url(bg_grad.gif) repeat-x 0 0;
    text-align: left;
    padding: 20px;  
    top:31px;
}

.menu .drop a
{
    padding-left: 0px;
    padding-right: 0px;
    line-height: 24px;
    font-size: 12px;
    font-weight: normal;
    display: inline;
    text-align: left;
    
    position: static;
    z-index: 0;
}

.menu li:hover .drop, 
.menu li.onhover .drop
{
    left: -1px;
}
.menu li:hover .dropToLeft, 
.menu li.onhover .dropToLeft
{
    left: auto;
    right: -1px;
}
.menu li:hover .dropToLeft2, 
.menu li.onhover .dropToLeft2
{
    left: auto;
    right: -60px;
}

.menu div.drop div div
{
    padding: 6px 20px;
}

.menu div.drop div a
{
    line-height: 24px;  
    color: #048;
    background:none;
}
.menu div.drop div a:hover
{
    text-decoration:underline;
    cursor:pointer;
    color:Red;
}

.menu div.left {float:left;}

 
.decor2_1 
{
}


.decor2_2 
{
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;

    -moz-box-shadow: 0 0 14px #AAA;
    -webkit-box-shadow: 0 0 14px #AAA;
    box-shadow: 0 0 14px #AAA;  
}

Index.html

<html>
 <head>
  <title>
  Html Cursor Code
  </title><!DOCTYPE>
<html>
	<head>
		<title>
		www.nehrugroup.in
		</title>
		<link rel="stylesheet" href="style.css" media="all" />
	</head>   
	
<body>
	<h2>
Drop Down Menu</h2>
<br /><br />

	<ul class="menu">
<li><a href="#">Home</a></li>
<li class="separator"></li>
<li><a href="#" class="arrow">Our Services</a>
			<div class="drop" style="width: 640px;">
				<div class='left'>
					<b>Web Design</b>
					<div>
						<a href="#">Html</a><br />
						<a href="#">CSS</a><br />
						<a href="#">JavaScript</a><br />
						<a href="#">PHP & MySQL</a><br />
						<a href="#">Projects</a>
					</div>
</div>
<div class='left'>
					<b>Software</b>
					<div>
						<a href="#">C & C++</a><br />
						<a href="#">Java</a><br />
						<a href="#">VB </a><br />
						<a href="#">More Tool..</a>
					</div>
</div>
<div class='left'>
					<b>SEO Friendly</b>
					<div>
						<a href="#">Search engine friendly</a><br />
						<a href="#">css menu</a><br />
						<a href="#">Most popular SEO Tool</a><br />
						<a href="#">Best web designs</a><br />
						<a href="#">E-Commerce sites</a><br />
						<a href="#">HTML Templates with SEO</a><br />
						<a href="#">Design Templates</a><br />
						<a href="#">Clean layout</a><br />
						<a href="#">Modern and Stylish Templates</a>
					</div>
</div>
<div class='left' style="text-align:right; width:200px;">
					<img src="image/2.jpg" style="width:128px; height:128px;" /><br />
					Search Engine friendly
				</div>
<div style='clear: both;'>
</div>
</div>
</li>
<li class="separator"></li>
<li><a href="#">Programming</a></li>
<li class="separator"></li>
<li><a href="#">Image Gallary</a></li>
<li class="separator"></li>
<li><a href="#" class="arrow">Get in Touch</a>
			<div class="drop decor2_2 dropToLeft2" style="width: 500px;">
				<div class='left'>
					<b>SHOPPING TOOLS</b>
					<div>
						<a href="#">Build your script</a><br />
						<a href="#">Review current offers</a><br />
						<a href="#">See All ...</a>
					</div>
<b>RSS FEED</b>
					<div>
						<a href="#">Find a location</a><br />
						<a href="#">Request a test drive</a><br />
						<a href="#">See All ...</a>
					</div>
</div>
<div class='left'>
					<b>Creative</b>
					<div>
						<a href="#">Build your script</a><br />
						<a href="#">Review current offers</a><br />
						<a href="#">See All ...</a>
					</div>
</div>
<div class='left' style="text-align:right; width:160px;">
					<img src="image/1.png" style="width:128px; height:128px;" /><br />
					Contact Us
				</div>
</div>
</li>
<li class="separator"></li>
<li><a href="#" class="arrow">Web Designing</a>
			<div class="drop decor2_2 dropToLeft" style="width: 460px;">
				<img src="image/3.jpg" style="float:left; width:98px;
					height:180px;margin:10px 80px 10px 40px;" />
				<div class='left'>
					<b>Front End</b>
					<div>
						<a href="#">HTML</a><br />
						<a href="#">CSS</a><br />
						<a href="#">Javascript</a>
                   
					</div>
<b>Back End</b>
					<div>
						<a href="#">PHP & MySQL</a><br />
						<a href="#">ASP</a><br />
						<a href="#">See All ...</a>
					</div>
</div>
</div>
</li>
</ul>
</body>
</html>

Read More

Form Validation in JavaScript

By Unknown   5:23 AM   No comments:

Form Validation in JavaScript

Here we are going to teach you how to create form validation in HTML and CSS using JavaScript. I give source code given below step by step. You can create page like, 1. index.html 2. style.css 3. form validate.js and copy the source code given below or you can also download complete source code by clicking Download Source Code Link..

Index.html

<html>
 <head>
  <title>
  Html Cursor Code
  </title><html>
<head>
<title>JavaScript Form Validation </title>
<link rel=”stylesheet” href=”css/style.css”>
<script type=”text/javascript” src=”js/form_validate.js” ></script>
</head>
<body>
<br /><br />
  <h2 align=”center”>
Form Validation in JavaScript </h2>
<center>
<br /><br />
<form id=”theForm” method=”get” action=”submitData” >
<table id=”font”>
<tr>
<td width=”168″>Name<span class=”red”>*</span></td>
 <td width=”288″><input type=”text” id=”name” name=”name” class=”input1″/></td>
<td width=”183″ class=”red” id=”nameError”> </td>
</tr>
<tr>
<td>Address</td>
<td><input type=”email” id=”address” class=”input1″ /></td>
<td id=”addressError” class=”red”> </td>
</tr>
<tr>
<td>Pin Code<span class=”red”>*</span></td>
<td><input type=”text” id=”zipcode” name=”zipcode” class=”input1″/></td>
<td id=”zipcodeError” class=”red”> </td>
</tr>
<tr>
<td>Country<span class=”red”>*</span></td>
<td><select id=”country” name=”country” class=”input1″>
<option value=”” selected>Please select…</option>
<option value=”India”>India</option>
<option value=”Pakistan”>Pakistan</option>
<option value=”Afganistan”>Afganistan</option>
<option value=”Australia”>Australia</option>
</select><br /></td>
<td id=”countryError” class=”red”> </td>
</tr>
<tr>
<td>Gender<span class=”red”>*</span></td>
 <td><p>
<input type=”radio” name=”gender” value=”m” />
   Male
   <input type=”radio” name=”gender” value=”f” />
       Female</p>
</td>
<td id=”genderError” class=”red”> </td>
</tr>
<tr>
<td>Preferences<span class=”red”>*</span></td>
 <td><p>
<input type=”checkbox” name=”color” value=”r” />
   Red
<input type=”checkbox” name=”color” value=”g” />
       Green
       <input type=”checkbox” name=”color” value=”b” />
       Blue</p>
</td>
<td id=”colorError” class=”red”> </td>
</tr>
<tr>
<td>Phone<span class=”red”>*</span></td>
<td><input type=”text” id=”phone” name=”phone” class=”input1″/></td>
<td id=”phoneError” class=”red”> </td></tr>
<tr>
<td>Email<span class=”red”>*</span></td>
<td><input type=”text” id=”email” name=”email” class=”input1″/></td>
<td id=”emailError” class=”red”> </td>
</tr>
<tr>
<td>password <span class=”red”>*</span></td>
<td><input type=”password” id=”password” name=”password” class=”input1″/></td>
<td id=”passwordError” class=”red”> </td>
</tr>
<tr>
<td>Verify password<span class=”red”>*</span></td>
<td><input type=”password” id=”pwVerified” name=”pwVerified” class=”input1″/></td>
<td id=”pwVerifiedError” class=”red”> </td>
</tr>
<tr>
<td><input name=”submit” type=”submit” class=”input1″ id=”submit” value=”Submit”/></td>
<td><p>
<input name=”reset” type=”reset” class=”input1″ id=”reset” value=”Reset”/>
       </p>
</td>
<td> </td></tr>
</table>
</form>
</center>
</body>
</html>

Style.css

<html>
 <head>
  <title>html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
background-color:skyblue;
}
.red {
color: red;
}

.input1{
width:200px;
height:30px;
padding:0px;
border:1px solid red;
border-radius:5px;
}
input.error{

width:200px;
height:30px;
padding:0px;
border:2px solid red;
border-radius:5px;
}

table {
border:0;

}

td {
margin: 0;
padding: 3px 10px 3px 3px;
}
#font{
font-size:18;
color:black

}
  Html Cursor Code
  </title>

form validate.js

<html>
 <head>
  <title>
  Html Cursor Code
  </title>window.onload = init;
function init() {
document.getElementById(“theForm”).onsubmit = validateForm;
document.getElementById(“reset”).onclick = clearDisplay;
document.getElementById(“name”).focus();
}
function validateForm() {
return (isNotEmpty(“name”, “Please enter your name!”)
&& isNumeric(“zipcode”, “Please enter a 5-digit zip code!”)
&& isLengthMinMax(“zipcode”, “Please enter a 5-digit zip code!”, 5, 5)
&& isSelected(“country”, “Please make a selection!”)
&& isChecked(“gender”, “Please check a gender!”)
&& isChecked(“color”, “Please check a color!”)
&& isNumeric(“phone”, “Please enter a valid phone number!”)
&& isValidEmail(“email”, “Enter a valid email!”)
&& isLengthMinMax(“password”, “Enter a valid password!”, 6, 8)
&& verifyPassword(“password”, “pwVerified”, “Different from the password!”));
}

function isNotEmpty(inputId, errorMsg) {
var inputElement = document.getElementById(inputId);
var errorElement = document.getElementById(inputId + “Error”);
var inputValue = inputElement.value.trim();
var isValid = (inputValue.length !== 0);
showMessage(isValid, inputElement, errorMsg, errorElement);
return isValid;
}

function showMessage(isValid, inputElement, errorMsg, errorElement) {
if (!isValid) {
if (errorElement !== null) {
errorElement.innerHTML = errorMsg;
} else {
alert(errorMsg);
}
if (inputElement !== null) {
inputElement.className = “error”;
inputElement.focus();
}
} else {
if (errorElement !== null) {
errorElement.innerHTML = “”;
}
if (inputElement !== null) {
inputElement.className = “”;
}
}
}

function isNumeric(inputId, errorMsg) {
var inputElement = document.getElementById(inputId);
var errorElement = document.getElementById(inputId + “Error”);
var inputValue = inputElement.value.trim();
var isValid = (inputValue.search(/^[0-9]+$/) !== -1);
showMessage(isValid, inputElement, errorMsg, errorElement);
return isValid;
}

function isAlphabetic(inputId, errorMsg) {
var inputElement = document.getElementById(inputId);
var errorElement = document.getElementById(inputId + “Error”);
var inputValue = inputElement.value.trim();
var isValid = inputValue.match(/^[a-zA-Z]+$/);
showMessage(isValid, inputElement, errorMsg, errorElement);
return isValid;
}
function isAlphanumeric(inputId, errorMsg) {
var inputElement = document.getElementById(inputId);
var errorElement = document.getElementById(inputId + “Error”);
var inputValue = inputElement.value.trim();
var isValid = inputValue.match(/^[0-9a-zA-Z]+$/);
showMessage(isValid, inputElement, errorMsg, errorElement);
return isValid;
}
function isLengthMinMax(inputId, errorMsg, minLength, maxLength) {
var inputElement = document.getElementById(inputId);
var errorElement = document.getElementById(inputId + “Error”);
var inputValue = inputElement.value.trim();
var isValid = (inputValue.length >= minLength) && (inputValue.length <= maxLength);
showMessage(isValid, inputElement, errorMsg, errorElement);
return isValid;
}
function isValidEmail(inputId, errorMsg) {
var inputElement = document.getElementById(inputId);
var errorElement = document.getElementById(inputId + “Error”);
var inputValue = inputElement.value;
var atPos = inputValue.indexOf(“@”);
var dotPos = inputValue.lastIndexOf(“.”);
var isValid = (atPos > 0) && (dotPos > atPos + 1) && (inputValue.length > dotPos + 2);
showMessage(isValid, inputElement, errorMsg, errorElement);
return isValid;
}

function isSelected(inputId, errorMsg) {
var inputElement = document.getElementById(inputId);
var errorElement = document.getElementById(inputId + “Error”);
var inputValue = inputElement.value;
var isValid = inputValue !== “”;
showMessage(isValid, inputElement, errorMsg, errorElement);
return isValid;
}
function isChecked(inputName, errorMsg) {
var inputElements = document.getElementsByName(inputName);
var errorElement = document.getElementById(inputName + “Error”);
var isChecked = false;
for (var i = 0; i < inputElements.length; i++) {
if (inputElements[i].checked) {
isChecked = true;
break;
}
}
showMessage(isChecked, null, errorMsg, errorElement);
return isChecked;
}
function verifyPassword(pwId, verifiedPwId, errorMsg) {
var pwElement = document.getElementById(pwId);
var verifiedPwElement = document.getElementById(verifiedPwId);
var errorElement = document.getElementById(verifiedPwId + “Error”);
var isTheSame = (pwElement.value === verifiedPwElement.value);
showMessage(isTheSame, verifiedPwElement, errorMsg, errorElement);
return isTheSame;
}

function clearDisplay() {
var elms = document.getElementsByTagName(“*”);
for (var i = 0; i < elms.length; i++) {
if ((elms[i].id).match(/Error$/)) {
elms[i].innerHTML = “”;
}
if (elms[i].className === “error”) {
elms[i].className = “”;
}
}
document.getElementById(“name”).focus();
}

Preview

Read More

CALENDER IN JAVASCRIPT

By Unknown   4:27 AM   No comments:

CALENDER IN JAVASCRIPT

Hello Friends!! Here I have upload a source code of calendar in JavaScript. This calendar id using a text, enables you to look up the calendar for any month of any year, use the drop down menu to select the desired month. Calendars’ can be seen in most web pages today specially in blogs and tickets, Calendars in Hotel, Cinema or airlines websites requires users interaction to reserve rooms and tickets. In this post we are showing you some of the calendar scripts that we have come to know, Date picker which is a calendar allows user to navigate through days, week or year to pick a date they desire, If you want to Download source code of calendar in JavaScript click on Download.

Preview

Read More

Flip image with Description in HTML using CSS

By Unknown   12:05 PM   No comments:

Flip image with Description in HTML using CSS

Here I have upload a source code of Flop image with description in HTML using CSS. In this source code we are showing you how to flop image and show its description in 3D.

Step 1

HTML Source Code

Index.html

<html>
 <head>
  <title>
  Html Cursor Code
  </title>
<!DOCTYPE html>
<html>
<head>
<title>www.nehrugroup.in</title>
<link rel=”stylesheet” href=”css/style.css” type=”stylesheet” media=”all” />
    
</head>
<body>
<table width=”690″ height=”637″ border=”0″ align=”right”>
<tr>
        <td width=”645″ colspan=”2″ valign=”top” bgcolor=”#0099CC”><p>
<label for=”idRadioTextname-ANY-lorem”><span class=”style1″>Lorem ipsum </span></label>
        </p>
<p>
<strong>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere</strong></p>
<p>
 </p>
<p>
<label for=”idRadioTextname-ANY-lorem”><span class=”style1″>Lorem ipsum </span></label>
</p>
<p>
<strong>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias </strong></p>
</td>
  </tr>
</table>
<div id=”container”>
    <div id=”wrapper” class=”shadow”>
    <div class=”front face”>
        <img src=”image/1.jpg” />
        </div>
<div class=”back face center”>
        <p>
Lorem ipsum dolor sit amet</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam 
 
</p>
</div>
</div>
</div>
<div id=”container”>
    <div id=”wrapper” class=”shadow”>
    <div class=”front face”>
        <img src=”image/2.jpg” />
        </div>
<div class=”back face center”>
        <p>
Lorem ipsum dolor sit amet</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam </p>
</div>
</div>
</div>
<div id=”container”>
    <div id=”wrapper” class=”shadow”>
    <div class=”front face”>
        <img src=”image/3.jpg” />
        </div>
<div class=”back face center”>
        <p>
Lorem ipsum dolor sit amet</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.</p>
</div>
</div>
</div>

Step 2

CSS style Source Code

Style.css

<html>
 <head>
  <title>
  Html Cursor Code
  </title>
#container{
position: relative;
  margin: 10px;
  width: 400px;
  height: 200px;
  z-index: 1;
perspective: 1000;
}
#wrapper{
width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
#container:hover #wrapper{
transform:rotateY(180deg);
box-shadow:-5px 5px 5px #aaa;
}
.face{
position:absolute;
width:100%;
height:100%;
backface-visibility:hidden;
}
.face.back{
display:block;
transform:rotateY(180deg);
box-sizing:border-box;
padding:10px;
color:#fff;
text-align:center;
background-color:#aaa;
}
.shadow{
box-shadow:5px 5px 5px #aaa;
}
table{
box-shadow:5px 5px 5px red;
border-radius:15px;
}
.style1 {
font-size: 24px;
font-weight: bold;
color: #FFFFFF;
box-shadow:5px 5px 5px red;
border-radius:15px;
}

Read More

MULTIPLE EFFECT IN CSS

By Unknown   10:05 PM   1 comment:

MULTIPLE EFFECT IN CSS

Here, we are going to show you how to create Multiple Shadow Effect in CSS. The main key here is the use of Box Shadow property to create multiple shadow and pseudo element are use. You are use anywhere in your project. So download the source code by clicking Download Source Code Button.

Download Source Code

Read More