CSS3 Visiting Card 3D Transform

My friend Asif made a nice design on visiting card, so I decided to convert that into a 3D flipping Visiting Card



To rotate a div with 3D transform :-

• transform-style: preserve-3d;


• perspective: 800px;


• transform: rotateY(180deg);


• backface-visibility: hidden;

After setting the above CSS a div will transform.

---

Final Product

---

So lets start

---

[html]
<div id="card">
<div class="front">
<div class="strips">
<p class="strip red"></p>
<p class="strip orange"></p>
<p class="strip green"></p>
<p class="strip blue"></p>
<p class="strip lOrange"></p>
</div>
<div class="businessName">
Webs Tutorial
</div>
</div>
<div class="back">
<div class="strips">
<p class="strip red"><span>www.webstutorial.com</span></p>
<p class="strip orange"><span>Mumbai, India</span></p>
<p class="strip green"></p>
<p class="strip blue"><span>PHP, HTML5, CSS3</span></p>
<p class="strip lOrange"><span>niraj@webstutorial.com</span></p>
</div>
<div class="myName">
<p>Niraj Chauhan</p>
Developer
</div>
</div>
</div>
[/html]

---

Above we made a parent div and inside that two divs, one will be the front side and another will be the backside. When we :hover on the front facing div, it rotates in Y axis. As we have set the transform style to preserve-3d it will maintain its view and the transform will be displayed in 3D.

---

[css]
@font-face {
font-family: roboto;
src: url('../Roboto-Regular.ttf');
}

* {
font-family: roboto !important;
}

.container {
position: relative;
}

#card {
position: absolute;
z-index: 11;
-webkit-perspective: 800px;

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
left: 30%;
}

#card .front,#card .back {
background: #000;
width: 480px;
height: 205px;
display: block;
position: absolute;
color: #fff;
border-radius: 8px;

-webkit-transition: -webkit-transform 1s ease-in-out;
-moz-transition: -moz-transform 1s ease-in-out;
-o-transition: -o-transform 1s ease-in-out;
-ms-transition: -ms-transform 1s ease-in-out;
transition: transform 1s ease-in-out;
}

#card .front {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
z-index: 13;
}

#card:hover .front {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}

#card .back {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
z-index: 12;
background: #000;
}

#card:hover .back {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
z-index: 14;
}

/* Front Strips */
.strips {
clear: both;
margin: 0 auto;
position: relative;
width: 125px;
}

.strip {
float: left;
height: 140px;
margin-right: 12px;
position: relative;
width: 12px;
font-family: roboto;
}

.red {
background: #b70000;
color: #b70000;
border: 1px solid #890000;
border-top: 0px;
}

.orange {
background: #f25d07;
color: #f25d07;
border: 1px solid #b64605;
border-top: 0px;
}

.green {
background: #a69e33;
color: #a69e33;
border: 1px solid #837726;
border-top: 0px;
}

.blue {
background: #0092b2;
color: #0092b2;
border: 1px solid #006e86;
border-top: 0px;
}

.lOrange {
background: #ee913f;
color: #ee913f;
margin: 0 !important;
border: 1px solid #b36d2f;
border-top: 0px;
}

.businessName {
clear: both;
font-family: roboto;
font-size: 22px;
padding: 5px 0 0;
text-align: center;
}

/* Back strips */
.back .red {
height: 70px;
}

.back .orange {
height: 100px;
}

.back .green {
height: 140px;
}

.back .blue {
height: 100px;
}

.back .lOrange {
height: 70px;
}

.strip span {
position: absolute;
font-size: 15px;
}

.red span {
left: -162px;
top: 50px;
}

.orange span {
left: -102px;
top: 80px;
width: 100px;
}

.green span {
left: 0;
}

.blue span {
left: 20px;
top: 80px;
width: 140px;
}

.lOrange span {
left: 18px;
top: 50px;
}

.myName {
clear: both;
color: #999999;
font-family: roboto;
font-size: 20px;
padding: 0;
text-align: center;
}

.myName p {
color: #a69e33;
}

#designedBy {
border-radius: 5px 0 0 0;
bottom: 0;
color: #FFFFFF;
min-height: 10px !important;
padding: 10px;
position: fixed;
right: 0;
}
[/css]

---

