Beautiful HTML5, CSS3 and PHP supported Web Form

I wanted to share my HTML5, CSS3 fancy web form with you. It is about “Little Big Planet” game. This web form collects information in different ways (there are text fields,  boxes to tick, values to choose from, slider, etc.). Once you grasp how it is built you can alter it and make web form that suits your needs. Search for the HTML5 spec to find out about the rest of the amazing attributes that you can include in your form.

DEMO: http://yokowebdesign.co.uk/demo/html5_web_form_tutorial/index_html5.html

DOWNLOAD the files: http://yokowebdesign.co.uk/demo/html5_web_form_tutorial.rar

———————————————————————————————

FAQ:  HTML5 form have plenty of new attributes and elements. Don’t panic – they are easy to learn and implement. There are so many advantages of implementing HTML5 web forms so I must mention some. You don’t have to rely on JavaScript to validate the web form (because of the new features of HTML5 the web browser is already prepared to deal with some of the validation form for you). It is backward compatible ( in older web browsers  these features degrade gracefully). 

———————————————————————————————

EXPLANATION (Syntax and Description)

HTML – the structure of the web form

The code for this tutorial is very chunky so to see it more clearly download the files and open first “index_html5.html” file in the text editor.  

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
    <meta name="keywords" content="HTML5 CSS3, little big planet, yoko web design, joanna kowalska yoko">
    <meta name="description" content="little big planet driven by html5 and css3, yoko web design, Joanna Kowalska" > 
    <link rel="stylesheet" type="text/css" href="style_littlebigplanet.css" title="default" > 
    <title>Web Form driven by HTML5 & CSS3 | YOKO WEB DESIGN</title>
</head> 
<body>
<div id="wrapper">

 <!-- ============== FORM HTML ================ -->
 <section id="form">
    <div id="form_wrapper">
       <h3>Enter your details into the fields.</h3>
       <p id="p_form">* indicates required fields</p>

       <form class="little_form" action="form_sackboy.php" method="post">
          <div class="field">
             <label for="name"> Name *</label>
             <input type="text" id="name" class="inputfield textfield" name="name" placeholder="First Name *" required="" value="" size="35"> <br> 
          </div>

The HTML elements above have an attribute “name” assigned to them. The PHP uses this atrribute to extract the data from each of the form elements.

HTML5 Attributes:

Placeholder text sets text in an input field and is displayed there as long as the field is empty ( is used for the hints withing form fields). When the user clicks the input field and starts typing the placeholder text disappears.

Required attribute specifies that an input field must be filled out before submitting the form.

          <div class="field">
             <label for="surname">Surname *</label>
             <input type="text" id="surname" class="inputfield textfield" name="surname" placeholder="Surname *" required="" value="" size="35"> <br>
          </div>
         <div class="field"> 
            <label for="fav_sackperson">Sack Person</label>
            <input type="text" id="fav_sackperson" class="inputfield textfield" name="sackperson" placeholder="Your Favourite Sack Puppet" value="" size="35"> <br> 
         </div>

         <div class="field"> 
            <label for="game_score">Score LittleBigPlanet</label>
            <input type="range" id="game_score" class="inputfield textfield" name="points" placeholder="betweeen 0 and 10" value="" min="0" max="10" size="35"> <br> 
         </div>

The range type is used for input fields that should contain a value from a range of numbers. You can also set restrictions on what numbers are accepted. 

         <div class="field_high"> 
            <label class="checkboxes" for="fav_world">Your Favourite Themed World</label> <br> 
            <input type="checkbox" name="themed_world" value="Avalonia" >Avalonia<br>
            <input type="checkbox" name="themed_world" value="Da Vinci's Hideout">Da Vinci's Hideout<br>
            <input type="checkbox" name="themed_world" value="Factory of a Better Tomorrow">The Factory of a Better Tomorrow <br>
            <input type="checkbox" name="themed_world" value="Victoria's Laboratory">Victoria's Laboratory<br>
            <input type="checkbox" name="themed_world" value="The Temples">The Temples<br>
            <input type="checkbox" name="themed_world" value="Eve's Asylum">Eve's Asylum<br>
            <input type="checkbox" name="themed_world" value="Swinging Safari">Swinging Safari<br>
            <input type="checkbox" name="themed_world" value="The Wedding">The Wedding<br>
            <input type="checkbox" name="themed_world" value="the Islands">The Islands<br>
         </div>

While tabbing the form checkboxes  the “space” keyboard key selects the options chosen by the user.

         <div class="field2"> 
            <label for="age">Age</label>
            <select id="age" name="age" class="font">
               <option name="" value="">-</option>
               <option name="age" value="15-20">15-20</option>
               <option name="age" value ="20-25">20-25</option>
               <option name="age" value ="25-30">25-30</option>
               <option name="age" value ="30-35">30-35</option>
               <option name="age" value ="35-40">35-40</option>
            </select> <br>
         </div>

