Hey negads \o\, eu estou começando a aprender agora jQuery, que é uma linguagem mega simples, CSS e HTML eu sou zica, acho que começei a uma semana com jQuery, então criei uma pagina, simples, muito simples, para postar todos os codigos que vou aprendendo, não é nada de mais, realmente nada de mais, mas só quero deixar aqui para compartilhar com você o quanto eu vou evoluindo a cada semana, a cada dia.
Hoje, a pagina ta assim.
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Tou fazendo uns codigos de testes nela, e agradeceria muito se alguem pudesse me dar dicas nisto.
Code da pagina
Obs: ela foi feita manualmente, ou seja, tag por tag com o Notepad++
Hoje, a pagina ta assim.
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Tou fazendo uns codigos de testes nela, e agradeceria muito se alguem pudesse me dar dicas nisto.
Code da pagina
- Código:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Pagina HTML MVP</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#botao").click(function() {
$(".prfg").css('text-shadow', '0 0 5px orange')
.css('color', 'orange')
.css('-moz-transition', 'all .1s linear')
.css('-webkit-transition', 'all .1s linear')
.css('-o-transition', 'all #0.1s linear')
.css('transition', 'all .1s linear')
.text('Primeiro paragrafo Laranja!');
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#verde").click(function() {
$(".prfg").css('text-shadow', '0 0 5px green').css('color', 'green')
.text('Primeiro paragrafo Verde!')
.css('-moz-transition', 'all .1s linear')
.css('-webkit-transition', 'all .1s linear')
.css('-o-transition', 'all #0.1s linear')
.css('transition', 'all .1s linear');
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#vermelho").click(function() {
$(".prfg").css('text-shadow', '0 0 5px red')
.css('color', 'red')
.text('Primeiro paragrafo Vermelho!')
.css('-moz-transition', 'all .1s linear')
.css('-webkit-transition', 'all .1s linear')
.css('-o-transition', 'all #0.1s linear')
.css('transition', 'all .1s linear');
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".cname").hover( function() {
$(".cname").css('text-shadow', '0 0 5px green').css('color', 'green')
.css('-moz-transition', 'all .6s linear')
.css('-webkit-transition', 'all .62s linear')
.css('-o-transition', 'all #0.6s linear')
.css('transition', 'all .6s linear');
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".bg1").css('text-shadow', '0 0 5px black')
.css('color', 'black').css('font-weight', 'bold');
$(".bg1").hover(function() {
$(".bg1").click(function() {
$(".bg1").css('text-shadow', '0 0 5px red')
.css('color', 'red')
.css('-moz-transition', 'all .1s linear')
.css('-webkit-transition', 'all .1s linear')
.css('-o-transition', 'all #0.1s linear')
.css('transition', 'all .1s linear');
$("body").css('background-image', 'url("http://www.wallchan.com/images/sandbox/11949-smooth-windows-black-and-white.jpg")');
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".bg2").css('text-shadow', '0 0 5px black')
.css('color', 'black').css('font-weight', 'bold');
$(".bg2").hover(function() {
$(".bg2").click(function() {
$(".bg2").css('text-shadow', '0 0 5px red')
.css('color', 'red')
.css('-moz-transition', 'all .1s linear')
.css('-webkit-transition', 'all .1s linear')
.css('-o-transition', 'all #0.1s linear')
.css('transition', 'all .1s linear');
$("body").css('background-image', 'url("http://www.wallchan.com/images/sandbox/16292-rain-window.jpg")');
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".bg3").css('text-shadow', '0 0 5px black')
.css('color', 'black').css('font-weight', 'bold');
$(".bg3").hover(function() {
$(".bg3").click(function() {
$(".bg3").css('text-shadow', '0 0 5px red')
.css('color', 'red')
.css('-moz-transition', 'all .1s linear')
.css('-webkit-transition', 'all .1s linear')
.css('-o-transition', 'all #0.1s linear')
.css('transition', 'all .1s linear');
$("body").css('background-image', 'url("http://www.wallchan.com/images/sandbox/21497-hi-tech-windows-7.jpg")');
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".plinha").click(function() {
$(".bgbt").before("</br>");
});
});
</script>
<style>
.bg {
text-shadow: 0 0 5px black;
color: black !important;
font-family:Comic Sans Ms;
}
.plinha {
text-shadow: 0 0 5px red;
color: red;
font-size: 20px;
}
.prfg {
color: black;
text-shadow: 0 0 5px black;
margin-left: 300px;
}
body {
background-image: url('http://www.wallchan.com/images/sandbox/11949-smooth-windows-black-and-white.jpg');
position: fixed !important;
}
#verde {
background: url('http://img52.imageshack.us/img52/2378/strong.png');
width: 150px;
border: none !important;
text-shadow: 1px 1px 0 #C2C2C2;
}
#verde:hover {
opacity: 0.8;
}
.bg1:hover, .bg2:hover, .bg3:hover {
opacity: 0.4;
}
#vermelho {
background: url('http://img264.imageshack.us/img264/5695/weakg.png');
width: 150px;
border: none !important;
text-shadow: 1px 1px 0 #C2C2C2;
}
#vermelho:hover {
opacity: 0.8;
}
#botao {
background: url('http://img262.imageshack.us/img262/9555/medium.png');
width: 150px;
border: none !important;
text-shadow: 1px 1px 0 #C2C2C2;
}
#botao:hover {
opacity: 0.8;
}
.mascote:hover {
-moz-transition: all .5s linear;
-webkit-transition: all .5s linear;
color: black -o-transition: all #0.5s linear;
transition: all .5s linear;
opacity: 0.0;
}
.copy {
margin-top: 180px !important;
position: fixed !important;
text-shadow: 0 0 5px #c28e00;
color: #c28e00;
margin-left: 500px;
}
.bt:hover {
-moz-transition: all .2s linear;
-webkit-transition: all .2s linear;
color: black -o-transition: all #0.2s linear;
transition: all .2s linear;
margin-left: 10px;
}
.message {
moz-border-radius: 5px
-webkit-border-radius: 5px;
border-radius: 5px !important;
border: 1px solid #C2C2C2;
text-shadow: 0 0 5px blue;
background-color: #C1C1C1;
margin-left: 100px;
padding-left: 50px;
width: 200px;
}
.bte {
moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background: #F4F5F4 url(http://i66.servimg.com/u/f66/11/96/49/61/tabbg10.png);
border: 1px solid #DDD;
border-radius: ;
padding: 3px 5px;
}
.linha {
width: 100%;
-moz-border-radius: 3px;
-moz-box-shadow: 0 0 5px black;
-webkit-border-radius: 3px;
-webkit-box-shadow: 0 0 5px black;
box-shadow: 0 0 5px black;
background-image: url('http://i41.servimg.com/u/f41/14/81/40/78/bg-hea10.jpg');
}
.code1 {
margin-left: 590px;
margin-bottom: 50px !important;
}
.code {
border: 3px dotted #C5C5C5 !important;
moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-border-radius: 7px;
-moz-box-shadow: 5px 5px 0 white;
-webkit-border-radius: 7px;
-webkit-box-shadow: 5px 5px 0 white;
box-shadow: 5px 5px 0 white;
filter:progid:DXImageTransform.Microsoft.Shadow(color=black,direction=135,strength=3)
}
#but1 {
color: black;
font-family:Comic Sans Ms;
}
.bg1, .bg2, .bg3 {
moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background: #F4F5F4 url(http://i66.servimg.com/u/f66/11/96/49/61/tabbg10.png);
border: 1px solid #DDD;
border-radius: ;
padding: 3px 5px;
}
.prfg {
background-image: url('http://i41.servimg.com/u/f41/14/81/40/78/bg-hea10.jpg');
width: 64%;
padding-left: 400px;
margin-left: -5px !important;
padding-top: 30px;
margin-top: -5px !important;
padding-bottom: 10px;
margin-bottom: 10px;
border: 3px dotted #C5C5C5 !important;
moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-border-radius: 7px;
-moz-box-shadow: 0 0 10px black;
-webkit-border-radius: 7px;
-webkit-box-shadow: 0 0 10px black;
box-shadow: 0 0 10px black;
filter:progid:DXImageTransform.Microsoft.Shadow(color=black,direction=135,strength=3)
}
.pun {
background-color: #fff;
-moz-border-radius:7px;
-moz-box-shadow:0 0 10px black;
-webkit-border-radius:7px;
-webkit-box-shadow:0 0 10px black;
border-radius:7px;
box-shadow:0 0 10px black;
filter:progid:DXImageTransform.Microsoft.Shadow(color=black,direction=135,strength=3);
padding:7px;
background-image: url('http://i873.photobucket.com/albums/ab292/andreedimarco/forum/grey.png');
background-position: bottom;
background-repeat: repeat-x;
}
.main-head {
width: 250px;
background-color: none !important;
background-image: url('http://i53.tinypic.com/344tyir.png');
background-position: 50% 50%;
background-repeat: repeat-x;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset, 0 1px 3px rgba(0, 0, 0, 0.3), 0 2px 0 rgba(255, 255, 255, 0.2) inset;
color: white;
font-size: 12px;
font-weight: bold !important;
margin-top: 15px;
padding-bottom: 13px;
padding-left: 13px;
padding-right: 13px;
padding-top: 13px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-webkit-border-radius: 4px 4px 0px 0px;
-moz-border-radius: 4px 4px 0px 0px;
border-radius: 4px 4px 0px 0px;
}
.main-content {
padding: 5px;
width: 264px;
border: 1px solid #B9C4CD;
background-color: #FBFBFB;
border-top: none !important;
}
.plinha {
border-top: 1px dashed #DDD;
border-top-width: 1px;
border-top-style: dashed;
border-top-color: #DDD;
padding: 3px;
}
</style>
</head>
<body><div class="pun">
<h1 class="prfg">Primeiro paragrafo Preto!</h1>
<hr class="linha">
<div class="module main"><div class="main-head"><div class="h3">Widget</div></div><div class="main-content">
<input id="botao" class="bt" type="submit" value="Laranja" href="#"></input></br>
<input id="verde" class="bt" type="submit" value="Verde" href="#"></input></br>
<input id="vermelho" class="bt" type="submit" value="Vermelho" href="#"></input></br>
<div class="bgbt">
<input type="submit" class="bg1" id="but1" href="#" value="Background 1 clique aqui!"></input></br>
<input type="submit" class="bg2" id="but1" href="#" value="Background 2 clique aqui!"></input></br>
<input type="submit" class="bg3" id="but1" href="#" value="Background 3 clique aqui!"></input></div></br></br>
<a class="plinha" href="#"><b>Pular uma linha, Clique aqui!</b></a></div></div>
<div class="copy"><img class="mascote" src="http://4.bp.blogspot.com/-_XkBplLrixA/T153RmaTpHI/AAAAAAAAAc0/Fr0G1TFY3lk/s1600/me+gusta.png" width="100" height="100" /><p class="cname" style="text-shadow: 0 0 5px #c28e00; color: #c28e00"><b>Teste By: MateusV. </b></p></div>
</br>
<div class="code1">
<b><font style="color: black; text-shadow: 0 0 5px black;">Script usado nesta pagina!</font></b>
<textarea class="code" cols="50" rows="10" width="150" value="<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#botao").click(function() {
$(".prfg").css('text-shadow', '0 0 5px orange')
.css('color', 'orange')
.css('-moz-transition', 'all .1s linear')
.css('-webkit-transition', 'all .1s linear')
.css('-o-transition', 'all #0.1s linear')
.css('transition', 'all .1s linear')
.css('padding-left', '20px')
.css('font-size', '59px')
.text('Primeiro paragrafo Laranja!');
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#verde").click(function() {
$(".prfg").css('text-shadow', '0 0 5px green').css('color', 'green')
.text('Primeiro paragrafo Verde!')
.css('-moz-transition', 'all .1s linear')
.css('-webkit-transition', 'all .1s linear')
.css('-o-transition', 'all #0.1s linear')
.css('transition', 'all .1s linear')
.css('padding-left', '20px')
.css('font-size', '59px');
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#vermelho").click(function() {
$(".prfg").css('text-shadow', '0 0 5px red')
.css('color', 'red')
.text('Primeiro paragrafo Vermelho!')
.css('-moz-transition', 'all .1s linear')
.css('-webkit-transition', 'all .1s linear')
.css('-o-transition', 'all #0.1s linear')
.css('transition', 'all .1s linear')
.css('padding-left', '20px')
.css('font-size', '59px');
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".cname").hover( function() {
$(".cname").css('text-shadow', '0 0 5px green').css('color', 'green')
.css('-moz-transition', 'all .6s linear')
.css('-webkit-transition', 'all .62s linear')
.css('-o-transition', 'all #0.6s linear')
.css('transition', 'all .6s linear');
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".bg1").hover(function() {
$(".bg1").click(function() {
$(".bg1").css('text-shadow', '0 0 5px red')
.css('color', 'red')
.css('-moz-transition', 'all .1s linear')
.css('-webkit-transition', 'all .1s linear')
.css('-o-transition', 'all #0.1s linear')
.css('transition', 'all .1s linear');
$("body").css('background-image', 'url("http://img849.imageshack.us/img849/7628/windows7logonreloadedby.jpg")');
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".bg2").hover(function() {
$(".bg2").click(function() {
$(".bg2").css('text-shadow', '0 0 5px red')
.css('color', 'red')
.css('-moz-transition', 'all .1s linear')
.css('-webkit-transition', 'all .1s linear')
.css('-o-transition', 'all #0.1s linear')
.css('transition', 'all .1s linear');
$("body").css('background-image', 'url("http://www.wallchan.com/images/sandbox/16292-rain-window.jpg")');
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".bg3").hover(function() {
$(".bg3").click(function() {
$(".bg3").css('text-shadow', '0 0 5px red')
.css('color', 'red')
.css('-moz-transition', 'all .1s linear')
.css('-webkit-transition', 'all .1s linear')
.css('-o-transition', 'all #0.1s linear')
.css('transition', 'all .1s linear');
$("body").css('background-image', 'url("http://www.wallchan.com/images/sandbox/21497-hi-tech-windows-7.jpg")');
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".plinha").click(function() {
$(".bg").before("</br>");
});
});
</script></textarea></div></div>
</body>
</html>
Obs: ela foi feita manualmente, ou seja, tag por tag com o Notepad++