Now in CSS we set the backface-visibility: hidden;. With this property the backside of the card will be hidden. When we hover on the front face of the card with the help of css transition we flip the card and now the backside of the card will be visible.

When we move away over mouse from the card it turns back to its original position.This way a 3D flip can be done using CSS3.

Now the latest Firefox also supports the 3D Transform. Previously it was only working on webkit browsers

AJAX Contact Form With Validation

Today I am going to share a simple tutorial on How to make a AJAX contact form with validation.

What is AJAX?
AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

The flow of the form is :




So here I am using twitter bootstrap, so files which we need are :-

• data.php - (here we will write our PHP code)


• script.js - (here we will write our ajax jquery code)


• validate.js - (jqueryvalidation plugin)


• index.php and style.css

So the fields of our form will be Name, Email, Number, City, Area, Message, Submit

Here our city and area will also be using AJAX i.e. on city change area will also be changed.

index.php

---

[html]
<?php require_once('data.php'); ?>
<div class="hero-unit">
<h2>Contact Us</h2>

<form id="contactUs" name="contactUs" onsubmit="return false;">


<table cellspacing="5" cellpadding="5">
<tr>
<td><label for="name">Name:</label></td>
<td><input type="text" value="" name="name" id="name" class="required name"/></td>
</tr>
<tr>
<td><label for="email">Email:</label></td>
<td><input type="text" value="" name="email" id="email" class="required email"/></td>
</tr>
<tr>
<td><label for="number">Contact Number:</label></td>
<td><input type="text" value="" name="number" id="number" class="required number" minlength="8"/></td>
</tr>
<tr>
<td><label for="city">City:</label></td>
<td>
<select id="city" name="city" onchange="javascript:changeArea('#city', '#area');">
<option value="Any">Any</option>
<?php echo getCities();?>
</select>
</td>
</tr>
<tr>
<td><label for="area">Area:</label></td>
<td><select id="area" name="area" disabled="disabled"></select></td>
</tr>
<tr>
<td><label for="message">Message:</label></td>
<td><textarea id="message" name="message" class="required"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="hidden" name="contactFormSubmit" value="Yes" />
<input type="submit" value="Submit" class="btn" onclick="javascript:formSubmit('#contactUs','#responseText');"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<div id="responseText"></div>
</td>
</tr>

</form>
</div>
[/html]

---

Here we just made a simple html structure of form inside a table.

To make a field mandatory, just add class="required" to input.

If you want to validate it with only email or number then add class="required email" or class="required number"

If I add a attribute minlength="8" to the number field then that field should contain at least 8 digits of number.

data.php

---

[php]
<?php
$cities = array('1'=>'Mumbai',
'2'=>'Chennai',
'3'=>'Noida',
'4'=>'Bangalore');

$areas = array( 'Airoli' => '1',
'Andheri' => '1',
'Bandra' => '1',
'Bhandup' => '1',
'Bhayandar' => '1',
'Boisar' => '1',
'Borivali' => '1',
'Chembur' => '1',
'Gopalapuram' => '2',
'Mount Road' => '2',
'Noida Expressway' => '3',
'Sector 1' => '3',
' Sector 128' => '3',
'Sector 129' => '3',
'Yamuna Expressway' => '3',
'Anekal ' => '4',
'Banashankari ' => '4',
'Banasvadi ' => '4',
'Banaswadi ' => '4',
'Begur ' => '4',
'Bellary Road ' => '4',
'Dobespet ' => '4',
'Electronics City' => '4');


if(isset($_REQUEST['cityID']) && $_REQUEST['cityID'] != 'Any'){

getAreas($_REQUEST['cityID']);

}

if(isset($_REQUEST['contactFormSubmit'])){
if(!isValidEmail($_REQUEST['email'])){
echo 'Enter a valid email ID';
}elseif(!is_mobileNumber($_REQUEST['number'])){
echo 'Enter a valid number';
}elseif($_REQUEST['name'] == '' || $_REQUEST['message'] == ''){
echo 'Enter valid name or message';
}else{
?>
<p><b>Thank you for contacting us, your given information : </b></p>
<table cellspacing="5" cellpadding="5" border="1">
<tr>
<td>Name:</td>
<td><?php echo $_REQUEST['name']?></td>
</tr>
<tr>
<td>Email:</td>
<td><?php echo $_REQUEST['email']?></td>
</tr>
<tr>
<td>Contact Number:</td>
<td><?php echo $_REQUEST['number']?></td>
</tr>
<tr>
<td>City:</td>
<td><?php echo $_REQUEST['city']?></td>
</tr>

<?php if(isset($_REQUEST['area'])) : ?>
<tr>
<td>Area:</td>
<td><?php echo $_REQUEST['area']?></td>
</tr>
<?php endif; ?>

<tr>
<td>Message:</td>
<td><?php echo $_REQUEST['message']?></td>
</tr>
</table>
<?php
}
}