Different option when focused should be operated with the keyboard arrows.

         <div class="field"> 
            <label for="url">Your Website</label>
            <input type="url" class="inputfield textfield" id="url" name="url" placeholder="http://example.com" value="" size="35"> <br> 
         </div> 

         <div class="field"> 
            <label for="email">E-mail</label>
            <input type="email" class="inputfield textfield" id="email" name="email" placeholder="example@domain.com"value="" size="35"> <br>
         </div>
         <div class="field area">
            <label for="story">Tell Your Little Big Adventure *</label>
            <textarea type="text" rows="7" cols="35" class="inputfield textarea1" id="story" name="story" placeholder="Tell Your Sack Person's Fabulous Story*" required="" value="" maxlength="2000"></textarea> <br>
         </div> 

         <div class="field3">
            <label for="no_spam">spammers, you shall not pass !</label>
            <input name="human" class="inputfield textfield" required="" placeholder="What is 2 + 2?">
         </div>
         <div id="button_area"> 
            <input class="submitbutton" type="submit" value="Submit" id="submit" name="submit"> 
            <input class="resetbutton" type="reset" value="Reset" id="reset" name="reset" >
         </div>
     </form>
   </div>
 </section>
<!-- ============= form ends ================ -->
 <footer>
     <p>
           webmaster: Joanna Kowalska <a href="http://www.yokowebdesign.co.uk/" target="_blank" >yokowebdesign.co.uk </a>&nbsp; 2011 &nbsp; All Rights Reserved.
     </p> 
 </footer>
</div><!-- wrapper div -->
</body>
</html>

PHP

The code of “form_sackboy.php” document:

<?php
 $name = $_POST["name"];
 $surname = $_POST["surname"];
 $sackperson = $_POST["sackperson"];
 $points = $_POST["points"];
 $themed_world = $_POST["themed_world"];
 $age = $_POST["age"];
 $url = $_POST["url"];
 $email = $_POST["email"];
 $story = $_POST["story"];
 $human = $_POST["human"];

 $to = "example-email@gmail.com"; // put here your e-mail address
 $subject = "LittleBigPlanet filled in FORM- containes an adventure story :D ";
 $msg = $name . "\n" .
 $surname . "\n" .
 $sackperson . "\n" .
 $points . "\n" .
 $themed_world . "\n" . 
 $age . "\n" . 
 $url . "\n" .
 $email . "\n" .
 $story . "\n" ;
 //mail($to, $subject, $msg, "From: " . $email);

 if ($_POST["submit"] && $human == "4")
 {
 if (mail ($to, $subject, $msg, "From: " . $email))
 {
 //echo "<p> Form sent successfully!</p>";
 // echo below prints the message for the user, in this case the data from the form
 echo('The form you filled in was sent successfully.<br />');

 echo('<p class="blue_text">First Name:</p> <p class="magenta_text">' . $name . '</p> <br />');
 echo('<p class="blue_text">Last Name: </p><p class="magenta_text">' . $surname . '</p><br />');
 echo('<p class="blue_text">Sack Pupper Character: </p><p class="magenta_text">' . $sackperson . '</p><br />');
 echo('<p class="blue_text">Your Score for LBP: </p><p class="magenta_text">' . $points . '</p><br />');
 echo('<p class="blue_text">Your Favourite World/ Level: </p><p class="magenta_text">' . $themed_world . '</p><br />');
 echo('<p class="blue_text">Age: </p><p class="magenta_text">' . $age . '</p><br />');
 echo('<p class="blue_text">Your Website: <p class="magenta_text">'. $url . '</p><br />');
 echo('<p class="blue_text">E-mail: <p class="magenta_text">'. $email . '</p><br />');
 echo('<p class="blue_text">Your Sack Puppet Story: </p><p class="magenta_text">' . $story .'</p><br />' );
 }
 else
 {
 echo "<p>Ah! Try again, please?</p>";
 }
 }
 else if ($_POST["submit"] && $human != "4")
 {
 echo"<p>You answered the anti-spam question incorrectly!<br>
 Click on the link to return to the form <a href='http://yokowebdesign.co.uk/portfolio/index_html5.html'>Little Big Planet FORM</a></p>";
 }

 ?>

 ———————————————————

CSS – web form

