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 .


Participe do fórum, é rápido e fácil

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 .

Cyber Designers

Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.

3 participantes

    Minha primeira pag \o\

    MateusV.
    MateusV.
    MateusV.
    Membros
    Membros


    Sexo Sexo : Masculino
    Mensagens Mensagens : 299
     Reputação  Reputação : 5
    Inscrição Inscrição : 24/11/2011
    Idade Idade : 28
    Localização Localização : Brasil, PE
    • Mensagem nº1

    Minha primeira pag \o\ Empty Minha primeira pag o

    Mensagem por MateusV. Sáb 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.

    [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++
    • Ir para o topo
    Darking
    Darking
    Darking
    Membros
    Membros


    Sexo Sexo : Masculino
    Mensagens Mensagens : 1549
     Reputação  Reputação : 34
    Inscrição Inscrição : 13/12/2011
    Idade Idade : 28
    Localização Localização : a casa dos 7 anoes kkkkkkkkkkkk
    • Mensagem nº2

    Minha primeira pag \o\ Empty Re: Minha primeira pag \o\

    Mensagem por Darking Sáb Abr 07, 2012 10:07 pm

    curti man deve ter dado muito trabalho Parabens
    • Ir para o topo
    Mayk
    Mayk
    Mayk
    Membros
    Membros


    Sexo Sexo : Masculino
    Mensagens Mensagens : 3177
     Reputação  Reputação : 12
    Inscrição Inscrição : 14/01/2012
    Idade Idade : 27
    Localização Localização : pernambuco
    • Mensagem nº3

    Minha primeira pag \o\ Empty Re: Minha primeira pag \o\

    Mensagem por Mayk Sáb Abr 07, 2012 10:48 pm

    Lool,curti vey,keria aprender a mexer com isso
    • Ir para o topo
    MateusV.
    MateusV.
    MateusV.
    Membros
    Membros


    Sexo Sexo : Masculino
    Mensagens Mensagens : 299
     Reputação  Reputação : 5
    Inscrição Inscrição : 24/11/2011
    Idade Idade : 28
    Localização Localização : Brasil, PE
    • Mensagem nº4

    Minha primeira pag \o\ Empty Re: Minha primeira pag \o\

    Mensagem por MateusV. 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. ^^
    • Ir para o topo
    Conteúdo patrocinado

    Conteúdo patrocinado


    • Mensagem nº5

    Minha primeira pag \o\ Empty Re: Minha primeira pag \o\

    Mensagem por Conteúdo patrocinado

    • Ir para o topo
      Data/hora atual: Sex Abr 26, 2024 7:48 am