function getCities(){
global $cities;
foreach($cities as $Idx => $city){

echo '<option value="'.$Idx.'">'.$city.'</option>';

}
}

function getAreas($cityID = ''){
global $areas;
foreach($areas as $area => $Idx){

if($Idx == $cityID){

echo '<option value="'.$Idx.'">'.$area.'</option>';

}

}
}

function isValidEmail($email){
return eregi("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$", $email);
}

function is_mobileNumber($mobile) {
$regex1 = '123456789';
$regex2 = '1234567890';
$regex3 = '0123456789';

if(preg_match('/^([0-9])\1*$/', $mobile)){
return false;
}elseif($mobile == $regex1){
return false;
}elseif($mobile == $regex2){
return false;
}elseif($mobile == $regex3){
return false;
}elseif(preg_match("/[^0-9]/", $mobile)){
return false;
}else{
return true;
}
}
?>
[/php]

---

PHP code is simple, I am making an array of cities and area, made 2 functions to get areas and cities and getting the parameters from URL and passing it to functions.

Now the ajax function :

script.js

---

[js]
function changeArea(cityBox, areaBox) {
jQuery(function($) {

$(areaBox).attr('disabled','disabled');

$(areaBox).addClass('loading');
$.ajax({ //Starting the AJAX
url : 'data.php', //File to be called or pass the data
data : { //Extra paramters
"cityID" : $(cityBox+' option:selected').attr('value')
},
success : function(data) { // The result from data.php file comes as data
window.setTimeout(function(){
$(areaBox).removeAttr('disabled');

$(areaBox).removeClass('loading');

$(areaBox).html('');

$(areaBox).html(data);

}, 2000);
}
});
});
}
[/js]

---

The above function is is taking two parameters, the select id of City and area. Then I am saving the value of city in a variable, and inside ajax I am passing the value of city to data.php file.

Inside data.php I wrote a function to return areas according to the city ID. Inside success function I am inserting entire result into the area select box.

Simlarly I am going to make another function which will validate the form and if no error then ajax is called and mail is sent.

script.js

---

[js]
/* Submission of form */

function formSubmit(formID, displayMssgID) {
jQuery(function($) {

var qstring = $(formID).serialize();

var val = $(formID).validate().form();
if (val) {
$(displayMssgID).html('Registering your Request ... Please Wait ...');
$.ajax( {
url : "data.php",
data : qstring,
success : function(data) {

$(displayMssgID).html('');
$(displayMssgID).html(data);
window.setTimeout(function() {

$(displayMssgID).fadeOut();

}, 6000);

}
});
}
});
}
[/js]

---

This function takes two parameters, ID of the form and result message div. First I am serializing the form, which will take all the form data and store it in a variable. Then I am validating it, if validation is true then our AJAX is called and entire form data is passed to data.php file.

This is return will give some output which I am showing it in id="responseText"

This is a simple way to make AJAX forms, there might be many other tutorials on other websites but I find this very simple. This way you can make any AJAX form. Try out the demo.



Thanks to Jacob for server validation tip.

JQuery Allow Only Numbers

For a frontend developer when it is asked to do something unique that person will think of JQuery first. Today a simple jquery code to allow only numbers to a text-box. Below code will allow following key events :

• Backspace


• Delete


• Tab


• Escape


• Enter


• Ctrl+A


• Home


• end


• left


• right

Just add a class to textbox .onlyNumbers and paste the following jquery code :

---

[js]
$(document).ready(function() {

$(".onlyNumbers").keydown(function(event) {

if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || (event.keyCode == 65 && event.ctrlKey === true) || (event.keyCode >= 35 && event.keyCode <= 39)) {
return;
}
else {

if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
event.preventDefault();
}
}
});

});
[/js]

---

You can also apply this to textarea.

Demo:

---

---