section#form
{
 /*border: 1px solid aqua;*/
 float: left;
 margin: 50px 0 50px 100px; 
}
div#form_wrapper
{
 /*border: 1px solid aqua;*/
 padding: 5px 0 80px 10px; /* altering the bottom padding influenced the background image - it made it reach beyond form buttons. */
 width: 460px;
 color: #fff;
 /* background: #09C; nice light blue*/ 
 background-image: url('images/texture2.png');
 background-repeat:no-repeat; 
 background-position: top left; 
 height: 915px;
 font-family: Verdana, sans-serif;
 -moz-border-radius: 18px;
 -webkit-border-radius: 18px;
 border-radius: 18px; 
}
div#form_wrapper h3
{
 /*border: 1px solid aqua;*/
 margin: 15px 0 10px 0;
 font-size: 150%; 
 color: #09C;
 text-align: center;
 font-family: 'Gtown' ; 
}
label
{
 /*border: 1px solid aqua;*/
 top:10px;
 position:relative;
 color: #fff;
 font-family: 'Jasmine' ;/* lunch CornFed */ 
 font-size: 100%;
}
p#p_form
{
 /*border: 1px solid aqua;*/
 float: left;
 width: 450px;
 margin: -15px 0 10px 0;
 text-align: center;
 color: #09C;
}
label.checkboxes
{
 /*border: 1px solid pink;*/
 top:10px;
 float: left;
 margin: 0 0 10px 0;
 width: 450px;
 position:relative;
 color: #fff;
}
form.little_form textarea, form.little_form input{outline:none;}
a{outline: none ;}
a:focus{border: 2px solid #09C;}
div.field
{
 /*border: 1px solid aqua;*/
 float: left;
 margin: 0 0 0 0;
 padding: 5px 15px 0 10px;
 width: 430px;
 height: 40px; 
}
/*.field input:required
{
 border: 1px solid yellow; 
}*/
div.field3
{
 /*border: 1px solid aqua;*/
 float: left;
 margin: 20px 0 0 0;
 padding: 5px 15px 0 10px;
 width: 430px;
 height: 40px; 
}
.field2
{
 /*border: 1px solid aqua;*/
 padding: 20px 15px 0 10px;
 height: 50px; 
}
.field2 select.font /* form checkboxes and radio and option do not have borders, use outline instead to style these elements */
{
 color: #aaaaaa;
}
.field2 select.font:focus
{
 outline: 2px solid #09C; 
 /*color: #e7059f;*/
}
.field_high :focus
{
 outline: 2px solid #fff;
}
.area
{
 /*border: 5px solid pink;*/
 padding: 10px 15px 0 10px;
 min-height: 195px;
}
.inputfield
{
 color: #e7059f;
 padding:0 10px 0 10px;
 float:right;
 font: 75% Verdana;
 border:2px #74c6ff; /* if added "inset" instead of "solid" then
 we would have 3D border as "inset"specifies 3D border. 
 The effect depends on the border-colour value. */
 -moz-border-radius: 5px; 
 -webkit-border-radius: 5px; 
 border-radius: 5px; 
}
.textfield
{
 height:25px;
 padding-top:5px;
}
.textarea1
{
 padding-top: 10px;
 padding-bottom:10px;
 margin: 20px 0 0 0;
 height: 130px; /* the hight of the input white textarea */
 max-height:200px;
 max-width:250px;
}
.inputfield:focus/* the form field glows when focused*/
{
 -webkit-box-shadow: 0px 0px 35px #fff;
 /* border:2px #fff solid; line deleted so the submit button does not jump/ pop */
}
/* keyframes to "pulsate" animation */
@-webkit-keyframes pulsate 
{
0% { -webkit-box-shadow: 0px 0px 0px white;border:2px white inset}
25% { -webkit-box-shadow: 0px 0px 35px white;border:2px white inset}
50% { -webkit-box-shadow: 0px 0px 0px white; border:2px white inset}
75% { -webkit-box-shadow: 0px 0px 35px white;border:2px white inset}
100%{ -webkit-box-shadow: 0px 0px 0px #white;border:2px white inset}
} 
/*---------- FORM BUTTONS ----------*/
div#button_area
{
 float: left;
 margin: 40px 0 0 150px;
 width: 450px;
}
div#button_area input:focus
{
 border: 2px solid #fff;
}
.submitbutton
{
 border-style: none;
 border-color: inherit;
 border-width: 0px;
 width:75px;
 height:40px;
 font:80% Verdana;
 color: #fff;
 background: #09C;
 cursor:pointer;/* it changes the cursor arrow into a pointing hand */
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 border-radius: 8px;
 -moz-box-shadow: 0px 0px 30px #fff;
 -webkit-box-shadow: 0px 0px 30px #fff;
 box-shadow: 0px 0px 30px #fff;
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='white', EndColorStr='#5B5EB3')";
}
.submitbutton:hover
{
 color: #09C; 
 background: #fff; 
}
.resetbutton
{
 width:75px;
 height:40px;
 border-style: none;
 border-color: inherit;
 border-width: 0px;
 font:80% Verdana;
 color: #fff;
 background: #09C;
 cursor:pointer;/* it changes the cursor arrow into a pointing hand */
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 border-radius: 8px; 
 /* FF3.6 */
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='white', EndColorStr='#5B5EB3')";
}
.resetbutton:hover
{
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 border-radius: 8px;
 -moz-box-shadow: 0px 0px 30px #fff;
 -webkit-box-shadow: 0px 0px 30px #fff;
 box-shadow: 0px 0px 30px #fff;
 background: #e7059f;
 color: #fff;
}

 CSS – web form for the PHP webpage

