Download New Sharecodepoint Android App from Google Play Store : DocScannerPoint : Document Scanner with OCR, PDF: Download Now


Domyhomework123.com - programming homework help. Get your programming homework done with expert homework helper. Trust Writemypaper123.com with your paper and you will never regret it.

Download Latest Notes, Study Materials and More...

Visit: Download Now


Ask Any Question Relative to your Sujbect

Visit: Ask Question


Lovely Professional University UMS (University Management System) Login Page Using HTML and CSS

Lovely Professional University UMS (University Management System) Login Page Using HTML and CSS
Lovely Professional University UMS (University Management System) Login Page.Lovely Professional University is a semi-residential university college in North India created under the Punjab State Private University Act 2005 and recognized by UGC under Section 2 of UGC Act 1956.




 Download Display Battery Status using HTML and CSS

Make online quizzes template for website using html , css and javascript

Make online quizzes template for website using html , css and javascript
In this tutorial, we will show you how to make an online quiz using HTML, CSS  and the least  Javascript usage. There are so many websites available to provide the online quizzes code but their codes are very difficult to understand as well as difficult to implement. You can easily make online quizzes with the help of simple tags of HTML, CSS, and a bit of javascript.

In the above demo screenshot, I've created only 1 question with 4 multiple choice answers. You can create as many as you like. If you want to add a new question, you just need to copy the code. There is no need to write the code again.

In this quiz system, we used just a bit of javascript. If you don't know how to write/ use  HTML, CSS and javascript, don't worry, i will give you the entire code. If you want to learn html, css and javascript then visit the below links. Here you can learn basic concepts of HTML, CSS and many more languages.

HTML Tutorials : HTML Introduction

CSS Tutorials : CSS Introduction

JavaScript Tutorials: JavaScript Introduction

Let us start to make quiz system :

HTML Code 
Design the structure of quiz. Here,we have 2 div elements. First div class "class="scp-quizzes-main"" is main div  to control the quiz structure.  Second div "class="scp-quizzes-data"" is used to control the quiz questions and answers.
<div class="scp-quizzes-main">
<div class="scp-quizzes-data">
  <h3>1. What is the output of the below c code?</h3>
    <pre>#include&lt;stdio.h> 
main() 
{
   int x = 5;
   
   if(x=5)
   { 
      if(x=5) printf("Fast");
   } 
   printf("learning");
}</pre>
<br/>
    <input type="radio" id="Fastlearning" name="question1">
       <label for="Fastlearning">1. Fastlearning</label><br/>
    <input type="radio"  name="question1">
       <label>2. learning</label><br/>
    <input type="radio" name="question1">
       <label>3. learningFast</label> <br/>
    <input type="radio" name="question1">
     <label>4. Fast</label> 
 </div>
Ratios button is used for multiple answers.  4 radio buttons with the same name are used for each question.
Note : The label for="answer" and input id ="answer" is  written with same name to display the correct answer. To make any option as correct answer, write its label for=" answer" and input id ="answer".

