true-luv.com » Css http://true-luv.com Sat, 11 Feb 2012 19:34:02 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Menu Horizontal http://true-luv.com/menu-horizontal/ http://true-luv.com/menu-horizontal/#comments Mon, 26 May 2008 19:02:14 +0000 Tamara http://true-luv.com/?p=1335

Menu horizontal semelhante a esse:

01. Adicione ao seu css o código a seguir:

#menu {
list-style: none;
float: left;
height: 25px;
width: 465px;
padding-left:15px;
margin-top: 150px;
}
#menu ul {
padding: 0px;
margin: 0px;
float: left;
width: 100%;
list-style:none;
font-weight: bold;
height: 18px;
line-height: 18px;
vertical-align:middle;
}
#menu ul li {
display: block;
float: left;
margin: 1px;
width: auto;
text-align: center;
border:0px;
}
#menu ul li a {
display: block;
width: 61px;
text-align: center;
font-size: 10px;
font-family : Verdana, Arial, sans-serif;
text-decoration: none;
color: #FEC2E1;
background-color: #FFF1F9;
border:1px solid #FEC2E1;
vertical-align:middle;
}
#menu ul li a:hover, #menu li.current a {
color: #c0c0c0;
background-color: #f8f8f8 ;
text-decoration: none;
border:1px solid #c0c0c0;
}

O posicionamento do meu é feito em #menu.

2. Onde quer que o menu apareça, use:

<div id="menu">
<ul>
<li><a href="http://www.link1.com">Link 1</a></li>
<li><a href="http://www.link2.com">Link 2</a></li>
<li><a href="http://www.link3.com">Link 3</a></li>
</ul>
</div>

]]> http://true-luv.com/menu-horizontal/feed/ 9 Transparência nas imagens http://true-luv.com/transparencia-nas-imagens/ http://true-luv.com/transparencia-nas-imagens/#comments Mon, 10 Mar 2008 19:09:20 +0000 Tamara http://true-luv.com/?p=1346

Deixe suas imagens com efeito transparente.

01. Coloque o seguinte código no seu css:

img {filter:alpha(opacity=70);
-moz-opacity:0.70;
opacity:0.70;}
img:hover {
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;}

Dessa forma todas as imagens terão o efeito transparente. Se quiser que apenas determinada classe tenha esse efeito, apenas acrescente as propriedades acima.

]]> http://true-luv.com/transparencia-nas-imagens/feed/ 7 Personalizar Formulários http://true-luv.com/personalizar-formularios/ http://true-luv.com/personalizar-formularios/#comments Mon, 04 Dec 2006 18:59:02 +0000 Tamara http://true-luv.com/?p=1333

Css para textarea, input, select e butons do seu blog, com efeito hover.

1. Coloque no seu arquivo style.css ou depois da tag style no seu html:

input, textarea, select, button {
border: #EEDEBE 1px solid;
color: #8c8c8c;
font-size:11px;
background-image: url('images/back.png');}
input:focus, textarea:focus, label:focus, select:focus, button:focus {
border: 1px solid #F8C9DD;
color:#8c8c8c;
background-image: url('images/back1.png'); }

Personalize de acordo com sua preferência. Lembre-se que o efeito hover não funciona no internet explorer.

]]> http://true-luv.com/personalizar-formularios/feed/ 8 Borda em imagens http://true-luv.com/borda-em-imagens/ http://true-luv.com/borda-em-imagens/#comments Tue, 12 Sep 2006 18:54:28 +0000 Tamara http://true-luv.com/?p=1324

É muito mais fácil e prático fazer as bordas das suas imagens com css, assim você não precisa editar a foto apenas para colocar a borda.

01. Coloque o seguinte código no seu css:

.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
padding: 6px;
text-align: center;
background-color: #ffffff;
border: 1px solid #dbdbdb;
}
.alignleft{
float: left;
margin: 1px 4px 0 0;
padding: 6px;
background-color: #ffffff;
border: 1px solid #dbdbdb;
}
.alignright{
float: right;
margin: 1px 0 0 4px;
padding: 6px;
background-color: #ffffff;
border: 1px solid #dbdbdb;
}
.alignnone{
margin: 1px 4px 0 0;
padding: 6px;
background-color: #ffffff;
border: 1px solid #dbdbdb;
}

02. Para que suas imagens apareçam com bordas use:

Para imagem com borda centralizada:

<img src="http://www.suaimagem.jpg" class="aligncenter" alt=""/>

Para imagem com borda alinhada à esquerda:

<img src="http://www.suaimagem.jpg" class="alignleft" alt=""/>

Para imagem com borda alinhada à direita:

<img src="http://www.suaimagem.jpg" class="alignright" alt=""/>

Para imagem com borda sem alinhamento:

<img src="http://www.suaimagem.jpg" class="alignnone" alt=""/>

03. Se quiser que o fundo da sua borda tenha uma imagem, substitua background-color: #ffffff; por background-image: url (http://www.imagem.com);

04. Para que a borda funcione corretamente no internet explorer, você tem que substituir

<html>
<head>

Por

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">

]]> http://true-luv.com/borda-em-imagens/feed/ 13 Principais Atributos http://true-luv.com/principais-atributos/ http://true-luv.com/principais-atributos/#comments Mon, 01 May 2006 19:07:29 +0000 Tamara http://true-luv.com/?p=1343

Algumas pessoas encontram dificuldade em alterar o css de outros tutoriais como, menu de navegação, tabela de editar posts, etc, coloquei aqui os atributos mais usados. Use como um guia.

color - cor do texto » exemplo: #000000
font-family - tipo da fonte » exemplo: arial, tahoma, etc...
font-size - tamanho da fonte » exemplo: 10px, 12px, etc...
font-style - estilo da fonte » exemplo: italic, oblique, normal
font-weight - largura da fonte » exemplo: bold

line-height - altura da linha » exemplo:12px, 15px, etc...
text-align - alinhamento do texto » exemplo:center (centro), left (esquerda), right (direita) e justify (justificar)
text-decoration - decoração do texto » exemplo: none (nenhuma), underline (sublinhado) overline (sobrelinhado) e line-through (tachado)
text-transform - forma do texto » exemplo: capitalize (primeira letra maiúscula), uppercase (todas as letras maiúsculas) e lowercase (todas as letras minúsculas)
text-indent - recuo do texto » exemplo: 10px, 12px, etc...
letter-spacing - espaço entre as letras » exemplo: 2px, 3px, etc..
word-spacing - espaço entre as palavras » exemplo: 2px, 3px, etc..

background-color - cor do fundo » exemplo: #FFFFFF
background-image - imagem de fundo » exemplo: url (http://www.endereço.com/fundo.gif)
background-positon - posição do background » exemplo: left, right, center, top, bottom, etc...
background-repeat - repetir background
background-no-repeat - não repetir background
background-repeat-x - repetir background na horizontal
background-repeat-y - repetir background na vertical

margin - tamanho das 4 margens » exemplo: 5px, 10px, etc...
margin-left - margem à esquerda » exemplo: 5px, 10px, etc...
margin-right - margem à direita » exemplo: 5px, 10px, etc...
margin-top - margem em cima » exemplo: 5px, 10px, etc...
margin-bottom - margem em baixo » exemplo: 5px, 10px, etc...

padding distância entre as 4 bordas e o texto » exemplo: 3px, 5px, etc...
padding-left - distância entre a borda e o texto à esquerda » exemplo: 3px, 5px, etc...
padding-rigth - distância entre a borda e o texto à direita » exemplo: 3px, 5px, etc...
padding-top - distância entre a borda e o texto acima » exemplo: 3px, 5px, etc...
padding-bottom - distância entre a borda e o texto abaixo » exemplo: 3px, 5px, etc...

border-color - cor da borda » exemplo: #000000
border-style - estilo da borda » exemplo: none (nenhuma), dotted (pontilhado), solid (sólida), double (dupla), etc...
border-width - tamanho da borda » exemplo: 1px, 2px etc... ou 90%, 100%, etc...

float - alinha o elemento, fazendo com o que o texto fique ao redor dele » exemplo:left e right

width - define largura » exemplo: 10px, 20px, etc... ou 90%, 100%, etc...
heigth - define altura » exemplo: 10px, 20px, etc... ou 90%, 100%, etc...

vertical-align - alinhamendo vertical - » exemplo: middle (no meio), bottom ( abaixo), top (acima).

]]> http://true-luv.com/principais-atributos/feed/ 3 Tabela para Perfil http://true-luv.com/tabela-para-perfil/ http://true-luv.com/tabela-para-perfil/#comments Mon, 24 Apr 2006 19:12:58 +0000 Tamara http://true-luv.com/?p=1350