/* ================ style for PHP Form ==============================*/
section#form
{
  float: left;
  margin: 50px 0 50px 100px; 
}
div#form_wrapper
{
 padding: 5px 0 80px 10px; /* altering the bottom padding influenced the background image - it made it reach beyond form buttons. */
 width: 460px;
 color: #fff;
 /* background: #09C; nice light blue*/ 
 background-image: url('images/texture3.png');
 background-repeat:no-repeat; 
 background-position: top left; 
 height: 915px;
 font-family: Verdana, sans-serif;

 border-radius: 18px; 
 -moz-border-radius: 18px;
 -webkit-border-radius: 18px; 
}
div#form_wrapper h3
{
 margin: 20px 0 10px 0;
 font-size: 150%; 
 color: #09C;
 text-align: center;
 font-family: 'Gtown' ; 
}
label
{
 top:10px;
 position:relative;
 color: #fff;
 font-family: 'Jasmine' ;/* lunch CornFed */ 
 font-size: 120%;
 color: #fff; 
}
p#p_form
{
 float: left;
 width: 450px;
 margin: -15px 0 10px 0;
 text-align: center;
 color: #09C;
}
p.blue_text
{
 color: #09C;
 font-size: 90%;
}
p.magenta_text
{
 color: #e334ab;
 float: left;
 margin: -15px 0 0 0;
 font-size: 90%;
}
label.checkboxes
{
 top:10px;
 float: left;
 margin: 0 0 10px 0;
 width: 450px;
 position:relative;
 color: #fff;
}
form.little_form textarea, form.little_form input{outline:none;}
a{outline: none ;}
a:focus{border: 2px solid #09C;}
.field
{
 padding: 5px 15px 0 10px;
 height: 50px; 
}
.field2
{
 padding: 20px 15px 0 10px;
 height: 50px; 
}
.field2 select.font /* form checkboxes and radio and option do not have borders, use outline instead to style these elements */
{
 color: #aaaaaa;
}
.field2 select.font:focus
{
 outline: 2px solid #09C; 
 /*color: #e7059f;*/
}
.field_high :focus
{
 outline: 2px solid #fff;
}
.area
{
 padding: 10px 15px 0 10px;
 min-height: 195px;
}
.inputfield
{
 color: #e7059f;
 padding:0 10px 0 10px;
 float:right;
 font: 75% Verdana;
 border:2px #74c6ff; /* if added "inset" instead of "solid" then
 we would have 3D border as "inset"specifies 3D border. 
 The effect depends on the border-colour value. */

 -moz-border-radius: 5px; /* FF1+ */
 -webkit-border-radius: 5px; /* Saf3+, Chrome */
 border-radius: 5px; /* Opera 10.5, IE 9 */
}
.textfield
{
 height:25px;
 padding-top:5px;
}
.textarea1
{
 padding-top:10px;
 padding-bottom:10px;
 margin: 20px 0 0 0;
 height:150px;
 max-height:200px;
 max-width:250px;
}
.inputfield:focus/* the form field glows when focused*/
{
 -webkit-box-shadow: 0px 0px 35px #fff;
 /* border:2px #fff solid; line deleted so the submit button does not jump/ pop */
}
/* animatio added to from field when focused
.inputfield:focus
{
 -webkit-animation-name: pulsate;
 -webkit-animation-duration: 10s;
 -webkit-animation-iteration-count: infinite;

 -moz-box-shadow: 0px 0px 30px #3cdfdf; 
}*/
/* keyframes to "pulsate" animation */
@-webkit-keyframes pulsate 
{
0% { -webkit-box-shadow: 0px 0px 0px white;border:2px white inset}
25% { -webkit-box-shadow: 0px 0px 35px white;border:2px white inset}
50% { -webkit-box-shadow: 0px 0px 0px white; border:2px white inset}
75% { -webkit-box-shadow: 0px 0px 35px white;border:2px white inset}
100%{ -webkit-box-shadow: 0px 0px 0px #white;border:2px white inset}
}
/*---------- FORM BUTTONS ----------*/
div#button_area
{
 float: left;
 margin: 10px 0 0 150px;
 width: 450px;
}
div#button_area input:focus
{
 border: 2px solid #fff;
}
.submitbutton
{
 border-style: none;
 border-color: inherit;
 border-width: 0px;
 /*float:right;
 margin: 0 -30px 0 0;*/
 width:75px;
 height:40px;
 font:80% Verdana;
 color: #fff;
 background: #09C;
cursor:pointer;/* it changes the cursor arrow into a pointing hand */
-moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 border-radius: 8px;
 -moz-box-shadow: 0px 0px 30px #fff;
 -webkit-box-shadow: 0px 0px 30px #fff;
 box-shadow: 0px 0px 30px #fff;
/* FF3.6 */
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='white', EndColorStr='#5B5EB3')";
 /* background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fff),color-stop(1, #7785a3)); *//* Saf4+, Chrome */
}
.submitbutton:hover
{
 background: #e7059f;
 color: #fff;/* #ED0767 bright pink */ 
}
.resetbutton
{
 /* float: left;
 margin: -20px 0 0 255px;*/
 /*position:relative; A relative positioned element is positioned relative to its normal position */
 width:75px;
 height:40px;
 border-style: none;
 border-color: inherit;
 border-width: 0px;
 font:80% Verdana;
 color: #fff;
 background: #09C;
cursor:pointer;/* it changes the cursor arrow into a pointing hand */
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 border-radius: 8px;
/* FF3.6 */
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='white', EndColorStr='#5B5EB3')";
 /* background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fff),color-stop(1, #7785a3)); *//* Saf4+, Chrome */
}
.resetbutton:hover
{
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 border-radius: 8px;
 -moz-box-shadow: 0px 0px 30px #fff;
 -webkit-box-shadow: 0px 0px 30px #fff;
 box-shadow: 0px 0px 30px #fff;
 background: #fff;
 color: #09C;
}
/*----------------------------*/

