Por uma web mais segura
CSS
Caixa com cantos arredondados
Jul 3rd
Uma boa solução para estilizar seu site, gostaria de transforma-lo num plug-in, más ainda não tive tempo, quem sabe no próximo post.
Resultado:
Primeiro temos o html
<html> <head> <title>Caixa com cantos arredondados</title> <meta name=“generator” content=“editplus” /> <link href=“caixa.css” media=“all” rel=“stylesheet” type=“text/css” /> </head> <body> <div class=“modulecontainer sidebar”> <div class=“first”> <span class=“first”></span> <span class=“last”></span> </div> <div class=“conteudo”> <!– é só preencher este espaço com o conteúdo que quiser –> </div> <div class=“last”> <span class=“first”></span> <span class=“last”></span> </div> </div> </body> </html>
Agora vamos ao CSS. Obs: Dê preferência a colocar o css em um arquivo separado, nem preciso dizer pq…
.modulecontainer { width:180px; height:auto; border-width:1px; padding:0 8px; }
.modulecontainer div { width:auto; height:auto; background-color:#ffc; border-color:#630; border-style:solid; border-width:1px; margin:-2px -8px; }
.modulecontainer .first { border-width:1px 0 0; }
.modulecontainer .last { border-width:0 0 1px; }
div.first,div.last { More >
Estilizando um formulário de login
Jul 3rd
Olá a todos!
Com a crescente necessidade de utilização do css em páginas web como também as constantes mudanças envolvidas, fazem de uma simples tarefa uma dor de cabeça para desenvolvedores, no que diz respeito a uma boa apresentação do seu site nos diferêntes browsers.
Neste momento gostaria de apresentar um simples formulário de login estilizado, com o css compactado e funcional para a maioria dos browsers, onde abordo conceitos de posicionamento de objetos no documento.
1° O documento…
<form name=”frmLogin” method=”POST” action=”#”> <div class=”divLogin”> <div class=”linha1″> Efetuar Login </div>
<div class=”linha2″> <div class=”col1″> Usuário </div>
<div class=”col2″> <input type=”text” class=”txt” title=”Digite o nome de usuário” onfocus=”this.className=’cxOn’” onblur=”this.className=’cxOff’”> </div> </div>
<div class=”linha3″> <div class=”col1″> Senha </div>
<div class=”col2″> <input type=”password” class=”txt” title=”Digite a sua senha” onfocus=”this.className=’cxOn’” onblur=”this.className=’cxOff’”> </div> </div>
<div class=“linha4″> <input type=“reset” value=“Limpar” title=“Clique More >
