Caixa com cantos arredondados

ldmotta — Thu, 03 Jul 2008 16:12:33 +0000

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

</span>Caixa com cantos arredondados<span style="color:#0000ff;">
name=“generator” content=“editplus” />
href=“caixa.css” media=“all” rel=“stylesheet” type=“text/css” />

class=“modulecontainer sidebar”>

class=“first”>
class=“first”>
=“last”>

class=“conteudo”>

class=“last”>
class=“first”>
class=“last”>

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;
}

Clique aqui para ver o resultado

Estilizando um formulário de login

ldmotta — Thu, 03 Jul 2008 07:49:58 +0000

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…

name=”frmLogin” method=”POST” action=”#”>
class=”divLogin”>
class=”linha1″>
Efetuar Login

class=”linha2″>
class=”col1″>
Usuário

class=”col2″>
type=”text” class=”txt” title=”Digite o nome de usuário” onfocus=”this.className=’cxOn’” onblur=”this.className=’cxOff’”>

class=”linha3″>

class=”col1″>
Senha

class=”col2″>
type=”password” class=”txt” title=”Digite a sua senha” onfocus=”this.className=’cxOn’” onblur=”this.className=’cxOff’”>

class=“linha4″>
type=“reset” value=“Limpar” title=“Clique para limpar os dados”>
type=“submit” value=“ Login ” title=“Clique para efetuar login”>

2° O estilo

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;
}

Prontinho… simples… bonito… e… funcional…

Achou fácil? então faz!

Motanet » CSS

Caixa com cantos arredondados

Estilizando um formulário de login