I am sure that you can do a great use of this form. Experiment with the HTML5 attributes and style of the web form. Toodeloo! Yoko

Resources: http://diveintohtml5.info/forms.html , http://www.w3schools.com/html/html5_intro.asp

Show Hide jQuery effect

Adding some jQuery effects to your website can enrich it visually and can diverse functionality. This tutorial shows how to show & hide website content with jQuery magic.

Click the demo link and then “Jelly INFO” link to see how the effect looks like.

 

 

 

 

DEMO: http://yokowebdesign.co.uk/demo/jQuery_tutorial/

DOWNLOAD the files: http://yokowebdesign.co.uk/demo/jQuery_tutorial.rar

—————————————————————————

FAQ:  WHEN to use the show/ hide effect? If you have content that does not have to be necessarily shown straight away. WHY to use jQuery? It’s compact and powerful – you can accomplish great effects with minimal code so the your productivity is increased. It is rich in features – e.g. animations, interactions. You can use jQuery without worrying about cross browser compatibility. Among all these advantages it is also friendly with other coding languages, e.g. AJAX. And if you are stuck you can count on helpful community.

—————————————————————————

EXPLANATION (Syntax and Description):

HTML – Jelly info area

<div id="jelly_info_area">
    <div id="hidden_jelly_data">
       <div>
           <p>
                Jelly
           </p>
       </div> 
       <div>
           <p>
               are found in every ocean, BLAH BLAH BLAH
           </p>
       </div> 
    </div>
    <a href="#" id="jelly_link"></a> 
</div>

The HTML code consists of the area that stays hidden and the link that reveals this hidden section. The important thing is to include the reference to our JavaScript document in the head section of our the HTML doc.

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/JavaScript" src="show_hide_jquery.js"></script>

jQuery

$(document).ready(function()
    {
       $("#hidden_jelly_data").hide();
       $("#jelly_link").html("Jelly INFO");
       $("#jelly_link").click(function() 
        {
           if (this.className.indexOf('clicked') != -1 ) 
             {
               $(this).prev().slideUp(500);
               $(this).removeClass('clicked')
               $(this).html("Jelly INFO");
             }
           else 
             {
               $(this).addClass('clicked')
               $(this).prev().slideDown(500);
               $(this).html("Hide INFO");
             }
        });
   });

CSS – Jelly info area

div#jelly_info_area
{
 /*border: 1px solid blue;*/
 float: left;
 margin: -330px 0 0 250px;
}
a#jelly_link
{
 /*border: 1px solid blue;*/
 float: right; 
 margin: 11px 0 0 0;
 width: 90px;
 text-decoration: none;
 color: #cc9acc;
 text-decoration: none; 
 font-family: Jasmine, Verdana ;
 font-size: 80%;
}
 a#jelly_link:hover
{
 color: #a775a7; 
}
div#hidden_jelly_data
{
 /*border: 1px solid blue; */
 float: right;
 margin: 0 30px 0 0;
 padding: 5px 0 0 5px;
 width: 310px;
 /* background-color: #858b9c; */
 background-color: rgba(133,139,156,.2);

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px; 
}
div#hidden_jelly_data div
{
 /* border: 1px solid violet; */
 width: 250px;
 float: left;
 margin: 0 0 15px 0;
} 

