Description : I am going to explain how to drag an item and drop the item at required position.
In The above image i am going to move all right side boxes to trash i.e to left side dust bin.
CSS Code for above App
Original SourceDrag and drop
Drag the list items over the dustbin, and drop them to have the bin eat the item
HTML5 Semantics Example
HTML5 Semantics Example
What We Provide?
Posted on by Alex Jones
We Provide All Domestic academic admissions for B.Tech,M.tech,Mca,Mba,Bds,Mbbs through out the country.we provide admissions for councilling fee only with out any donations,we look after accomdation along with career guidence.we are developing mobile app for colleges and students to communicate with each others and get admissions online from your mobile only.we provide online tutorials for students who want to learn new technologies with out any fee
Technologies
Posted on by Alex Jones
We Provide online courses for the following :
JAVA
HTML5
JavaScript
Mobile Development
@charset "utf-8";
/* CSS Document
Name: Vivek Kumar
Email: vivekwebmaker@gmail.com
Company:IDS Infotech Ltd.
*/
* {
margin:0px;
padding:0px;
}
body {
overflow-x:hidden;
}
/*
//////////////////////////////////////////////////
CLOUD
//////////////////////////////////////////////////
*/
#clouds {
padding:100px 0px 0px;
background:#c9dbe9;
background:-webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
background:-linear-gradient(top, #c9dbe9 0%, #fff 100%);
background:-moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
}
.cloud {
width:200px;
height:60px;
background:#fff;
border-radius:200px;
-moz-border-radius:200px;
-webkit-border-radius:200px;
position:relative;
}
.cloud:before, .cloud:after {
content:'';
position:absolute;
width:100px;
height:80px;
background:#fff;
position:absolute;
top:-15px;
left:10px;
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
-webkit-transform:rotate(30deg);
transform:rotate(30deg);
-moz-transform:rotate(30deg);
}
.cloud:after {
width:120px;
height:120px;
top:-55px;
left:auto;
right:15px;
}
/*
//////////////////////////////////////////////////
CLOUD Animation Code
//////////////////////////////////////////////////
*/
.x1 {
-webkit-animation:moveclouds 18s ease-in-out infinite;
-moz-animation:moveclouds 18s ease-in-out infinite;
-o-animation:moveclouds 18s ease-in-out infinite;
top:-10px;
}
.x2 {
left:200px;
top:-50px;
-webkit-transform:scale(0.6);
-mox-transform:scale(0.6);
transform:scale(0.6);
opacity: 0.6; /*opacity proportional to the size*/
-webkit-animation:moveclouds 25s ease-in-out infinite;
-moz-animation:moveclouds 25s ease-in-out infinite;
-o-animation:moveclouds 25s ease-in-out infinite;
}
.x3 {
left:0px;
top:-175px;
-webkit-transform:scale(0.8);
-mox-transform:scale(0.8);
transform:scale(0.8);
opacity: 0.6; /*opacity proportional to the size*/
-webkit-animation:moveclouds 30s ease-in-out infinite;
-moz-animation:moveclouds 30s ease-in-out infinite;
-o-animation:moveclouds 30s ease-in-out infinite;
}
.x4 {
left:470px;
top:-195px;
-webkit-transform:scale(0.75);
-mox-transform:scale(0.75);
transform:scale(0.75);
opacity: 0.75; /*opacity proportional to the size*/
-webkit-animation:moveclouds 15s ease-in-out infinite;
-moz-animation:moveclouds 15s ease-in-out infinite;
-o-animation:moveclouds 15s ease-in-out infinite;
}
.x5 {
left:-100px;
top:-150px;
-webkit-transform:scale(0.8);
-mox-transform:scale(0.8);
transform:scale(0.8);
opacity: 0.8; /*opacity proportional to the size*/
-webkit-animation:moveclouds 35s ease-in-out infinite;
-moz-animation:moveclouds 35s ease-in-out infinite;
-o-animation:moveclouds 35s ease-in-out infinite;
}
.x6 {
left:50px;
top:-280px;
opacity: 0.4; /*opacity proportional to the size*/
-webkit-animation:moveclouds 22s ease-in-out infinite;
-moz-animation:moveclouds 22s ease-in-out infinite;
-o-animation:moveclouds 22s ease-in-out infinite;
}
.x7 {
left:-80px;
top:-255px;
-webkit-transform:scale(0.8);
-mox-transform:scale(0.8);
transform:scale(0.8);
opacity: 0.8; /*opacity proportional to the size*/
-webkit-animation:moveclouds 40s ease-in-out infinite;
-moz-animation:moveclouds 40s ease-in-out infinite;
-o-animation:moveclouds 40s ease-in-out infinite;
}
@-webkit-keyframes moveclouds {
0% {
margin-left:110%;
}
100% {
margin-left:-110%;
}
}
@-moz-keyframes moveclouds {
0% {
margin-left:110%;
}
100% {
margin-left:-110%;
}
}
@-o-keyframes moveclouds {
0% {
margin-left:110%;
}
100% {
margin-left:-110%;
}
}
/*
//////////////////////////////////////////////////
GRASS
//////////////////////////////////////////////////
*/
.grass {
background:url(grass.png) bottom center no-repeat;
height:295px;
width:100%;
bottom:0px;
position:absolute;
}
.cycle {
/*background:url(cycle-2.png) no-repeat;*/
width:279px;
height:260px;
position:absolute;
right:0px;
bottom:-2px;
}
.bycycle {
background:url(cycle-2.png) no-repeat;
width:279px;
height:260px;
position:absolute;
z-index:1;
}
/*
//////////////////////////////////////////////////
Cycle Animation Code
//////////////////////////////////////////////////
*/
.cycle-ride {
-webkit-animation:movecycle 25s ease-in-out infinite;
-moz-animation:movecycle 25s ease-in-out infinite;
-o-animation:movecycle 25s ease-in-out infinite;
}
@-webkit-keyframes movecycle {
0% {
margin-right:100%;
}
100% {
margin-right:-100%;
}
}
@-moz-keyframes movecycle {
0% {
margin-right:100%;
}
100% {
margin-right:-100%;
}
}
@-o-keyframes movecycle {
0% {
margin-right:100%;
}
100% {
margin-right:-100%;
}
}
/*
//////////////////////////////////////////////////
BIRD
//////////////////////////////////////////////////
*/
.bird {
background:url(birds.png) no-repeat;
width:376px;
height:191px;
position:absolute;
}
/*
//////////////////////////////////////////////////
BIRD Animation Code
//////////////////////////////////////////////////
*/
.fly {
-webkit-animation:birdfly 20s ease-in-out infinite;
-moz-animation:birdfly 20s ease-in-out infinite;
-o-animation:birdfly 20s ease-in-out infinite;
}
@-webkit-keyframes birdfly {
0% {
margin-left:100%;
top:300px
}
20% {
top:200px;
}
40% {
top:150px;
}
50% {
top:100px;
}
60% {
top:50px;
}
70% {
top:-300px;
}
80% {
top:-50px;
}
100% {
margin-left:-100%;
top:-70px;
opacity:.4;
-webkit-transform:scale(0.4);
-moz-transform:scale(0.4);
transform:scale(0.4);
}
}
@-moz-keyframes birdfly {
0% {
margin-left:100%;
top:300px
}
20% {
top:200px;
}
40% {
top:150px;
}
50% {
top:100px;
}
60% {
top:50px;
}
70% {
top:-300px;
}
80% {
top:-50px;
}
100% {
margin-left:-100%;
top:-70px;
opacity:.4;
-webkit-transform:scale(0.4);
-moz-transform:scale(0.4);
transform:scale(0.4);
}
}
@-o-keyframes birdfly {
0% {
margin-left:100%;
top:200px
}
20% {
top:150px;
}
40% {
top:100px;
}
50% {
top:500px;
}
60% {
top:0px;
}
70% {
top:-50px;
}
80% {
top:-70px;
}
100% {
margin-left:-100%;
top:-100px;
opacity:.4;
-webkit-transform:scale(0.4);
-mox-transform:scale(0.4);
transform:scale(0.4);
}
}
.name{
font-size:30px;
color: transparent;
right:20px;
position:absolute;
bottom:0px;
-webkit-animation:name 25s ease-in-out infinite;
-moz-animation:name 25s ease-in-out infinite;
-o-animation:name 25s ease-in-out infinite;
}
@-webkit-keyframes name {
0% {
text-shadow: 0 0 0px rgba(0,0,0,1);
}
100% {
text-shadow: 0 0 10px rgba(0,0,0,0.5);
}
}
@-moz-keyframes name {
0% {
text-shadow: 0 0 0px rgba(0,0,0,1);
}
100% {
text-shadow: 0 0 10px rgba(0,0,0,0.5);
}
}
@-o-keyframes name {
0% {
text-shadow: 0 0 0px rgba(0,0,0,1);
}
100% {
text-shadow: 0 0 10px rgba(0,0,0,0.5);
}
}
/* Create the animation blocks */
/* Spinning, gradient circle; CSS only! */
.cycle-front, .cycle-back {
width: 108px;
height: 107px;
position:absolute;
bottom:8px;
right:8px;
background:url(wheel-front.png) no-repeat;
-webkit-animation:spin 3s ease-in-out infinite;
-moz-animation:spin 3s ease-in-out infinite;
-o-animation:spin 3s ease-in-out infinite;
}
.cycle-back{
background:url(wheel-back.png) no-repeat;
bottom:8px;
left:8px;
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-o-keyframes spin {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
