Cyber Designers

CYBER DESIGNER
welcome
Ola Visitante, Seja bem vindo(a) ao Cyber Designer, esperamos que você goste de nosso conteudo e se torne um Membro para poder participar ainda mais de nossas atividades. Agora temos uma area para você convidado postar, sem se cadastrar, caso tenha alguma dúvida, passe lá, se encontra na parte de Área livre.
Vale também ressaltar que, Para você ter acesso aos links por ai , é necessário ser registrado, então se registre .
Se já tem uma conta no forúm,
Logue-se .

    Minha primeira pag \o\

    Compartilhe
    avatar
    MateusV.
    Membros
    Membros

    Sexo Sexo : Masculino
    Mensagens Mensagens : 299
     Reputação  Reputação : 5
    Inscrição Inscrição : 24/11/2011
    Idade Idade : 22
    Localização Localização : Brasil, PE

    Minha primeira pag o

    Mensagem por MateusV. em Sab Abr 07, 2012 5:25 pm

    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.

    [Você precisa estar registrado e conectado para ver 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://illiweb.com/fa/pbucket.gif');
    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++
    avatar
    Darking
    Membros
    Membros

    Sexo Sexo : Masculino
    Mensagens Mensagens : 1549
     Reputação  Reputação : 34
    Inscrição Inscrição : 13/12/2011
    Idade Idade : 21
    Localização Localização : a casa dos 7 anoes kkkkkkkkkkkk

    Re: Minha primeira pag \o\

    Mensagem por Darking em Sab Abr 07, 2012 10:07 pm

    curti man deve ter dado muito trabalho Parabens
    avatar
    Mayk
    Membros
    Membros

    Sexo Sexo : Masculino
    Mensagens Mensagens : 3177
     Reputação  Reputação : 12
    Inscrição Inscrição : 14/01/2012
    Idade Idade : 21
    Localização Localização : pernambuco

    Re: Minha primeira pag \o\

    Mensagem por Mayk em Sab Abr 07, 2012 10:48 pm

    Lool,curti vey,keria aprender a mexer com isso
    avatar
    MateusV.
    Membros
    Membros

    Sexo Sexo : Masculino
    Mensagens Mensagens : 299
     Reputação  Reputação : 5
    Inscrição Inscrição : 24/11/2011
    Idade Idade : 22
    Localização Localização : Brasil, PE

    Re: Minha primeira pag \o\

    Mensagem por MateusV. em Dom Abr 08, 2012 9:44 am

    Valeu galera \o\

    Nem deu tanto trabalho assim, jQuery é uma linguagem super simples, qualquer um que conheça um pouco de HTML pode aprender. ^^

    Conteúdo patrocinado

    Re: Minha primeira pag \o\

    Mensagem por Conteúdo patrocinado


      Data/hora atual: Seg Dez 18, 2017 11:35 am