div#hidden_jelly_data div p
{
 /*border: 1px solid violet; */
 margin: 0 0 0 10px;
 padding: 0 0 0 10px; 
 text-align: left;
 width: 260px;
 font-family: Verdana;
 font-size: 80%; 
 color: #fff; 
}

 What do you think about this tutorial? Let me know in the comment section. Toodeloo! Yoko

Swimming Diver CSS3 Effect – animation

Ready to add another great CSS3 effect to your website? Remember that CSS3 properties are not yet W3C standards and implementation of them in the main browsers are far from finished. The best browser to view this effect is Google Chrome (I have version 21) but truth be told it should be viewed amazingly in all browsers (they just have different pace in improving their browsers engines). This tutorial demo looks also great in the browser software  provided by my smartphone (HTC).  

DEMO: http://yokowebdesign.co.uk/demo/diver_tutorial/

DOWNLOAD the files: http://yokowebdesign.co.uk/demo/diver_tutorial.rar

———————————————————————————– 

EXPLANATION:

The effect consists of three separate images of the diver ( torso and two legs), HTML markup and CSS(3) properties. Below is the HTML code that constructs the diver: 

HTML – Diver

<div id="swimming_diver_area">
	<div class='diver'>
		<div class="left leg1">
			<div class="left foot"></div>
		</div> <!-- left arm -->

		<div class="right leg2">
			<div class="right foot"></div>
		</div> <!-- right leg -->

		<div class="torso_diver"></div> <!-- torso -->
	</div>
</div>

The resource css code contains vendor prefixes (e.g. -moz-, -o-) before almost each CSS3 property, because the implementation of the new CSS3 properties are done individually by main browsers. Hopefully all this nonsense ( prefixes) will be soon all behind us and we will be able to enjoy using simple property names. In this tutorial to shorten the code below I adhere just to the -webkit- prefix.

Here is the area that the diver moves on:

CSS – Diver area

div#swimming_diver_area
{
    /*border: 1px solid green; */
    float: left;
    margin: -180px 0 500px 340px;
    height: 150px;
    position: relative;

    animation-name: moving_green_box_diver;
    animation-duration: 45s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    -webkit-animation-name: moving_green_box_diver;
    -webkit-animation-duration: 45s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
 }