Modelo básico de tabela para perfil. Você pode alterar as cores de border, font e background de acordo com suas preferências.

01. Primeiro você tem que colocar o seguinte código no css do seu blog dentro da tag style ou do arquivo style.css

h1 {
display: block;
color: #FFA9D5;
font-weight: bold;
background-color: #FFE8F5;
background-repeat: no-repeat;
width: 100%;
height: 18px;
text-indent: 5px;
vertical-align:middle;
text-decoration: none;
font-family: verdana;
line-height: 18px;
margin-bottom: 1px;
font-size: 10px;
text-align: center;
text-transform: uppercase;
}
.content {
text-align:justify;
font-size: 10px;
font-family: arial;
color: #808080;
width: 100%;
border: 1px solid #FFE8F5;
padding-right: 1px;
padding-left: 1px;
padding-top: 2px;
padding-bottom: 2px;
line-height:14px;
padding: 4px 4px 4px 4px;
}

02. E onde você quer que a tabela apareça, coloque:

<h1>Perfil</h1>
<div class="content">Escreva sobre você aqui</div>

]]> http://true-luv.com/tabela-para-perfil/feed/ 6 Blockquote Personalizado http://true-luv.com/blockquote-personalizado/ http://true-luv.com/blockquote-personalizado/#comments Sat, 15 Apr 2006 18:55:28 +0000 Tamara http://true-luv.com/?p=1329 Modelo 1

01. Coloque depois no seu arquivo style.css

blockquote {
border: 1px solid #FFD0DF;
background-color: #FFF1F5;
padding: 10px;
font-size: 11px;
color: #808080;
text-align: justify;
}

02. E no lugar em que você quer que apareça o blockquote coloque:

<blockquote>Seu texto aqui</blockquote>

Modelo 2

01. Coloque no seu arquivo style.css

blockquote {
border: 1px solid #FFD0DF;
background: #FFF1F5 url(http://www.endereço/edit.gif) no-repeat top left;
padding: 10px;
font-size: 11px;
color: #808080;
text-align: justify;
padding: 10px 10px 10px 35px;
font-size: 11px;
text-align: justify;
}

02. Faça uma imagem com as aspas mais ou menos assim:

03. Substitua no código "http://www.imagem.com.br/edit.gif" pelo endereço da sua imagem.

04. E no lugar em que você quer que apareça o blockquote coloque:

<blockquote>Seu texto aqui</blockquote>

05. Se você quiser pode variar o estilo mudando os atributos de borda, tamanho, cor, etc.

Se você não tem um arquivo style.css, troque a linha:

blockquote {

por

.blockquote {

E para usar o Blockquote:

<div class="blockquote">Seu texto aqui</div>

]]> http://true-luv.com/blockquote-personalizado/feed/ 15 Menu Vertical http://true-luv.com/menu-vertical/ http://true-luv.com/menu-vertical/#comments Sun, 15 Jan 2006 20:04:45 +0000 Tamara http://true-luv.com/?p=1340

Modelo de menu vertical simples. Se você quiser pode variar o estilo mudando os atributos de borda, tamanho, cor, etc. Seu menu vai ficar assim:

01. Adicione ao seu css:

#nav ul {
padding: 0px;
margin: 0px;
width: 100%;
list-style:none;
font-weight: bold;
height: 18px;
line-height: 18px;
vertical-align:middle;
}
#nav ul li {
display: block;
margin: 1px;
border:0px;
}
#nav ul li a {
display: block;
width: 150px;
font-size: 10px;
font-family : Verdana, Arial, sans-serif;
text-decoration: none;
text-transform: uppercase;
text-indent: 5px;
letter-spacing: 2px;
color: #FEC2E1;
background-color: #FFF1F9;
vertical-align:middle;
}
#nav ul li a:hover {
color: #c0c0c0;
background-color: #F8F8F8;
}

02. E no lugar em que você quer que apareça o menu coloque:

<div id="nav">
<ul>
<li><a href="http://www.link1.com">Link 1</a></li>
<li><a href="http://www.link2.com">Link 2</a></li>
<li><a href="http://www.link3.com">Link 3</a></li>
<li><a href="http://www.link4.com">Link 4</a></li>
</ul>
</div>

Não esqueça de trocar "link" pelo endereço do seu link.

]]> http://true-luv.com/menu-vertical/feed/ 6