•  
     

Removendo o planeta Krypton com um clique - jQuery

HTML

Código: Selecionar todos

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div></div>
</body>
</html>


CSS

Código: Selecionar todos

body {
    background-image: url('http://bit.ly/UpQgJ6');
    repeat: no-repeat;
}

div {
    height: 100px;
    width: 100px;
    border-radius: 100%;
    background-color: #008800;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#003500), to(#008800));
    background-image: -webkit-linear-gradient(left, #003500, #008800); 
    background-image:    -moz-linear-gradient(left, #003500, #008800);
    background-image:     -ms-linear-gradient(left, #003500, #008800);
    background-image:      -o-linear-gradient(left, #003500, #008800);
}

.red {
    background-color: #CC0000;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#330000), to(#CC0000));
    background-image: -webkit-linear-gradient(left, #330000, #CC0000); 
    background-image:    -moz-linear-gradient(left, #330000, #CC0000);
    background-image:     -ms-linear-gradient(left, #330000, #CC0000);
    background-image:      -o-linear-gradient(left, #330000, #CC0000);
}


JavaScript

Código: Selecionar todos

$(document).ready(function(){
$('div').click(function(){
$(this).fadeOut('fast');
});   
});


Demo: http://jsfiddle.net/0ma7nkkL/12/