CSS3 Animation-Timing-Function – property specifies the speed curve of the animation ( in other words it defines the time an animation uses to change from one set of css styles to another). Value linear  –   sets the animation to play with the same speed from beginning to end. There are other values that you may want to implement for your animation (http://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp).

CSS – Diver

.diver
{
    top: 50px; left: 350px;
    animation-name: animation_diver;
    -webkit-animation-name: animation_diver;
}
.diver, .diver div
{
    background-repeat: no-repeat;

    animation-duration: 1750ms;
    animation-iteration-count: infinite; 

    -webkit-animation-duration: 1750ms;
    -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes animation_diver
{
   0%   { transform: rotate(5deg) translate( 3px,   0px);
          -webkit-transform: rotate(5deg) translate( 3px, 0px);}
   25%  { transform:  rotate(5deg) translate(-3px, -2px);
          -webkit-transform: rotate(5deg) translate(-3px, -2px);}
   50%  { transform:  rotate(5deg) translate( 3px,   0px);
          -webkit-transform: rotate(5deg) translate( 3px,  0px);}
   75%  { transform:  rotate(5deg) translate(-3px, -2px);
          -webkit-transform: rotate(5deg) translate(-3px, -2px);}
   100% { transform: rotate(5deg) translate( 3px,   0px);
          -webkit-transform: rotate(5deg) translate( 3px,  0px);}
}
@-webkit-keyframes moving_green_box_diver
{
    0%   {  -webkit-transform: translateX(500px);}
    100% {  -webkit-transform: translateX(-800px);}
}

The images that construct a diver are set as a background image (in css) to the particular body part (in html).

.torso_diver
{
    /*border: 1px solid violet; */
    position: relative;
    margin: -162px 0 0 20px;
    width: 150px;
    height: 150px;
    background-image: url(images/diver_torso.png);
}

/*=============  LEGS  ======================*/
.leg1, .leg2
{
    /*border: 1px solid orange; */
    top: -10px;
    left: 60px;
    transform-origin: 20px 10px;
    -webkit-transform-origin: 20px 10px;    
}
.right.leg2
{
    /*border: 1px solid black;*/
    position: relative;
    margin: -8px 0 0 5px;
    animation-name: animation_right_foot;
    -webkit-animation-name: animation_right_foot;
}
.left.leg1
{
    /*border: 1px solid yellow; */
    position: relative;
    top: 87px;
    left: 65px;
    animation-name: animation_left_foot;
    -webkit-animation-name: animation_left_foot;
}
.foot
{
    /*border: 1px solid blue;*/
    height: 105px;
    width: 57px;
}
.right.foot
{
    /*border: 1px solid purple; */
    background-image: url(images/leg_right2.png);
    position:relative;
    margin: 0 0 0 15px;
}
.left.foot
{
    /*border: 1px solid pink; */
    background-image: url(images/leg_left2.png);
    position:relative;
    margin: 0 0 0 15px;
 }

/* setting proper z-indexes so that legs show up correctly */

div.right.leg2 { z-index: 6; }
div.torso_diver { z-index: 0; }
div.left.leg1 { z-index: -3; }

 CSS z-index property specifies the stack order of an element. In this case right leg is in front then there is the torso and in the bottom is left leg. Below is the final animation for the legs.

@-webkit-keyframes animation_right_foot
{
    0%   { -webkit-transform: rotate(16deg);}
    50%  { -webkit-transform: rotate(-15deg);}
    100% { -webkit-transform: rotate(16deg);}
}

 

@-webkit-keyframes animation_left_foot
{
    0%   { -webkit-transform:  rotate(-15deg);}
    50%  { -webkit-transform:  rotate(26deg);}
    100% { -webkit-transform:  rotate(-15deg);}
}

 Do you think you would use this CSS3 effect? Feel free to comment on it. Toodeloo! Yoko

Psssss … The next entry will focus on jQuery.

———————————————————————

Inspirational resources: http://andrew-hoyer.com/experiments/walking/

Underwater Bubble CSS3 Effect – animation

The ocean was always inspiring to me. As a web designer I wanted to recreate a pinch of this amazing experience that you find underwater. In this tutorial I would like to teach you how to code a swimming whale that makes bubbles. You can view this properly in every browser that supports CSS3 properties.

 

 

 

 

 

DEMO: http://yokowebdesign.co.uk/demo/whale_tutorial/

DOWNLOAD the files: http://yokowebdesign.co.uk/demo/whale_tutorial.rar

 —————————————————————

Want to own your little ocean ? Then follow the steps:

1. Click the link above titled “Download the files” and extract the file by right clicking and choosing the option extract.

2.Open the folder and open css and html file in text editor (e.g. notepad++).

3. Alter the code to suit your vision. (You may want to add different animals, plants and take an advantage of CSS3 goodness , e.g. animations, text-effects, 2D transforms, etc.) Who knows maybe you decide to build a little aquarium. 

————-————————————————–

EXPLANATION:

The underwater effect consists of a whale image and coded bubbles (HTML markup and CSS). There is also the image of ocean bottom and some typography.  

HTML – Bubble

<div id="beaker">
	<span class="bubble">
		<span class="glow"> </span>
	</span>
</div>

It does not do anything yet so we need to wake it up with some CSS. We need to animate the bubbles movement ( travelling up, glowing, pulsating and popping).

Here is some handy info on CSS3 properties and values:

CSS3 Transform – scale() Method influences the size of the bubble, depending on the parameters given for the width and the height. The value scale (2.3) transforms the width to be twice its original size (in our tutorial code there is nothing specified therefore no transformation of the width). The height 3 transforms three times its original size.

Opacity value set to 0 makes the object 100% transparent, value 0.5 makes the object half-transparent.

CSS3 Animation:  Specifying a CSS style inside the @keyframes rule creates the animation. The code below shows that at various moments the size of the bubbles changes (that creates pulsating effect) and that it travels up.

 CSS3 Transition – Timing-Function property specifies a transition effect with a slow start and end.

CSS – animation for floating bubble 

@-webkit-keyframes bubbleFloat
{
from
  {
    bottom: 110px;
    -webkit-transform: scale(.3);
    opacity: 0;
    -webkit-animation-timing-function: ease-in-out;
  }
1%
  {
    bottom: 110px;
    -webkit-transform: scale(.3);
    opacity: 0;
    -webkit-animation-timing-function: ease-in-out;
  }
30%
  {
    bottom: 110px;
    -webkit-transform: scale(.8);
    opacity: 1;
    -webkit-animation-timing-function: ease-in-out;
  }
95%
  {
    bottom: 545px;
    -webkit-transform: scale(.3);
    opacity: 1;
    -webkit-animation-timing-function: ease-in-out;
  }
99%
  {
    bottom: 550px;
    -webkit-transform: scale(3);
    opacity: 0;
    -webkit-animation-timing-function: ease-in-out;
  }
to
  {
    bottom: 110px;
    -webkit-transform: scale(.9);
    opacity: 0;
    -webkit-animation-timing-function: ease-in-out;
  }
}

CSS – animation for pulsating bubble

CSS3 Borders: The red pulse animation consists of a shadow that changes colour from light blue to white back a forth and shadow that gets thicker and thinner. The CSS3 Box-Shadow property is used to add shadow to objects ( box-shadow: 0 0 30px  #BED7E8;        values: right , bottom and smudging).                 

@-webkit-keyframes redPulse3
{
from { -webkit-box-shadow: 0 0 5px #BED7E8;}
50% { -webkit-box-shadow: 0 0 30px #89C0E8; }
to { -webkit-box-shadow: 0 0 5px #BED7E8;}
}

Our whale needs a lot of bubbles and to make things interesting we will make them differ in sizes and location. To do that we need to start with our HTML skeleton bubbles (each need their own unique names so that the values can be different as well). SEE? Beaker3 can feel pretty special. 

HTML – Beaker

<div id="beaker3">
	<span class="bubble3">
		<span class="glow3"> </span>
	</span>
</div>

 As you can see below the span of a class bubble3 properties describe the size, shape and location of this particular bubble. It also adheres to the name & duration of the animation it should activate.

The glow element is built the same way as the bubble element.

CSS – Beaker

div#beaker3
{
    height: 50px;
    position: relative;
   /* border: 2px solid blue;*/
}
div#beaker3 span.bubble3
{
    width: 60px;
    height: 60px;
    position: absolute;
    display: block;
    left: 100px;
    bottom: 70px;
    -webkit-border-radius: 160px;
    background: -webkit-gradient(radial, center center, 0, center center, 100, from(rgba(255,255,255,.2)), to(rgba(53,162,240,.2)));
    -webkit-animation-name: bubbleFloat;
    -webkit-animation-duration: 8s;
    -webkit-animation-iteration-count: infinite;
}

div#beaker3 span.glow3
{
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
    -webkit-border-radius: 160px;
    -webkit-animation-name: redPulse3;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
}
Creating a swimming whale animation is easy peasy. Setting the position to relative is important (so that the animation can fully function if there was just float: left then the whale would just rotate without swimming around).
CSS – Swimming Whale
div#humpback_whale2
{
    /*border: 1px solid green; */
    float: left;
    margin: -180px 0 0 160px;
    position:relative;
    animation:humpback_whale2 12s;
    -webkit-animation:humpback_whale2 12s; 
    -webkit-animation-iteration-count: infinite;

 /*   transform: rotate(25deg);
    -webkit-transform: rotate(25deg);  */
}
Just like the bubble effect our swimming whale requires setting up key frames. The code below is self explanatory. 
@keyframes humpback_whale2
{
  0%   { left:-70px; top:0px;}
  45%  { left:30px; top:-70px;
          transform: rotate(-10deg);
          -webkit-transform: rotate(-10deg);
          -webkit-animation-timing-function: ease-in-out;
        }
  60%  { left:20px; top:-10px;
          -webkit-animation-timing-function: ease-in-out;
        }
  75%  {  left:0px; top:0px;
          transform: rotate(5deg);
          -webkit-transform: rotate(5deg);
          -webkit-animation-timing-function: ease-in-out;
        }
  100% { left:-70px; top:0px;}
}

@-webkit-keyframes humpback_whale2 /*Safari and Chrome */
{
  0%   { left:-70px; top:0px;}
  45%  { left:30px; top:-70px;
          transform: rotate(-10deg);
          -webkit-transform: rotate(-10deg);
          -webkit-animation-timing-function: ease-in-out;
        }
  60%  { left:20px; top:-10px;
          -webkit-animation-timing-function: ease-in-out;
        }
  75%  {  left:0px; top:0px;
          transform: rotate(5deg);
          -webkit-transform: rotate(5deg);
          -webkit-animation-timing-function: ease-in-out;
        }
  100% { left:-70px; top:0px;}
}
I hope you enjoyed my first tutorial. You can share your thoughts in the comment section. Toodeloo! Yoko
 Pssssss … in the next entry I will share (explain) secret how I made my diver swim.

—————————————————————-

Inspirational resources: http://www.zurb.com/playground/css-boxshadow-experiments , http://www.w3schools.com/css3/default.asp

Hurray & Hello

I’m Yoko and my blog  presents web design tutorials, my progress as a web developer, things that inspire me and web design topics in general. I welcome your thoughts on it.

My tutorials require basic knowledge about (X)HTML(5), CSS(3) & JavaScript. If you have difficulties with grasping some of the code lines I would recommend this source of information: http://www.codecademy.com/ .