#1
Teste HTML Qua maio 30, 2012 3:24 pm
SkyLee™
Olá,
Código e página todas criadas pelo meu amigo, do 0!
Código:
Demo:
http://pastehtml.com/view/bwr9jx5nm.html
Código e página todas criadas pelo meu amigo, do 0!
Código:
- Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>jQuery - Teste HTML By TrY!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8"/>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<style>
body{
background-image: url(http://img651.imageshack.us/img651/5821/aaawdq.png);
font-family: Arial;
height: 2000px;
background-color: #8FE0F9;
}
.header
{
width:600px;
height:56px;
position:absolute;
top:0px;
left:25%;
background:#fff url() no-repeat top left;
}
a.back{
width:256px;
height:73px;
position:fixed;
bottom:15px;
right:15px;
background:#fff url() no-repeat top left;
boder::1;
cursor:pointer;
}
a.activator{
width:153px;
height:150px;
position:absolute;
top:0px;
left:0px;
background:#fff url() no-repeat top left;
boder::1;
cursor:pointer;
}
/* Style for overlay and box */
.overlay{
background: #666;
opacity: 0.8;
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
boder::100;
}
.box{
position:fixed;
top:-900px;
left:22%;
right:90%;
background-color:#fff;
color:#7F7F7F;
padding:20px;
border:2px solid #ccc;
-moz-border-radius: 20px;
-webkit-border-radius:20px;
-khtml-border-radius:20px;
-moz-box-shadow: 0 1px 5px #333;
-webkit-box-shadow: 0 1px 5px #333;
boder::101;
width: 693px;
height: 490px;
}
.box h1{
border-bottom: 1px dashed #7F7F7F;
margin:-20px -20px 0px -20px;
padding:10px;
background-color:#bfe0ef;
color:#6ec5ea;
-moz-border-radius:20px 20px 0px 0px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-khtml-border-top-left-radius: 20px;
-khtml-border-top-right-radius: 20px;
}
a.boxclose{
float:right;
width:26px;
height:26px;
background:transparent url(http://img16.imageshack.us/img16/9558/cancelv.png) repeat top left;
margin-top:-30px;
margin-right:-30px;
cursor:pointer;
}
textarea {
border: 2px solid #6ec5ea;
border-radius: 6px;
}
button.bu {
font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Verdana, Sans-serif;
float: left;
margin-top: 10px;
margin-right: 5px;
padding: 6px 10px;
border: 1px solid #2177A5;
background-color: #227BAD;
color: white;
font-size: 13px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #3CA5D2;
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #3CA5D2;
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #3CA5D2;
width: 117px;
height: 35px;
left: 600px;
position: absolute;
}
button.bu:hover {
border: 1px solid #B32D00;
background-color: #C30;
box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #FF7242;
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #FF7242;
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #FF7242;
}
button.bu:active {
box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.6), inset 0px 0px 0px 1px rgba(255, 255, 255, 0.2), 0px 1px 0px rgba(255,255,255,.5);
}
</style>
<body>
<div class="overlay" id="overlay" style="display:none;"></div>
<div class="box" id="box">
<a class="boxclose" id="boxclose"></a>
<h1>Demo</h1>
<p>
</p>
</div>
<center><h1 style="top: 30px; color:#6ec5ea;">Teste HTML</h1><div style="top: 60px; position: relative;"><textarea id="hg" style="width: 551px; height: 365px;"></textarea><br><button class="bu">Pré-Visualizar.</button></div></center>
<script type="text/javascript">
$('button').click(function () {
$('#overlay').fadeIn('fast');
$('#box').animate({'top':'50px'}, 500)
});
$('#boxclose').click(function () {
$('#box').animate({'top':'-900px'}, 500, function(){;
$('#overlay').fadeOut('fast');
});
});
$('button').click(function () {
var hg = $('#hg').val();
$('#box p').html(hg);
});
</script>
</body>
</html>
Demo:
http://pastehtml.com/view/bwr9jx5nm.html
» Até Mais !