CSS Code
This CSS used for the radio button to change the radio button style.
input[type=radio] {
    display:none; 
}
input[type=radio] + label {
    display:inline-block;
 width:95%;
 padding:10px;
 border:1px solid #ddd;
 margin-bottom:10px;
 cursor:pointer;
}
input[type=radio] + label:hover{ border:1px solid #000000;}
input[type=radio]:checked + label { 
   background-image: none;
   background-color:#0C0;
 color:#fff;
 border:1px solid #0C0 !important;
 -webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

Wrong answer style
.worngans{ background-color:#F36;color:#fff; border:1px solid #F36 !important;-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;}
JavaScript Code
jquery.min.js Javascript files will need to be referenced on the page your quiz is on, in order for the quiz to work. To reference, you'll need to add this line between the opening and closing head tags.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type='text/javascript'></script>

This is the javascript where the wrong answer is specified. Add this javascript code between the opening and closing head tags.
<script type="text/javascript">
 $(document).ready(function() {
    $('label').click(function() {
        $('label').removeClass('worngans');
        $(this).addClass('worngans');
    });
});
</script>

If you have any doubts regarding the creation of an android app then leave your doubts in the comment box.

Create Your Own Photo Filter & Effects Web App and Android App like Instagram Filters Using HTML , CSS and JavaScript

Create Your Own Photo Filter & Effects Web App and Android App like Instagram Filters Using HTML , CSS and JavaScript
In this tutorial, we are going to create a photo filter and effects web  application and android app like Instagram  filters using html, css and JavaScript. Photo Filters are a fun way to share your mobile photos and computer photos with friends.

The web application allows you to choose a photo from your computer into browser window , and apply filter and effects on it .

In this tutorial, you get to know how to apply the filter and how to make filter using css and JavaScript.
But firstly you should know about the css3 syntax and JavaScript syntax.

Share Filter Image  application works on web browser. Share Filter Image design is a responsive interface. You should also use this interface for your filter android application but firstly know about the How Make Android Apps Using HTML, CSS and JavaScript .

Step 1 : HTML Code
The first step is to write the html code for your interface. Which type of interface you want ? Here is the starting code in index.html file. Here we are loading Share Filter Image web application library and also our styles.css and filter.js files.
<html>
   <head>
      <title>Share Filter Image : Powered By ShareCodePoint.com</title>
      <link href="css/bootstrap.min.css" rel="stylesheet">
      <link href="css/styles.css" rel="stylesheet">
   </head>
   <body>
      <nav class="navbar navbar-default navbar-fixed-top"  id="subnav">
         <div class="container">
            <div class="" id="bs-example-navbar-collapse-1">
               <ul class="nav navbar-nav sub-nav-option scroll">
                  <li class="dropdown">
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Brightness</a>
                     <ul id="filter-options" class="dropdown-menu">
                        <li>
                           <div class="row">
                              <div class="col-md-12">
                                 Brightness
                                 <br/>
                                 <div align="center">
                                    <span id="brightv" class="per-filter">100 %</span>
                                 </div>
                                 <input id="brightness" class="filter-setting-slider" onChange="brightnessv(this.value)" type="range" min=0 max=200 value="100">
                              </div>
                           </div>
                        </li>
                     </ul>
                  </li>
                  </form>
               </ul>
            </div>
         </div>
      </nav>
      <div class="container-fluid main-top">
         <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12"  align="center">
            <img  id="img" class="img img-responsive img-thumbnail" src="imgs/default.svg "/>
         </div>
      </div>
      </div>
      <div class="container">
         <div class="fileUpload btn">
            <form id="form1" runat="server">
               <span>Choose Image</span>
               <input id="choose" type="file" class="upload" />
            </form>
         </div>
      </div>
      <script type="text/javascript" src="js/jquery.min.js"></script>
      <script type="text/javascript" src="js/filter.js"></script>
   </body>
</html>

In above code, you can see the ul li tags. These tags are used for making the filter options like Brightness , Blur , Invert , Contrast , Opacity and Saturate.

Step 2 : CSS Code
CSS Code is used to make the structure design and to control the layout of share filter image web application.
The Important CSS code for your application.
input[type=range]{
    -webkit-appearance: none;
    background:#CCCCCC;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 20px;
    border: none;
    background:transparent;
    border-radius:2px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background: goldenrod;
    margin-top: -10px;
    border:2px solid goldenrod;
    cursor:pointer;
}
input[type=range]:hover::-webkit-slider-thumb {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
    border:2px solid #000;

}
input[type=range]:focus {
    outline: none;
}
.per-filter{ font-size:25px; font-weight:300;}
.img{
    width: 450px !important;
    height:450px !important;
    -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1), 0px 2px 15px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1), 0px 2px 15px 0px rgba(0, 0, 0, 0.3);
    border: 5px solid white;
    border-radius:0px !important;
}
The input[type="range"] is used to change the style of slider. Class .pre-filter is used to show the % of your filter options. It shows how many effects you can apply for image. See Live Demo

Step 3 : JavaScript
This javascript code is used to show the percentage  of how many filter and effects applied.
 <script type="text/javascript">
         function blurv(value){
         document.getElementById("bv").innerHTML=value+' %';
         }
      </script>
Blur function is used for the blur filter option. It shows the value in percentage.

The onmousemove event occurs when the pointer is moving while it is over an element.
function filter() {
    var f = $("#blur").val(),
        d = $("#brightness").val(),
        c = $("#contrast").val(),
        b = $("#opacity").val(),
        e = $("#invert").val(),
        a = $("#saturate").val();
    $("#img").css("-webkit-filter", " blur(" + f + "px) brightness(" + d + "%) contrast(" + c + "%) opacity(" + b + "%) invert(" + e + "%) saturate(" + a + "%)")
}
$("input[type=range]").change(filter).mousemove(filter);

 Download Display Battery Status using HTML and CSS

Make Android Apps Using HTML, CSS and JavaScript

Make Android Apps Using HTML, CSS and JavaScript
This tutorial shows how to create a JS/HTML android application using the command-line interface (CLI).

So many people ask this question "Is it possible to create an Android app using HTML, CSS and JavaScript?"  Yes, you can develop apps using HTML / CSS / Javascript.

The great thing about Cordova is that you can create a core app in HTML5/CSS3/JS and have it compile to all the platforms at once.

How To Develop Android App

Web APP: This is the part where your application code resides. The application itself is implemented as a web page, by default a local file named index.html, that references CSS, JavaScript, images, media files, or other resources are necessary for it to run. The app executes in a WebView within the native application wrapper, which you distribute to app stores.

Plugins: Plugins are an integral part of the cordova ecosystem. They provide an interface for Cordova and native components to communicate with each other and bindings to standard device APIs. This enables you to invoke native code from JavaScript.  Download Plugins

Mobile OS: Android, Window and IOS

Create your first Android App :

Step 1:

Step 2:
  • Open Command Prompt 
  • Install the cordova module using npm utility of Node.js 
C: \> npm install -g cordova
  • The cordova module will automatically be downloaded by the npm utility. 

Step 3:
  • Create the App
  • Go to the directory where you maintain your source code, and run a command.
cordova create myapp  com.se.my  HelloWorld

myapp:- Specifies a directory to be generated for your project.
com.se.my:- Java package names.
HelloWorld:- Provides the application's display title.

Step 4: 
  • The project's directory 
C: \> cd myapp

Step 5:
  • Command to add the platform 
C: \myapp> cordova platform add android
  • Command to remove the platform 
C: \myapp> cordova platform rm android

Step 6:
  • Build the App
C: \myapp> cordova build
  • Test the App on an Emulator or Device
C: \myapp> cordova emulate android

How to Upload or Publish the .APK file on Google Play Store
You used the CLI for almost all tasks and this will help you sign your APK for publishing to Google Play.

Step 1 – Build the release APK
You’ll need to get cordova to build an APK file for release.

cordova build –release android

Step 2 – Create a Keystore
You’ll need to install Java in order to access the binary called keytool. This binary will produce the keystore files you’ll need for signing the APK.

keytool -genkey -v -keystore <KEYSTORE FILENAME> -alias <KEYSTORE ALIAS> -keyalg RSA -keysize 2048 -validity 10000

The KEYSTORE FILENAME is the output file the keystore data will be saved to. The KEYSTORE ALIAS is a simple alias we’ll use later in the process to identify which key to use within the keystore.

Step 3 – Sign the JAR file
Here we’ll use jarsigner to create an preliminary APK file.

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore <PATH TO KEYSTORE FILE> <PATH TO CORDOVA BUILT APK> <KEYSTORE ALIAS>

The jarsigner will take the keystore, the cordova built APK and the keystore alias and create an APK that needs to be zipaligned.

Step 4 – ZIPAlign the file
Now we simply call zipalign to finish the job.

zipalign -v 4 <PATH TO CORDOVA BUILT APK> <FINISHED APK FILENAME>

The FINISHED APK FILENAME can be anything you wish. This file can then be uploaded to Google Play.

Download the Android App UI Design:
Example Android App : Download Now

Tutorial Video:
Android app for web designer. This is a very basic process to make and build an android application using a simple html. This is a very simple application that you can install to your android phone - Watch Video Tutorial

If you have any doubt regarding creation of the android app then leave your doubts in comment box.

Create Calculator using HTML, CSS and JavaScript

Create Calculator using HTML, CSS and JavaScript
In this tutorial,we are going to create a calculator. We need to create a basic structure using HTML, style it using CSS and make it work using JavaScript, which works on browser.

This calculator will only have the division, multiplication, addition and subtraction operations but you can easily include more functions if you need.

You can also use keyboard number keys to calculate the value. Input type are included in the code for a form which makes ‘textfield’ and ‘button’. Every input field is specified with attribute value. The  attribute value specifies the value of an <input> element. Eval() function takes the expression and evaluates it accordingly. ‘On click’ is the event. It occurs when  the user clicks on an element. 

HTML CODE:
 The following  code is to make html calculator.
<div align="center">
<form onsubmit="javascript:cal(document.getElementById('valueshow').value);return false;">
<table align="center">
<tbody>
<tr>
<td colspan="4"><input id="valueshow" type="text" value="0" />
</tr>
<tr>
<td><input class="bgcolornumber" onclick="cals(this.value);" type="button" value="1" />
<td><input class="bgcolornumber" onclick="cals(this.value);" type="button" value="2" />
<td><input class="bgcolornumber" onclick="cals(this.value);" type="button" value="3" />
<td><input class="bgoperationcolor" onclick="cals(this.value);" type="button" value="/" />
</tr>
<tr>
<td><input class="bgcolornumber" onclick="cals(this.value);" type="button" value="4" />
<td><input class="bgcolornumber" onclick="cals(this.value);" type="button" value="5" />
<td><input class="bgcolornumber" onclick="cals(this.value);" type="button" value="6" />
<td><input class="bgoperationcolor" onclick="cals('*');" type="button" value="x" />
</tr>
<tr>
<td><input class="bgcolornumber" onclick="cals(this.value);" type="button" value="7" />
<td><input class="bgcolornumber" onclick="cals(this.value);" type="button" value="8" />
<td><input class="bgcolornumber" onclick="cals(this.value);" type="button" value="9" />
<td><input class="bgoperationcolor" onclick="cals(this.value);" type="button" value="-" />
</tr>
<tr>
<td><input class="bgcolornumber" onclick="cals(this.value);" type="button" value="0" />
<td><input class="bgcolornumber" onclick="cals(this.value);" type="button" value="." />
<td><input class="bgclear" onclick="cals(this.value);" type="button" value="C" />
<td><input class="bgoperationcolor" onclick="cals(this.value);" type="button" value="+" />
</tr>
<tr>
<td colspan="4"><input class="equal" onclick="cal(document.getElementById('valueshow').value);" type="button" value="=" />
</td>
</tr>
</tbody>
</table>
</form>
</div>
Most of the HTML is coding for all the input buttons and their associated onclick event handlers. All the buttons, except for the = button, will call the cal JavaScript when clicked and passes it’s associated value. The = button calls the calculate JavaScript function and passes the value that is in the text input which represents the string of numbers and operators that were pushed. Two types of inputs text and button are used here on a table within a form element and OnClick event was used to insert button values on the screen or to evaluate the numbers.

CSS CODE:
//div control the all calculator component like (buttons, text field ). It also control the left, top margin of calculator.
div {
    width: 500px;
    margin-left: 30%;
    margin-top: 5%
}
table {
    width: 100%;
    border: 2px solid #fff;
    box-shadow: 0 0 2px 1px #f1f1f1;
}
input[type="button"] {
    border: none;
    width: 100%;
    padding: 10px;
    font-size: 60px;
    outline: none;
    height: 90px;
    transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
input[type="text"] {
    border: none;
    width: 100%;
    height: 100px;
    padding: 10px;
    font-size: 70px;
    outline: none;
    font-weight: normal;
    color: #555
}
 
//.bgcolornumber class is use for all button number buttons (0-9)
.bgcolornumber {
    background-color: #f1f1f1;
    color: #333;
    transition: all 0.3s ease-in-out;
}
.bgclear {
    background: #CC0000;
    color: #f9f9f9;
    transition: all 0.3s ease-in-out;
}
 
//.bgoperationcolor is use for all operation buttons (+,-,*,/)
.bgopeationcolor {
    background-color: #663399;
    color: #f9f9f9;
    transition: all 0.3s ease-in-out;
}
.equal {
    background-color: #66CC33;
    color: #f9f9f9;
    transition: all 0.3s ease-in-out;
}
.bgcolornumber:hover {
    background-color: #222;
    color: #f5f5f5;
    transition: all 0.3s ease-in-out;
}
.bgclear:hover {
    background-color: #FF0000;
    color: #f5f5f5;
    transition: all 0.3s ease-in-out;
}
.bgoperationcolor:hover {
    background-color: #0033CC;
    ;
    color: #f9f9f9;
    transition: all 0.3s ease-in-out;
}
.equal:hover {
    background-color: #66FF00;
    transition: all 0.3s ease-in-out;
}
input[type="text"]:active {
    font-size: 75px;
}

JAVASCRIPT CODE:
Here is the JavaScript code for the 2 functions:
<script type="text/javascript">
function cals(buttonValue) 
{
if (buttonValue == 'C') 
{
   document.getElementById('valueshow').value = '0';
}
else
  {
    if(document.getElementById('valueshow').value == '0') 
 {
  
   document.getElementById('valueshow').value = buttonValue;
}
  
  else
   {
    
    document.getElementById('valueshow').value += buttonValue;
   }
  }
 }
  function cal(equation)  
   
  {
  var answer = eval(equation);
document.getElementById('valueshow').value = answer;
 }
 </script>
The cal function does 2 things for us. If the user clicks on the C button or the clear button, it accesses the text input object, which represents our calculator screen, via the DOM . Once it is accessed, the value inside the text input is set to ” (2 single quotes) which is an empty string. This will basically remove whatever string is already inside the text input. If the user clicks on any other button, the function will access the text input object and append the value that was passed over to whatever is already in our text input. This allows us to build our string with numbers and operators.

The eval() function treats the string as if it were JavaScript code and executes it and returns the results. The function will then access the text input object and replace whatever the current value is with the answer from the eval() function.

Display Battery Status using HTML and CSS

Display Battery Status using HTML and CSS
In this tutorial, we'll design and display battery status using HTML , CSS , animations and show effects.  Today, we will start by creating a very cool and realistic battery levels with CSS3 properties, and add a CSS3 animations for giving the battery levels effects.
This tutorial only explains how to design and display battery status from your web page. It does not retrieve and display current status of your device battery.

HTML CODE
First we’ll create the HTML in order to get an empty battery display
<html>
  <head>
  <title>Display Battery Status using HTML and CSS</title>
      <link href="battery.css" rel="stylesheet" type="text/css">
      <body>
      <div class="battery-level-control-eq">
<div class="levels-eq">
<div class="eq">
</div>
</div>
<div class="status">
<div class="status-info">
<div>
0 %</div>
<div>
20 %</div>
<div>
40 %</div>
<div>
60 %</div>
<div>
80 %</div>
<div>
100 %</div>
<div>
Empty</div>
</div>
</div>
</div>
<button class="charge-btn" onclick="charge()"></button>
  </body>
</html>

CSS CODE
Now, we need to display a border around the div and a small rectangle. This CSS code is  to make the structure design and control the layout of battery.
.battery-level-control-eq { 
  margin-left:200px;
  margin-top:60px;
}
.levels-eq{
  margin-top:50px;
  border:5px solid #666;
  border-radius:2px;
  background-color:#CC3333;
  height:450px; 
  width:200px; 
  float:left;
  animation:mp-eq1-bg 10.5s;
  -webkit-animation:mp-eq1-bg 10.5s;
  -moz-animation:mp-eq1-bg 10.5s;
 
}
.eq{
  width:200px;
  height:450px;
  background-color:#fff;
  animation:mp-eq1 10.5s ;
  -webkit-animation:mp-eq1 10.5s;
  -moz-animation:mp-eq1 10.5s;
}
Class ".battery-level-control-eq" used to control the layout of battery. Class ".levels-eq" used  to make the layout of battery and it also controls the battery levels background (means changing the background color automatically with the help of animation:mp-eq1-bg 10.5s;).  Class ".eq" used for changing the height of levels automatically using the animations css property.

CSS code for changing the background color of battery levels
The @keyframes rule specifies the animation code. The animation is created by gradually changing from one set of CSS styles to another. During the animation, you can change the set of CSS styles many times.
@keyframes mp-eq1-bg{
 20%{
    transition:all 16s ease-in-out;
    background-color:#CC3333;
   }
 40%{
   transition:all 16s ease-in-out;
   background-color:#CC3366;
  }
60%{
   transition:all 16s ease-in-out;
   background-color:#FFCC66;
   }
80%{
   transition:all 16s ease-in-out;
   background-color:#FFCC00;
   }
95%{
   transition:all 16s ease-in-out;
   background-color:#66CC33;
  }}

CSS code for changing the height of battery levels
Specify when the style change will happen in percent, or with the keywords "from" and "to", which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete.
@keyframes mp-eq1{
 20%{
    transition:all 16s ease-in-out; 
    height:400px;
   }
 40%{
   transition:all 16s ease-in-out;
   height:300px;
   }
 60%{
   transition:all 16s ease-in-out;
   height:200px;
   }
 80%{
   transition:all 16s ease-in-out; 
   height:100px
   }
95%{
   transition:all 16s ease-in-out; 
   height:0px;
  }}

CSS code to display the battery levels status
When levels are automatically incremented then display the battery status (how much battery charged).
.status {
    width:100px;
    height:100px;
    overflow:hidden;
 float:left;
 margin-left:100px;
 margin-top:200px;
}
.status-info{
    width:auto;
    animation: info 18s infinite;
    animation-fill-mode: backwards;
    animation-timing-function: steps(10);
 animation-iteration-count: 1;
}
.status-info div {
    float:right;
    text-align:center;
    width:100px;
    height:100px;
 font-size:25px;
 font-weight:300;
    line-height:100px;
    display:inline-block;
}
 
@-webkit-keyframes info {
    0% {
        margin-right:0px
    }
    100% {
        margin-right:-1000px;
    }
}

CSS code of charge button
Class ".charge-btn" is used  to design the button and also to change the background color of button using animation:btn 10.5s; css property.
.charge-btn{
 animation:btn 10.5s ;
 -webkit-animation:btn 10.5s;
 -moz-animation:btn 10.5s;
 border:2px solid rgba(255,255,255,0.4);
 padding:10px;
 font-size:17px;
 color:#f5f5f5;
 cursor:pointer;
 border-radius:2px;
}
.charge-btn::before{
 content: "click to charge battery";
}
@keyframes btn{
20%{
 transition:all 16s ease-in-out;
 background-color:#CC3333;
}
40%{
 transition:all 16s ease-in-out;
 background-color:#CC3366;
}
60%{
 transition:all 16s ease-in-out;
 background-color:#FFCC66;
}
80%{
 transition:all 16s ease-in-out;
 background-color:#FFCC00;
}
95%{
 transition:all 16s ease-in-out;
 background-color:#66CC33;
}}

JAVASCRIPT CODE To reload the page.
<script>
  function charge() {
    location.reload(); 
   }
</script>
Finally Display Battery Status Done !
If you want to make real display battery status application then use JavaScript APIs that allow developers to communicate with the device system including retrieving battery status. That’s all, head over to the demo page to see it in action.


Animated Bouncing Balls Using HTML and CSS3

Animated Bouncing Balls Using HTML  and CSS3
In this tutorial, we'll create the animated bouncing  balls using only CSS3 transition , animations and show effects.  Today, we will start by creating a very cool and realistic ball with CSS3 properties and add a CSS3 animations for giving  bouncing and jumping effects to the ball.

CSS3 animation make it possible to animate transitions from one CSS3 style configuration to another.  Previously it  was possible only with the use of javascript or jquery  for animations but now the CSS3 animation properties enables us to do animations easily. Don't write the big code for small animation just write the only one word "animation". 

Today, I  am going to give an example of bouncing and Jumping balls using CSS3 animations and transitions effects.

HTML CODE 
Let's start with some very basic html. We have here 4 simple DIV elements . "class="main" " is the main DIV which controls the balls. This Div will determine the balls margin from top of the screen. First div is used for ball 1 , Second div used for ball 2 and third div used for ball 3. 
<html>
  <head>
      <title>Animated Bouncing Ball's Using HTML  and CSS3 </title>
      <link href="balls.css" rel="stylesheet" type="text/css">
      <body>
       
     <div class="main">
<div class="ball1">
</div>
<div class="ball2">
</div>
<div class="ball3">
</div>
</div>
</body>
</html>

CSS CODE
I'll start by adding the animation property to our ball "animation: animation:ball1 3s infinite ".
  animation:ball1 3s infinite;
All I did was to define the animation name (ball1 , ball2 or ball3 ), the animation's duration (3 second ) and how many times the animation will happen - in our case we use ( infinite ) which means that it will run  forever.

Animation itself:
So, basically what I’m doing here is to play with the ‘top’ position property of the ball.
<html>
  <head>
      <title>Animated Bouncing Ball's Using HTML  and CSS3 </title>
      <link href="balls.css" rel="stylesheet" type="text/css">
      <body>
       
     <div class="main">
<div class="ball1">
</div>
<div class="ball2">
</div>
<div class="ball3">
</div>
</div>
</body>
</html>

MAIN CSS CODE 
We are giving the balls equal width and height and a value of 100% to border-radius property.So, it will be a ball and not an oval shape. All balls transition delay times are equal.
.main{ margin-top:100px;}
This CSS for Ball 1
.ball1{
 float:left;
 width:100px;
 height:100px;
 background-color:#999999;
 border-radius:100%;
 transition:all 0.5s ease-in-out;
 -webkite-transition:all 0.5s ease-in-out;
 -moz-transition:all 0.5s ease-in-out;
 animation:ball1 3s infinite;
 -webkit-animation:ball1 3s infinite;
 -moz-animation:ball1 3s infinite;
 border:5px solid #222;
}
@keyframes ball1{
20%{
 background-color:#FF66CC;
 transition:all 0.5s ease-in-out;
}
40%{
 background-color:#66CC33;
 margin-left:800px;
 margin-top:100px;
 width:150px;
 height:150px;
 transition:all 0.5s ease-in-out;
}
60%{
 background-color:#CC33FF;
 margin-left:500px;
 margin-top:300px;
 width:150px;
 height:150px;
 transition:all 0.5s ease-in-out;
}
80%{
 background-color:#FFFF00;
 margin-left:300px;
 margin-top:100px;
 width:100px;
 height:100px;
 transition:all 0.5s ease-in-out;
}
95%{
 width:200px;
 height:200px;
 background-color:#FF9933;
 transition:all 0.5s ease-in-out;
}
}
 
This CSS for Ball 2
/* This CSS for Ball 2 */
.ball2{
 float:left;
 width:100px;
 height:100px;
 margin-top:100px;
 background-color:#66CCCC;
 border-radius:100%;
 transition:all 10s ease-in-out;
 -webkite-transition:all 10s ease-in-out;
 -moz-transition:all 10s ease-in-out;
 animation:ball2 2s infinite;
 -webkit-animation:ball2 2s infinite;
 -moz-animation:ball2 2s infinite;
 border:5px solid #222;
}
@keyframes ball2{
20%{
 background-color:#FFFF66;
 margin-top:200px;
 transition:all 0.5s ease-in-out;
}
40%{
 background-color:#CC66FF;
 margin-top:-50px;
 width:150px;
 height:150px;
 transition:all 0.5s ease-in-out;
}
60%{
 background-color:#FF3366;
 margin-top:200px;
 transition:all 0.5s ease-in-out;
}
80%{
 background-color:#FF9966;
 margin-top:-100px;
 width:100px;
 height:100px;
 transition:all 0.5s ease-in-out;
}
95%{
 width:150px;
 height:150px;
 margin-top:250px;
 background-color:#000000;
 transition:all 0.5s ease-in-out;
}
}
 
This CSS for Ball 3
/* This CSS for Ball 3 */
.ball3{
 float:left;
 width:100px;
 height:100px;
 margin-top:100px;
 background-color:#6666CC;
 border-radius:100%;
 transition:all 10s ease-in-out;
 -webkite-transition:all 10s ease-in-out;
 -moz-transition:all 10s ease-in-out;
 animation:ball2 2s infinite;
 -webkit-animation:ball3 2s infinite;
 -moz-animation:ball3 2s infinite;
 border:5px solid #222;
}
@keyframes ball3{
25%{
 background-color:#FF6633;
 margin-top:50px;
 transition:all 0.5s ease-in-out;
}
40%{
 background-color:#0066FF;
 margin-top:300px;
 width:150px;
 height:150px;
 transition:all 0.5s ease-in-out;
}
60%{
 background-color:#333333;
 margin-top:-200px;
 transition:all 0.5s ease-in-out;
}
80%{
 background-color:#663333;
 margin-top:100px;
 width:100px;
 height:100px;
 transition:all 0.5s ease-in-out;
}
95%{
 width:200px;
 height:200px;
 margin-top:300px;
 transition:all 0.5s ease-in-out;
}
}

Finally Animated Bouncing and Jumping Balls Done !
Now, you can create your own animation using CSS3 properties without writing any javascript and jquey code.



 Animated Bouncing Balls Using HTML and CSS3  Live Demo Animated Bouncing Balls Using HTML and CSS3