Caixa com cantos arredondados
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 {
height:8px;
width:auto;
position:relative;
background-color:#c93;
border-color:#630;
margin:0;
}
.modulecontainer .first .first {
position:absolute;
background-image:url(top_left.gif);
background-repeat:no-repeat;
width:8px;
height:8px;
z-index:1;
margin-left:-8px;
border:0 none;
}
.modulecontainer .last .first {
position:absolute;
background-image:url(base_left.gif);
background-repeat:no-repeat;
width:8px;
height:8px;
z-index:1;
margin-left:-8px;
border:0 none;
}
.modulecontainer .first .last {
position:absolute;
background-image:url(top_right.gif);
background-repeat:no-repeat;
width:8px;
height:8px;
z-index:1;
margin-right:-8px;
border:0 none;
right:0;
}
.modulecontainer .last .last {
position:absolute;
background-image:url(base_right.gif);
background-repeat:no-repeat;
width:8px;
height:8px;
z-index:1;
margin-right:-8px;
border:0 none;
right:0;
}
.conteudo {
font:normal 11pt “Trebuchet MS”;
color:#F00;
padding:3px;
}
Estilizando um formulário de login
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 para limpar os dados”>
<input type=“submit” value=“ Login ” title=“Clique para efetuar login”>
</div>
</div>
</form>
2° O estilo
<style type=”text/css”>
.divLogin {
border:solid 2px #F60;
width:260px;
margin:100px auto auto;
}
.linha1,.linha2,.linha3,.linha4 {
font:bold 12pt “Trebuchet Ms”,”Verdana”, “Arial”;
width:auto;
text-align:center;
}
.linha1 {
margin-bottom:20px;
font:bold 16pt “Trebuchet Ms”,”Verdana”, “Arial”;
color:#FFF;
background-color:#F60;
}
.linha2 {
margin-bottom:5px;
}
.linha4 {
margin-top:25px;
margin-bottom:10px;
}
.col1,.col2,.col3,.col4 {
width:auto;
margin:auto;
}
.col1 {
float:left;
width:75px;
height:22px;
text-align:right;
padding-right:5px;
color:#F60;
}
.txt,.cxOn,.cxOff {
border:solid 1px #f60;
}
.cxOn {
background-color:#EEFAFD;
}
.cxOff {
background-color:#FFF;
}
</style>
Prontinho… simples… bonito… e… funcional…
Achou fácil? então faz!
